Dynamic images based on blinds percentage for picture-elements

Configuration
1

Hi all, my first post here, i’m struggling with this in the previous days and cant figure out an solution.

i want to have an “dynamic” image that changes based on the % of my blinds, they are controlled by an shelly 2.5:

the configuration :

type: picture-elements
elements:
  - type: image
    entity: cover.shelly_shsw_25_e8db84a1d28a
    image: >
      {%
      if(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')==100)%} local/MyAssets/HomeMap/estore_aberto.png
      {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position') >=75)%} local/MyAssets/HomeMap/estore_aberto.png
      {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position') >=50)%} local/MyAssets/HomeMap/estore_aberto.png
      {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position') >=1)%} local/MyAssets/HomeMap/estore_aberto.png
      {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position') ==0)%}local/MyAssets/HomeMap/estore_aberto.png
	  {%else%} local/MyAssets/HomeMap/estore_fechado.png {% endif %}
    style:
      top: 8%
      left: 16%
      width: 7%
      padding: 10px
  - type: image
    entity: cover.shelly_shsw_25_e8db84a1d28a
    image: local/MyAssets/HomeMap/estore_fechado.png
    style:
      top: 8%
      left: 25%
      width: 7%
      padding: 10px
  
image: local/MyAssets/HomeMap/palacio_planta_black.png

i’m using only 2 images to for debugging, the images are in the correct place and “work” as if i set it “normally” it work as showed in the image bellow:

image

what i’m doing wrong? or this is not possible to be done in this way?

thanks in advance

2

You can’t template in the frontend without custom cards. Config-template-card will help, but it’s javascript not jinja. If I recall correctly, there is a jinja template card out there somewhere.

1 Like
3

thanks, i’m going to check that :slight_smile:

4

Leaving the solution in the case of other person get the same challenge:

the solution to handle this was to install this custom component:
https://github.com/gadgetchnnel/lovelace-card-templater

and configure in the following way:

type: picture-elements
image: local/MyAssets/HomeMap/palacio_planta_black.png
elements:
  - type: custom:card-templater
    entities:
      - cover.shelly_shsw_25_e8db84a25a88
    card:
      type: picture
      entity: cover.shelly_shsw_25_e8db84a25a88
      text: Shelly 2.5 - estore escritorio
      image_template: >-
        {%if(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')==100)%}local/MyAssets/HomeMap/estore_aberto.png
        {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')>=75)%}local/MyAssets/HomeMap/estore_75.png
        {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')>=50)%}local/MyAssets/HomeMap/estore_50.png
        {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')>=25)%}local/MyAssets/HomeMap/estore_25.png
        {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')>=1)%}local/MyAssets/HomeMap/estore_1.png
        {%elif(state_attr('cover.shelly_shsw_25_e8db84a25a88','current_position')==0)%}local/MyAssets/HomeMap/estore_fechado.png
        {%else%}local/MyAssets/HomeMap/questionMark.png
		{% endif %}
    style:
      top: 19%
      left: 15%
      width: 11%
      padding: 10px
2 Likes