Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Налаштовуємо мінімалістичний інтерфейс Home Assistant з Mushroom Cards

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Усім привіт, на зв’язку Богдан Свердлюк. У цьому посібнику розкажу про поширені практики у створенні Mushroom дашбордів, покажу, як встановити та налаштувати Mushroom Cards для настільної та мобільній версії.

Картки Mushroom нейморівні! Вони дозволяють швидко створити привабливу, лаконічну та зрозумілу інформаційну панель. Поговоримо, як це зробити. російський військовий корабель, пішов нах***!

Ця стаття планувалась, як виключно графічне налаштування інформаційної панелі. Проте з часом у неї додались нескладні YAML-конфігурації. Вони добре описані, їх не варто боятись.

Порядок дій

1. Почати встановлення Mushroom потрібно з HACS. Якщо ви не знаєте, як встановити HACS, перегляньте мій посібник для початківців.

Для встановлення Mushroom необхідно перейти в HACS >>Frontend >> Explore&Downloading >>Mushroom та натиснути кнопку Download. Якщо Mushroom не відображається, очистьте кеш браузера та перезавантажте Home Assistant.

2. Створити інформаційну панель можна в Налаштування >> Інформаційні панелі>> кнопка Додати інформаційну панель. Придумати довільну назву панелі, додати піктограму та показати її в бічному меню.

Щоб панель була головною, а попередня не відображалась, потрібно обрати панель за замовчуванням у профілі користувача.

3. Для редагування панелі потрібно натиснути три крапки зверху справа та натиснути кнопку Редагувати панель. У спливному вікні активувати перемикач Почати з порожньої панелі та натиснути кнопку Взяти під контроль.

Після цих дій у правому нижньому куті з’явиться кнопка Додати картку.

На момент написання статті остання версія карток 2.7
У цій версії присутні 17 типів карток:

  • 🚨 Картка сигналізації — панель сигналізації з кнопками та режимами.
  • 🪟 Картка вікна — дозволяє відкривати, закривати, та зупиняти штори, ролети, двері гаража. Чудово підходить, коли необхідно керувати рухом чогось.
  • 🪄 Картка сутності — доволі універсальна, та одна з найпопулярніших карток, що може відобразити дані будь-якої сутності або її стан.
  • 💨 Картка вентилятора вмикає та вимикає вентилятор, керує швидкістю його обертання.
  • 💡Карта освітлення вмикає, вимикає світло, керує його яскравістю, температурою, та кольором.
  • 🙋 Картка користувача відображає піктограму користувача, його присутність вдома та місце на карті (при додатковому натисканні).
  • 🛠 Картка шаблон дозволяє створити власну картку за допомогою шаблонів Ninja2. Може використовувати сутності, як змінні, отримувати стани та інше. За допомогою шаблонів можна створити картку, що одночасно може бути кнопкою і відображати ще якісь значення.
  • 🔔 Картка чипів ряд невеликих піктограм, чудово виглядає у верхній частині інформаційної панелі. Зручно використовувати для погоди, температури, якості повітря. Усього того, що завжди має бути під рукою.
  • ✏️ Заголовок відмежовує картки, створюючи заголовки та підзаголовки. Зручно використовувати для створення розділів.
  • 📦 Картка оновлень відображає сутності оновлень.
  • 🧹 Картка пилосмока керує пилосмоком: почати прибирання, пауза, стоп, на базу.
  • 📺 Медіакарта контролює елементи медіаплеєра, грати, пауза, переключити, гучність.
  • 🔒 Картка замка контролює відкриття та закриття замків.
  • 💧 Карта зволожувача повітря контролює сутності зволожувачів та рівень вологості.
  • 🌡 Картка клімату керує кліматичним обладнання, наприклад кондиціонерами. Дозволяє змінювати температуру та режими.
  • 📑 Картка вибору керує сутностями select та input_select. Іншими словами, показує сутності у випадному списку.
  • 🔢 Картка з числами керує сутностями number та input_number.

Варто зазначити, що картки сигналізації, вікна, сутності, вентилятора, користувача, пилосмока та клімату можна замінити стандартною карткою Home Assistant — Tile.

Чипи

Чипи дозволяють розміщувати невеликі значки та відображати інформацію сенсорів. Це дуже корисний та зручний інструмент. До прикладу можна відобразити чипи погоди, температури та вологості у кімнаті, якості повітря, кількість увімкненого світла, відкриття вікон та дверей, курс валют, режим сигналізації, показники сервера, навігаційне меню та багато іншого.

