Конфигурация шрифтов в ESPHome

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

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

Структура конфигурации шрифта

Базовая структура

- file: "fonts/Nunito-SemiBold.ttf"
  id: nunito_16
  size: 16
  bpp: 4
  glyphsets:
    - GF_Latin_Core
    - GF_Cyrillic_Core
    - GF_Latin_Vietnamese
  glyphs: "²"
  extras:
    - file: "fonts/Jua-Regular.ttf"
      glyphs: [
        "\U0000C774",
        "\U0000B8E8",
        "\U0000B9C8",        
      ]

Разбор параметров

file

Назначение: Путь к файлу шрифта

• Путь относительно корня проекта ESPHome
• Пример: "fonts/Nunito-SemiBold.ttf"

id

Назначение: Уникальный идентификатор шрифта для использования в LVGL

• Должен быть уникальным в рамках проекта
• Используется для ссылки на шрифт в виджетах
• Пример: nunito_16, icons_24

size

Назначение: Размер шрифта в пикселях

• Влияет на память и качество отображения
• Чем больше размер, тем больше потребление памяти
• Пример: 16, 24, 48

bpp (Bits Per Pixel)

Назначение: Глубина цвета для сглаживания шрифта

• 1 — монохромный (черно-белый)
• 2 — 4 оттенка серого
• 4 — 16 оттенков серого (рекомендуется)
• 8 — 256 оттенков (максимальное качество, больше памяти)

glyphsets

Назначение: Предустановленные наборы символов Google Fonts

• GF_Latin_Core — базовая латиница
• GF_Cyrillic_Core — кириллица
• GF_Latin_Vietnamese — вьетнамские символы
• Экономит память по сравнению с ручным указанием символов

glyphs

Назначение: Дополнительные символы, не входящие в glyphsets

• Строка с символами: "²³°"
• Массив Unicode: ["\U0000C774", "\U0000B8E8"]
• Используется для специальных символов

extras

Назначение: Дополнительные шрифты для конкретных символов

• Позволяет комбинировать разные шрифты
• Полезно для азиатских языков или специальных символов
• Каждый extra имеет свой file и glyphs

ПРИМЕЧАНИЕ

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

Типы шрифтов в проекте

1. Текстовые шрифты (Nunito)

- file: "fonts/Nunito-SemiBold.ttf"
  id: nunito_16
  size: 16
  bpp: 4
  glyphsets:
    - GF_Latin_Core
    - GF_Cyrillic_Core
    - GF_Latin_Vietnamese

Использование: Основной текст интерфейса

• Поддержка латиницы, кириллицы и вьетнамских символов
• Размеры: 16, 18, 20, 30, 32, 36, 48, 64, 72, 84 пикселей
• Полужирное начертание для лучшей читаемости

2. Иконочные шрифты (icons_v2.ttf)

- file: "fonts/icons_v2.ttf"
  id: icons_24
  size: 24
  bpp: 4
  glyphs: [
    "\U0000e900", # brightness
    "\U0000e901", # saturation
    "\U0000e925", # thermostat
  ]

Использование: Пользовательские иконки для умного дома

• Специально созданные иконки для проекта
• Размеры: 24, 28, 32, 36, 38, 48, 72, 90, 300 пикселей
• Unicode коды от \U0000e900 до \U0000e944

Категории иконок:

• Управление: яркость, насыщенность, термостат
• Климат: кондиционер, отопление, вентилятор
• Безопасность: замок, сигнал Wi-Fi
• Медиа: воспроизведение, пауза, громкость
• Освещение: лампочки разных типов
• Жалюзи: 11 позиций от закрытых до открытых

3. Material Design Icons (MDI)

- file: "fonts/materialdesignicons-webfont.ttf"
  id: mdi_icons_24
  size: 24
  bpp: 4
  glyphs: [
    "\U000F068A", # shield home
    "\U000F1828", # shield moon
    "\U000F099D", # shield lock
  ]

Использование: Стандартные иконки Material Design

• Размеры: 24, 28, 40, 52, 68, 72 пикселей
• Unicode коды от \U000F0000
• Используются для системных функций

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

В LVGL виджетах

# Заголовок
- label:
    text: "Температура"
    text_font: nunito_32
    
# Значение
- label:
    text: "23.5°C"
    text_font: nunito_64
    
# Иконка
- label:
    text: "\U0000e939"  # temperature icon
    text_font: icons_48

Заключение

Правильная конфигурация шрифтов критически важна для:

• Производительности — оптимизация памяти
• Качества — сглаживание и читаемость
• Локализации — поддержка разных языков
• Дизайна — единообразие интерфейса

Используйте glyphsets для стандартных символов, добавляйте extras для специальных случаев, и тщательно планируйте размеры шрифтов для оптимального баланса качества и производительности.