HACS搭建floorplan

博主：焰火之舞
发布时间：2022 年 02 月 23 日
155 次浏览
暂无评论
17041字数
分类： HomeAssistant

效果图：

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/1855520911.png)

![图片.png](http://blog.cloud620.cn:6620/usr/uploads/2023/04/515516893.png)

1.创建目录

[图片.zip](http://www.cloud620.cn:6620/usr/uploads/2022/02/1683880366.rar)

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/760737461.png)

2.添加卡片元素

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/2931012210.png)

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/4014103894.png)

脚本-2025-01-02

```
type: picture-elements
image: /local/floorplan/examples/tupian/home.png
elements:
  - type: state-icon
    entity: event.loock_cn_1074721476_v06_someone_at_the_door_e_2_4
    name: 小米门铃1S
    style:
      top: 4%
      left: 5%
      transform: rotate(180deg)
  - type: image
    entity: switch.zimi_cn_1024730417_dhkg02_on_p_3_1
    name: 入户灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 46%
      left: 42%
      width: 10%
  - type: image
    entity: switch.isa_cn_1044438012_kg03hl_on_p_3_1
    name: 客厅灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 68%
      left: 30%
      width: 10%
  - type: image
    entity: switch.zimi_cn_1056932377_dhkg01_on_p_2_1
    name: 阳台灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 85%
      left: 30%
      width: 9%
  - type: image
    entity: switch.isa_cn_1044866359_kg01hl_on_p_2_1
    name: 卧室灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 68%
      left: 64%
      width: 10%
  - type: image
    entity: switch.isa_cn_1045769986_kg01hl_on_p_2_1
    name: 书房灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 19%
      left: 60%
      width: 10%
  - type: image
    entity: switch.zimi_cn_1029560464_dhkg01_on_p_2_1
    name: 次卧灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state_image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 48%
      left: 70%
      width: 10%
  - type: image
    entity: switch.zimi_cn_1024730417_dhkg02_on_p_2_1
    name: 玄关灯
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/light_on.png
      "off": /local/floorplan/examples/tupian/light_off.png
    style:
      top: 47%
      left: 26%
      width: 8%
  - type: image
    entity: switch.isa_cn_1044438012_kg03hl_on_p_2_1
    name: 沙发筒灯
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/light_bulb_on.png
      "off": /local/floorplan/examples/tupian/light_bulb_off.png
    style:
      top: 67%
      left: 19%
      width: 7%
  - type: image
    entity: switch.isa_cn_1044438012_kg03hl_on_p_4_1
    name: 电视筒灯
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/light_bulb_on.png
      "off": /local/floorplan/examples/tupian/light_bulb_off.png
    style:
      top: 61%
      left: 43%
      width: 7%
  - type: image
    entity: switch.zimi_cn_1094913474_dhkg05_on_p_3_1
    name: 水池灯
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/light_bulb_on.png
      "off": /local/floorplan/examples/tupian/light_bulb_off.png
    style:
      top: 21%
      left: 38%
      width: 6%
  - type: image
    entity: switch.zimi_cn_1094913474_dhkg05_on_p_2_1
    name: 灶台灯
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/light_bulb_on.png
      "off": /local/floorplan/examples/tupian/light_bulb_off.png
    style:
      top: 28%
      left: 30%
      width: 5%
  - type: image
    entity: switch.zimi_cn_1094913474_dhkg05_on_p_4_1
    name: 厨房灯
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/light_on.png
    state_image:
      "on": /local/floorplan/examples/tupian/light_on.png
    state_filter:
      "on": brightness(130%) saturate(1.5)
      "off": brightness(80%) saturate(0.8)
    style:
      top: 28%
      left: 38%
      width: 8%
  - type: state-label
    entity: sensor.miaomiaoc_cn_blt_3_194rplouo5s00_t2_temperature_p_2_1
    name: 书房防潮箱-温度
    style:
      top: 10%
      left: 85%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.miaomiaoce_t2_beec_relative_humidity
    name: 书房防潮箱-湿度
    style:
      top: 12%
      left: 85%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.miaomiaoc_cn_blt_3_1gsn2riac4g02_t2_temperature_p_2_1
    name: 卫生间温度
    style:
      top: 35%
      left: 78%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.miaomiaoc_cn_blt_3_1gsn2riac4g02_t2_relative_humidity_p_2_2
    name: 卫生间湿度
    style:
      top: 37%
      left: 78%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg01hl_f69d_temperature
    name: 主卧温度
    style:
      top: 59%
      left: 70%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg01hl_f69d_relative_humidity
    name: 主卧湿度
    style:
      top: 61%
      left: 70%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg03hl_0046_temperature
    name: 客厅温度
    style:
      top: 59%
      left: 22%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg03hl_0046_relative_humidity
    name: 客厅湿度
    style:
      top: 61%
      left: 22%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg01hl_c31e_temperature
    name: 书房温度
    style:
      top: 25%
      left: 68%
      font-size: 13px
      font-weight: bold
      color: black
  - type: state-label
    entity: sensor.isa_kg01hl_c31e_relative_humidity
    name: 书房湿度
    style:
      top: 27%
      left: 68%
      font-size: 13px
      font-weight: bold
  - type: image
    entity: sensor.linp_cn_1004920296_hb01_occupancy_status_p_2_1
    name: 书房人体存在传感器
    image: /local/floorplan/examples/tupian/people.png
    state image:
      someone exists: /local/floorplan/examples/tupian/people.png
    state_filter:
      有人: brightness(120%) saturate(1.5)
      无人: brightness(80%) saturate(0.8)
    style:
      top: 19%
      left: 71%
      width: 5%
  - type: image
    entity: sensor.linp_cn_1102682227_hb01_occupancy_status_p_2_1
    name: 厨房人体存在传感器
    image: /local/floorplan/examples/tupian/people.png
    state image:
      someone exists: /local/floorplan/examples/tupian/people.png
    state_filter:
      有人: brightness(120%) saturate(1.5)
      无人: brightness(80%) saturate(0.8)
    style:
      top: 33%
      left: 38%
      width: 5%
  - type: image
    entity: sensor.linp_cn_1005816687_hb01_occupancy_status_p_2_1
    name: 餐厅人体存在传感器
    image: /local/floorplan/examples/tupian/people.png
    state image:
      someone exists: /local/floorplan/examples/tupian/people.png
    state_filter:
      有人: brightness(120%) saturate(1.5)
      无人: brightness(80%) saturate(0.8)
    style:
      top: 46%
      left: 55%
      width: 5%
  - type: state-icon
    entity: event.lumi_cn_blt_3_1b7t9g7rke000_bmgl01_motion_detected_e_2_1
    name: 书房人体传感器
    style:
      top: 30%
      left: 55%
      font-size: 15px
  - type: state-icon
    entity: event.lumi_cn_blt_3_1aoltvrig5k00_bmgl01_motion_detected_e_2_1
    name: 客厅人体传感器
    style:
      top: 78%
      left: 42%
      font-size: 15px
  - type: image
    entity: climate.lumi_cn_433832723_mcn02
    name: 主卧空调
    image: /local/floorplan/examples/tupian/空调3.png
    state_image:
      "on": /local/floorplan/examples/tupian/空调3.png
    state_filter:
      "on": brightness(200%) saturate(1.5)
      "off": brightness(40%) saturate(0.8)
    style:
      top: 71.5%
      left: 41.5%
      width: 14%
      transform: rotate(270deg)
  - type: image
    entity: climate.lumi_cn_442347750_mcn02
    name: 书房空调
    image: /local/floorplan/examples/tupian/空调3.png
    state_image:
      "on": /local/floorplan/examples/tupian/空调3.png
    state_filter:
      "on": brightness(200%) saturate(1.5)
      "off": brightness(40%) saturate(0.8)
    style:
      top: 9%
      left: 42.5%
      width: 14%
      transform: rotate(270deg)
  - type: image
    entity: climate.miir_ir02_6578_ir_aircondition_control
    name: 餐厅空调
    image: /local/floorplan/examples/tupian/空调3.png
    state_image:
      "on": /local/floorplan/examples/tupian/空调3.png
    state_filter:
      "on": brightness(200%) saturate(1.5)
      "off": brightness(40%) saturate(0.8)
    style:
      top: 33.5%
      left: 36%
      width: 14%
      transform: rotate(360deg)
  - type: image
    entity: switch.bo_lian_cha_zuo_fei_xun_r1
    name: 斐讯R1
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/音箱.png
    state_image:
      "on": /local/floorplan/examples/tupian/音箱.png
      "off": /local/floorplan/examples/tupian/音箱.png
    state_filter:
      "on": brightness(120%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 11%
      left: 57%
      width: 6%
  - type: state-icon
    entity: sensor.yan_huo_zhi_wu_geocoded_location
    name: 定位
    image: /local/floorplan/examples/tupian/互联网.png
    style:
      top: 12%
      left: 37%
      width: 10%
  - type: image
    entity: media_player.miir_ir01_0832_ir_tv_control
    name: 客厅电视
    image: /local/floorplan/examples/tupian/电视.png
    state image:
      "on": /local/floorplan/examples/tupian/电视.png
    state_filter:
      "on": brightness(150%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 65%
      left: 40%
      width: 6%
      transform: rotate(90deg)
  - type: image
    entity: switch.bo_lian_cha_zuo_n1
    name: 书房斐讯N1
    image: /local/floorplan/examples/tupian/电视.png
    state image:
      "on": /local/floorplan/examples/tupian/电视.png
    state_filter:
      "on": brightness(150%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 9%
      left: 62%
      width: 6%
      transform: rotate(0deg)
  - type: state-icon
    entity: select.chunmi_a1_ed23_start_cook
    name: 小米养生壶
    style:
      top: 8%
      left: 72%
      width: 8%
      transform: rotate(0deg)
  - type: state-label
    entity: sensor.chunmi_cn_434657742_a1_status_p_2_1
    name: 小米养生壶状态
    style:
      top: 8%
      left: 76%
  - type: image
    entity: switch.dc1_04ac5d_3
    name: 客厅电视盒子
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/电视盒子.png
    state image:
      "on": /local/floorplan/examples/tupian/电视盒子.png
    state_filter:
      "on": brightness(100%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 70%
      left: 41%
      width: 5%
      transform: rotate(90deg)
  - type: image
    entity: switch.xi_yi_ji_yun_xing_zhuang_tai
    name: 洗衣机
    image: /local/floorplan/examples/tupian/洗衣机.png
    state image:
      "on": /local/floorplan/examples/tupian/洗衣机.png
    state_filter:
      "on": brightness(110%) saturate(2.0)
      "off": brightness(45%) saturate(0.8)
    style:
      top: 81%
      left: 17%
      width: 7%
      transform: rotate(270deg)
  - type: image
    entity: sensor.soocare_m1s_3322_score
    name: 刷牙分数
    image: /local/floorplan/examples/tupian/牙刷1.png
    style:
      top: 33%
      left: 61%
      width: 6%
  - type: state-icon
    entity: sensor.soocare_m1s_3322_timestamp
    name: 刷牙时间
    style:
      top: 33%
      left: 67%
  - type: state-icon
    entity: sensor.isa_cn_blt_3_19crvmmpo5s00_dw2hl_contact_state_p_2_2
    name: 大门
    style:
      top: 35.5%
      left: 22.5%
      width: 10%
      transform: rotate(0deg)
  - type: image
    entity: switch.bo_lian_cha_zuo_sha_fa
    name: 沙发插座
    tap_action:
      action: toggle
    image: /local/floorplan/examples/tupian/power3-on.png
    state_image:
      "on": /local/floorplan/examples/tupian/power3-on.png
      "off": /local/floorplan/examples/tupian/power3.png
    style:
      top: 78%
      left: 19.5%
      width: 5%
  - type: image
    entity: switch.usb
    name: 主卧音箱
    image: /local/floorplan/examples/tupian/音箱.png
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/examples/tupian/音箱.png
      "off": /local/floorplan/examples/tupian/音箱.png
    state_filter:
      "on": brightness(120%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 77%
      left: 71%
      width: 5%
  - type: image
    entity: switch.shui_hu_yun_xing_zhuang_tai
    name: 水壶
    image: /local/floorplan/examples/tupian/水壶.png
    state_image:
      "on": /local/floorplan/examples/tupian/水壶.png
      "off": /local/floorplan/examples/tupian/水壶.png
    state_filter:
      "on": brightness(150%) saturate(2.0)
      "off": brightness(60%) saturate(0.8)
    style:
      top: 22%
      left: 27%
      width: 6%
      transform: rotate(0deg)
  - type: image
    entity: switch.re_shui_qi_yun_xing_zhuang_tai
    name: 热水器
    image: /local/floorplan/examples/tupian/热水器.png
    state_image:
      "on": /local/floorplan/examples/tupian/热水器.png
      "off": /local/floorplan/examples/tupian/热水器.png
    state_filter:
      "on": brightness(100%) saturate(2.0)
      "off": brightness(40%) saturate(0.8)
    style:
      top: 19%
      left: 41%
      width: 9%
      transform: rotate(0deg)
  - type: image
    entity: switch.xuan_guan_yun_xing_zhuang_tai
    name: 玄关插座
    image: /local/floorplan/examples/tupian/插座.png
    state_image:
      "on": /local/floorplan/examples/tupian/插座.png
      "off": /local/floorplan/examples/tupian/插座.png
    state_filter:
      "on": brightness(120%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 53%
      left: 26%
      width: 6%
  - type: image
    entity: switch.dian_fan_bao_yun_xing_zhuang_tai
    name: 电饭煲
    image: /local/floorplan/examples/tupian/电饭煲.png
    state_image:
      "on": /local/floorplan/examples/tupian/电饭煲.png
      "off": /local/floorplan/examples/tupian/电饭煲.png
    state_filter:
      "on": brightness(100%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 28%
      left: 45%
      width: 5%
  - type: image
    entity: switch.cddz_cn_741189660_pc01w_on_p_2_1
    name: PC电脑
    image: /local/floorplan/examples/tupian/电脑.png
    state_image:
      "on": /local/floorplan/examples/tupian/电脑.png
      "off": /local/floorplan/examples/tupian/电脑.png
    state_filter:
      "on": brightness(100%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 42%
      left: 81%
      width: 6%
  - type: image
    entity: humidifier.deerma_cn_741703456_jsq2g
    name: 小米加湿器
    image: /local/floorplan/examples/tupian/加湿器.png
    state_image:
      "on": /local/floorplan/examples/tupian/加湿器.png
      "off": /local/floorplan/examples/tupian/加湿器.png
    state_filter:
      "on": brightness(100%) saturate(2.8)
      "off": brightness(50%) saturate(0.8)
    style:
      top: 25%
      left: 52%
      width: 6%

```

最后修改：2025 年 01 月 02 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

HACS搭建floorplan

焰火之舞 • 2022 年 02 月 23 日

效果图：

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/1855520911.png)

![图片.png](http://blog.cloud620.cn:6620/usr/uploads/2023/04/515516893.png)

1.创建目录

[图片.zip](http://www.cloud620.cn:6620/usr/uploads/2022/02/1683880366.rar)

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/760737461.png)

2.添加卡片元素

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/2931012210.png)

![图片.png](http://www.cloud620.cn:6620/usr/uploads/2022/02/4014103894.png)

脚本-2025-01-02

```

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

HACS搭建floorplan

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款