Replacing an icon with an image in a entities card

[SylvainGa (Sylvain Gagnon)]

So yesterday I fiddled with my picture-elements and with help from here (thanks), managed to get my custom-ui mods replaced by card-mod. One of the most difficult (for me) was my baseboard heaters and this is the code I got working:

  - entity: climate.neviweb130_climate_martin
    type: image
    image: /local/heat-0.png
    card_mod:
      style:
        hui-image $: |
          #image {
            {% set power = state_attr(config.entity, 'heat_level')|int(0) %}
            {% if power < 1 %}
              content: url(/local/heat-0.png)
            {% elif power < 21 %}
              content: url(/local/heat-1.png)
            {% elif power < 41 %}
              content: url(/local/heat-2.png)
            {% elif power < 61 %}
              content: url(/local/heat-3.png)
            {% elif power < 81 %}
              content: url(/local/heat-4.png)
            {% else %}
              content: url(/local/heat-5.png)
            {% endif %};
          }
    style:
      left: 50%
      top: 20%
      transform: translate(-50%,-50%) scale(0.25, 0.25)

And it shows like this:

Now I’m trying to do the same through a simple Entities card and of course, it can’t be as easy as a copy paste. This is what I currently have and it’s not working. The image never change to show the power delivered by the baseboard. I had to remove type:image otherwise it would generate an error.

  - entity: climate.neviweb130_climate_martin
    image: /local/heat-0.png
    card_mod:
      style:
        hui-image $: |
          #image {
            {% set power = state_attr(config.entity, 'heat_level')|int(0) %}
            {% if power < 1 %}
              content: url(/local/heat-0.png)
            {% elif power < 21 %}
              content: url(/local/heat-1.png)
            {% elif power < 41 %}
              content: url(/local/heat-2.png)
            {% elif power < 61 %}
              content: url(/local/heat-3.png)
            {% elif power < 81 %}
              content: url(/local/heat-4.png)
            {% else %}
              content: url(/local/heat-5.png)
            {% endif %};
          }

This is what it shows:

'Inspecting the code produced by the picture elements card, I see this for the image. It looks like it’s inserting the heat-5.png over the heat-0.png?

And this is for when I inspect the code produced in the Entities card. It’s showing this image in a completely different way. I

I played with has-image and background-image that I’m seeing on that line but that didn’t do anything. The image never changes.

Anyone willing to take a poke at it? Thanks.

[SylvainGa (Sylvain Gagnon)]

I finally got further. Went through a deep rabbit hole but turns out it’s simpler than I expect. I still have to template it but at least now, I can show the image I want, except, the icon is still drawn, although I’m telling to NOT display it.

  - entity: climate.neviweb130_climate_martin
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            background-image: url("/local/heat-3.png");
          }

          state-badge ha-icon {
            display: none; # Hide the default icon
          }

Anybody knows why it does that?

[Ildar_Gabdullin]

Try “display: none !important;”.

[Ildar_Gabdullin]

Note that any card-mod styling has a transition which is more or less visible. And in some cases the same can be achieved by using other methods like “external JS” or simply creating a template sensor with a dynamic entity_picture.

[SylvainGa (Sylvain Gagnon)]

@Ildar_Gabdullin

“display: none !important;

Thanks, still shines through

Looking at the CSS code, I tried ha-icon, ha-state-icon and ha-svg-icon. I tried before and after the the state-badge block.

[Ildar_Gabdullin]

@SylvainGa

# Hide th

Also, this is a wrong way to add comments here inside a STRING, use “/* my comment */”.

[SylvainGa (Sylvain Gagnon)]

That comment came from Google AI.

[Ildar_Gabdullin]

@SylvainGa

state-badge ha-icon {

Ok, missed this. The inner element “ha-state-icon” is inside shadow root.

[Ildar_Gabdullin]

Keep trusting AI ))

[SylvainGa (Sylvain Gagnon)]

LO’L, it got me this far. Now I only need a human to fix its mess.

[SylvainGa (Sylvain Gagnon)]

@Ildar_Gabdullin

@SylvainGa

state-badge ha-icon {

Ok, missed this. The inner element “ha-state-icon” is inside shadow root.

I’m not following…

[Ildar_Gabdullin]

To style elements inside shadow root, try this (untested):

- entity: climate.neviweb130_climate_martin
    card_mod:
      style:
        hui-generic-entity-row $: |
          state-badge {
            …
          }
        hui-generic-entity-row $ state-badge $: |
          ha-state-icon {
            display: none; 
          }

[Ildar_Gabdullin]

@SylvainGa

I’m not following…

Check your screenshot , the inner ha-state-icon element is located under state-badge - but also inside a so called shadow root.
The shadow root in cardmod is presented as “$”.

To better understand how it works, go to the main cardmod thread - 1st post - fantastic link at the bottom, it will lead to lo a list of tutorials and examples.
Might be useful.
Of course in case if you are ready to learn ))).

[SylvainGa (Sylvain Gagnon)]

@Ildar_Gabdullin

        hui-generic-entity-row $ state-badge $: |
          ha-state-icon {
            display: none; 
          }

It… WORKED!

So, with the template, this is the whole thing, in case someone else stumbles upon this later

entities:
  - entity: climate.neviweb130_climate_martin
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $: |
          ha-state-icon {
            display: none; 
          }

        hui-generic-entity-row $: |
          state-badge {
            background-image: 

            {% set power = state_attr(config.entity, 'heat_level')|int(0) %}
            {% if power < 1 %}
              url(/local/heat-0.png)
            {% elif power < 21 %}
              url(/local/heat-1.png)
            {% elif power < 41 %}
              url(/local/heat-2.png)
            {% elif power < 61 %}
              url(/local/heat-3.png)
            {% elif power < 81 %}
              url(/local/heat-4.png)
            {% else %}
              url(/local/heat-5.png)
            {% endif %};
          }

[Ildar_Gabdullin]

@SylvainGa

WORKED!

Nice, now create a template sensor as was suggested and compare how it looks, then decide which way to choose. A part of learning process.

[SylvainGa (Sylvain Gagnon)]

@Ildar_Gabdullin

@SylvainGa

I’m not following…

Check your screenshot , the inner ha-state-icon element is located under state-badge - but also inside a so called shadow root.
The shadow root in cardmod is presented as “$”.

To better understand how it works, go to the main cardmod thread - 1st post - fantastic link at the bottom, it will lead to lo a list of tutorials and examples.
Might be useful.
Of course in case if you are ready to learn ))).

Thanks. I’ll take a look. I must say, for what I used it for, custom-ui was way more easy to use lol. But now, I’m more ‘future proof’ than before.

[Ildar_Gabdullin]

@SylvainGa

future proof

Anyway, try to be as vanilla as possible.
Use cardmod only where it is needed.

[SylvainGa (Sylvain Gagnon)]

Thanks again for your help. Much appreciated.