HA Floor plan

Configuration Frontend
1

Hello,
I am trying to set state icons for different fan speed with image condition to show different fan speed animations (slow, medium and fast spinning fan) . I made 3 state icons ( speed 1 -20%, 2 - 45% and 3- 70’% and here I put just one example for speed 1 - 20%):

type: state-icon
icon: mdi:fan-speed-1
tap_action:
  action: perform-action
  perform_action: fan.turn_on
  target:
    device_id: 35e966f77d69905cb47824990424c8c2
  data:
    percentage: 20
state_color: true
entity: fan.fan_fan
title: fan speed 1
style:
  left: 53.5%
  top: 60%

and here is the code for condition to change animations based on pressed fan speed icons. I really don’t know how to set state_image (I also tried with 0.2, 0.45, 0.70 and with state icon titles) and whatever icon I pressed it just wan’t show the animation. If I put state “on” then will show only slow spinning fan animation (speed 1) regardless of speed. Please help me.

type: conditional
conditions:
  - condition: state
    entity: fan.fan_fan
    state: “”
elements:
  - type: image
    style:
      left: 44.5%
     top: 62.7%
     width: 14.5%
  image: /local/fan_speed_1.gif
  state_image:
    “20%”: /local/fan_speed_1.gif
    “45%”: /local/fan_speed_2.gif
    “70%”: /local/fan_speed_3.gif
2

This part has a wrong indentation (proper indentation is crucial in yaml).

The “state_image” option should be used if “entity” is specified (which is not in your case):

  - type: image
    entity: fan.xxx
    style:
      ...
    state_image:
      'on': ...
      'off': ...

Also, this is wrong:

  state_image:
    “20%”: /local/fan_speed_1.gif
    “45%”: /local/fan_speed_2.gif
    “70%”: /local/fan_speed_3.gif

since the entity (here probably some “fan” entity) has states “on/off”, not speeds.
Speeds could be an attribute of “fan” entity. Attributes are not supported in “state_image” option - you will have to create a template sensor & then use it for the “image” element.

Also, this whole construction:

type: conditional
conditions:
  ...
elements:
  - type: image
    ...

says “if conditions=true → then show the image (which picture depends on smth)”.
I do not think this is what you need - you probably need to show this image always with a particular picture depending on a speed.

Finally, this construction:

conditions:
  - condition: state
    entity: fan.fan_fan
    state: “”

says “show an element if state=‘’ (empty)”. Do not think this is what you need.

Take this example as a demo showing how this stuff works:

type: picture-elements
image: /local/images/test/orange.jpg
elements:
  - type: state-icon
    entity: input_boolean.test_boolean
    tap_action:
      action: toggle
    style:
      top: 20%
      left: 20%
    
  - type: state-icon
    icon: mdi:fan-speed-1
    entity: fan.bathroom
    tap_action:
      action: toggle
    style:
      left: 50%
      top: 50%

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.test_boolean
        state: 'on'
    elements:
      - type: image
        entity: fan.bathroom
        style:
          left: 70%
          top: 70%
        state_image:
          'on': /local/images/test/blue.jpg
          'off': /local/images/test/lightgreen.jpg

image
image482×670 2.62 KB

BUT.
If all this is needed to show a rotating icon with different speeds - no gif images are needed, you may apply a “rotation” animation to an icon:

with a dynamically defined speed.
Go to main card-mod thread → 1st post → link at the bottom titled “fantastic” → picture-elements

3

Thank you. I really like my idea of gif animations to change with different speed of the fan, so I will try with template sensor.

4

+1 for card-mod. I have exactly what you’re looking to do set up for a lot of air filters and AC units on my Home Assistant page.

Below is an example for my Main Air Filter. I have the code looking for the fan speed number, which is a different entity, and also making sure the device itself is on

card_mod:
  style: |-
    ha-state-icon {
      {{'animation:spin 2s linear infinite' if is_state('number.main_air_filter_fan_speed_level','1') if is_state('fan.main_air_filter','on')}}
      {{'animation:spin 1s linear infinite' if is_state('number.main_air_filter_fan_speed_level','2') if is_state('fan.main_air_filter','on')}}
      {{'animation:spin 0.66s linear infinite' if is_state('number.main_air_filter_fan_speed_level','3') if is_state('fan.main_air_filter','on')}}
      {{'animation:spin 0.33s linear infinite' if is_state('number.main_air_filter_fan_speed_level','4') if is_state('fan.main_air_filter','on')}}
    }

I have applied this in a Mushroom Template Card because you can just do so much in those cards. Once you’ve done the things you want within the UI, pop into YAML mode and you can place something like this right at the bottom.

5

A bit shorter and more maintainable, no ? )))

    ha-state-icon {
      {% if is_state('fan.main_air_filter','on') -%}
        {%- set mapper = {'1':'2', '2':'1', '3':'0.66', '4':'0.33'} -%}
        {%- set LEVEL =  states('number.main_air_filter_fan_speed_level') -%}
        {%- set SPEED = mapper[LEVEL] if LEVEL in mapper else 'unknown' -%}
        animation: spin {{SPEED|float(default = 0)}}s linear infinite;
      {%- endif %}
    }
1 Like
6

Of course, if these gifs are nicer this would be a better way.
Suggest you to post a gif of ready solution to inspire other people.

7

I don’t doubt it in the slightest …In fact, I’m likely to implement this and try it! Thank you :raised_hands:

I don’t code on a regular basis. The odd dabble here and there for hobby projects, but barely remember most of the syntax of the languages; but the logical flow and general formatting persists. Home Assistant is that hobby again for me. I’ve focusing on Jinja2 for templating and what you have there, but CSS is a new ballpark for me :sweat_smile:. The code I have is put together based on similar examples sourced from forum posts. Given the general understanding of code (lists, dictionaries, etc), I can “read” what you’ve written, but wouldn’t be able to write that myself from scratch.

8

Anyway, you are trying at least)

9

Thank you. And again, thank you for that piece of code. I agree its much more eloquent and easier to maintain.

Cheers :beers:

Edit: however, looking back, its still mostly Jinja…sooo…I have no excuse lol; I’m 1.5 months into it and improving with each week. Thanks again.

Edit2: looking at your code, I’ve learned some good logical flow for more eloquent coding, and that I need to be using whitespace trimming in all my Jinja code more often for good practice.

10

You mean “{%-” & “-%}” ?
Yes, this is better imho.

1 Like