Кастомизация Home Assistant: 15 000 строк YAML и CSS

Полный гайд по кастомизации Home Assistant: более 15 000 строк YAML и CSS, практические примеры, продвинутые техники и советы по оптимизации умного дома.

Не указано
Алексей Кузнецов
Алексей Кузнецов
Системный администратор26 февраля 2026 г.

Основы 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+ строк кода

Реальные примеры таких конфигураций включают:

  1. Умный дом с голосовым управлением

    • 3 500 строк YAML для автоматизаций
    • 2 000 строк для сценариев
    • 4 000 строк CSS для адаптивного интерфейса
    • 5 500 строк для кастомных компонентов и интеграций
  2. Система умного земледелия

    • Интеграция с датчиками почвы, влажности, температуры
    • Автоматический полив с расчётом исходя из прогноза погоды
    • Визуализация данных в реальном времени с графиками
    • Уведомления о необходимости ухода за растениями
  3. Домашняя кинотеатра с управлением голосом и жестами

    • Сложные сценарии запуска фильмов с настройкой освещения, температуры
    • Интеграция с медиасервером и базой данных фильмов
    • Уникальный интерфейс с визуализацией коллекции

Управление большими конфигурациями

Структура каталогов

Рекомендуемая структура:

/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

Инструменты

  1. HACS (Home Assistant Community Store)
    Управление кастомными компонентами и интеграциями

  2. Lovelace Genie
    Визуальный редактор дашбордов

  3. YAML-валидаторы
    Проверка синтаксиса перед применением

  4. VS Code с расширением Home Assistant
    Автодополнение, проверка ошибок, предпросмотр UI

Производительность и оптимизация

Влияние на производительность

Каждая дополнительная строка YAML/CSS влияет на:

  • Время загрузки интерфейса
  • Задержки в выполнении автоматизаций
  • Использование ресурсов сервера

Оптимизация

  1. YAML-оптимизация:

    • Использование группировок автоматизаций
    • Минимизация условий в триггерах
    • Оптимизация шаблонов Jinja
  2. CSS-оптимизация:

    • Минимизация количества правил
    • Использование CSS-переменных
    • Отложенная загрузка анимаций
  3. Рекомендации:

    • Регулярная очистка неиспользуемых автоматизаций
    • Использование интеграции для кеширования данных
    • Мониторинг ресурсов через системные мониторинг-сервисы
# Пример оптимизированной автоматизации
- 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 — это не просто конфигурация, а создание полноценной экосистемы с уникальным поведением и дизайном. На таком уровне вы можете реализовать практически любую идею: от умного сада до системы управления целым зданием. Ключ к успеху — правильная организация кода, регулярное обслуживание и использование проверенных практик.

Ресурсы для вдохновения

  1. Официальная документация
    home-assistant.io

  2. Сообщество
    Форумы Reddit r/homeassistant
    Русскоязычное сообщество в Telegram

  3. Примеры конфигураций
    GitHub репозитории с открытыми проектами
    HACS для поиска компонентов

Главное — начинать с малого, постепенно добавляя функционал и не бояться экспериментировать. Ваш умный дом отражает вашу уникальность, и с Home Assistant вы можете воплотить любую фантазию в жизнь.

Поделиться:TelegramX / TwitterVK