Home Assistant, статья 6 (GUI)

29 сентября 2018, 21:47

Какие есть варианты?

У Home Assistant (далее HA) есть по сути два базовых варианта отображения веб морды

1. Стандартный вид отображения, который включен по умолчанию при установке HA:

2. Новый тестовый вид отображения, который называется "Lovelace UI":

Я, как и многие другие, рекомендую настраивать сразу второй тип отображения по нескольким причинам:

  • Он быстрее чем старый
  • Он меньше нагружает процессор для отображения информации
  • Нет надобности перезагружать HA каждый раз после правок в файле конфига интерфейса
Давайте разберемся, что для этого нужно.

Создаем файл настроек

Для того, что бы корректно отображался новый интерфейс нужно сделать две вещи:

  • Создать в папке с основным конфигом файл ui-lovelace.yaml
  • Активировать его в настройках HA
Идем в папку, где хранятся настройки HA и создаем новый файл:

cd /home/homeassistant/.homeassistant/
sudo nano ui-lovelace.yaml

Вообще говоря можно воспользоваться одним из готовых скриптов, которые генерируют вам новый файл с конфигом для ui-lovelace, но я не рекомендую так делать, потому как эти скрипты во-первых довольно старые, во-вторых результат будет непредсказуем, в-третьих ручками будет полезнее для понимания всего процесса. Я приведу пример кусочка своего конфига и после поясню что и зачем мы делаем: 

name: OXOTH1Ks home 
views:
- title: Дом
  id: main
  icon: mdi:floor-plan
  cards:
  - type: glance
    title: Кухня
    entities:
    - light.gateway_light_286c07f1c549
    - binary_sensor.__motion
    - sensor.illumination_286c07f1c549
    - switch._
    - climate.ariston
  - type: glance
    title: Ванная
    entities:
    - light.bathroom
    - binary_sensor.motion_sensor_158d0001b177e8
  - type: weather-forecast
    entity: weather.openweathermap
- title: Сервер HA
  id: server
  icon: mdi:desktop-tower
  cards:
  - type: entities
    title: Ubuntu Server
    show_header_toggle: true
    entities:
    - sensor.cpu_temperature
    - sensor.processor_use
    - sensor.memory_use_percent
    - sensor.disk_use_percent_home
    - sensor.disk_use_percent_homeubuntutm
    - sensor.since_last_boot
  - type: entities
    title: Состояние батарей датчиков
    entities:
    - sensor.door_sensor_battery_158d0001a9c200
    - sensor.motion_sensor_battery_158d0001b177e8
    - sensor.temperature_sensor_battery_158d00023764a1
    - sensor.button_sensor_battery_158d0001aaab2d
- title: Камеры
  id: cameras
  icon: mdi:cctv
  cards:
  - type: horizontal-stack
    cards:
    - type: picture-entity
      entity: camera.door
      camera_image: camera.door
      show_info: true
      tap_action: dialog
    - type: picture-entity
      entity: camera.kitchen
      camera_image: camera.kitchen
      show_info: true
      tap_action: dialog

name: OXOTH1Ks home

В этом пункте мы задаем имя нашего дома. В вебе оно не отображается, насколько я понял задается для удобства.

views: 

Этим параметром мы начинаем перечислять вкладки, которые будут расположены в заголовке страницы с вебмордой:

title: Дом

Задаем название вкладки, отображается, если навести на нее мышку.

id: main

Техническое имя вкладки, необходимое для отображения и перехода по урл. Необходимо писать латиницей.

icon: mdi:floor-plan

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

cards:

После этого пункта мы начинаем перечислять карточки с данными, которые хотим видеть на этой вкладке. Не забываем про пробелы и тире, для разделений карточек.

type: glance

Тип карточки, которую мы будем отображать. Базово в ui-lovelace есть несколько типов таких карточек с множеством объектов.

glance:

Тут компоненты идут как иконки с подписями

entities:

Тут уже мы видим компоненты как список. Такая карточка занимает больше места, но она и более информативна. 

Это основные типы карточек, которые используются чаще всего, но вы вольны добавлять и другие. Полный список можно найти на страничке самого ui-lovelace тут.

