Накидал карточку управления RGB-подсветкой через интерфейс Home Assistant.
Для создания карточки используются следующие дополнения доступные в HACS:
RGB Light Card позволяет пользователям легко управлять RGB-лампами и светильниками через интерфейс HA. Дополнение предоставляет визуальный интерфейс для настройки цвета, яркости и эффектов освещения;
Bubble Card для Home Assistant предоставляет пользователям возможность визуализировать данные и состояние устройств в виде интерактивных "пузырей" или всплывающих окон;
Light Entity Card дополнение, которое позволит добавить панель выбора цвета в RGB-палитре;
Mushroom — это коллекция карточек для Home Assistant, без которых я не представляю интерфейс HA;
Slider card - с помощью slider card cсделаем удобный ползунок выбора яркости;
Для вызова всплывающего окна создается кнопка в карточке комнаты
При нажатии на кнопку mushroom-chips-card цвет фона изменяется в соответствии с состоянием RGB-подсветки. Цвет иконки инвертируется в зависимости от фона и адаптируется в белый или черный в зависимости от яркости выбранного цвета, что обеспечивает визуальное восприятие. Для этого пришлось создать дополнительный сенсор.
Весь исходный код карточек доступен в у меня в телеграм-канале
Для создание карточки используется всплывающее окно Bubble Card. Используя CSS стили убираем фон кнопки у заголовка и красим иконку в цвет подсветки
Добавляем в вертикальный стек заголовки
Добавление карточки для RGB-палитры в интерфейс Home Assistant позволяет пользователям легко и удобно настраивать цвета подсветки. Использование кастомного CSS для изменения внешнего вида ползунка выбора цвета помогает улучшить визуальное восприятие и сделать взаимодействие более привлекательным. Рассмотрим это более подробно. При просмотре исходного кода страницы можно обнаружить, что стили нужно применять к элементам с классами svg.IroHandle и svg.IroHandle circle.
Добавляем кнопки быстрого выбора цвета с помощью карточки custom:rgb-light-card, что позволяет пользователю быстро и удобно менять цвет освещения RGB-подсветки. Для улучшения визуального восприятия и эстетического оформления кнопок мы используем градиенты для иконок, что добавляет глубину ну и выглядит более интереснее :).
На выходе получаем кнопки управления, которые представляют собой мощный и гибкий инструмент для настройки RGB-подсветки. Эти кнопки позволяют пользователю не только выбирать различные цвета для подсветки, но и назначать определенные скрипты, что открывает широкие возможности для автоматизации и создания уникальных сценариев освещения.
Ползунок управления яркостью в позволяет пользователю легко и быстро регулировать уровень яркости RGB-подсветки. Цвет ползунка изменяется в зависимости от выбранного цвета освещения, что добавляет визуальную согласованность и улучшает взаимодействие пользователя с устройством.
В целом, у меня получилась вот такая карточка управления RGB-подсветкой, которая предоставляет пользователю интуитивно понятный и функциональный интерфейс для настройки освещения.
Не упустите возможность сделать интерфейс HA еще лучше — присоединяйтесь к моему телеграм-каналу, где я делюсь своими мыслями и идеями о том, как сделать интерфейс Home Assistant более удобным и привлекательным.