How to set a main image dynamically:
There 3 methods available to achieve this:
- Use card-mod to define background color for the card.
- Use “
image
” element with “state_image
” option. - Use “
config-template-card
” to define background color for the card.
Card-mod method:
Consider this card:
type: vertical-stack
cards:
- type: entities
entities:
- input_select.test_tri_state
- type: picture-elements
image: /local/images/test/transparent.png
elements:
- type: state-label
entity: input_select.test_tri_state
style:
top: 20%
left: 20%
card_mod:
style: |
ha-card {
{% if is_state('input_select.test_tri_state','auto') %}
{% set IMAGE = '/local/images/test/lightgreen_1.jpg' %}
{% elif is_state('input_select.test_tri_state','on') %}
{% set IMAGE = '/local/images/test/lightgreen_2.jpg' %}
{% else %}
{% set IMAGE = '/local/images/test/lightgreen_3.jpg' %}
{% endif %}
background-size: 100% 100%;
background-image: url({{IMAGE}});
}
The “input_select.test_tri_state” helper has three possible values - “auto, on, off”.
The “transparent.png” is a LARGE (I myself use a 4K image) transparent png-file - it must be larger than any of used images (lightgreen_1…3.jpg). If you need a particular size (not square) - define a CSS “height
” property by card-mod.
Note that all 3 images (lightgreen_1…3.jpg) may have different dimensions - anyway they will be stretched; surely all images should be of the same size since they describe “one card in different conditions”.
"image
" element method:
Currently only an internal “`image’” element can have a dynamically defined image (“state-image”). When using this way, a user need to enlarge the internal “image” element to cover whole card - which is not an easy task.
The best way is to use images of the SAME dimensions (1920x1080 on the example below):
– transparent (or ANY, anyway will be overlapped but I recommend using transparent to avoid visible transitions) image as the “main image” of the card;
– different corresponding images for different conditions.
Here there is a limitation: “each condition = a state of some entity”, i.e. it cannot be some complex condition. If you need a complex condition - either use a template sensor for this condition or use other methods described in this post.
type: vertical-stack
cards:
- type: entities
entities:
- input_select.test_tri_state
- type: picture-elements
image: /local/images/test/transparent_1920_1080.png
elements:
- type: image
entity: input_select.test_tri_state
style:
top: 0%
left: 0%
transform: translate(0,0)
state_image:
auto: /local/images/test/lightgreen_1.jpg
'on': /local/images/test/lightgreen_2.jpg
'off': /local/images/test/lightgreen_3.jpg
- type: state-label
entity: input_select.test_tri_state
style:
top: 20%
left: 10%
"config-template-card" method:
Place the whole picture-elements card inside “config-template-card
” and set the main image in a JS template dynamically:
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
- type: custom:config-template-card
variables:
INPUT_BOOLEAN: states['input_boolean.test_boolean']
entities:
- ${INPUT_BOOLEAN.entity_id}
card:
type: picture-elements
image: >-
${INPUT_BOOLEAN.state === "on" ?
"/local/images/test/blue.jpg" :
"/local/images/test/orange.jpg" }
elements:
- type: state-label
entity: sun.sun
style:
top: 50px
left: 100px
Here only the “‘input_boolean.test_boolean’” entity is defined as “monitored”, but IRL all entities used on the “picture-elements
” card must be listed as “monitored”.
I do not recommend this method since it may cause flickering of the card (the whole card is redrawn if any of monitored entities changes).