На дворе конец года и хоть пишу я от Анонима чтобы себе профиль не засорять, есть предложение: хвалитесь! Вы же строите умный дом с Home Assistant сами, как и я. И у вас есть панель, которую вы считаете оптимальной, но регулярно встречаете где-то в Интернетах картиночки откуда берёте идеи. Так вот сегодня я показываю картиночку и то же самое предлагаю вам.
Начну с общего вида. Это режим "Разделы" т.е. на мобилке просто один блок в ширину и всё по вертикали а на десктопе - панель без прокрутки. Тут используется несколько дополнений, я их буду упоминать при разборе карточек. Пока хочу ещё раз заметить что я буду фокусироваться на дизайне а не на охвате там или гении автоматизирования. Только внешний вид, его красота и, может, эффективность.
Это - план дома. При чём это не просто картинка, это svg файл, сделанный в inkscape, то есть графика векторная, послойная, объекты имеют имена и карточка floorplan-card может управлять содержимым картинки. Например, сейчас включены два фиолетовых прямоугольника, верхний это компьютер а нижний - 3D-принтер. Вентилятор над принтером на картинке крутится, то же самое будет делать вентилятор в санузле, если включить вентиляцияю.
Свет в помещении тоже показывается и можно тапом по комнате его включить и выключить. Поскольку это первая карточка, она же показывается первой и в телефоне, это так сказать сводка. Температуры-влажности я решил не выводить, но это реально.
В блоке "Техника" у меня принтер и пылесос. Кнопка, похожая на киноленту включает подсветку в принтере. Карточка разворачивается вот так, когда принтер печатает и показывает прогресс "на лету", картинка слева также меняется. Я активно пользуюсь карточками Mushroom, поэтому на скрине название это Mushroom Title, мини-кнопки это Mushroom Chips, пылесос это Mushroom Vacuum, при чём когда пылесос работает, иконка шевелится, ну а карточка для 3D-принтера это Threedy. А ещё в этом же блоке показываются постоянные уведомления. Это то, что требует моего внимания "при случае" и не должно быть случайно закрыто:
По сути это просто набор conditional карточек в Вертикальном стеке с markdown и шаблонированием.
Карточка с человеком - кликабельная, отображает карту, технические данные о том какое устройство отслеживания когда отчитывалось и некоторые штуки, что передаёт мобильное приложение. Там всё стандартное и несколько личное, так что вот вам кусочек как пример и возвращаемся на главную панель.
Карточки отдельных помещений сделаны намеренно одинаковыми. Сверху название, оно кликабельное и переключает свет. Под названием "чипсы" с какими-то штуками в этой комнате, на скриншоте выше выключен свет, включён ПК и колонки, выключена подсветка растений.
Ниже - графики и/или более подробное управление чем-то. Тут есть важный момент с позиции дизайна: и пылесос и фильтр живут в гостиной, но они в разных блоках. Так сделано специально, чтобы выдержать размер и стилистику блока, происходящее с пылесосом и принтером меня интересует, фильтр управляется редко.
Графики строит mini-graph-card, при этом цвета графиков настроены так, чтобы комфорт был зелёным, отклонение от комфорта - синее или красное. То есть слишком жарко - график красный, слишком холодно - синий. Слишком сухо - красный, слишком влажно - синий. По такому принципу построены все графики и они имеют единый стиль без проблем с распознаванием.
Из "чипсов" можно отметить разве что блок кухни и санузла, на самом деле "чипсин" насчёт воды две, просто они тоже с условиями показа. Попутно отмечу, что "Покупки" тоже кликабельны и открывают список покупок.
В "уличном" блоке вместо названия отображается статус погоды. Две чипсины от двух поставщиков нужны скорее для единого дизайна, чем для данных. А вот графики я смотрю регулярно, это всё тот же mini-graph-card рисует, здесь вы, наверно, и без подсказки догадались, что оранжево-красный это Yandex, голубой это Gismeteo а серый это у меня за окном висит напечатанный на принтере экран Стивенсона.
Как видно по графику, в холодное время года он всё же ловит тепло от дома, но в целом все три идут рядом. Ну и hourly-weather это левая нижняя карточка, рисует что-то похожее на телефонный виджет погоды.
Внимательный читатель спросит: если значком > обозначается что заголовок кликабельный, то куда ведёт Synology DSM, это же не свет? А я отвечу:
У всех наверно есть какие-то данные или переключатели, которые вроде и нужны иногда, но на главной странице им не место. Так что это просто навигация на скрытую страницу "отладки".
А как у вас организовано отображение в Home Assistant? Хвалитесь)
