Displaying a local picture based on template sensor state?

[Scoff (Scott)]

I’m trying to implement something similar to, what looks like a simple ‘status’ display which can be seen in the first post here:

Oil Tank Level Sensor

Recent project that a combination of HA and ESPHome made much easier than I expected. Central heating is oil fired - and our tank has no sight tube. When installed it did have a remote level sensor, but the batteries in the sender died a while back and I hadn’t got round to replacing them - and the inside element was a rather bulky ugly plug. Time for a proper sensor…a waterproof SR04 compatible sensor TE501 , a D1 mini and a 7 Neopixel disc (left over from previous projects) makes a compact oi…

I have created what I believe to be the relevant template sensor in my main config file in HA here:

- name: "Oil Status"
        unit_of_measurement: ""
        state: >
          {% if states.sensor.oil_level.state == 999 %}
          ERROR
          {% elif states.sensor.oil_level.state | int > 75 %}
          GOOD
          {% elif states.sensor.oil_level.state | int > 50 %}
          OK
          {% elif states.sensor.oil_level.state | int > 25 %}
          LOW
          {% else %} 
          WARNING
          {% endif %}

        picture: >-
          {% if states.sensor.oil_level.state == 999 %}
          /local/cancel.png
          {% elif states.sensor.oil_level.state | int > 75 %}
          /local/green.png
          {% elif states.sensor.oil_level.state | int > 50 %}
          /local/yellow.png
          {% elif states.sensor.oil_level.state | int > 25 %}
          /local/amber.png
          {% else %} 
          /local/red.png
          {% endif %}

Ideally I would like the relevant image to display in my Oil Tank ‘entities card’ on my dashboard, in place of either the icon, or the text state (LOW in this example)

Looking at the entities card documentation it doesn’t look like I can have a state determined picture in this card.

I’ve created a picture entity card separately, as a test, and this pulls the correct template sensor state and displays the correct image based on the current state - here is my code:

type: picture-entity
entity: sensor.oil_status
state_image:
  GOOD: /local/images/green.png
  OK: /local/images/yellow.png
  LOW: /local/images/amber.png
  WARNING: /local/images/red.png

This can be seen in the dashboard screenshot above. Can anyone suggest how I can get a (much smaller!) state based image to display in the way I am aiming for? I can’t see how the OP in the linked post has done this with his dashboard, but it looks like a glance card? I’ve tried creating a glance card, but can’t see a way of including a state based image - only the state text?

Appreciate any help!

[Scoff (Scott)]

After further reading I needed to be referencing my newly created template sensor and it’s templated ‘states’ within the code block for my pictures in my HA config file like this:

        picture: >
          {% if is_state('sensor.oil_status', 'ERROR') %}
          /local/cancel.png
          {% elif is_state('sensor.oil_status', 'GOOD') %}
          /local/green.png
          {% elif is_state('sensor.oil_status', 'OK') %}
          /local/yellow.png
          {% elif is_state('sensor.oil_status', 'LOW') %}
          /local/amber.png
          {% else %} 
          /local/red.png
          {% endif %}