И как подцепить свг план квартиры, пожалуйста?
У меня в профиле посты на другую тему, засорять не хочу так что отвечаю анонимно. Привет, я @NoAdO =)
Вот о той карточке слева-вверху. Вентилятор крутится квадратик 3D-принтера ездит, всё не только классно, но и отражает статус умного дома. Чёж за умный дом без спецэффектов, да?)
Ля красиво ща также сделаю себе!
Сейчас панелька у меня выглядит вот так, мне просто лень переснимать видео. Стало поровнее и полаконичней.. вроде бы.
Переходи к плану квартиры!
Инструкция в инете есть но я её не нашёл так что использую наброски, что скидывал для знакомого. В двух словах: ты рисуешь svg помечая объекты внутри как имена штук из Home Assistant а потом карточка ha-floorplan их оживляет, вот и всё.
Итак, ты рисуешь план квартиры/дома, у тебя есть ориентир в виде скана плана помещения. Если нет - для типовых домов лучше его раздобыть, сильно поможет.
Не ну чё началось-то. Ладно, в фотошопе слои были и тут вроде пока понятно
Шаг 0: Создай документ в каком-нибудь примерно нужном размере, потом можно будет подрезать. Добавь себе панели для слоёв, свойств объекта и заливки-обводки, если их нет.
Дорисуйте остаток совы.. а, фух, это просто фоновая картинка красивая была
Шаг 1: добавь туда скан, поставь ему непрозрачность. Вот кусок инструкции с их сайта. Есть ещё куча разных гайдов, пока мы не делаем ничего, связанного с Home Assistant.
Вот это мой уровень сложности!
Шаг 2: Под ним создай папку "фон" и выбери её. Начинай в ней рисовать элементом Pen Tool используя Ctrl чтобы получить прямые линии. Это у нас заливка, что потом будет стенами.
Я просыпаюсь в кошмарном бреду Как будто дом наш залило водой
Шаг 3: создай папку "фоны комнат" и сделай там то же самое, только с комнатами и поменяв цвет. В любой момент можно дёргать видимость слоя туда-сюда. И вообще, больше папок!
А вначале-то плёл что всё просто!
Шаг 4: Вот тут уже начинается Home Assitant. Переименуй ID этих фонов комнат под ID светильников из Home Assistant чтобы ha-floorplan понимал, где объекты
Помедленнее, я не успеваю!
Шаг 5: Ну и потихоньку начинай рисовать схему, используя прямоугольники или всё тот же инструмент рисования многоугольников. Можешь даже перо, если скиловый. ID объектов стоит переименовывать, чтобы не путаться. Если ты всю папку назовёшь ID для HomeAssistant, он всей папкой и будет вертеть как одним объектом.
Фух, не двоится. В рот мне ноги Дэвид Блейн откуда ты сортир-то взял!?
В итоге получится план, из которого ты убираешь картинку. Тут важно сильно не увлекаться, намечая вещи контурами а не пытаясь добиться максимальной детальности. Но откуда анониму из интернета лучше тебя знать как тебе красиво, я только советую)
А теперь код
Моя карточка ha-florplan начинается с описания основных моментов:
Ммм, код скриншотом. Это не кровь из глаз, это я плачу
Конечно же Пикабу не прикрутили редактор кода в 2к24, это же развлекательный сайт а не хабр. Так что берите что есть, не забудьте пробелы, yaml-код обожает только правильное число пробелов.
Вообще во всех этих экспериментах выяснилось, что проще всего назвать файл плана home_b1.svg и при каждом вмешательстве в картинку сохранять его с НОВЫМ именем, иначе будете сидеть и чистить вилкой кэш.
На картинке выше задаётся путь к векторной графике, к стилям, указано что используется кеш браузера (лучше убрать строчку на время тестов), используется высота изображения, в консоль браузера выводится лог (можно ещё какой-то строкой настроить чтоб прям в карточку, очень помогает на первых этапах) и установлены правила "по умолчанию", то есть если ниже не указано для элемента иное, будут применяться hover-info для наведения и toggle для клика. Скажу сразу, hover-info я не делал
ВАЖНО: не надо делать всё сразу! Сделайте одну кнопку, сохраните код, выдохните. Потом доделаете ещё.
В разделе rules описано поведение для объекта или объектов. Если несколько объектов, правило выглядит так:
Если я просто перепишу это же заработает? Заработает же? (нет)
Тут я прошу для перечисленных entities при смене их state выполнить смену стиля, описанную в style. #ffffff79 это белый с некоторой прозрачностью, #013f64 это мой синий, а вторая строка это про плавное затухание.
"А как они переключают свет?" спросишь ты. А это действие по умолчанию tap_action: toggle , мы же его выше задали.
Если объект один, чуть меняется синтаксис в начале а так всё то же самое:
Так что я покажу сразу, что тут tap_action: none что значит что мы отображаем статус объекта, но на клик он реагировать не будет.
Продвинутое колдунство
Разница в том, что мы задаём не описанный style а class который должен быть описан в .css файле. Для вращения это выглядит так:
Хоспади он ещё и CSS высрал откуда-то
где вверху два класса, определяющие свойства анимации (в нашем случае по сути только скорости вращения, они разные у spinning и slow-spinning но оба ссылаются на один и тот же keyframe spin, где описано как должен двигаться объект. с помощью CSS анимаций можно и плавное включение света реализовать. В блоке
Две строки это то что нужно одновременно выполнить над объектом. То есть в описании мы задаём так:
залить: ${ статус === включено ? если да то #ffffff79 иначе #013f64 };
анимировать переход: ${ статус === выключено ? если да то заполнение за 1 секунду ease, иначе "" } ("" это пустота, ничего). И если поменять код на
То мы задаём и вторую анимацию, для статуса "иначе" и можем включать и выключать свет с разной скоростью анимации. В примере мы выключаем за 2 секунды а включаем за 0.5. Если это не нужно, то и условие не нужно:
Ну и, наконец, перемещение в цикле. Как и раньше, мы спрашиваем равен ли статус указанному и если да то применяем стиль:
'${(entity.state === "on") ? "move-print" : ""}'
А в файле home.css пишем:
Вот так это всё работает но чтобы уважаемый читатель разахуел я повторю:
НЕ НАДО ДЕЛАТЬ ВСЁ СРАЗУ
Ну то есть нарисуйте сперва план в минималке, пусть даже это будет 1 прямоугольник в пустоте с названием вашего выключателя. Составьте минимальную карточку и заставьте чёрный прямоугольник на картинке переключать свет. Все вот эти свистелки-перделки потом доделаете, постепенно! Я дважды забивал на всё это потому что хотел сразу чтобы оно свистело пердело и всё делало. И вот так - действительно сложно.
То есть если вы реально нарисуете два прямоугольника цвета 013f64 (синий) и назовёте их как свои выключатели (в моём примере ниже light.hall и switch.kitchen), сохранив файл в папке \www\svg\home_b1.svg то вот эта карточка будет работать.
