Кастомизация Home Assistant: 15 000 строк YAML и CSS
Полный гайд по кастомизации Home Assistant: более 15 000 строк YAML и CSS, практические примеры, продвинутые техники и советы по оптимизации умного дома.
Основы YAML в Home Assistant
YAML используется для настройки автоматизаций, сценариев и интеграции компонентов. Простой пример автоматизации включает триггер, условие и действие.
- alias: "Включить свет на кухне при движении"
trigger:
- platform: motion
entity_id: binary_sensor.kitchen_motion
action:
- service: light.turn_on
entity_id: light.kitchen_light
data:
brightness: 255
color: "#ffcc00"Основы CSS для кастомизации интерфейса
CSS позволяет изменять внешний вид интерфейса Home Assistant. Можно изменять цвета, добавлять анимации и создавать уникальные стили для элементов.
/* Изменение фона заголовков */
.card-header {
background-color: #1e3a5f !important;
}
/* Анимация для состояния устройства */
.entity[state="on"] .state {
animation: pulse 2s infinite;
}Создание собственных компонентов
Для нестандартных устройств можно создавать собственные компоненты на Python, которые интегрируются в систему Home Assistant.
class MySensor(Entity):
def __init__(self, name):
self._name = name
self._state = None
@property
def name(self):
return self._name
@property
def state(self):
return self._state
def update(self):
# Здесь логика получения данных
self._state = 25.0Сложные автоматизации с условиями
Автоматизации могут включать множественные условия и действия, а также использовать шаблоны для динамического поведения.
- alias: "Умное управление отоплением"
trigger:
- platform: state
entity_id: sensor.outside_temperature
- platform: time
at: "06:00:00"
condition:
- condition: state
entity_id: input_boolean.occupancy_mode
state: "home"
action:
- service: climate.set_temperature
data:
temperature: >
{% if states('sensor.outside_temperature') | float < 10 %}
23
{% elif states('sensor.outside_temperature') | float < 15 %}
21
{% else %}
20
{% endif %}Многошаговые сценарии
Сценарии позволяют создавать сложные процессы с последовательными действиями и задержками между ними.
- alias: "Процесс пробуждения дома"
sequence:
- service: light.turn_on
data:
entity_id: group.bedroom_lights
brightness_pct: 10
- delay:
minutes: 5
- service: light.turn_on
data:
entity_id: group.bedroom_lights
brightness_pct: 50
transition: 300Кастомизация интерфейса с CSS
С помощью CSS можно кардинально изменить внешний вид дашбордов, добавляя скругления, тени и другие элементы дизайна.
/* Карточки с тенью и скруглёнными углами */
.card {
border-radius: 12px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
border: none !important;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.95) !important;
}Создание тем
CSS позволяет создавать светлые и тёмные темы, а также переключаться между ними в зависимости от времени суток или предпочтений пользователя.
/* Тёмная тема */
body:has(.theme-dark) {
--primary-color: #3f51b5;
--secondary-color: #ff4081;
--background-color: #121212;
--card-background-color: #1e1e1e;
--text-primary-color: #ffffff;
}Анимации в интерфейсе
CSS-анимации могут оживлять интерфейс, показывая состояние устройств или процесс загрузки данных.
@keyframes pulse-green {
0% {
text-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
text-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
text-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}Структура каталогов для больших конфигураций
При большом количестве кода важно правильно организовать структуру каталогов для удобства поддержки и модификации.
/home_assistant/
├── config/
│ ├── automations/
│ ├── scenes/
│ ├── scripts/
│ ├── sensors/
│ ├── ui-lovelace/
│ └── packages/
├── custom_components/
├── www/
└── scripts/Версионирование конфигураций
Использование Git для контроля версий позволяет отслеживать изменения, возвращаться к предыдущим версиям и работать в команде.
# Инициализация репозитория
git init
# Добавление файлов
git add .
# Первое коммитирование
git commit -m "Initial commit: Base configuration"
# Создание веток для разработки
git checkout -b feature/climate_automationОптимизация производительности
Для поддержания производительности системы при больших конфигурациях необходимо оптимизировать YAML и CSS код, а также регулярно очищать неиспользуемые автоматизации.
# Пример оптимизированной автоматизации
- alias: "Энергосбережение при отсутствии"
trigger:
- platform: state
entity_id: group.all_devices
to: "not_home"
for:
minutes: 5
action:
- service: script.turn_on
target:
entity_id: script.energy_saving_modeЧто можно сделать с 15 000 строк YAML/CSS в Home Assistant
Введение
Home Assistant завоевал популярность в сообществе домашних серверов благодаря открытости, гибкости и возможности полной кастомизации. Эта система позволяет превратить обычное жильё в умный дом, где всё работает согласно вашим правилам. Ключ к такой кастомизации — YAML для логики и CSS для интерфейса. Когда конфигурация достигает 15 000 строк, вы уже не просто настраиваете устройство, а создаёте сложную экосистему с уникальным поведением и внешним видом. Давайте разберёмся, что возможно на таком уровне кастомизации.
Основы кастомизации в Home Assistant
YAML основы
YAML (YAML Ain't Markup Language) — основа для настройки автоматизаций, сценариев и интеграции компонентов в Home Assistant. Базовый синтаксис прост:
- alias: "Включить свет на кухне при движении"
trigger:
- platform: motion
entity_id: binary_sensor.kitchen_motion
action:
- service: light.turn_on
entity_id: light.kitchen_light
data:
brightness: 255
color: "#ffcc00"
CSS основы
CSS (Cascading Style Sheets) позволяет изменять внешний интерфейса Home Assistant. Основные элементы:
/* Изменение фона заголовков */
.card-header {
background-color: #1e3a5f !important;
}
/* Анимация для состояния устройства */
.entity[state="on"] .state {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
Примеры продвинутой кастомизации с YAML
Компоненты
Создание собственных компонентов для нестандартных устройств:
# custom_components/my_sensor/__init__.py
from homeassistant.const import TEMP_CELSIUS
from homeassistant.helpers.entity import Entity
class MySensor(Entity):
def __init__(self, name):
self._name = name
self._state = None
@property
def name(self):
return self._name
@property
def state(self):
return self._state
def update(self):
# Здесь логика получения данных
self._state = 25.0
@property
def unit_of_measurement(self):
return TEMP_CELSIUS
Автоматизации
Сложные сценарии с множественными условиями и действиями:
- alias: "Умное управление отоплением"
trigger:
- platform: state
entity_id: sensor.outside_temperature
- platform: time
at: "06:00:00"
condition:
- condition: state
entity_id: input_boolean.occupancy_mode
state: "home"
- condition: numeric_state
entity_id: sensor.outside_temperature
below: 15
action:
- service: climate.set_temperature
target:
entity_id: climate.living_room
data:
temperature: >
{% if states('sensor.outside_temperature') | float < 10 %}
23
{% elif states('sensor.outside_temperature') | float < 15 %}
21
{% else %}
20
{% endif %}
- service: notify.mobile_app_iphone
data:
title: "Изменение температуры"
message: "Температура в гостиной установлена на {{ states('climate.living_room') | attr('attributes') | attr('temperature') }}°C"
Сценарии
Многошаговые процессы с сохранением контекста:
- alias: "Процесс пробуждения дома"
sequence:
- service: light.turn_on
data:
entity_id: group.bedroom_lights
brightness_pct: 10
- delay:
minutes: 5
- service: light.turn_on
data:
entity_id: group.bedroom_lights
brightness_pct: 50
transition: 300
- service: media_player.play_media
data:
entity_id: media_player.bedroom_speaker
media_content_type: "playlist"
media_content_id: "morning"
- service: notify.mobile_app_iphone
data:
title: "Доброе утро!"
message: "Ваш дом готов к новому дню"
Примеры продвинутой кастомизации с CSS
Интерфейс
Создание уникального вида для дашбордов:
/* Карточки с тенью и скруглёнными углами */
.card {
border-radius: 12px !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
border: none !important;
margin-bottom: 16px;
background: rgba(255, 255, 255, 0.95) !important;
}
/* Стили для кнопок */
.button-mycustom {
background-color: #4285f4;
color: white;
padding: 8px 16px;
border-radius: 4px;
border: none;
transition: all 0.3s ease;
}
.button-mycustom:hover {
background-color: #3367d6;
transform: translateY(-2px);
}
/* Адаптивная сетка */
@media (max-width: 768px) {
.card {
width: calc(100% - 32px) !important;
margin: 0 auto 16px !important;
}
}
Темы
Создание тёмной/светлой темы с переключением:
/* Тёмная тема */
body:has(.theme-dark) {
--primary-color: #3f51b5;
--secondary-color: #ff4081;
--background-color: #121212;
--card-background-color: #1e1e1e;
--text-primary-color: #ffffff;
--text-secondary-color: #b0b0b0;
}
/* Светлая тема */
body:has(.theme-light) {
--primary-color: #2196f3;
--secondary-color: #ff5722;
--background-color: #f5f5f5;
--card-background-color: #ffffff;
--text-primary-color: #212121;
--text-secondary-color: #757575;
}
Анимации
Создание динамичных элементов интерфейса:
/* Анимация пульсации для активных устройств */
.entity.active .state {
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
text-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
text-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
text-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
/* Анимация загрузки данных */
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { left: -100%; }
100% { left: 100%; }
}
Проекты с 15 000+ строк кода
Реальные примеры таких конфигураций включают:
-
Умный дом с голосовым управлением
- 3 500 строк YAML для автоматизаций
- 2 000 строк для сценариев
- 4 000 строк CSS для адаптивного интерфейса
- 5 500 строк для кастомных компонентов и интеграций
-
Система умного земледелия
- Интеграция с датчиками почвы, влажности, температуры
- Автоматический полив с расчётом исходя из прогноза погоды
- Визуализация данных в реальном времени с графиками
- Уведомления о необходимости ухода за растениями
-
Домашняя кинотеатра с управлением голосом и жестами
- Сложные сценарии запуска фильмов с настройкой освещения, температуры
- Интеграция с медиасервером и базой данных фильмов
- Уникальный интерфейс с визуализацией коллекции
Управление большими конфигурациями
Структура каталогов
Рекомендуемая структура:
/home_assistant/
├── config/
│ ├── automations/
│ │ ├── climate.yaml
│ │ ├── lighting.yaml
│ │ ├── security.yaml
│ │ └── system.yaml
│ ├── scenes/
│ │ ├── morning.yaml
│ │ ├── evening.yaml
│ │ └── away.yaml
│ ├── scripts/
│ │ ├── cleanup.yaml
│ │ └── backup.yaml
│ ├── sensors/
│ │ ├── custom_sensors.yaml
│ │ └── template_sensors.yaml
│ ├── ui-lovelace/
│ │ ├── views/
│ │ │ ├── dashboard.yaml
│ │ │ ├── climate.yaml
│ │ │ └── security.yaml
│ │ ├── themes/
│ │ │ ├── dark.yaml
│ │ │ └── light.yaml
│ │ └── custom_cards/
│ └── packages/
│ ├── default.yaml
│ └── production.yaml
├── custom_components/
├── www/
├── scripts/
└── logs/
Версионирование
Использование Git для контроля версий:
# Инициализация репозитория
git init
# Добавление файлов
git add .
# Первое коммитирование
git commit -m "Initial commit: Base configuration"
# Создание веток для разработки
git checkout -b feature/climate_automation
# После внесения изменений
git add .
git commit -m "Added climate automation with weather integration"
# Слияние основной ветки
git checkout main
git merge feature/climate_automation
Инструменты
-
HACS (Home Assistant Community Store)
Управление кастомными компонентами и интеграциями -
Lovelace Genie
Визуальный редактор дашбордов -
YAML-валидаторы
Проверка синтаксиса перед применением -
VS Code с расширением Home Assistant
Автодополнение, проверка ошибок, предпросмотр UI
Производительность и оптимизация
Влияние на производительность
Каждая дополнительная строка YAML/CSS влияет на:
- Время загрузки интерфейса
- Задержки в выполнении автоматизаций
- Использование ресурсов сервера
Оптимизация
-
YAML-оптимизация:
- Использование группировок автоматизаций
- Минимизация условий в триггерах
- Оптимизация шаблонов Jinja
-
CSS-оптимизация:
- Минимизация количества правил
- Использование CSS-переменных
- Отложенная загрузка анимаций
-
Рекомендации:
- Регулярная очистка неиспользуемых автоматизаций
- Использование интеграции для кеширования данных
- Мониторинг ресурсов через системные мониторинг-сервисы
# Пример оптимизированной автоматизации
- alias: "Энергосбережение при отсутствии"
trigger:
- platform: state
entity_id: group.all_devices
to: "not_home"
for:
minutes: 5
action:
- service: script.turn_on
target:
entity_id: script.energy_saving_mode
Заключение
15 000 строк YAML/CSS в Home Assistant — это не просто конфигурация, а создание полноценной экосистемы с уникальным поведением и дизайном. На таком уровне вы можете реализовать практически любую идею: от умного сада до системы управления целым зданием. Ключ к успеху — правильная организация кода, регулярное обслуживание и использование проверенных практик.
Ресурсы для вдохновения
-
Официальная документация
home-assistant.io -
Сообщество
Форумы Reddit r/homeassistant
Русскоязычное сообщество в Telegram -
Примеры конфигураций
GitHub репозитории с открытыми проектами
HACS для поиска компонентов
Главное — начинать с малого, постепенно добавляя функционал и не бояться экспериментировать. Ваш умный дом отражает вашу уникальность, и с Home Assistant вы можете воплотить любую фантазию в жизнь.