Часто чипи використовують угорі інформаційної панелі, але ніхто не забороняє використати їх у будь-якій частині.

Існує декілька типів чипів:

  • сутність (entity) дозволяє розмістити інформацію будь-якої сутності;
  • світло (light);
  • умова (condition) відображає чип, якщо виконано задані умови.

Наприклад, це дозволяє відображати чип лише при його спрацюванні. Щоб це зробити потрібно: у вкладці умови обрати сутність та умову спрацювання, або декілька умов спрацювання. В моєму випадку у випадному полі обрати стан не сходиться (State is not equal to); у полі стан обрати off; у вкладці chip обрати сутність, що потрібно відобразити.

  • шаблон (template) дозволяє створювати шаблони;
  • дія (actions) при натисканні викликає службу, або переходить на іншу вкладку за посиланням;
  • сигналізація (alarm) дозволяє змінювати режим сигналізації, увімкнути, зняти з сигналізації;
  • пробіл (spacer) збільшує відстань між чипами.

Також існують два чипи навігації — назад (back) та меню (menu).

Заголовок

Картка Mushroom Title створює заголовки та підзаголовки. Може містити в собі як текст, так і шаблони. Також до будь-якого тексту можна додавати Emoji.

Наприклад, цей шаблон визначає час доби та вітає користувача на ім’я:

 {% if now().strftime("%H")|int < 12 %}
  Доброго ранку, {{ user }}
  {% elif now().strftime("%H")|int < 18 %}
  Доброго дня, {{ user }}
  {% else %}
  Доброго вечора, {{ user }}
  {% endif %}

А цей показує дату та час:

{{ states('sensor.date_time') }}

Щоб цей шаблон працював, перед тим потрібно додати таку конфігурацію до файлу

configuration.yaml

Шаблон відображення температури (потрібно замінити назву сенсора на свій)

{{ states('sensor.ewelink_th01_temperature_2') }}°

Ряд карток (Горизонтальний стек)

Горизонтальний стек — це стандартне розміщення Home Assistant, що дозволяє розмістити послідовно декілька різних карток. Щоб його використати, потрібно обрати картку горизонтальний стек, а вже після у пошуку ввести mushroom, обрати необхідні картки та зберегти. Картки Mushroom мають декілька представлень:

  • горизонтальне (horizontal layout). Картки ширші, текст розміщується після іконки;
  • вертикальне (vertical layout). Картки вищі, текст розміщується під іконкою. Це дозволяє компонувати більше кнопок без шкоди для візуала.
  • Авто. Частіше всього те саме, що горизонтальне представлення.

Колонки (Вертикальний стек)

Щоб розділити простір на колонки, потрібно обрати стандартну картку вертикальний стек. Також колонку можна розділити на декілька колонок. Для цього потрібно спочатку обрати вертикальний стек, а всередині нього — горизонтальний. Після наповнювати його як завжди.

Сітка

Створює сітку карток, із заданою кількості стовпців. Має невелику відстань між картками. Якщо відстань велика, вимкніть перемикач відображення карток, як квадратів. Картки у сітці можуть бути вузькими прямокутниками, або квадратами.

Щоб зробити квадрат, можна обрати або вертикальний макет поле layout (картки 4 та 5 на зображенні), або активувати перемикач Fill container (остання картка на зображені). Різниця між варіантами у розміщенні тесту, під піктограмою та збоку від неї.

Вкладки

Інтерфейс користувача, також відомий як Lovelace дозволяє створювати вкладки з різними наборами карток, встановлювати їх видимість для користувачів, застосовувати теми.

Щоб створити вкладку потрібно в режимі редагування інтерфейсу натиснути + у верхній частині сторінки. Можна задати вкладці ім’я або обрати піктограму.

В Home Assistant існує чотири види вкладок:

  • розкладка за замовчуванням;
  • допоміжна вкладка — не відображається у панелі та має кнопку назад;
  • бічна панель створює два стовпці карток, один ширший, а другий вужчий;
  • панель на одну картку.

Варто зауважити, що наразі Home Assistant не підтримує свайпи, але можна додати цей функціонал за допомогою проєкту Home Assistant Swipe Navigation. Також цікавим є проєкт Kiosk Mode, він дозволяє приховати назву вкладок та бічне меню. Обидва проєкти можна знайти в HACS.

Вибір кольору

