Векторная графика

Вот о той карточке слева-вверху. Вентилятор крутится квадратик 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 файле. Для вращения это выглядит так:

где вверху два класса, определяющие свойства анимации (в нашем случае по сути только скорости вращения, они разные у 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 то вот эта карточка будет работать.

Как сохранить прозрачность файла растрового изображения(объекта), при его вставке в Corel Draw?

Ситуация.
Вы отредактировали растровое изображение в Фотошопе или другом графическом редакторе, убрав все лишнее, и по сути сделав в изображении прозрачный фон + может применив спец.эфекты в виде внешней подсветки и т.д..

И теперь хотите вставить растровое изображение (например-какой-то объект типа животного) в Corel Draw, где для этого растрового объекта, уже готов свой фон, сделанный в Corel Draw.

Если скопировать изображение, открыв его в графическом редакторе, и оттуда скопировать как часть изображения, то при вставке в пространство Corel Draw, прозрачность может потеряется.

Потому нужно вставлять как файл!

Решение:
1. Для этого в проводнике Windows, щелкаем правой кнопкой мыши по файлу растрового изображения, где уже сделан прозрачный фон, и выбираем в появившемся меню пункт "Копировать".

2. Открываем Corel Draw, и щелкнув в свободное пространство ,правой кнопкой мыши , выбираем в появившемся меню пункт "Вставить".

3. Сдвигаем вставленное изображение так, как вам нужно.

4. Если прозрачная область вставленного изображения сильно большая, и перекрывает собой другие объекты, ее можно уменьшить.

Выделяем вставленное изображение, и выбираем на панели инструментов, инструмент "Обрезка".
Далее, левой кнопкой оставляем область вплотную к самому объекту-изображению.

Далее нажимаем на кнопку "Обрезка" с зеленой галочкой. Или просто нажимаем клавишу "ENTER"