Иконки для Home Assistant

img-0

Встраиваем шпаргалку по Material Design Icons в web-интерфейс Home Assistant

Продолжаю публикации о настройке и использовании Home Assistant

Home Assistant «из коробки»  использует иконки Material Design.
Material Design Icon — по сути символьный шрифт.

img-1
Скриншот инструмента «Glyphs» (Глифы) в программе InDesign с выбранным шрифтом Material Design Icons

Из скриншота видно, что иконок огромное количество.
По умолчанию Home Assistant для карточек объектов использует небольшой набор иконок.

img-2
Иконка по умолчанию

Все иконки Material Design можно посмотреть на странице проекта.
Так же на странице проекта есть поиск по тегам.
img-3Выбрав нужную иконку получаем ее название, в приведенном примере — lightbulb
Google — автор данной иконки.
Для ее использования в Home Assistant, в свойстве карточки указываем иконку как mdi:lightbulb (mdi — использовать Material Design Icons)
img-4

Либо в текстовом редакторе:

type: button
tap_action:
  action: toggle
hold_action:
  action: more-info
show_icon: true
show_name: true
show_state: false
entity: switch.xxxxxxxxxt
icon: 'mdi:lightbulb'

Согласитесь, что каждый раз заходить на страницу Material Design Icons для поиска нужной нам иконки не очень удобно.
При этом я не уверен, что Home Asssistant имеется поддержка всех иконок.

Давайте добавим страницу с иконками в веб-интерфейс Home Assistant 

Будем использовать проект с github.
В данном проекте собрано 215 иконок.
Есть два варианта встраивания — легкий и тяжелый:)

Первый вариант

Редактируем конфигурационный configuration.yaml

panel_iframe:
  mdiindex:
    title: MDI Icon Index
    icon: mdi:vector-square
    url: https://cdn.rawgit.com/james-fry/home-assistant-mdi/efd95d7a/home-assistant-mdi.html

Перезапускаем Hass, в моем случае так:

sudo service hass restart

Переходим в веб-интерфейс hass и видим, что добавилась новая вкладка MDI Icon Index
При клике на иконке значения копируется в буфер обмена.
img-5


 Второй вариант

Подразумевает использование вашего web сервера.
В конфигурационном файле виртуального хоста nginx прописываем корневую директорию и location до иконок.
Так же добавим немного безопасности, запретив доступ всем кроме вашей сети или сетей:

root /var/www/hass/;
location /home-assistant-mdi/ {
allow 192.168.0.0/24;
deny all;
}

Далее скачиваем проект:

cd /var/www/hass
git clone https://github.com/james-fry/home-assistant-mdi

Редактируем конфигурационный configuration.yaml:

panel_iframe:
  mdiindex:
    title: MDI Icon Index
    icon: mdi:vector-square
    url: https://hass.mydomain.ru/home-assistant-mdi/home-assistant-mdi.html

Перезапускаем Nginx:

sudo nginx -s reload

Перезапускаем home assistant:

sudo service hass restart

В момент написания этого текста пришла мысль — почему не использовать локальный каталог самого hass:)

Третий вариант

На мой взгляд самый правильный.
Создаем директорию в каталоге Home Assistant, которая будет доступна из web-интерфейса hass как /local/ 
Клонируем репозиторий проекта:

sudo mkdir /opt/homeassistant/config/www
sudo chown homeassistant /opt/homeassistant/config/www
cd /opt/homeassistant/config/www
git clone https://github.com/james-fry/home-assistant-mdi

Редактируем конфигурационный файл hass:

vi /opt/homeassistant/config/configuration.yaml
panel_iframe:
  mdiindex:
    title: MDI Icon Index
    icon: mdi:vector-square
    url: https://hass.mydomain.ru/local/home-assistant-mdi/home-assistant-mdi.html

Передергиваем сервис hass:

sudo service hass restart

Т.к. данная директория не обрабатывается механизмом аутентификации hass, прикроем ее доступом по IP.
В конфигурационном файле NGINX описываем данную директорию:

location /local/home-assistant-mdi {
        allow 192.168.0.0/24;
        deny all;
    }

Перезапускам NGINX:

sudo nginx -s reload

Надеюсь, что данный материал кому-нибудь будет полезен:)

Рейтинг
( 2 оценки, среднее 5 из 5 )
Понравилась статья? Поделиться с друзьями:
Комментарии: 4
  1. img-9
    AlxMpak

    Вместо страницы почему-то отображается код страницы в html. Нет мыслей почему так?

    1. img-10
      Vladimir (автор)

      Используйте url:
      https://rawgit.com/james-fry/home-assistant-mdi/master/home-assistant-mdi.html
      Или
      https://marvins.ru/home-assistant-mdi/home-assistant-mdi.html

  2. img-11
    Илья

    У меня тоже html. Изменение адреса на master не помогло

    1. img-12
      Илья

      Работает только вставка последней ссылки.
      Почему некоторые иконки mdi не работают в ha? Например вот эта boom-gate-arrow-down

Добавить комментарий

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.