Lovelace state_image based on different entity

Configuration Frontend
1

I have a picture elements card that I am trying to add an image card to for my door lock.

I want to be able to display 4 different images:
closed_locked
closed_unlocked
open_locked
open_unlocked

I have created a sensor.front_door that returns the above values based on the lock status and a door sensor status.

Best option i have so far is to use the sensor as the entity for the image card, but then i am no longer able to toggle the lock, which i need to be able to do.

Any help would be greatly appreciated.

2

If you are using a picture card or picture elements card, then you have the option of tap_actions. You will be able to toggle the lock. See the documentation.

3

Thanks for the reply, but this is not what i was asking.

I am asking how (or if) i can change the image of a picture card for a lock, based on the status of a different entity (a sensor)

4

check out this custom card, you can do many things with teplating.

5

The image element with state_image should be able to show 4 different images based on sensor.front_door.
Add different tap_/double_tap_/hold_action as lock.lock and lock.unlock service to control the lock entity, i.e. lock.front_door?, should work.

6

Im not exactly sure how this would be done. Do you have an example of what you mean?

7

I was thinking something like this.
The example will show different image based on (sensor.hp_kitchen): ac, fan, unit off.
The tap_action toggles light.kitchen.
If you want separate action, then tap_action to turn_on, double_tap_action to turn_off.

            - type: image
              entity: sensor.hp_kitchen
              state_image:
                "ac":  /local/ac_on.jpg
                "unit off": /local/unit_off.jpg
                "fan": /local/fan_on.jpg
              tap_action: 
                action: call-service
                service: light.toggle
                service_data:
                  entity_id: light.kitchen
              style:
                top: 50%
                left: 50%
8

Excellent! This seems to work, except that there is no toggle option for locks.

I found this in the Service Calls page, but it doesnt seem to work. I get an error saying “Failed to call service. Service Not Found”

This is what i have:

`            - type: image
              entity: sensor.front_door
              image: /local/images/icon/doors_lock.png
              state_image:
                "Closed Unlocked": /local/images/front_door_closed_unlocked.svg
                "Closed Locked": /local/images/front_door_closed_locked.svg
                "Open Unlocked": /local/images/front_door_open_unlocked.svg
                "Open Locked": /local/images/front_door_open_locked.svg
              tap_action:
                action: call-service
                service: >
                  {% if is_state('lock.front_door', 'locked') %}
                    lock.unlock
                  {% else %}
                    lock.lock
                  {% endif %}      
                service_data:
                  entity_id: lock.front_door  
              style:
                top: 56.55%
                left: 73.75%
                transform: 'scale(0.66)'
`
9

Yes, that’s even better with template :slight_smile:

10

Except it doesnt work, and i can’t figure out why :frowning: