🏡 Зачем нужны иконки в Home Assistant?

Информативные компактные иконки позволяют быстро оценивать состояние устройств, сокращая визуальную нагрузку и улучшая UX интерфейса умного дома. Мы покажем, как их настроить в Home Assistant с помощью YAML и button-card, применяя шаблоны, цветовые кодировки и анимации.

📁 Что понадобится для настройки?

• Платформа: Home Assistant (Lovelace UI)
• Компонент: custom:button-card
• Язык конфигурации: YAML
• Цель: Минимум визуального шума, максимум информативности

📌 Этап 1: Определение задач и статусов

Каждая иконка показывает конкретную информацию: температуру, уровень CO2, освещение, режим работы и т.п.
Например, значок CO2-датчика у нас меняет фон в зависимости от уровня газа: зелёный — нормально, красный — тревога. Также отображается точное значение ppm.

✍️ Этап 2: Шаблоны и логика отображения

Шаблоны позволяют переиспользовать стили и логику. Мы создали структуру:

template:
  - base_icon
  - dynamic_color

• base_icon — размеры, тень, отступы, оформление
• dynamic_color — логика изменения цвета и текста по состоянию

Также мы использовали переменные внутри шаблонов, чтобы иконки адаптировались под состояние устройства (например, изменение цвета, отображение температуры).

🎨 Этап 3: Цветовая кодировка по состояниям

Мы также задействовали цвет текста и иконки в зависимости от порогов датчика CO2.

📱 Этап 4: Компактность и мобильная адаптация

styles:
  card:
    - width: 70px
    - height: 70px
    - font-size: 12px
    - padding: 4px

Иконки хорошо читаются как на десктопе, так и на мобильных устройствах. Подписи были отключены там, где значение уже присутствует визуально.

⚙️ Этап 5: Анимации и динамика

• При тревоге — мигание иконки через CSS
• Hover-эффекты при наведении (scale, shadow)
• Автоматическая смена цвета фона по состоянию

Все эффекты реализованы через параметр styles: и ключи CSS-анимации.

🧪 Этап 6: Тестирование

• Проверка значений через Developer Tools → Template
• Тестирование визуального поведения при переключении режимов и пороговых значений

❗ Частые ошибки и как их избежать

• ❌ Прямые цвета без логики — теряется информативность
• ❌ Мелкий шрифт на мобильных — плохая читаемость
• ❌ Нет шаблонов — дублирование кода и сложная поддержка

✅ Финальный чек-лист