Icon color based on fan speed?

Configuration Frontend
1

Is it possible to set the icon color if I’m using ‘custom:multiple-entity-row’ based on the speed of my fan?

This is the code I currently have:

type: entities
entities:
  - entity: fan.emilie_s_office_purifier_fan
    type: custom:multiple-entity-row
    name: Air Purifier
    secondary_info:
      attribute: percentage
      name: Speed
      unit: '%'
    state_color: true
    toggle: true
    show_state: false
    entities:
      - entity: fan.emilie_s_office_purifier_fan
        name: off
        icon: mdi:power-off
        state_color: true
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            percentage: '0'
            entity_id: fan.emilie_s_office_purifier_fan
      - entity: fan.emilie_s_office_purifier_fan
        name: 25%
        icon: mdi:circle-slice-2
        state_color: true
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            percentage: '25'
            entity_id: fan.emilie_s_office_purifier_fan
      - entity: fan.emilie_s_office_purifier_fan
        name: 50%
        icon: mdi:circle-slice-4
        state_color: |-
          {% if is_state('light.ignacio_s_office', 'on') %}
            amber
          {% endif %}
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            percentage: '50'
            entity_id: fan.emilie_s_office_purifier_fan

      - entity: fan.emilie_s_office_purifier_fan
        name: 75%
        icon: mdi:circle-slice-5
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            percentage: '75'
            entity_id: fan.emilie_s_office_purifier_fan
      - entity: fan.emilie_s_office_purifier_fan
        name: 100%
        icon: mdi:circle-slice-8
        tap_action:
          action: call-service
          service: fan.set_percentage
          service_data:
            percentage: '100'
            entity_id: fan.emilie_s_office_purifier_fan

Basically, I want that 25% to be highlighted and the other icons to be grayed out if the speed is 25%

Thanks!

1 Like
2

Have you looked into installed Card-mod from HACS? It will do exactly that. I use it in very similar ways on all sorts of devices.

3

Thanks @CO_4X4 . Could you share an example for how you use it?

4

Here’s one I use for my vacuum power level:

show_name: true
show_icon: true
type: button
tap_action:
  action: more-info
entity: vacuum.roomba_upstairs
name: Fred
show_state: true
hold_action:
  action: none
card_mod:
  style: |
    ha-card {
    --ha-card-background: 
      {% if states('vacuum.roomba_upstairs') == 'cleaning' %}
        #40ff00;
      {% elif states('vacuum.roomba_upstairs') == 'paused' or states('vacuum.roomba_upstairs') == 'returning to dock' %}
        #00bfff;
      {% elif states('vacuum.roomba_upstairs') == 'error' %}
        red;  
      {% else %} 
        #fff;
      {% endif %}
    --paper-item-icon-color: 
      {% if states('sensor.roomba_upstairs_battery_level') | int <= 100 and states('sensor.roomba_upstairs_battery_level') | int >= 75 %}
        forestgreen;
      {% elif states('sensor.roomba_upstairs_battery_level') | int < 75 and states('sensor.roomba_upstairs_battery_level') | int > 30 %}
        orange;
      {% elif states('sensor.roomba_upstairs_battery_level') | int <= 30 %}  
        #ff4000;
      {% else %} 
        #fff;
      {% endif %}
    color: 
      {% if states('vacuum.roomba_upstairs') == 'paused' or states('vacuum.roomba_upstairs') == 'error' %}
        white;
      {% else %}
        #000;
      {% endif %}
    }