Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
248

Do you mean that you sensor did not have exactly same states?
Asking because your posted code SEEMS to be ok.

249

I needed to combine 2 sensors - Time of Day and Season. The suns position is very different in the seasons so I wanted the images to reflect that.

250

@Ildar_Gabdullin I have a question that you may help me with.

Can I have conditional images displayed? For example:

Light Entity 1 on - Display Image 1
Light Entity 2 on - Display Image 2
Light Entities 1&2 on - Display Image 3

Is that possible? If so what could the code look like?

251

Hey @Ildar_Gabdullin
I have a question for you.

My current issue is that Iā€™m using both the mobile app and a desktop browser to view my dashboards but the scale and position of the badges isnā€™t dynamically set with the size of the background image being displayed.

Do you know if there is a way to dynamically adjust the position and scale so that it remains in the correct spot?

Thanks in advance

252
  1. Suggest you to close the issue you opened in Github.
  2. Tagging people is not appreciated in Community, please avoid it.
  3. Please open the 1st post of this thread & check 3 links about ā€œpositioningā€.
253

Thanks for your comment, but "switch.r21, -.r22, etc.) are created so that only one can be ā€œonā€ at a time, so this is not a problem.

254

You got me thinking about my hot water system. Oh that rabbit hole.

Anyway I found after a few different tests the picture itself determines the size. Now I am not sure which one I am sticking withā€¦

Screenshot 2025-01-08 153808
Untitled

Untitled2

1 Like
255

Any idea how i should do a fireplace?
I have a top view on the floorplan
I would like to have the fireplace light the environment but flicker like a real fire
I can use a gif, but u wont see that from the topā€¦ and i wont see light flicker.
Maybe someone have an idea?

256

Iā€™m hoping someone can help.

Iā€™m looking to use picture-elements to track Solar Panel performance. Iā€™d like to set the background-color alpha-channel to a value derived from the entity state.

I know I am doing this wrong, but havenā€™t been able to figure out the right way.

type: picture-elements
image: https://mySite/local/RoofOutline.png
title: Roof
elements:
  - type: image
    entity: sensor.panel_a1_power
    image: https://andyland.duckdns.org/local/panel.png
    style:
      top: 47%
      left: 75%
      top: 21%
      left: 42%
      width: 6%
      transform: translate(0%, 0%)
      background-color: rgba(255,0,0,."$ states('sensor.panel_a1_power')|int/255)")

And of course that doesnā€™t work. background-color is ignored.

What is the correct way to get a state-value into the CSS ?

257

1st post ā†’ conditional styles