Содержание
Streamline Card — это мощный инструмент для Home Assistant, который позволяет создавать шаблоны карточек Lovelace. Он решает главную проблему создания дашбордов: бесконечное копирование одних и тех же конфигураций YAML (Copy-Paste) при добавлении однотипных устройств.
По сути, это современная и активно поддерживаемая альтернатива популярной, но заброшенной decluttering-card. Если у вас есть 10 одинаковых карточек света или климата, Streamline Card позволяет описать логику один раз, а затем переиспользовать её, меняя только сущности и иконки.
Ключевые возможности
- DRY (Don’t Repeat Yourself): Создайте шаблон один раз и используйте его везде. Изменение шаблона автоматически обновит все карточки.
- Переменные: Использование плейсхолдеров (например,
[[entity]]) для подстановки данных. - JavaScript логика: Поддержка JS-выражений для динамического изменения стилей и параметров карточки.
- Гибкость хранения: Шаблоны можно хранить как прямо в конфигурации дашборда, так и в отдельных YAML-файлах.
Установка
Рекомендуемый способ установки — через HACS:
- Откройте HACS -> Frontend.
- Нажмите «Explore & Download Repositories» и найдите
Streamline Card. - Нажмите «Download».
- После установки обновите страницу браузера (очистите кэш при необходимости).
Настройка и архитектура
Работа с картой состоит из двух этапов: создание шаблона и использование шаблона.
1. Создание шаблонов (Templates)
Шаблон — это «чертеж» вашей карточки. В нем вы описываете структуру и указываете, какие параметры будут переменными.
Существует два способа хранения шаблонов:
Способ А: Внутри конфигурации дашборда (Raw Editor)
Подходит для быстрых тестов. Добавьте код в самом верху вашего YAML-конфига дашборда:
|
1 2 3 4 5 6 7 8 9 10 |
streamline_templates: my_light_template: # Имя шаблона default: # Значения по умолчанию (необязательно) - icon: mdi:lightbulb card: # Конфигурация карточки type: custom:button-card entity: "[[entity]]" name: "[[name]]" icon: "[[icon]]" |
Способ Б: В отдельном файле (Рекомендуется)
Для чистоты конфигурации лучше вынести шаблоны в отдельные файлы. Streamline Card автоматически ищет файл streamline_templates.yaml в папке плагина.
Наиболее удобный путь для создания файла:
/config/www/community/streamline-card/streamline_templates.yaml
2. Использование переменных
Переменные в шаблоне оборачиваются в двойные квадратные скобки.
[[variable_name]]— базовая переменная.- Если переменная стоит одна в строке, её нужно взять в кавычки:
'[[variable_name]]'.
Продвинутые функции: JavaScript
Одна из киллер-фич Streamline Card — возможность использовать JavaScript для вычисления значений «на лету». Для этого к названию любого параметра нужно добавить суффикс _javascript.
Доступные объекты в JS: user, states, variables, areas.
Пример динамического изменения цвета в зависимости от температуры:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
weather_template: card: type: custom:bubble-card entity: "[[weather_entity]]" # JS для CSS стилей styles_javascript: | const temp = states['[[weather_entity]]'].attributes.temperature; return ` .bubble-button-card-container { background-color: ${ temp < 0 ? 'var(--info-color)' : temp > 30 ? 'var(--error-color)' : 'var(--primary-color)' }; } `; |
Примеры использования
Пример 1: Простая карточка света
Шаблон:
|
1 2 3 4 5 6 7 8 9 10 |
streamline_templates: simple_light: default: - icon: mdi:ceiling-light card: type: tile entity: "[[entity]]" icon: "[[icon]]" name: "[[name]]" |
Использование в Lovelace:
|
1 2 3 4 5 6 7 |
- type: custom:streamline-card template: simple_light variables: - entity: light.kitchen - name: Кухня # icon берется из default, если не указан |
Пример 2: Сетка (Grid) с генерацией через JS
Вы можете даже генерировать список карточек программно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
streamline_templates: auto_grid: card: type: grid columns: 3 # Генерируем карточки для всех включенных светильников cards_javascript: | const entities = states['sensor.lights_on'].attributes.entity_id || []; return entities.map(entity => ({ type: 'tile', entity: entity })); |
Рекомендации и Troubleshooting
- Кэш: Если после добавления карты она не отображается или пишет «Custom element doesn’t exist», обязательно очистите кэш браузера.
- Версии файлов: При использовании внешнего файла
streamline_templates.yaml, карте может потребоваться перезагрузка страницы для подтягивания изменений. - Отладка JS: Если JS-код не работает, проверяйте консоль браузера (F12). Ошибки синтаксиса будут отображены там.
