Failing to set icon color based on state

Configuration
1

Hi,

I am currently in the process of migrating my configuration to Lovelace and I am getting desperate. I created a picture-elements card with my floor plans and I now want to place light icons on it. While the placing works fine I am not able to set a state based color for the icons even though It feels, that I tried every ‘solution’ I could find in the internet. So my yaml for the current tab looks like this:

  - title: Lights
    panel: true
    theme: dark-mode
    cards:
      - type: vertical-stack
        cards:
          - type: picture-elements
            image: /local/lights/floorplan.png
            elements:
              - type: icon
                entity: switch.sleepingroom_light
                icon: mdi:ceiling-light
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                style:
                  top: 30%
                  left: 44.5%
                  --iron-icon-height: 42px
                  --iron-icon-width: 42px
                  color: auto
                state:
                  - value: 'on'
                    color: red
                  - value: 'off'
                    color: yellow
          - type: glance

I would be very grateful, if someone can help me with this.

2

You can’t do what you’re trying to do with the base element. No picture-element elements have a ‘state’ attribute. I’m not sure where you got it from, but you can’t just add any field and expect it to work. All available fields are present in the documentation for each element.

You can get the card-mod custom card that has templating. That will allow you to modify any style based on the state.

1 Like
3

Hi,

thank you for your answer. I am not sure, that I get it. Yes, I am aware that the picture-element does not offer any state field/attribute. But as far as I understood it the state in this case is not refering to the picture element, but to the specific sublements, here the icon, which again refers to the switch entity, which offers on and off states. I mean, also the toggle action (which worHi,

thank you for your answer. I am not sure, that I get it. Yes, I am aware that the picture-element does not offer any state field/attribute. But as far as I understood it the state in this case is not refering to the picture element, but to the specific sublements, here the icon, which again refers to the switch entity, which offers on and off states. I mean, also the toggle action (which works) must work somehow even though nor the picture-element nor the icon don’t offer this functionality by themselves, right?

Also I found serveral similar snippets, which apparently are supposed to work, when I sort out this one difference, which I cannot figure out currently and prevents it working for me. I think having icons representing the lights and showing the state within the picture-element card should be one of the most common use scenarios. Do I really need a custom card for this?ks) must work somehow even though nor the picture-element nor the icon don’t offer this functionality by themselves, right?

Also I found serveral similar snippets, which apparently are supposed to work, when I sort out this one difference, which I cannot figure out currently and prevents it working for me. I think having icons representing the lights and showing the state within the picture-element card should be one of the most common use scenarios. Do I really need a custom card for this?

4

Yes, you really need a custom card because the state field is not available for this element. It doesn’t matter that you found other code that works because this specific element does not allow it.

5

That’s the solution

          - type: picture-elements
            image: /local/lights/floorplan.png
            elements:
              - type: state-icon
                icon: mdi:ceiling-light
                title: Sleeping room light
                entity: switch.sleepingroom_light
                style:
                  top: 50%
                  left: 50%
                tap_action:
                  action: toggle
6

That’s not a solution… That’s the native ability that all lights and switches have.

7

Ok, whatever floats your boat. This is what I wanted and it does what I want. Looks pretty much as a solution to me.

8

So you’re telling me that this configuration that you have solves your original problem. When it’s on the color is red and off the color is yellow?

9

It sets the predefined state colors. The colors used in the yaml where only test colors for me because the original icon’s light grey was barely visible as overlay on my floor plan.

10

Well you should clarify that next time. Using odd colors like that are what prompted the answer you received. You would have gotten your solution day-of instead of 4 days later.