Ускоряем создание однотипных карточек в Home Assistant: компонент Streamline Card

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-конфига дашборда:

streamline_templates:
  my_light_template:  # Имя шаблона
    default:          # Значения по умолчанию (необязательно)
      — icon: mdi:lightbulb
    card:             # Конфигурация карточки
      type: custom:button-card
      entity: «[[entity]]»
      name: «[[name]]»
      icon: «[[icon]]»

streamline_templates:

my_light_template: # Имя шаблона

default: # Значения по умолчанию (необязательно)

— icon: mdi:lightbulb

card: # Конфигурация карточки

type: custom:button—card

entity: «[[entity]]»

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.

Пример динамического изменения цвета в зависимости от температуры:

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 &lt; 0 ? ‘var(—info-color)’ : temp &gt; 30 ? ‘var(—error-color)’ :
            ‘var(—primary-color)’
          };
        }
      `;

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: Простая карточка света

Шаблон:

streamline_templates:
  simple_light:
    default:
      — icon: mdi:ceiling-light
    card:
      type: tile
      entity: «[[entity]]»
      icon: «[[icon]]»
      name: «[[name]]»

streamline_templates:

simple_light:

default:

— icon: mdi:ceiling—light

card:

type: tile

entity: «[[entity]]»

icon: «[[icon]]»

Использование в Lovelace:

— type: custom:streamline-card
  template: simple_light
  variables:
    — entity: light.kitchen
    — name: Кухня
    # icon берется из default, если не указан

— type: custom:streamline—card

variables:

— entity: light.kitchen

— name: Кухня

# icon берется из default, если не указан

Пример 2: Сетка (Grid) с генерацией через JS

Вы можете даже генерировать список карточек программно:

streamline_templates:
  auto_grid:
    card:
      type: grid
      columns: 3
      # Генерируем карточки для всех включенных светильников
      cards_javascript: |
        const entities = states[‘sensor.lights_on’].attributes.entity_id || [];
        return entities.map(entity =&gt; ({
          type: ’tile’,
          entity: entity
        }));

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

}));

Ключевые возможности

Установка

Настройка и архитектура

1. Создание шаблонов (Templates)

Способ А: Внутри конфигурации дашборда (Raw Editor)

Способ Б: В отдельном файле (Рекомендуется)

2. Использование переменных

Продвинутые функции: JavaScript

Примеры использования

Пример 1: Простая карточка света

Пример 2: Сетка (Grid) с генерацией через JS

Рекомендации и Troubleshooting