Статья

Как сделать красивый управляемый Floorplan для Home Assistant

  • Я не буду давать точных и подробных рекомендаций, как рисовать и как решать конкретные задачи в 3D и в графическом редакторе. Предполагается, что вы умеете ими пользоваться, или хотите научиться в процессе.
  • Работа очень трудоемкая и кропотливая. Если вы не обладаете достаточным количеством времени и усидчивостью, не беритесь за нее.

Но результат вашей работы будет таким, или даже намного лучшим, чем мой:


 

Рисование 3D модели вашей квартиры/дома

Первое, что нужно сделать, это создать 3D модель вашего жилища. Это самая ресурсоемкая и сложная часть работы. Для этого я использовал бесплатную и мультиплатформенную программу Sweet Home 3D. Для нее существует огромное множество видео уроков, всевозможных готовых моделей мебели, предметов быта и всего остального необходимого. В освоении программа достаточно проста.

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

Теперь нужно создать качественный 3D рендер вашего дома. Для этого в окне 3D View разместите ваш проект дома так, как бы вы хотели его видеть законченным. Выберите нужный наклон, ракурс, вид. После этого нажмите на иконку фотоаппарата и выберите настройки для построения рендера. Я могу лишь рекомендовать свои, но вы можете, конечно, их корректировать под свои нужды: 

 

15

    Кнопка для построения 3D рендера.
В настройках построения 3D рендера важно правильно выбрать время и обязательно включить потолочные светильники. От этого будет напрямую зависеть то, как ваш Floorplan в целом и отдельные комнаты будут выглядеть со включенным светом. На самом деле, тут большое поле для экспериментов и вы обязательно создадите свой оптимальный вариант.После завершения построения рендера, которое может занять некоторое время, в зависимости от мощности вашего компьютера, сохраните готовый результат.
    Выглядеть итог должен примерно вот так.

Рисование шаблонов затемнения (выключенного света)

Свет в нашем проекте будет "выключаться" путем накладывания темных полупрозрачных шаблонов комнат. Для их создания я пользовался бесплатным и мультиплатформенным графическим редактором Gimp. Можно пользоваться Photoshop и любым другим удобным вам графическим редактором, который умеет работать со слоями.

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

Итак, на загруженном в редактор рендере я выделял комнаты по границам стен, копировал в буфер и создавал из них новый файл из буфера. Затем я шел в редактор слоев, выбирал каналы и отключал красный, синий и зеленый каналы, оставляя только альфа канал. После этого в закладке Layers я создавал New Layer from Visible и уже его сохранял как png файл. И так для каждой комнаты. 

В итоге у вас должно получиться что-то вроде вот такого:

 

15

     Это, например, для зала.
А это для спальни.

Сборка всех картинок в Home Assistant

Теперь все нужно собрать в Lovelace. Для этого в ui-lovelace.conf я создал новую вкладку Floor Plan и, используя типы карт picture-elements и image, собрал все в единую, управляемую сущностями light для каждой комнаты, конструкцию. 

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

Код выглядит в моем случае вот так:

 

15

- title: Floor Plan panel: true icon: mdi:floor-plan cards: - type: picture-elements image: /local/images/277_light.png elements: - type: image tap_action: action: toggle entity: light.kitchen image: /local/images/floorplan/kitchen.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 48.5% left: 49.55% width: 25.14% height: 35.9% - type: image tap_action: action: toggle entity: light.kitchen image: /local/images/floorplan/balcony.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 79.6% left: 47.1% width: 23.13% # height: 33.75% - type: image tap_action: action: toggle entity: light.entrance image: /local/images/floorplan/entrance.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 23.5% left: 48.1% width: 42.5% - type: image tap_action: action: toggle entity: light.bedroom image: /local/images/floorplan/sleeproom.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 56.3% left: 20.35% width: 29.7% - type: image tap_action: action: toggle entity: light.hall image: /local/images/floorplan/hall.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 55.1% left: 78.3% width: 34.5% - type: image tap_action: action: toggle entity: light.bath image: /local/images/floorplan/bath.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 29.3% left: 19.3% width: 16% - type: image tap_action: action: toggle entity: light.wardrobe image: /local/images/floorplan/wardrobe.png state_filter: "off": opacity(65%) "on": opacity(1%) style: top: 23% left: 77.6% width: 17.5%

Логика должна быть понятна. Есть tap action на переключение света (entity), который делает ваш png шаблон комнаты затемненным на 65%, когда свет выключен, и на 1% - когда свет включен. Все просто.

Заключение

Весь этот трудоемкий проект делался по принципу Just For Fun в условиях самоизоляции, поэтому прошу не судить строго. Home-assistant позволяет добавить на ваш план датчики, дополнительные выключатели и так далее, делая его более функциональным и наглядным особенно, как мне кажется, для использования на закрепленных на стене планшетах (обратите внимание на опцию panel: true). В общем, простор для творчества огромный. На просторах YouTube можно найти совершенно потрясающе выглядящие проекты Floorplan-ов от разных зарубежных энтузиастов. В русскоязычном интернете подробных описаний таких проектов я не встречал, хотя допускаю, что кто-то их уже делал и подробно описывал.