В Mushroom підтримуються:

  • задані кольори: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, blue grey, black, white, disabler;
  • кольори в Hex форматі (приклад #2596BE);
  • кольори в RGB форматі (приклад 170, 50, 81).

Для вибору двох останніх зручно використовувати онлайн інструменти вибору кольору, наприклад, color picker.

Щоб додати інтерактивності у картки шаблону та чипи можна змінювати колір залежно від стану. За замовчуванням для вимкненої іконки використовується сірий колір. Шаблон нижче змінює стан на помаранчевий, якщо пристрій увімкнено, та на блакитний, якщо вимкнено.

 {% if is_state('light.lumi_lumi_switch_b2lc04_light_2', 'on') -%}
                    orange
                  {%- else -%}
                    blue
                  {%- endif %}

Можна використовувати більш як два кольори в залежності від стану пристрою чи сутності:

{% if is_state_attr("climate.living_room", "hvac_action", "heating") %}
                red
              {% elif is_state_attr("climate.living_room", "hvac_action", "idle") %}
                amber
              {% else %}
                blue
              {% endif %}

Зміна піктограм

Аналогічно до зміни кольору, можна змінювати піктограму в залежності від стану пристрою.
{% if is_state('binary_sensor.lumi_lumi_sensor_magnet_opening', 'on') -%}
                    mdi:door-open
                  {%- else -%}
                    mdi:door-closed
                  {%- endif %}

Кнопки навігації

Кнопки навігації допомагають переміщатись між вкладками одним натисканням. Щоб створити кнопки навігації потрібно обрати тип картки горизонтальний стек, а всередині нього mushroom template.

При редагуванні картки потрібно:

  • задати іконку з набору Material Design Icons. Назва пишеться після «mdi:»;
  • задати колір іконки;
  • задати назву кнопки (primary information);
  • якщо кнопок більш як три, може знадобитись вертикальний макет (vertical layout);
  • в полі дія при дотику обрати навігація;
  • в полі шлях навігації потрібно вказати, або придумати довільний шлях навігації латиницею. Шлях навігації — це просто зручне слово, що буде використовуватись як назва вкладки.

Щоб задати адресу навігації для створених вкладок — натиснути символ олівця справа від назви вкладки. В полі URL-адреса — вписати те ж слово, що використовувалось для шляху навігації кнопки.

Після того, як кнопка навігації працює, можна приховати вкладку, на яку посилається кнопка. Для цього в налаштуваннях вкладки можна змінити видимість для користувачів, проте мені більше подобається використання допоміжної вкладки.

Аналогічною до цієї є картка — Welcome Navigation, проте ця картка підтримує лише YAML.

Картки кімнат

Частою практикою є створення карток кімнат. Зручно це робити за допомогою карток горизонтального стеку всередині вертикального стеку.

До цих карток можна додати чипи всередині картки. Для цього можна використати картки з HACS — Stack In Card та Card Mod.

Цей метод трохи складніший, тому що Card Mod не підтримує налаштувань через графічний інтерфейс, а тільки YAML. Щоб створити таку картку потрібно у списку доступних карток обрати варіант вручну.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Вітальня
    secondary: '{{ states(''sensor.ewelink_th01_temperature_2'') }}{{ ''°C   '' }}'
    icon: mdi:sofa
    entity: light.lumi_lumi_switch_b2lc04_light_2
    tap_action:
      action: toggle
    icon_color: |2
           {% if is_state('light.lumi_lumi_switch_b2lc04_light_2', 'on') -%}
                              orange
                            {%- else -%}
                              blue
                            {%- endif %}
    multiline_secondary: true
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          border: none;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.ewelink_th01_temperature_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
              box-shadow: none;
              border: none;
          }
      - type: entity
        entity: sensor.ewelink_th01_humidity_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
            box-shadow: none;
            border: none;
          }

Цей шаблон має назву вітальня (primary information). Під заголовком, як приклад, показує стан температури (secondary). Піктограма дивану — icon: mdi:sofa.

При натисканні на піктограму, перемикається вимикач світла (entity: light.lumi_lumi_switch_b2lc04_light_2 tap_action: action: toggle).

