[SOLVED] How to change the background of the picture-elements card according to some state?

Hi all,

I use a Picture Element Card on a touch screen in my hall to control my HA. I’d like the background of the picture to be red when the alarm is set, so I don’t forget to disable it… Eventually I could change the picture instead.

How can I do that?

You could probably use some variation of this:

Just create a state sensor for your alarm states and use this code.

- entity: sensor.alarm_state
            hold_action: none
              Disarmed: /local/pictures/alarm/disarmed.png
              Away: /local/pictures/alarm/away.png
              Armed_home: /local/pictures/larm/armed_home.png
              Arming: /local/pictures/larm/arming.png
              Unknown: /local/pictures/larm/unknown.png
            tap_action: none
            type: image
1 Like

Thanks, I’ll try that!
Also one side question, when I click on the alarm I don’t have the keybad showing (like when I click on the alarm from a badge it does not show the full card). It’s a manual alarm. Any idea how I can force the keypad to show in the “quick view” ?

As I do it from lovelace editor the organisation is a bit different so I drop the code here:

type: picture-elements
  - type: image
    entity: alarm_control_panel.alarm
      armed_away: /local/CLEAN-ALL-RED.svg
      disarmed: /local/CLEAN-ALL.svg
      arming: /local/CLEAN-ALL.svg
    tap_action: none
    hold_action: none
      left: 50%
      top: 50%
      width: 100%
      height: 100%

This was a temporary bug probably as it is now the behavior.

This worked for me.

- type: picture-elements
            image: local/overlay.svg
              style: |
                ha-card {
                   {% if is_state('sensor.text_temperature_comfort_upstairs','FROSTY') %}
                   --ha-card-background: radial-gradient(circle, blue, black, black, blue) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','COLD') %}
                   --ha-card-background: radial-gradient(circle, dodgerblue, black, black, dodgerblue) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','CHILLY') %}
                   --ha-card-background: radial-gradient(circle, deepskyblue, black, black, deepskyblue) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','COOL') %}
                   --ha-card-background: radial-gradient(circle, mediumaquamarine, black, black, mediumaquamarine) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','MILD') %}
                   --ha-card-background: radial-gradient(circle, limegreen, black, black, limegreen) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','PERFECT') %}
                   --ha-card-background: radial-gradient(circle, yellowgreen, black, black, yellowgreen) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','WARM') %}
                   --ha-card-background: radial-gradient(circle, orange, black, black, orange) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','HOT') %}
                   --ha-card-background: radial-gradient(circle, orangered, black, black, orangered) !important;
                   {% elif is_state('sensor.text_temperature_comfort_upstairs','BOILING') %}
                   --ha-card-background: radial-gradient(circle, crimson, black, black, crimson) !important;
                   {% endif %}