Card-mod - Trying to duplicate dynamic image that I have in custom-ui

Configuration Frontend
,
1

So my baseboard thermostats icons in my picture-elements card are showing the power intensity like these:

image
image678×119 13.2 KB

This is what custom-ui has for my thermostats

climate.neviweb130_climate_cave:
  templates: &climate
    entity_picture: >
      if (attributes.heat_level < 1) return '/local/heat-0.png';
      if (attributes.heat_level < 21) return '/local/heat-1.png';
      if (attributes.heat_level < 41) return '/local/heat-2.png';
      if (attributes.heat_level < 61) return '/local/heat-3.png';
      if (attributes.heat_level < 81) return '/local/heat-4.png';
      return '/local/heat-5.png';

Now I’m trying to duplicate this in card-mod and can’t find a way to make it work. Following what I did earlier today for my motion detector, this is what I have so far and well, there is no image showing on screen.

  - entity: climate.neviweb130_climate_cave
    type: image
    card_mod:
      style: |
        :host {
          image:
            {% if state_attr('climate.neviweb130_climate_cave','heat_level') | int < 1 %}
              /local/heat-0.png
            {% elif state_attr('climate.neviweb130_climate_cave','heat_level') | int < 21 %}
              /local/heat-1.png
            {% elif state_attr('climate.neviweb130_climate_cave','heat_level') | int < 41 %}
              /local/heat-2.png
            {% elif state_attr('climate.neviweb130_climate_cave','heat_level') | int < 61 %}
              /local/heat-3.png
            {% elif state_attr('climate.neviweb130_climate_cave','heat_level') | int < 81 %}
              /local/heat-4.png
            {% else %}
              /local/heat-5.png
            {% endif %}
        }
    style:
      left: 53%
      top: 60%

I tried to replace ‘style: |’ with ‘image: |’, didn’t help. Also tried other alternatives, still with the same result.

Running the template in the Developer Tools template editor gives me
" /local/heat-0.png" (without the quotes but WITH the leading spaces) so I know the template is working (minus the leading spaces, if it matters).

So, anybody can tell me what I’m doing wrong? My other customizations are quite simple (different icon/color depending on states) so once I have this one nailed, I’ll probably be able to drop custom-ui as it’s a Damocles sword over my HA head as I don’t know when an update will permanently break it.

2

To adjust the image you need to use CSS content: on the actualy image. Working example below.

type: picture-elements
elements:
  - entity: input_boolean.test_boolean
    type: image
    image: /local/media/off.gif
    card_mod:
      style:
        hui-image $: |
          #image {
            {% if is_state(config.entity, "on") %}
              content: url(/local/media/on.gif);
            {% endif %}
          }
    style:
      left: 53%
      top: 60%
image: https://demo.home-assistant.io/stub_config/floorplan.png
3

Thanks, that works. How did you figure that out? I searched and couldn’t find anything remotely similar to what you wrote me.

4

First I checked if you could actually change image by CSS. Then the usual card_mod review of looking at what is where and how to style. Thinking I might write up a tutorial on how to go about card_mod ‘hunting’ one day.

1 Like