FloorPlan插件,完成灯光控制展示

① 使用装修工具(https://yun.kujiale.com/tool/h5/diy?designid=3FO4B1LUCCBC)画出家庭布局

② 使用PS作图(注意分辨率)
TGD~F{~VZ~4T0PP~2}009
③ 界面UI,添加图片元素卡,调整实体元素的位置关系
使用FileEditor,在目录config/www/js下,上传.js文件
④ 先配置configuration,进入lovelace-ui的yaml模式
编辑configuration.yaml配置文件
lovelace:
mode: yaml

⑤ UI界面,编辑配置,复制默认lovelace-ui的配置到,新建config/ui-lovelace.yaml
我添加的实体:switch.0x00124b001e731c15_switch

title: 我的家
resources:

  • type: js
    url: /local/js/color-lite-card.js
    views:
  • title: Floor plan
    path: floor-plan
    badges: []
    cards:
    • type: picture-elements
      elements:
      • type: image
        image: /local/tutorial/dim.png
        tap_action:
        action: none
        style:
        top: 50%
        left: 50%
        width: 100%
        opacity: 0.5
      • type: custom:color-lite-card
        entity: light.miclight
        tap_action:
        action: none
        image:
        /local/tutorial/bedroom.png
        style:
        top: 50.2%
        left: 50%
        width: 100%
      • type: image
        entity: light.miclight
        tap_action:
        action: toggle
        state_image:
        ‘on’: /local/tutorial/lite.png
        ‘off’: /local/tutorial/liteoff.png
        style:
        top: 82.9%
        left: 28.9%
        width: 15%
        image: /local/tutorial/base.png
        我只是简单完成一盏灯的3d展示,希望大家根据布局和灯光设计完成更好的作品

        插件github https://github.com/bradcrc/color-lite-card