title: Кухня

Заголовок карточки, можно писать и на русском. Отображается в веб интерфейсе

entities:

Перечисляем устройства/датчики/переключатели, которые будут отображаться на карточках. 

Итак, мы разобрали часть моего конфига, а конкретно первую вкладку и первую карточку которая на ней отображается. Остальные карточки и вкладки делаются по аналогии с этими. Полный мой конфиг вы можете посмотреть в моем гитхаб разделе в файле ui-lovelace.yaml

Устанавливаем ui-lovelace основным графическим интерфейсом

Для этого вам необходимо нажать на крайний правый значок в разделе "Инструменты разработчика", и выбрать пункт "Set lovelace as default page on this device"

После, при заходе на ip вашего HA будет отображаться новый интерфейс. Если вы где-то ошиблись, или что-то сделали не так, не страшно! Просто открываете файл конфига ui-lovelace.yaml, вносите необходимые правки, перезагружаете открытую вебморду и новые настройки подхватываются автоматически! Это очень удобно.

Я дал базовые представления о том, что такое ui-lovelace. Возможностей у него неимоверное множество, и присутствует расширяемость за счет кастомных карточек. Жду ваши пожелания и вопросы в комментариях и в нашей группе.


Все новости мира умных домов - t.me/SprutAI_News

Остались вопросы? Мы в Telegram - t.me/soprut

Хочешь умный дом но нет времени разбираться?
Посмотри примеры работ и выбери себе интегратора.
  1. Олег Челбаев (sprut)

    Ты как всегда великолепен ;)

  2. Юрий Сапунов (Mobibet)

    Отличная статья, спасибо за труды!

  3. . . (Bonefolder)
    . . (Bonefolder) год назад

    всё. Уговорил)) Пощупаю, как появится время

  4. Евгений Лузин (EvLuz)

    Молодца, статьи очень интересно написаны и доходчивым языком

  5. Control SkyNet (dimiam)
    Control SkyNet (dimiam) год назад

    Спасибо! Теперь расскажи, как получить удаленный доступ к GUI и получится отличный цикл :)

  6. Александр Жабунин (OXOTH1K)

    удаленный доступ только через дднс. Это возможно если провайдер даёт вам белый айпи. Статический или динамический.

  7. Артем Симоненко (TopGun)
    Артем Симоненко (TopGun) отредактировано 11 месяцев назад

    А как у вас заряд батарей отдельно отображается? У меня на устройствах xiaomi нет отделного датчика показывающего заряд.

  8. (klishchenkov)
    (klishchenkov) 7 месяцев назад

    А с выходом HA v0.89 что-то изменилось? А то что-то не получается по вашей инструкции - создаю файл, прописываю базовые параметры, сохраняю, на настройках HA нажимаю нужную кнопочку, веб-морда немного меняется, но содержимое файла ui-lovelace.yaml однуляется

    • (KooLru)
      (KooLru) 5 месяцев назад

      lovelace: 

        mode: yaml

      В конфиге надо добавить.

      • (oleh.dutko)
        (oleh.dutko) отредактировано месяц назад
        Комментарий был удален
К списку статей

Похожие статьи

15 ноября 2018, 09:42
Способы автоматизации механических ворот
15 июня 2018, 12:13
Охранная система в гараж на ESP8266 с интеграцией в Apple HomeKit
24 августа 2018, 12:18
Пошаговая установка HomeAssistant
27 августа 2018, 10:14
Интегрируем ХА в HomeKit
20 октября 2018, 22:57
Теоретические основы протокола MQTT и описание того, как он работает и для чего используется
01 ноября 2018, 09:27
Настройка Deconz USB стика ConBee от Dresden Elektronik в Hass.io и некоторые особенности эксплуатации
03 октября 2018, 22:03
Как собрать и настроить Hyperion Ambilight - адаптивную подсветку ТВ.
24 августа 2018, 10:15
Краткий экскурс в настройку Home Assistant
11 мая 2019, 19:57
Как активировать русский язык в Google Assistant для Google Home
14 сентября 2018, 19:34
Изучаем автоматизации в Home Assistant