Styling elements in Picture elements card: a small tutorial

Ildar_Gabdullin · December 29, 2024, 8:06pm

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

wgumaa · December 30, 2024, 7:07am

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.

wgumaa · December 31, 2024, 10:03am

@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?

Emeraude998 · January 2, 2025, 8:01pm

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

Ildar_Gabdullin · January 2, 2025, 8:08pm

Suggest you to close the issue you opened in Github.
Tagging people is not appreciated in Community, please avoid it.
Please open the 1st post of this thread & check 3 links about “positioning”.

Surmi2 · January 6, 2025, 11:47am

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.

Mrsash · January 8, 2025, 4:57am

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

skank · January 10, 2025, 8:38pm

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?

chicagoandy · January 16, 2025, 8:45pm

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 ?

Ildar_Gabdullin · January 16, 2025, 8:48pm

1st post → conditional styles

Ildar_Gabdullin · February 5, 2025, 8:53pm

How is this related to picture elements? Are you talking about css inside picture elements only?

wgumaa · February 18, 2025, 7:50pm

I have a question that someone may be able to 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?

  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/Facade.png
      "off": local/Floorplan/Transparent.png
    entity: light.front_facade
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/Columns.png
      "off": local/Floorplan/Transparent.png
    entity: light.outside_columns
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/FrontTerrace.png
      "off": local/Floorplan/Transparent.png
    entity: light.outside_entrance
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/ColumnFacade.png
      "off": local/Floorplan/Transparent.png
    entity: light.floorplan_outside_front_cf
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/ColumnTerrace.png
      "off": local/Floorplan/Transparent.png
    entity: light.floorplan_outside_front_ct
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      "on": local/Floorplan/OutsideFrontAll.png
      "off": local/Floorplan/Transparent.png
    entity: light.floorplan_outside_front_all
  - type: image
    style:
      left: 50%
      top: 50%
      width: 100%

So I have 3 sets of lights

Column, Terrace and Facade

I have created renders for each as and all combinations as you can see in the code.

The problem is as the codes stands, and all the lights on it layers the image which is fine but transparency upon transparency upon transparency renders the image black in the areas where there are no lights.

Is it possible to use a condition?

Ildar_Gabdullin · February 18, 2025, 7:57pm

Well, the approach is good - use “image” element with “state-image”.

As for

not completely getting this: transparent png + transparent png = transparent.
Unless “transparent” is not really transparent…

c_calin · March 7, 2025, 5:15am

Hi, please I need your help. Haveing problems to rotate an object in my project I try to at list to recreate your example with the arrow but stil not working and I do not know where is the problem.
I verified if the themplate is working as yo mentionet before

{% set ANGLE = states(‘input_number.random_angle’) | float |
round(0) %} {{ANGLE}}deg

Ths is dhe code, the arrow stil not moveing:
- type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.random_angle
secondary_info: entity-id
- type: picture-elements
image: /api/image/serve/9400d0a88cef22e4c59b05ea073f67e9/512x512
elements:
- type: icon
icon: mdi:arrow-up-thin
style:
top: 18%
color: orange
left: 20%
rotate: >
{% set ANGLE = states(‘input_number.random_angle’) |
float | round(0) %} {{ANGLE}}deg

Please I need your help what do I do wrong?

LiQuid_cOOled · March 7, 2025, 5:17am

Please post your code using the forum standard. Using the preformatted text option makes testing your code a lot easier.

c_calin · March 7, 2025, 5:20am

this is your code with my working template

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.random_angle
        secondary_info: entity-id
  - type: picture-elements
    image: /api/image/serve/9400d0a88cef22e4c59b05ea073f67e9/512x512
    elements:
      - type: icon
        icon: mdi:arrow-up-thin
        style:
          top: 18%
          color: orange
          left: 20%
          rotate: >
            {% set ANGLE = states('input_number.random_angle') | float |
            round(0) %} {{ANGLE}}deg

c_calin · March 7, 2025, 5:26am

thanks was my first post ever

LiQuid_cOOled · March 7, 2025, 5:29am

No worries, just a little bit of advice to help ensure you get a resolution. I’ll take a look, but either way, Ildar or myself will reply.

LiQuid_cOOled · March 7, 2025, 6:07am

Test this…

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.random_angle
        secondary_info: entity-id
  - type: picture-elements
    card_mod:
     style: |
      ha-card {
        {% set ANGLE = states('input_number.random_angle') + 'deg' %}
        --rotate: rotate({{ANGLE}});        
    image: /api/image/serve/9400d0a88cef22e4c59b05ea073f67e9/512x512
    elements:
      - type: icon
        icon: mdi:arrow-up-thin
        style:
          top: 18%
          color: orange
          left: 60%
          transform: var(--rotate)

c_calin · March 7, 2025, 6:21am

Thank you thank you very very much is working