Содержание

Динамическая иконка графика в Home Assistant

Назначение

Изменение цвета иконки на карточке графика (sensor card) в зависимости от состояния другого устройства. Например, иконка температуры бассейна становится оранжевой когда включена фильтрация.

Требования

Установка card-mod

  1. Открыть HACS → Frontend
  2. Поиск: card-mod
  3. Установить card-mod
  4. Перезагрузить Home Assistant
  5. Очистить кэш браузера (Ctrl+Shift+R)

Проверка установки

Открыть консоль браузера (F12 → Console) и ввести: 

customElements.get('card-mod')

Если возвращает функцию — card-mod установлен корректно.

Синтаксис

- type: sensor
  entity: sensor.ваш_датчик
  name: Название
  icon: mdi:иконка
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.ваш_переключатель', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.ваш_переключатель', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }

Примеры

Температура бассейна + фильтрация

Иконка оранжевая когда фильтрация включена: 

- type: sensor
  entity: sensor.pool_temperature
  name: Бассейн
  icon: mdi:pool-thermometer
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }

Температура котла + отопление

Иконка красная когда отопление работает: 

- type: sensor
  entity: sensor.boiler_temperature
  name: Котел
  icon: mdi:fire
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
      }

Температура бойлера + насос

Иконка зелёная когда насос работает: 

- type: sensor
  entity: sensor.boiler_water_temperature
  name: Бойлер ГВС
  icon: mdi:thermometer
  graph: line
  detail: 1
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.boiler_pump', 'on') %}lime{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.boiler_pump', 'on') %}lime{% else %}var(--primary-text-color){% endif %} !important;
      }

Доступные цвета

Цвет Значение
Оранжевый orange
Красный red
Зелёный green или lime
Синий blue или dodgerblue
Жёлтый yellow или gold
Фиолетовый purple или violet
Голубой cyan или aqua
Белый white
HEX-код #FF5722
RGB rgb(255, 87, 34)

Множественные условия

Разные цвета для разных состояний: 

card_mod:
  style: |
    :host {
      --paper-item-icon-color: 
        {% if is_state('switch.device', 'on') %}
          orange
        {% elif states('sensor.temperature')|float > 30 %}
          red
        {% else %}
          var(--primary-text-color)
        {% endif %} !important;
    }
    ha-card .header .icon {
      color: 
        {% if is_state('switch.device', 'on') %}
          orange
        {% elif states('sensor.temperature')|float > 30 %}
          red
        {% else %}
          var(--primary-text-color)
        {% endif %} !important;
    }

Полный пример дашборда

views:
  - title: Климат
    path: climate
    icon: mdi:thermometer
    type: masonry
    cards:
      - type: grid
        columns: 2
        square: false
        cards:
          - type: sensor
            entity: sensor.pool_temperature
            name: Бассейн
            icon: mdi:pool-thermometer
            graph: line
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
                }
                ha-card .header .icon {
                  color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
                }
          - type: sensor
            entity: sensor.boiler_temperature
            name: Котел
            icon: mdi:fire
            graph: line
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
                }
                ha-card .header .icon {
                  color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
                }

Устранение неполадок

Иконка не меняет цвет:

Ошибка YAML:

Ссылки