Спасибо за внимание!

 

15


А если в комнате несколько источников света? ;-) 

Видео https://youtu.be/GvZIBorpNCc">Floor plane


Можно для них сделать свои затемняемые шаблоны, а на рендер добавить эти источники.

Я пошёл от обратного и основная картинка у меня Свет выключен, а включение света накладывается. Это позволяет сделать более настраиваемую версию в которой 2, 3, 4, 5 светильников могут быть включены и выключены и это отображается графически но это и увеличивает количество картинок наложения. 
для примера если в комнате 2 источника света то нам нужно 4 картинки (1-off + 2-off, 1-on + 2-off, 1-off + 2-on, 1-on + 2-on) 

Думаю не нужно быть большим математиком чтобы посчитать что 3 источника света в комнате это уже 9 таких картинок :-), а 4 источника света это уже 16 картинок. 

Да, вы правы. Я самым простым путем пошел сознательно не усложняя проект.

Я изначально тоже нарисовал два состояния. Потом понял что у меня умная настольная лампа, а на плане на неё нет реакции, а ещё ночник в спальне. Потом Оо! включена подсветка шлюза на кухне и в детской, хочу на плане. Свет это класно, а как показать что бойлер работает и телевизоры :-). Вы просто ещё на начальной стадии ;-) у вас все впереди ну либо наиграетесь и на этом все и останется. 
В любом случае статья полезная и многим позволит начать и попробовать

Именно так. Цель статьи ознакомить с возможностью и дать общее направление. Возможности расширения безграничны.

Покажите как у Вас это выглядит, хочется посмотреть на красоту)

Так в первом же комментарии кусок видео с двойными выключателями. До красоты ещё долго так как въехали в недостроенный дом и полностью оконченные только 2 комнаты соответственно и умные устройства в основном в них. По мимо света я ещё отрисовал открытие закрытие входной двери опрашивая датчик двери, бойлер, радио от шлюза и телевизоры на webos 

Покажите свою реализацию?

Большое спасибо за статью!

а если в доме несколько этажей то как быть в этом случае?

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

Рисуете два этажа отдельно, а там по желанию либо со сдвигом на одной странице два этажа либо своя страница для каждого этажа с кнопкой перехода на каждый этаж. 

Спасибо за статью, надеюсь найдётся время реализовать нечто подобное.

Спасибо за статью, давно собирался такое реализовать

Круть статья.Курица на диване в тему)

Ха! Думал, никто не заметит :)



Тоже очень долго парился с подгонкой размеров накладываемых изображений, пока не догадался делать их такого же размера, как и основное. В результате все картинки имеют одинаковый стиль (100% ширина, top: 0, left: 0) и идеально накладываются на подложку. Минус — теряется возможность управления кликом по самой картинке (хотя в случае с 3D-планом эта возможность — сомнительное удовольствие из-за того, что картинки в любом случае будут накладываться друг на друга). 
Кроме того, как и некоторые комментаторы выше, я использовал темную подложку. В одном из помещений у меня 7 источников света, и иначе было в принципе невозможно нарисовать.

https://sprut.ai/static/media/cache/00/50/79/5/3838221/58474/1000x_image.png?1589986774" alt="1000x_image.png?1589986774" />

И еще небольшое дополнение: https://github.com/bradcrc/color-lite-card/">https://github.com/bradcrc/color-lite-card/ 
Эта карточка позволяет отражать на плане цветную подсветку, в моем случае это выглядит так:

https://sprut.ai/static/media/cache/00/50/79/5/3838221/58479/1000x_image.png?1589987111" alt="1000x_image.png?1589987111" />

Сразу скажу, этот компонент работал у меня ужасно криво, и я его переписал — https://gist.github.com/dmitry-korolev/526a8d90f714cc173f7a570db9fb7252">https://gist.github.com/dmitry-korolev/526a8d90f714cc173f7a570db9fb7252

Очень круто! И спасибо за очень ценные дополнения. Возьму на вооружение.



Я также делал для своей квартиры, тоже с наложениями кадра полного формата и без тагла по зонам


Из выявленных проблем: если из ХА отваливается любой из опроных светильников (к статусу которых привязано изменение картинки), вся картинка "идет по бороде". Кроме того, если светильников много, а вариант с подсветкой один, без ветвления вариантов указанных выше (при 7 светильниках это было бы больше 100 вариантов), то возникает проблема выбора "опорного" светильника, к состоянию которого привязывается картинка. Лечится и то и другое объединением светильников в группы и привязкой картинки к состоянию группы. При использовании группы, даже если все светильники из группы вылетают, картинка не "портится". 


От тач-интерфейса (тагл света при нажатии на комнату) я отказался по многим причинам: 


- неудобно попадать в мелкую комнату.


- чаще требуется не включить/выключить, а отрегулировать освещение, а этот вариант не позволяет это сделать


- так управлять можно только светом, а у меня в каждой комнтате есть термостаты радиаторов, рольставни, кондиционеры, вентиляторы и пр.


