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

20 мая 2020, 08:15
Сразу небольшой дисклеймер для всех, кто начинает читать эту статью.

  • Я не буду давать точных и подробных рекомендаций, как рисовать и как решать конкретные задачи в 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

Все новости мира умных домов - t.me/SprutAI_News или Instagram
Остались вопросы? Мы в Telegram - @Soprut

Хочешь умный дом но нет времени разбираться?
Посмотри примеры работ и выбери себе интегратора.
  1. (xrust)
    (xrust) отредактировано 8 дней назад

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

    Видео Floor plane

    • Igor Gubaidullin (pavuk)
      Igor Gubaidullin (pavuk) 8 дней назад

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

      • (xrust)
        (xrust) 8 дней назад

        Я пошёл от обратного и основная картинка у меня Свет выключен, а включение света накладывается. Это позволяет сделать более настраиваемую версию в которой 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 картинок. 

        • Igor Gubaidullin (pavuk)
          Igor Gubaidullin (pavuk) 8 дней назад

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

          • (xrust)
            (xrust) отредактировано 8 дней назад

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

            • Igor Gubaidullin (pavuk)
              Igor Gubaidullin (pavuk) 8 дней назад

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

            • Михаил Макаров (ZEBR)
              Михаил Макаров (ZEBR) 8 дней назад

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

              • (xrust)
                (xrust) отредактировано 7 дней назад

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

            • (zloyglide)
              (zloyglide) 2 дня назад

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

  2. (anonimNO)
    (anonimNO) 8 дней назад

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

  3. (mprofi)
    (mprofi) 8 дней назад

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

    • Igor Gubaidullin (pavuk)
      Igor Gubaidullin (pavuk) 8 дней назад

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

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

  4. Алексей Макаров (makarovalexey30)

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

  5. (sergey@kuroles.eu)
    (sergey@kuroles.eu) 8 дней назад

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

  6.  Георгий Александрович (Georgy_Benelli)

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

  7. Дмитрий Королев (dimakorolev)

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

    1000x_image.png?1589986774

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

    1000x_image.png?1589987111

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

    • Igor Gubaidullin (pavuk)
      Igor Gubaidullin (pavuk) 8 дней назад

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

    • (melias)
      (melias) отредактировано 7 дней назад

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

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

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

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

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

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

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

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

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

      1000x_image.png?1590049828

      • Дмитрий Королев (dimakorolev)

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


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

        • (melias)
          (melias) 7 дней назад

          Изображений может быть будет и 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 

          ..... и т.д.

  8. (aivs)
    (aivs) 7 дней назад

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

    1000x_image.jpeg?1590006785
  9. Дмитрий Королев (dimakorolev)
    Дмитрий Королев (dimakorolev) отредактировано 7 дней назад

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

  10. (Hedgehog_57)
    (Hedgehog_57) 3 дня назад

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

    1000x_image.png?15903489301000x_image.png?1590348930
  11. Максим Олейник (profx5015)
    Максим Олейник (profx5015) отредактировано 9 часов назад

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

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

К списку статей

Скидки для сообщества

Ноотехника

+375 17 233-25-45
Промокод:
Sprut
Размер скидки:
10%
Действует у всех официальных представителей. Для применение необходимо указать в поле комментария или при звонке менеджеру.

Интернет-магазин yourhomekit.ru

+7 914 550-51-11
Промокод:
SPRUT-BLG
Размер скидки:
8%
Cамый большой ассортимент в России аксессуаров Apple HomeKit

Тематические чаты

Похожие статьи

17 декабря 2019, 17:49
Универсальный привод для автоматического удаленного открытия окон с простой интеграцией в умные дома.
15 ноября 2018, 09:42
Способы автоматизации механических ворот
24 августа 2018, 12:18
Пошаговая установка HomeAssistant
30 августа 2019, 07:28
Несколько нетривиальных способов использования датчика открытия окон/дверей от Xiaomi/Aqara.
20 октября 2018, 22:57
Теоретические основы протокола MQTT и описание того, как он работает и для чего используется
27 августа 2018, 10:14
Интегрируем ХА в HomeKit
03 октября 2018, 22:03
Как собрать и настроить Hyperion Ambilight - адаптивную подсветку ТВ.
01 ноября 2018, 09:27
Настройка Deconz USB стика ConBee от Dresden Elektronik в Hass.io и некоторые особенности эксплуатации
18 февраля 2020, 17:06
В данной статье описывается сборка слаботочного эл. щита на базе Wiren Board 6, а так же силового щита для небольшой квартиры.
29 октября 2019, 07:59
Умный домофон на базе nodeMCU с прошивкой ESPHome.