vm:home_assistant:примеры_кодаа:01-динамическая_иконка_графика [FAQ база знаний]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Динамическая иконка графика в Home Assistant ======

===== Назначение =====

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

===== Требования =====

  * Home Assistant
  * HACS (Home Assistant Community Store)
  * card-mod (установить через HACS → Frontend)

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

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

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

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

<code javascript>
customElements.get('card-mod')
</code>

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

===== Синтаксис =====

<code yaml>
- 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;
      }
</code>

===== Примеры =====

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

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

<code yaml>
- 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;
      }
</code>

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

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

<code yaml>
- 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;
      }
</code>

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

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

<code yaml>
- 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;
      }
</code>

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

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

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

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

<code yaml>
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;
    }
</code>

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

<code yaml>
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;
                }
</code>

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

**Иконка не меняет цвет:**
  * Очистить кэш браузера (Ctrl+Shift+R)
  * Проверить что card-mod установлен
  * Проверить правильность entity_id переключателя
  * Убедиться что ''!important'' присутствует в стилях

**Ошибка YAML:**
  * Проверить отступы (2 пробела)
  * Символ ''|'' после ''style:'' обязателен
  * Кавычки в Jinja2 шаблонах должны быть одинарными

===== Ссылки =====

  * [[https://github.com/thomasloven/lovelace-card-mod|card-mod GitHub]]
  * [[https://www.home-assistant.io/docs/configuration/templating/|Home Assistant Templating]]