Конфигурация изображений в ESPHome

Система изображений в ESPHome позволяет использовать графические элементы для создания богатого пользовательского интерфейса. Рассмотрим структуру и применение различных типов изображений.

В этом проекте используется отдельный файл image.yaml, который подключается в main.yaml

Структура конфигурации изображения

Базовый формат

- file: 'img/weather/sunny.png'
  id: sunny_img
  type: rgb565
  resize: 100x100
  transparency: alpha_channel

Параметры конфигурации

file

Назначение: Путь к файлу изображения

• Поддерживаемые форматы: .png, .jpg, .bmp
• Путь относительно корня проекта ESPHome
• Рекомендуется PNG для изображений с прозрачностью

id

Назначение: Уникальный идентификатор изображения

• Используется для ссылки в LVGL виджетах
• Формат: название_категории_img
• Пример: sunny_img, battery_high_img

type

Назначение: Формат хранения изображения в памяти

• rgb565 — 16-битный цвет (рекомендуется)
• rgb — 24-битный цвет (не поддерживается устройством)
• grayscale — полная шкала оттенков серого цвета
• binary — монохромные изображения

resize

Назначение: Изменение размера изображения

• Формат: ширина x высота
• Выполняется при компиляции
• Экономит память и процессорное время

transparency

Назначение: Обработка прозрачности

• alpha_channel — использовать альфа-канал PNG
• Отсутствие параметра — без прозрачности

Категории изображений

1. Логотипы и брендинг

#############################
########### LOGO ############
#############################

- file: 'img/loading/homeassistant.png'
  id: ha_img
  type: rgb565
  resize: 400x82
  transparency: alpha_channel

- file: 'img/loading/esphome.png'
  id: esphome_img
  type: rgb565
  resize: 320x95
  transparency: alpha_channel

Применение: Экраны загрузки, заставки, брендинг

• Home Assistant: 400×82 пикселя
• ESPHome: 320×95 пикселей
• Используются при запуске системы

2. Освещение

#############################
########## LIGHT ############
#############################

- file: 'img/light/lightbulb.png'
  id: lightbulb_image
  type: rgb565
  transparency: alpha_channel

- file: 'img/light/rgb_ring.png'
  id: rgb_img
  type: rgb565
  transparency: alpha_channel

Применение: Интерфейс управления освещением

• Лампочка: Основная иконка освещения
• RGB кольцо: Цветовой селектор для RGB ламп
• Без изменения размера (оригинальный размер)

3. Робот-пылесос

#############################
########## VACUUM ###########
#############################

Набор анимационных кадров: 17 изображений для анимации пылесоса

• Размер: 200×200 пикселей (стандартизированный)
• Углы поворота: 0°, 5°, 10°, 15°, 20°, 340°, 345°, 350°, 355°
• Дополнительные позиции с наклоном: 0_10, 0_20, 0_30, 20_10, 20_20, 20_30, 340_10, 340_20, 340_30

Логика анимации

Изображение	Угол	Описание
vacuum_img	Базовое	Статичное положение
vacuum_0_img	0°	Движение вперед
vacuum_5_img	5°	Поворот на 5°
vacuum_10_img	10°	Поворот на 10°
vacuum_15_img	15°	Поворот на 15°
vacuum_20_img	20°	Поворот на 20°
vacuum_340_img	340°	Поворот назад на 20°
vacuum_345_img	345°	Поворот назад на 15°
vacuum_350_img	350°	Поворот назад на 10°
vacuum_355_img	355°	Поворот назад на 5°

Применение: Создание плавной анимации движения пылесоса

4. Погода

#############################
########## WEATHER ##########
#############################

Полный набор погодных условий: 15 изображений

• Размер: 100×100 пикселей (оптимальный для виджетов)
• Покрывает все основные погодные состояния

Дневные условия

ID	Файл	Описание
sunny_img	sunny.png	Ясно, солнечно
partlycloudy_sun_img	partlycloudy_sun.png	Переменная облачность (день)
cloudy_img	cloudy.png	Облачно

Ночные условия

ID	Файл	Описание
clear_night_img	clear_night.png	Ясная ночь
partlycloudy_moon_img	partlycloudy_moon.png	Переменная облачность (ночь)

Осадки

ID	Файл	Описание
rainy_img	rainy.png	Дождь
pouring_img	pouring.png	Ливень
snowy_img	snowy.png	Снег
snowy_rainy_img	snowy_rainy.png	Дождь со снегом
hail_img	hail.png	Град

Особые условия

ID	Файл	Описание
fog_img	fog.png	Туман
lightning_img	lightning.png	Гроза
lightning_rainy_img	lightning_rainy.png	Гроза с дождем
windy_img	windy.png	Ветрено
windy_variant_img	windy_variant.png	Сильный ветер

5. Флаги стран

#############################
########## FLAGS ############
#############################

Локализация интерфейса: 18 флагов стран

• Размер: 60×80 пикселей (соотношение 3:4)
• Стандартизированный размер для селектора языка

Поддерживаемые страны

Код	Страна	ID
de	Германия	flags_de_img
es	Испания	flags_es_img
fr	Франция	flags_fr_img
gb	Великобритания	flags_gb_img
it	Италия	flags_it_img
kr	Южная Корея	flags_kr_img
pt	Португалия	flags_pt_img
ru	Россия	flags_ru_img
us	США	flags_us_img
pl	Польша	flags_pl_img
tr	Турция	flags_tr_img
sv	Швеция	flags_sv_img
id	Индонезия	flags_id_img
vi	Вьетнам	flags_vi_img
ro	Румыния	flags_ro_img
nl	Нидерланды	flags_nl_img
hu	Венгрия	flags_hu_img
cs	Чехия	flags_cs_img
fi	Финляндия	flags_fi_img

6. Индикаторы батареи

#############################
########## BATTERY ##########
#############################

Два набора индикаторов:

Для состояния заряда батареи

ID	Уровень	Описание
battery_very_high_img	90-100%	Очень высокий
battery_high_img	70-89%	Высокий
battery_middle_img	40-69%	Средний
battery_low_img	20-39%	Низкий
battery_very_low_img	5-19%	Очень низкий
battery_empty_img	0-4%	Разряжена

Для анимации заряда батареи

ID	Уровень	Применение
battery_80_img	80%	Почти полная
battery_60_img	60%	Более половины
battery_40_img	40%	Меньше половины
battery_20_img	20%	Требует зарядки
battery_0_img	0%	Разряжена

Оптимизация памяти

Размеры изображений

Категория	Размер	Память (примерно)	Применение
Флаги	60×80	9.6 КБ	Селектор языка
Погода	100×100	20 КБ	Виджеты погоды
Пылесос	200×200	80 КБ	Анимация
Логотипы	400×82	65.6 КБ	Заставки

Практическое использование

В LVGL виджетах

# Статическое изображение
- img:
    src: sunny_img
    align: center

# Анимация
- animimg:
    src: [ 
      battery_0_img,
      battery_20_img,
      battery_40_img,
      battery_60_img,
      battery_80_img,
      battery_very_high_img,
    ]

Заключение

Правильно организованная система изображений обеспечивает:

• Визуальную привлекательность — красивый и современный интерфейс
• Интуитивность — понятные пользователю визуальные элементы
• Производительность — оптимизированное использование памяти
• Масштабируемость — легкость добавления новых элементов

Используйте предложенную структуру как основу и адаптируйте под свои потребности, сохраняя принципы организации и оптимизации.