При увімкненні вимикач помаранчевий, коли вимкнений — блакитний. Стиль без тіні та обведення (card_mod: style: |ha-card {box-shadow: none; border: none;)

Після розміщено дві картки чипи з таким же стилем.

Подібними до цих карток є Drealine RoomView та Room

Освітлення

Картка Mushroom light дозволяє керувати яскравістю, кольором і температурою.

Сцени та скрипти

Сцени та скрипти зручно розміщувати як картки сутностей. У мене є скрипт повільного згасання світла протягом 5 хвилин (у моїх ламп не працює transition) та сцена, що встановлює білий колір світла з яскравістю 90%.

Детальніше про сцени та скрипти.

Групи освітлення

Також за допомогою помічників (helpers) можна створювати групи освітлення та керувати усіма лампами, або вимикачами одночасно. Щоб створити групу освітлення перейдіть в Налаштування >> Пристрої та сервіси >> Помічники >> Створити помічника >> Група >> Група світла.

Після придумайте ім’я групи та вкажіть сутності, що будуть входити у цю групу.

Щоб вимкнути усе світло за допомогою чипу, у чипі сутності потрібно обрати створену групу, а в полі дія при дотику обрати переключити.

Підрахунок увімкнених ламп

Я використовую такий шаблон для підрахунку кількості увімкнених ламп. Аналогічно працює і з іншим обладнанням:

{% set total = 0 %}
            {% if is_state('light.1_big_light', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {% if is_state('light.2_big_light_2', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {% if is_state('light.3_big_light_3', 'on') %}
              {% set total = total + 1 %}
            {% endif %}
            {{total}}

Шаблон можна використовувати як в картках, так і в чипах. Щоб кожного разу не писати шаблон, можна створити з нього сутність. Для цього в configuration.yaml потрібно додати:

 - platform: template
    sensors:
      current_lights_on:
        friendly_name: Lights at this moment
        unit_of_measurement: 'on'
        value_template: >
          {% set total = 0 %}
            …

Після перезавантаження Home Assistant сутність з’явиться в Налаштування >> Сутності

Графіки

В Mushroom немає картки графіків, але можна використати стандартну картку-графік під назвою Датчик. Цей тип картки ніяк не кастомізується, не може змінити колір заливки та межі графіка, піктограму, період відображення.

З цих причин у випадках, де потрібна більша гнучкість, часто використовується Mini Graph Card. Він не має графічного налаштування, його використання вимагає YAML.

Теми

Теми дозволяють змінити колір та форму карток, фонове зображення, шрифти. Змінити тему можна, натиснувши на піктограму користувача, та обравши розділ тема. Важливо: на кожному пристрої тему потрібно обирати окремо.

Встановити теми можна з HACS >> Frontend >> Explore&Download Repositories. Мої улюблені теми — Noctis та Dark teal. Чудово також виглядають Synthwave Hass, iOS Themes, Waves та багато інших.

В інтернеті є багато чудових підбірок привабливих тем.

Автор проєкту Mushroom Cards також розробив свою тему 🍄 Mushroom Themes. Оскільки автор став штатним співробітником Nabu Casa, закруглені картки як в Mushroom з’явились і в стандартній темі Home Assistant.

Тема Mushroom потрібна лише для створення тіней в закруглених картках (виглядає чудово), або якщо потрібні прямокутні картки. На тему краще подивитись, ніж описувати, тому раджу її встановити.

Піктограми

За замовчуванням Home Assistant використовує набір піктограм Material Design Icons. Щоб додати піктограму, потрібно при редагуванні картки у полі іконка ввести mdi: та назву піктограми. До прикладу mdi:ceiling-light-outline.

Лайфхак: якщо на сайті MDI клікнути на назву піктограми, вона скопіюється.

Існують альтернативні набори піктограм. Наприклад Custom Brand Icons. Встановити його можна через HACS. Це набір піктограм пристроїв брендів Apple, Google, Amazon (Alexa), Aqara, Phillips Hue, Reolink, а також маршрутизаторів, вікон, телебачення, пилосмоків, стану акумулятора тощо. Для їх використання служить префікс «phu:».

Аналогічно з HACS, можна встановити набори Hass Hue Icons, що додає велику кількість піктограм ламп та вимикачів. Використовує префікс «hue:».

Набір KNX User Forum Icon Set додає багато різноманітних піктограм. Використовує префікс «kuf:».

Також в картках шаблонів Mushroom можна замінити піктограму власним зображенням. Для цього використовую сайт flaticon. Зображення завантажую у форматі png, розмір обираю найбільший (512px).

В Home Assistant OS зображення завантажую за допомогою доповнення File Editor у каталог config/www. Після в картці шаблону у полі picture вказую адресу зображення в такому форматі /local/sakura.png.

Таким же методом працюють і анімовані svg піктограми. Приклад svg набору.

Бейджі піктограм

Бейдж — це круглий значок над піктограмою картки, що активується за якоїсь події.

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

Бейджі доступні лише в картках шаблону (template). Щоб створити бейдж потрібно задати значення полів badge icon та badge color. В найпростішому випадку це просто піктограма та колір. Проте динамічність з’являється, коли у цих полях записані умови.

Присутність вдома

У цьому прикладі, коли користувач вдома, бейдж зелений, якщо за межами — червоний. Якщо потрібно не відображати відсутність, замість кольору red потрібно поставити none.

Badge icon:
{% if is_state('person.bogdan', 'home') %} mdi:home {% else %} mdi:account-arrow-left-outline {% endif %}
Badge color:
{% if is_state('person.bogdan', 'home') %} green {% else %} red {% endif %}

Також можна давати різні назви географічним зонам, натиснувши на сутність користувача. До прикладу: home, work, parents, friends, а після використовувати їх в конфігураціях картки.

{% if is_state('device_tracker.phone1', 'home') %} green
  {% elif is_state('device_tracker.phone1', 'work') %} red
  {% elif is_state('device_tracker.phone1', 'Bar') %} orange
  {% else %} cyan
  {% endif %}

Виявлення руху

Цей бейдж працює аналогічно попередньому. Він відображає зелений значок відсутності руху, коли його не виявлено та червоний значок руху. Як і в попередньому прикладі, якщо не потрібно відображати відсутність руху, потрібно замінити колір green на none.

Badge icon:

{% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone', 'on') %}
mdi:motion-sensor
{% elif is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone', 'off') %}
mdi:motion-sensor-off
{% endif %}

Badge color:

{% if is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone ', 'on') %}
red
{% elif is_state('binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone', 'off') %}
green
{% endif %}

Приклад, що виконує те ж саме завдання:

Badge icon:

{{ "mdi:turtle" if states("binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone") == "on" else "mdi:none" }}

Badge color:

{{ "red" if states("binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone") == "on" else "transparent" }}

Показати кількість увімкненого світла

Badge icon:

{% if states('sensor.current_lights_on')|int > 0 %} 
            {{ 'mdi:numeric-' + states('sensor.current_lights_on') + '-circle' }}
          {% endif %}

Badge icon:

orange

UI-Lovelace-Minimalist

Mushroom Card надихається проєктом UI-Lovelace-Minimalist. З відмінністю, що Minimalist створює увесь інтерфейс лише за допомогою YAML. Такий підхід складніший, але і гнучкіший.

Чудова новина в тому, що картки цього проєкту максимально схожі за дизайном на Mushroom. Тому їх можна використовувати разом та міксувати.

Допомога та підтримка

При редагуванні інтерфейсу може виникнути ситуація, відповідь на яку ви можете не знати. У такому випадку можна звернутись в топік Mushroom Cards — Build a beautiful dashboard easily.

Там же можна знайти багато цікавих ідей для дизайну свого інтерфейсу.

Куточок читача

На написання цієї статті мене надихнуло відео Creating a Beautiful Home Assistant Mobile Dashboard Easily! каналу Everything Smart Home.

Сподобались гарні та деталізовані статті Mushroom Cards Home Assistant: How To Build A Clean Minimalistic UI та Mushroom Cards Part 2: Room Layout & Card Combinations.

Також хочу порадити новий україномовний телеграм-чат про розумний будинок — Розумний дім.

Висновок

Mushroom Cards — це про гарний мінімалістичний інтерфейс. Проєкт дозволяє легко створити картки та одночасно зберігає високу гнучкість за допомогою шаблонування. Це дозволяє кожному обрати свій рівень складності.

В одній статті важко описати усі можливості, якщо я пропустив щось важливе, доповніть в коментарях, будь ласка.

Якщо цей посібник був вам корисний, подякуйте донатом у фонд Реактивна Пошта на підтримку української артилерії. Наближаймо перемогу разом.

Ви також можете підтримати розвиток україномовного контенту про розумний будинок, підтримавши мене на Patreon

👍ПодобаєтьсяСподобалось10
До обраногоВ обраному4
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Дуже цікаво та пізнавально читати ваші статті по Home Assistant. Дуже хочеться таку ж детальну статтю по настройку інтерфейсу через UI Lovelace Minimalist.
ui-lovelace-minimalist.github.io/UI

Були часи)) дякую дуже кльовий матеріал

Дуже цікаво, але спершу треба пояснення що взагалі таке Home Assistant.!

Підписатись на коментарі