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».
- После установки обновите страницу браузера (очистите кэш при необходимости).
Настройка и архитектура
Внимание:
Дзен не умеет корректно отображать скрипты. Для сохранения структуры скрипта рекомендуем читать оригинал статьи на сайте:
https://gendom.ru/smart-home/ускоряем-создание-однотипных-карточ/
Работа с картой состоит из двух этапов: создание шаблона и использование шаблона.
1. Создание шаблонов (Templates)
Шаблон — это «чертеж» вашей карточки. В нем вы описываете структуру и указываете, какие параметры будут переменными.
Существует два способа хранения шаблонов:
Способ А: Внутри конфигурации дашборда (Raw Editor)
Подходит для быстрых тестов. Добавьте код в самом верху вашего YAML-конфига дашборда:
Default
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.
Пример динамического изменения цвета в зависимости от температуры:
Default
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: Простая карточка света
Шаблон:
Default
streamline_templates:
simple_light:
default:
- icon: mdi:ceiling-light
card:
type: tile
entity: "[[entity]]"
icon: "[[icon]]"
name: "[[name]]"
Использование в Lovelace:
Default
- type: custom:streamline-card
template: simple_light
variables:
- entity: light.kitchen
- name: Кухня
# icon берется из default, если не указан
Пример 2: Сетка (Grid) с генерацией через JS
Вы можете даже генерировать список карточек программно:
Default
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). Ошибки синтаксиса будут отображены там.