В конечном итоге решил воткнуть на план кнопок, разместив их на стенах соответствующих комнат, чтобы меньше портили картинку. Когда жмешь на кнопку открывается окошко управления соотв. энтити, для термостата - температура, для лампы - регулировка интенсивности и света и т.д. Если в комнате много светильников, то кнопка группы одна, а потом разворачивается список входящих устройств. 


Да, кликов получается больше, но функционал несравнимо выше. 


Ниже рабочий (недоделанный) вариант того, что получилось


https://sprut.ai/static/media/cache/00/35/68/5/3847492/58552/1000x_image.png?1590049828" alt="1000x_image.png?1590049828" />

Не очень понял про группы света и вот это всё. На примере кухни, где у меня три группы света:
Картинки: https://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-left.png">https://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-left.pnghttps://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-main.png">https://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-main.pnghttps://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-right.png">https://raw.githubusercontent.com/dmitry-korolev/hac/master/www/fp/kitchen-right.png


Результат — возможность видеть на плане любую из возможных семи комбинаций. Точно так же планирую добавить подсветку столешницы, комбинаций будет 15, изображений — только 4.

Изображений может быть будет и 4, если не ставить идеалистическую задачу иметь на каждую комбинацию рендер с накладывающимися лучами от разных светильников, но вот код внутри lovelacе будет адским, чтобы учесть все эти варианты. 

У меня источников света в гостиной 9, из них 7 с настройкой интенсивности и температуры, и реальную картину мне все равно не воссоздать. Как "proof of concept", поиграться - можно, а для реального использования - это massive overkill. 

К тому же, после года использования этой сетапа по свету вырабаталась схема наиболее комфортной комбинации из включенных ламп и их уровня. Собственно, эта "сцена" заведена в ХА и использутся в 90% случаев, и именно она у меня выбрана в качестве рендера, указывающего на включение света в гостиной.  

Чисто технически строчки относящиеся к группе в lovelace выглядят так:

- entity: group.living 

         hold_action: none 

         state_image: 

               'off': /local/floorplan/tq.png 

               'on': /local/floorplan/living3.png 

..... и т.д.

Согласен, что так или иначе надо искать компромисс =)

А все же, если делать с несколькими источниками света в комнате, как код будет выглядеть? а то что-то никак ума не приложу... 

Если по моему методу делаем, то порядок такой:

1. Объединяем светильники в группу в файле group.yaml  

office: 

   name: Office lights  

   entities: 

     - light.bra

     - light.table_lamp 

     - light.yeelight_office 

2. В карточке picture elements за это отвечает такой кусок:

 elements: 

  - entity: group.office 

    hold_action: none 

    state_image: 

      'off': /local/floorplan/dark_l.png 

      'on': /local/floorplan/office_l.png 

    style: 

       left: 50%

       top: 50% 

       width: 100% 

    tap_action: none 

    type: image

я вот пока для двух светильников из трех вариантов освещения собрат такое:



https://pastebin.com/H12nxZsF">https://pastebin.com/H12nxZsF

только почему тоhttps://pastebin.com/H12nxZsF">https://pastebin.com/H12nxZsF"> 

tap_action не работает...

 tap_action:

    action: toggle



Классный план получился. Я свою квартиру отрисовал planner5d. Достаточно быстро это делается, хоть и без подсветки.

https://sprut.ai/static/media/cache/00/48/39/5/3841804/58549/1000x_image.jpeg?1590006785" alt="1000x_image.jpeg?1590006785" />

Кстати, здесь описан еще один интересный способ, как добиться сочетания света в любых комбинациях, цветах и т.д. с помощью CSS-свойства "mix-blend-mode" — https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417">https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417



В свое время поигрался в 3D и решил обойтись меньшей красотой, но большей информативностью.

https://sprut.ai/static/media/cache/00/26/10/5/3888962/58920/1000x_image.png?1590348930" alt="1000x_image.png?1590348930" />https://sprut.ai/static/media/cache/00/26/10/5/3888962/58921/1000x_image.png?1590348930" alt="1000x_image.png?1590348930" />

Отлично, но без вау эффекта :)

Кто-нибудь сталкивался с зависаниями в режиме панели? Что помогло решить проблему?

У меня при использовании 30 изображений 1400х1019 и 15 иконок в режиме панели начинаются очень сильные подвисания.

Присоединяюсь к вопросу о режиме панели. Сделал пробный план, с двумя переключателями, в обычной карточке все работает, картинки меняются, при переключение в режим панели, перестаёт работать. Переключатель нажимается один раз, картинки вообще не меняются.

Не замечал такой проблемы. У меня как и в режиме панели, так и в обычном режиме работает корректно все.

Похоже понял в чем проблема. У меня не правильно работает в режиме панели если включен режим Настройки интерфейса. Если его отключить то начинает работать корректно. В режиме карточек я такого не замечал.


1. Рисуется одна черная плашка 2*2 пикселя.

2. Встраивается нужное число ее копий: один фиг комнаты почти всегда прямоугольником описываются.... ;)


Вернуться назад
Вернуться назад