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

[wodeiobroker]

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

② 使用PS作图（注意分辨率）

③ 界面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