Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
17

How to set a main image dynamically:

There 3 methods available to achieve this:

  1. Use card-mod to define background color for the card.
  2. Use “image” element with “state_image” option.
  3. 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}});
        }

image
image519×595 9.84 KB

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%

image

"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

image

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).

3 Likes