Picture Elements card template

Configuration Frontend
1

Hi,
I am struggling to use templates with the picture elements card. I would like to get the state of my thermostat and display it with a colour on a floorplan, but using templates are not working, does anyone have any other ideas on what would work.

type: picture-elements
elements:
  - type: icon
    icon: mdi:radiator
    style:
      top: 41.5%
      left: 40.6%
      transform: scale(1.2, 1.2)
      color: |
        {% if is_state('climate.murrays', 'off') %}
          black
        {% elif is_state('climate.murrays', 'auto') %}
          green
        {% elif is_state('climate.murrays', 'heat') %}
          red
        {% else %}
          yellow
        {% endif %}
image: /local/sketch/home.jpeg

Thank you.

2

From where did you get the idea that you can use Template under the " style" tag ?

I think you “mix up” features from some other card you have used, cards various “options” are not direct “applicable” to any other cards.
I don’t think you can use a template like this applied to i.e an Icon-element

However you can use card_mod, or a " card-template"

3

ScreenShot_20231118181124
ScreenShot_20231118181124930×464 46.7 KB

mushroom-chips-card

type: picture-elements
image: /local/tv.jpg
elements:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.living_room
        content: '{{ states(entity) }}'
        icon: >
          {% if states('climate.living_room') in ['auto', 'off'] %} mdi:radiator
          {% else %} mdi:radiator
          {% endif %}
        icon_color: >
          {% if states('climate.living_room') == 'auto' %} red
          {% elif states('climate.living_room') == 'off' %} blue
          {% elif states('climate.living_room') == 'heat' %} red
          {% else %} grey
          {% endif %}
    style:
      left: 50%
      top: 40%
1 Like
4

What you are trying to achieve is not that simple.
Picture-elements does not support templates.
Use card-mod to define a variable dynamically, then use this variable inside the native “style” option.
Here.

5

You can use card-mod direct in picture-element-card ( on the icon element ), and also as krskrap use mushroom-chip-template … I use both examples

Beside then you can “combine” card-mod and style. ! :slight_smile:

6

Where it is possible to use a native “style” option to set an attribute - trust me, a “card-mod variable” way is better.

7

How about this little “feature” , watch the yellow arrow :slight_smile:
18.11.2023_20.56.23_REC

8

An “image” element with card-mod-variables defining top, left and scale - and yet these attributes are set in the native “style” option)))
But - if need a repeated animation - then yes, card-mod only to define the animation. But initial position may be set by the native option.

9

nope :slight_smile:
well yes, icon jumping

18.11.2023_21.01.08_REC
18.11.2023_21.01.08_REC963×403 34.2 KB

1 Like
10

What “nope”?
You made exactly what I described)
Btw, I made a similar UI which you posted - but only a system to fill tanks, open containers’ covers for missiles on a submarine - surely not in HA, html, css etc - it was a pure C in QNX ))).

1 Like
11

Seems that this picture is for a large screen only. Ever thought about adapting it to smaller/different viewports?

12

in grid-layout 2 of 3 columns,on laptop, And mediaquery Yes , 1 column on phone, but both the Pic and the View is still under construction :slight_smile: , just started 2 weeks ago