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?
Thanks!
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
state_image:
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
style:
tap_action: none
type: image
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
elements:
- type: image
entity: alarm_control_panel.alarm
state_image:
armed_away: /local/CLEAN-ALL-RED.svg
disarmed: /local/CLEAN-ALL.svg
arming: /local/CLEAN-ALL.svg
tap_action: none
hold_action: none
style:
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
card_mod:
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 %}
}
I know this says it is solved, but it isn’t solved if I want to use the state of weather. I want to change the background on my picture-elements card/dashboard, so that when it rains, it shows a rain .gif file I made, and same with sunny, cloudy etc…
I have searched online repeatedly, and I find different half-answers, none of which seem to work. I can’t believe this is so difficult, but surely someone must have figured this out by now. Any help appreciated!
