Change image based on multiple sensor conditions

Configuration Frontend
1

Hi there,

I want to build a custom Lovelace card with an image displaying the state of my smoke detector. I have 5 different images, and depending on the state of multiple entities (e.g. IF A AND B AND NOT X) I want to choose which image to display. These images are in my /local/images/ folder.
I’ve been looking around for some time but I can’t find the way to do this. I see 2 options:

  • Create a custom card in YAML of some type (picture_entity? picture_elements? something else?) where I can use custom conditions to choose which image to show. Which type to use? How to implement the conditions?
  • Create a custom sensor in configuration.yaml (template: - sensor: etc) which has different states (numbers or strings = colours, both are OK) depending on the 4 entity values, and use this custom sensor in the YAML custom card using picture_entity with attribute state_image.

Whichever option I choose, I need to know the possible states of the entities. And I don’t know those. How can I find out the different states of an entity?
P.S: The entities are battery status, heat status, CO status, and smoke status.

I’m rather new to Home Assistant so sorry for the possibly dumb questions. Still on a learning curve…

KR,
Davy

2

Davy – I think I solved a similar problem, but in a different way. I have a heat pump and a air heat reclaimer and there are a whole bunch of different combinations of activity (heat pump can be floor heating or water heating and the floor circulation pump can be on/off independently; air heat reclaimer can have different speeds for the extract and supply fans). To show a graphic that shows all the combinations I did the following: I created sensors that indicate the state for each independent activity. Then I created PNGs of exactly the same size, and I made all but the parts they affected transparent. Then I just show them layered on top of each other.

So, by default, there is a base image shown. Then if the floor circulation pump is on, the “floor circulation pump” png is shown on top, which is transparent except for that part. So only it shows up. Then if the water heating is on, the “water heating” png is shown on top too, but only its part is non-transparent, so it overlays.

Here you can see an example of the effect when the “floor circulation pump” is on (red box under the house) and the air heat exchanger has medium speed for both the extract and supply fans. The gray lines become colored when their respective parts are on.

image
image1360×764 106 KB

Here is some of the code that shows how the images are directly overlaid depending on the sensor states:

  - type: picture-elements
    image: /local/heat_graphics2/base3_all_off.png
    theme: light
    elements:
      - entity: binary_sensor.pump_cold_circuit
        type: image
        image: /local/heat_graphics2/blank.png
        state_image:
          'on': /local/heat_graphics2/base3_brine_on.png
        style:
          left: 0%
          top: 0%
          transform: none
          width: 100%
      - entity: binary_sensor.compressor
        type: image
        image: /local/heat_graphics2/blank.png
        state_image:
          'on': /local/heat_graphics2/base3_compressor_on.png
        style:
          left: 0%
          top: 0%
          transform: none
          width: 100%
      - entity: sensor.heatpump_status_direct
        type: image
        image: /local/heat_graphics2/blank.png
        state_image:
          Idle: /local/heat_graphics2/blank.png
          Water Heat Pumping: /local/heat_graphics2/base3_water_heat_on.png
          Floor Heat Pumping: /local/heat_graphics2/base3_floor_heat_on.png
        style:
          left: 0%
          top: 0%
          transform: none
          width: 100%
      - entity: sensor.ftx_supply_fan_mode
        type: image
        image: /local/heat_graphics2/blank.png
        state_image:
          Low: /local/heat_graphics2/base3_ftx_supply_low.png
          Normal: /local/heat_graphics2/base3_ftx_supply_normal.png
          High: /local/heat_graphics2/base3_ftx_supply_high.png
        style:
          left: 0%
          top: 0%
          transform: none
          width: 100%

Does that help you on how you could do this?

-David

1 Like
3

Hi dbs,

This might work, I’ll have to check in detail on the possible states (not time today, will be next week). But 2 open items remain for me:

  1. In any case I’m not sure about the possible states of the sensors that I’m using. I mean, at this moment they say “Normal” and “Not detected”, but this is in the programmed card I have now. Is there a way to see the different possible states of a sensor somehwere?
  2. It might be that I need and / or functions. So if sensor1 state = X and sensor2 state = Y then show image Z. Is this possible in any way?

Kind regards,
Davy Van Rossem