Picture Element Rotation on smartphone

1

hi everyone,
I am trying a picture element in a regular dashboard (no panel).
On my PC it looks as desired (car picture horizontal):

image
image1534×318 111 KB

But on my iphone app the picture is rotated and therefore too large:

image
image750×1624 84.2 KB

I did not find a way to make sure that it’s not rotated and would appreciate a short feedback how to do this.

Just in case, here is my code:

type: picture-elements
elements:
  - type: state-icon
    entity: binary_sensor.car_engine
    style:
      top: 40%
      left: 8%
      transform: scale(2,2)
  - type: state-icon
    entity: switch.car_heater
    style:
      top: 40%
      left: 46%
      transform: scale(2,2)
  - type: state-icon
    entity: lock.car_door_lock
    style:
      top: 40%
      left: 69%
      transform: scale(2,2)
image: local/floorplan/home/pulpo.svg
2

No one with experience on this topic?

3

Ever mange to get this solved?

I’m trying to rotate a picture-entity camera by 90 degrees, so it fits my phone screen properly, without having to rotate the phone.

show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.amcrest_camera
camera_image: camera.amcrest_camera
style:
  rotate: 90

But I can’t get it to work.

4

Your question has nothing to do with the OP’s question, as his “picture” is the "background-image ( in Picture-Element.Card )… And your’s a picture-entity-card( which havent got the “style-option” )

Anyway …

You might be able to do what you want, with Card-Mod ( CSS ) . search for " card-mod , pictue-entity-card "

PS: however, You do know what happens when you ( rotate a picture/stream ) 90 degree ? … it will show/flip the picture, so you have to “bend” your head 90 degree also, Even if you flip your phone to horizontal view

1 Like
5

Obviously I have fixed it back then by using:

image: local/floorplan/home/car.svg
transform: rotate(-0.25turn)

However, I tried to modify it, because I don’t remember using this transform (too long ago :wink:
It does not change something, if I use e.g. transform: rotate(-0.75turn)

6

try

card_mod:
  style:
    hui-image $: |
      img {
        transform: rotate(90deg);
      }