可视化控制基本完成，附卡片代码，需要的赶紧学起来！

达文西XXL

经过今天的细节打磨修改我的可视化控制基本完成，虽然对有些要求高的同学来说不算美观但是实用就够了，
以后有美化要求再慢慢修改！！！

卡片代码在最下面，复制修改自己关键参数就可以搞定！！！


注意！！！注意！！！注意！！！
先设置好所有的开关开启状态的叠加图，再一直设置透明开关触摸按钮！！！
这里有坑  多加注意！！！！



type: picture-elements
image: /local/home/home.png  #这里设置背景图片
elements:  #这里设置温度实体，湿度的话再复制一个改ID就可以
  - type: state-label
    entity: sensor.t2_cloud_us5g00_temperature
    style:
      top: 5%     
      left: 45%
      background: /local/home/taideng.png
      text-align: center
      font-size: 20px
      color: white
      font-family: Helvetica

  - type: image  #这里设置开灯图片叠加的效果  灯1
    entity: switch.m1_cloud_157584
    tap_action:
      action: none
    state_image:
      'on': /local/home/keting.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯2
    entity: switch.m1_cloud_945793
    tap_action:
      action: none
    state_image:
      'on': /local/home/canting.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯3
    entity: switch.m3_cloud_362649
    tap_action:
      action: none
    state_image:
      'on': /local/home/cufang.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯4
    entity: light.downlight_cloud_794074
    tap_action:
      action: none
    state_image:
      'on': /local/home/guodao.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯5
    entity: switch.m3_cloud_593327
    tap_action:
      action: none
    state_image:
      'on': /local/home/ertong.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯6
    entity: light.rwread_cloud_506945
    tap_action:
      action: none
    state_image:
      'on': /local/home/taideng.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开灯图片叠加的效果 灯7
    entity: switch.m1_cloud_960040
    tap_action:
      action: none
    state_image:
      'on': /local/home/woshi.png
      'off': /local/home/touming.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯1 触摸按钮
    entity: light.rwread_cloud_506945
    tap_action:
      action: toggle
    state image:
      'on': /local/home/anniu.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 53%
      left: 73.2%
      width: 10%
      height: 27%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯2 触摸按钮
    entity: switch.m1_cloud_157584
    tap_action:
      action: toggle
    state image:
      'on': /local/home/anniu.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 24%
      left: 60%
      width: 18%
      height: 26%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯3 触摸按钮
    entity: switch.m1_cloud_945793
    tap_action:
      action: toggle
    state image:
      'on': /local/home/anniu.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 23%
      left: 44.25%
      width: 12%
      height: 24%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯4 触摸按钮
    entity: switch.m3_cloud_362649
    tap_action:
      action: toggle
    state image:
      'on': /local/home/anniu.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 24%
      left: 29%
      width: 16%
      height: 30%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯5 触摸按钮
    entity: switch.m3_cloud_593327
    tap_action:
      action: toggle
    state image:
      'on': /local/home/ertong.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 52.5%
      left: 62%
      width: 11%
      height: 28%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯6 触摸按钮
    entity: light.downlight_cloud_794074
    tap_action:
      action: toggle
    state image:
      'on': /local/home/guodao.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 43%
      left: 53%
      width: 5.5%
      height: 9%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1
  - type: image  #这里设置开关按钮的区域了喔  注意 注意！！！！ 灯7 触摸按钮
    entity: switch.m1_cloud_960040
    tap_action:
      action: toggle
    state image:
      'on': /local/home/woshi.png
      'off': /local/home/anniu.png
      unavailable: /local/home/touming.png
    style:
      top: 68%
      left: 46%
      width: 20%
      height: 40%
      border: 1px solid red
      opacity: 0  #这是开关范围线框透明度  完成改成0  调试的时候改成1

哎呦不错哦

坐沙发

wuyouning

支持分享

zxyny1989

为啥不用ha-floorplan

Jashown

感谢楼主分享。想问一下怎么实现图片这么大的，还有就是能实现点击某个房间，跳到那个房间的仪表盘进而控制房间里的其他设备。

囧

你学废了吗

达文西XXL

zxyny1989 发表于 2022-9-2 02:58
为啥不用ha-floorplan

不会用呀，回头可以研究研究！！

达文西XXL

囧 发表于 2022-9-2 09:58
你学废了吗

还好，中途差点废了.

达文西XXL

Jashown 发表于 2022-9-2 08:40
感谢楼主分享。想问一下怎么实现图片这么大的，还有就是能实现点击某个房间，跳到那个房间的仪表盘进而控制 ...

这个我也还没有研究会，应该是要搞一个有切换功能的主题。

达文西XXL

Jashown 发表于 2022-9-2 08:40
感谢楼主分享。想问一下怎么实现图片这么大的，还有就是能实现点击某个房间，跳到那个房间的仪表盘进而控制 ...

这个我也还没有研究会，应该是要搞一个有切换功能的主题。