Иконки Home Assistant
Экосистема домашней автоматизации Home Assistant использует иконки Material Design.
Например, можно указать чтобы вместо названий табов были иконки. Вот пример как выглядит YAML с очень простой настройкой интерфейса:
Этот YAML с настройками превращается в такой интерфейс в браузере:
Иногда удобно вместо названий табов использовать иконки. Установить иконку можно либо в интерфейсе редактирования, либо поправить YAML файл с настройкой интерфейса — вписать значение в раздел ‘icon’.
После этого вместо текста из ‘title’ будут отображаться иконки:
В Home Assistant названия иконок записываются так: «mdi:cog». Сначала идет префикс «mdi» (Material Design Icons), потом двоеточие, а потом уже название иконки.
Вообще, иконок в Material Design — миллион. Есть официальный сайт https://materialdesignicons.com с помощью которого можно найти нужную иконку. Но этот сайт очень-очень медленный. Мне настолько не нравится как плохо работает этот сайт что я сделал свой собстенный сайт на котором удобно искать иконки для Home Assisttant — https://mdi.bessarabov.com. (подробности про этот проект есть вот на этой странице).
Обратите внимание что бывают разные способы как можно записывать название иконки. Можно встретить ‘mdi-cog’, ‘cog’, ‘mdi:cog’. Для Home Assistant нужно использовать вариант с двоеточием: ‘mdi:cog’.
Источник
Иконки для Home Assistant
Встраиваем шпаргалку по Material Design Icons в web-интерфейс Home Assistant
Продолжаю публикации о настройке и использовании Home Assistant
Home Assistant «из коробки» использует иконки Material Design.
Material Design Icon — по сути символьный шрифт.
Скриншот инструмента «Glyphs» (Глифы) в программе InDesign с выбранным шрифтом Material Design Icons
Из скриншота видно, что иконок огромное количество.
По умолчанию Home Assistant для карточек объектов использует небольшой набор иконок.
Все иконки Material Design можно посмотреть на странице проекта.
Так же на странице проекта есть поиск по тегам.
Выбрав нужную иконку получаем ее название, в приведенном примере — lightbulb
Google — автор данной иконки.
Для ее использования в Home Assistant, в свойстве карточки указываем иконку как mdi:lightbulb (mdi — использовать Material Design Icons)
Либо в текстовом редакторе:
Согласитесь, что каждый раз заходить на страницу Material Design Icons для поиска нужной нам иконки не очень удобно.
При этом я не уверен, что Home Asssistant имеется поддержка всех иконок.
Давайте добавим страницу с иконками в веб-интерфейс Home Assistant
Будем использовать проект с github.
В данном проекте собрано 215 иконок.
Есть два варианта встраивания — легкий и тяжелый:)
Первый вариант
Редактируем конфигурационный configuration.yaml
Перезапускаем Hass, в моем случае так:
Переходим в веб-интерфейс hass и видим, что добавилась новая вкладка MDI Icon Index
При клике на иконке значения копируется в буфер обмена.
Второй вариант
Подразумевает использование вашего web сервера.
В конфигурационном файле виртуального хоста nginx прописываем корневую директорию и location до иконок.
Так же добавим немного безопасности, запретив доступ всем кроме вашей сети или сетей:
Редактируем конфигурационный configuration.yaml:
Перезапускаем home assistant:
В момент написания этого текста пришла мысль — почему не использовать локальный каталог самого hass:)
Третий вариант
На мой взгляд самый правильный.
Создаем директорию в каталоге Home Assistant, которая будет доступна из web-интерфейса hass как /local/
Клонируем репозиторий проекта:
Редактируем конфигурационный файл hass:
Передергиваем сервис hass:
Т.к. данная директория не обрабатывается механизмом аутентификации hass, прикроем ее доступом по IP.
В конфигурационном файле NGINX описываем данную директорию:
Надеюсь, что данный материал кому-нибудь будет полезен:)
Источник
Home assistant иконки датчиков
Index of MDI Icons that are suitable for Home Assistant
This project is based on the preview.html from the MDI webfont hosted here https://materialdesignicons.com/getting-started I have kept all the files from the original webfont and added the following:
- home-assistant-mdi.html: renders the index
- HA_MDI_JSON.xlsx: my tool to create the JSON used by JS in home-assistant-mdi.html
- Updated the readme
The following was tested with HA running in Docker on Ubuntu. I am currently running with no SSL/TLS, so not tested with HTTPS.
Easy Method — use raw.githack.com (now that rawgit is closing down):
Harder Method — clone my GH repo locally
- cd to HL local www folder — typically this is located (or needs to be created) in the same directory as your HA config files
- Clone the repo into the HA local www folder: git clone https://github.com/james-fry/home-assistant-mdi
- Edit your HA configuration.yaml file to add an iframe pointing to local file home-assistant-mdi html:
- Click on the MDI icon on HA panel to open the index
- Browse to find an appropriate icon for your sensor/device/room etc
- Click the icon or mdi:name to copy the icon name (with mdi: prefix) ready to paste into config yaml etc
About
Index of Material Design Icons for Home Assistant
Источник
Picture Elements Card
The Picture Elements card is one of the most versatile types of cards.
The cards allow you to position icons or text and even services on an image based on coordinates. Imagine floor plan, imagine picture-glance with no restrictions!
A functional floorplan powered by picture elements.
Configuration Variables
The URL of an image.
To use a locally hosted image, see Hosting.
“live” will show the live view if stream is enabled.
Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation.
This image is used when the dark mode is activated and no state image is set.
This CSS filter is used when the dark mode is activated.
Elements
Elements are the active components (icons, badges, buttons, text, etc.) that overlay the image.
There are several different element types that can be added to a Picture Elements card:
State Badge
This element creates a badge representing the state of an entity.
Configuration Variables
position: absolute, transform: translate(-50%, -50%)
State badge tooltip. Set to null to hide.
Action taken on card tap. See action documentation.
Action taken on card tap and hold. See action documentation.
Action taken on card double tap. See action documentation.
State Icon
This element represents an entity state using an icon.
Configuration Variables
Icon tooltip. Set to null to hide.
Set to true to have icons colored when entity is active.
Action taken on card tap. See action documentation.
Action taken on card tap and hold. See action documentation.
Action taken on card double tap. See action documentation.
position: absolute, transform: translate(-50%, -50%)
State Label
This element represents an entity’s state via text.
Configuration Variables
If present, the corresponding attribute will be shown, instead of the entity’s state.
Label tooltip. Set to null to hide.
Action taken on card tap. See action documentation.
Action taken on card tap and hold. See action documentation.
Action taken on card double tap. See action documentation.
position: absolute, transform: translate(-50%, -50%)
Service Call Button
This entity creates a button (with arbitrary text) that can be used to call a service.
Configuration Variables
position: absolute, transform: translate(-50%, -50%)
Icon Element
This element creates a static icon that is not linked to the state of an entity.
Configuration Variables
Icon to display (e.g., mdi:home ).
Icon tooltip. Set to null to hide.
Entity to use for more-info/toggle.
Action taken on card tap. See action documentation.
Action taken on card tap and hold. See action documentation.
Action taken on card double tap. See action documentation.
position: absolute, transform: translate(-50%, -50%)
Image Element
This creates an image element that overlays the background image.
Configuration Variables
Entity to use for state_image and state_filter and also target for actions.
Image tooltip. Set to null to hide.
Action taken on card tap. See action documentation.
Action taken on card tap and hold. See action documentation.
Action taken on card double tap. See action documentation.
“live” will show the live view if stream is enabled.
Forces the height of the image to be a ratio of the width. Valid formats: Height percentage value ( 23% ) or ratio expressed with colon or “x” separator ( 16:9 or 16×9 ). For a ratio, the second element can be omitted and will default to “1” ( 1.78 equals 1.78:1 ).
position: absolute, transform: translate(-50%, -50%)
Conditional Element
Much like the Conditional card, this element will let you show its sub-elements based on entity states.
Configuration Variables
List of entity IDs and matching states.
Entity state is equal to this value.*
Entity state is unequal to this value.*
One or more elements of any type to show when conditions are met. See below for an example.
Custom Elements
The process for creating and referencing custom elements is the same as for custom cards. Please see the developer documentation for more information.
Configuration Variables
Card name with custom: prefix (e.g., custom:my-custom-card ).
position: absolute, transform: translate(-50%, -50%)
Options For Exemptions
Configuration Variables
User ID that can see the view tab.
Notes on Element Attributes
How to use the style object
Position and style your elements using CSS. More/other keys are also possible. Note, the default style for most elements includes translate(-50%, -50%), which means that the coordinates you provide will set the position of the center of the element. Use transform: none to disable this behavior.
How to use state_image
Specify a different image to display based on the state of the entity.
How to use state_filter
How to use click-and-hold
If the option hold_action is specified, that action will be performed when the entity is clicked and held for half a second or more.
Источник
Home Assistant, статья 6 (GUI)
Какие есть варианты?
У Home Assistant (далее HA) есть по сути два базовых варианта отображения веб морды
1. Стандартный вид отображения, который включен по умолчанию при установке HA:
2. Новый тестовый вид отображения, который называется «Lovelace UI»:
Я, как и многие другие, рекомендую настраивать сразу второй тип отображения по нескольким причинам:
- Он быстрее чем старый
- Он меньше нагружает процессор для отображения информации
- Нет надобности перезагружать HA каждый раз после правок в файле конфига интерфейса
Создаем файл настроек
Для того, что бы корректно отображался новый интерфейс нужно сделать две вещи:
- Создать в папке с основным конфигом файл ui-lovelace.yaml
- Активировать его в настройках HA
Вообще говоря можно воспользоваться одним из готовых скриптов, которые генерируют вам новый файл с конфигом для ui-lovelace, но я не рекомендую так делать, потому как эти скрипты во-первых довольно старые, во-вторых результат будет непредсказуем, в-третьих ручками будет полезнее для понимания всего процесса. Я приведу пример кусочка своего конфига и после поясню что и зачем мы делаем:
name: OXOTH1Ks home
В этом пункте мы задаем имя нашего дома. В вебе оно не отображается, насколько я понял задается для удобства.
views:
Этим параметром мы начинаем перечислять вкладки, которые будут расположены в заголовке страницы с вебмордой:
title: Дом
Задаем название вкладки, отображается, если навести на нее мышку.
id: main
Техническое имя вкладки, необходимое для отображения и перехода по урл. Необходимо писать латиницей.
icon: mdi:floor-plan
Иконка, которая будет высвечиваться для данной вкладки. Взять название иконки можно например тут.
cards:
После этого пункта мы начинаем перечислять карточки с данными, которые хотим видеть на этой вкладке. Не забываем про пробелы и тире, для разделений карточек.
type: glance
Тип карточки, которую мы будем отображать. Базово в ui-lovelace есть несколько типов таких карточек с множеством объектов.
Тут компоненты идут как иконки с подписями
Тут уже мы видим компоненты как список. Такая карточка занимает больше места, но она и более информативна.
Это основные типы карточек, которые используются чаще всего, но вы вольны добавлять и другие. Полный список можно найти на страничке самого ui-lovelace тут.
title: Кухня
Заголовок карточки, можно писать и на русском. Отображается в веб интерфейсе
entities:
Перечисляем устройства/датчики/переключатели, которые будут отображаться на карточках.
Итак, мы разобрали часть моего конфига, а конкретно первую вкладку и первую карточку которая на ней отображается. Остальные карточки и вкладки делаются по аналогии с этими. Полный мой конфиг вы можете посмотреть в моем гитхаб разделе в файле ui-lovelace.yaml
Устанавливаем ui-lovelace основным графическим интерфейсом
Для этого вам необходимо нажать на крайний правый значок в разделе «Инструменты разработчика», и выбрать пункт «Set lovelace as default page on this device»
После, при заходе на ip вашего HA будет отображаться новый интерфейс. Если вы где-то ошиблись, или что-то сделали не так, не страшно! Просто открываете файл конфига ui-lovelace.yaml, вносите необходимые правки, перезагружаете открытую вебморду и новые настройки подхватываются автоматически! Это очень удобно.
Я дал базовые представления о том, что такое ui-lovelace. Возможностей у него неимоверное множество, и присутствует расширяемость за счет кастомных карточек. Жду ваши пожелания и вопросы в комментариях и в нашей группе.
Источник