『瀚思彼岸』» 智能家居技术论坛

标题: 小白教小白-lovelace的房型图 [打印本页]
作者: lione95678    时间: 2020-3-10 15:22
标题: 小白教小白-lovelace的房型图
本帖最后由 lione95678 于 2020-3-10 15:24 编辑

先上gif
[attach]21544[/attach]

    很羡慕高手用floorplan做的房型图界面，不过我的hass安装floorplan后死活不能用，后来看了一下lovelace的介绍，用Lovelace UI的PictureElements（图片元素）做了一个房型图的卡片，搞得累死（我英文不行，用网页翻译看的一愣一愣的）。下面来一个小白教小白的教程。
    一、主要说明：
    下面的示例我用了3个继电器开关来进行灯的控制，1个二进制传感器来进行门开关的显示，一个设备追踪（device_tracker）来实现查看老婆是否在家（我的是UniFi），一个萤石的摄像头（gif动画里没有，但后面的配置文件中我会加进去）
    这里单独对3个继电器讲一下，我连接了esp8266，刷了esphome，我是一个房间有3个灯，想用开3个灯的开关在房型图中显示不同的亮度，所以在esphome中加了一个text_sensor，后面也会在配置文件中显示）。
    房型图我建议大家在网上搜索，在百度的图片里，搜索你们小区的名字，很多房型图就可以找到，比自己做方便，我认为也好看。
    二、步骤
    既然是小白教小白，步骤我写的详细点
    1、在hass的主界面，点击左侧的概览，再点击右上角的三个点，选择“配置ui”
    2、然后点击+号，跳出来如下图
   
[attach]21545[/attach]


标题：随意，比如“房型图”
其他的我没有填写，你按需要填写，注意后面的“面板模式”，是指这个卡片你是否需要全屏显示，我没有点开，所以示例中是卡片模式，不是全屏的，但这时你要注意一下，后面的房型图你要使用竖向的，卡片模式好像宽度是定死的，如果你的房型图是横向的，建议改成竖向的，否则房型图是很小的。或者打开这个“面板模式”，然后修改图片的分辨率或者比例，我没试过。
    3、点击保存，跳出如下图：
选择图片元素（英文的话是PictureElements）
[attach]21546[/attach]
    4、点击后如下图，把里面的内容清空，把我后面提供的fangxingtu.yaml文件中的内容按你的需要复制过去。
[attach]21547[/attach]
在fangxingtu.yaml文件中，我把注释都写好了，你自己看一下吧。
    把我提供的floorplan文件夹的放到home-assistant的www文件夹内，然后按你需要修改或增减图片，然后在卡片配置里面进行修改，注意，www文件夹对应的就是卡片配置中/local/


作者: lione95678    时间: 2020-3-10 15:26
[attach]21548[/attach]
作者: lione95678    时间: 2020-3-10 15:49
我把配置单独贴出来吧，省的下载附件
说一下esphome的配置，因为我的实际需要，我一个房间里有3个灯，我要求当3个灯在不同的开关状态下，需要房间显示不同的亮度，所以在esphome里加了一个自动化的脚本和一个文本传感器模块，做到3个灯全关，这个房间是黑白的，开1个灯，房间的亮度是30%，开2个灯是70%，全开就是亮度100%
1、esphome的配置
  1. switch:                           #示例中用了3个switch，基本设置没问题，看里面的on_turn_on和on_turn_off
  2.   - platform: gpio
  3.     pin:
  4.       number: D5
  5.       inverted: False
  6.       mode: OUTPUT
  7.     name: "jidianqi1"
  8.     id: jidianqi1
  9.     on_turn_on:                              #当jidianqi1的switch打开时，触动自动化的脚本
  10.       then:
  11.         - script.execute: zidonghua1
  12.     on_turn_off:
  13.       then:
  14.         - script.execute: zidonghua1
  15.          
  16.    
  17.   - platform: gpio
  18.     pin:
  19.       number: D6
  20.       inverted: False
  21.       mode: OUTPUT
  22.     name: "jidianqi2"
  23.     id: jidianqi2
  24.     on_turn_on:
  25.       then:
  26.         - script.execute: zidonghua1
  27.     on_turn_off:
  28.       then:
  29.         - script.execute: zidonghua1   
  30.    
  31.    
  32.   - platform: gpio
  33.     pin:
  34.       number: D7
  35.     name: "jidianqi3"
  36.     id: jidianqi3
  37.     on_turn_on:
  38.       then:
  39.         - script.execute: zidonghua1
  40.     on_turn_off:
  41.       then:
  42.         - script.execute: zidonghua1
  43.    
  44. text_sensor:                             #这事一个文本传感器，详见https://esphome.io/components/text_sensor/template.html?highlight=text_sensor
  45.   - platform: template
  46.     name: "ciwodeng_zhuangtai"
  47.     id: ciwodeng_zhuangtai   



  51. script:                                   #这个就是自动化 的脚本，
  52.   - id: zidonghua1                        #这事这个脚本的id
  53.     then:
  54.       - if:                                #以下就是当jidianqi1、jidianqi2、jidianqi3全部打开，在id为 ciwodeng_zhuangtai的text_sensor下发布的值为100%
  55.           condition:
  56.             and:
  57.               - switch.is_on: jidianqi1
  58.               - switch.is_on: jidianqi2
  59.               - switch.is_on: jidianqi3
  60.           then:
  61.             - text_sensor.template.publish:
  62.                 id: ciwodeng_zhuangtai
  63.                 state: "100%"
  64.       - if:                                   #以下就是当jidianqi1、jidianqi2、jidianqi3全部关闭，在id为 ciwodeng_zhuangtai的text_sensor下发布的值为0%
  65.           condition:
  66.             and:
  67.               - switch.is_off: jidianqi1
  68.               - switch.is_off: jidianqi2
  69.               - switch.is_off: jidianqi3
  70.           then:
  71.             - text_sensor.template.publish:
  72.                 id: ciwodeng_zhuangtai
  73.                 state: "0%"   
  74.                
  75.       - if:
  76.           condition:
  77.             and:
  78.               - switch.is_on: jidianqi1
  79.               - switch.is_off: jidianqi2
  80.               - switch.is_on: jidianqi3
  81.           then:
  82.             - text_sensor.template.publish:
  83.                 id: ciwodeng_zhuangtai
  84.                 state: "70%"               
  85.       - if:
  86.           condition:
  87.             and:
  88.               - switch.is_on: jidianqi1
  89.               - switch.is_on: jidianqi2
  90.               - switch.is_off: jidianqi3
  91.           then:
  92.             - text_sensor.template.publish:
  93.                 id: ciwodeng_zhuangtai
  94.                 state: "70%"                 
  95.                
  96.       - if:
  97.           condition:
  98.             and:
  99.               - switch.is_off: jidianqi1
  100.               - switch.is_on: jidianqi2
  101.               - switch.is_on: jidianqi3
  102.           then:
  103.             - text_sensor.template.publish:
  104.                 id: ciwodeng_zhuangtai
  105.                 state: "70%"                 
  106.                
  107.       - if:
  108.           condition:
  109.             and:
  110.               - switch.is_on: jidianqi1
  111.               - switch.is_off: jidianqi2
  112.               - switch.is_off: jidianqi3
  113.           then:
  114.             - text_sensor.template.publish:
  115.                 id: ciwodeng_zhuangtai
  116.                 state: "30%"                  
  117.                
  118.       - if:
  119.           condition:
  120.             and:
  121.               - switch.is_off: jidianqi1
  122.               - switch.is_on: jidianqi2
  123.               - switch.is_off: jidianqi3
  124.           then:
  125.             - text_sensor.template.publish:
  126.                 id: ciwodeng_zhuangtai
  127.                 state: "30%"               
  128.                
  129.       - if:
  130.           condition:
  131.             and:
  132.               - switch.is_off: jidianqi1
  133.               - switch.is_off: jidianqi2
  134.               - switch.is_on: jidianqi3
  135.           then:
  136.             - text_sensor.template.publish:
  137.                 id: ciwodeng_zhuangtai
  138.                 state: "30%"               

复制代码


2、lovelace的卡片配置
  1. type: picture-elements            #type（类型）：必须是这个（图片元素）
  2. image: /local/floorplan/shili/fangxingtu.png       #image（图片）：图片的地址，这个地址就是www文件夹下（local就是www文件夹），如果你按我这个示例，就是把floorplan文件夹放入www文件夹即可
  3. elements:                         #elements（元素）：你要在图片下显示哪些元素
  4.   
  5. #例子1-3，就是在次卧内的不同位置放上3个继电器图标，点击后切换继电器状态
  6.   #例子1，比较简单，使用hass内部的图标在总图上显示，只做简单的继电器切换动作（开关）
  7.   - type: state-icon     #type（类型）：是图标，这个例子中，下面没有icon:，即使用这个实体的默认图标。备注：state-icon（系统默认图标）state-label（系统默认文字）image（指定的图片）icon（指定的图标）
  8.     entity: switch.jidianqi1    #entity（实体）：你要显示的开关或传感器等
  9.     style:                      #style（样式）：实际上技术这个实体的图片在总图片的位置  
  10.       left: 25%                 #距离左侧25%
  11.       top: 63%                  #距离顶部63%
  12.     tap_action:                 #tap_action：轻按（点击）后的效果
  13.       action: toggle            #action（行为）：切换


  16.   #例子2，同上
  17.   - type: state-icon     
  18.     entity: switch.jidianqi1   
  19.     style:                        
  20.       left: 34%                 
  21.       top: 63%                  
  22.     tap_action:                 
  23.       action: toggle            

  25.   #例子3，同上
  26.   - type: state-icon     
  27.     entity: switch.jidianqi1   
  28.     style:                        
  29.       left: 44%                  
  30.       top: 63%                  
  31.     tap_action:                 
  32.       action: toggle            


  35. #例子4，在本例中，我单独添加了一张次卧的图片，实现了根据3个继电器的开关情况，来实现次卧的亮度显示，这个例子需需结合我esphome的配置
  36.   - type: image                                       #type（类型）：是图片
  37.     image: /local/floorplan/shili/ciwo.png            #图片的位置
  38.     entity: sensor.ciwodeng_zhuangtai                  #实体的来源，这个例子需结合我esphome的配置
  39.     state_filter:                                     #不同状态下图片的信息，你可以通过调整亮度、饱和度和透明度来实现图片黑白，彩色，全透明等
  40.       0%: brightness(80%) saturate(0.1)opacity(100%)  #传感器为0%状态下（本例中为3个继电器全关），图片的亮度为80%，饱和度为0.1，透明敷为100%（即不透明）
  41.       100%: brightness(100%) saturate(2.5)opacity(100%) #传感器为0%状态下（本例中为3个继电器全开），图片的亮度为100%，饱和度为2.5，透明敷为100%（即不透明）
  42.       30%: brightness(100%) saturate(0.5)opacity(100%) #传感器为30%状态下（本例中为3个继电器只开了任意1个），图片的亮度为100%，饱和度为0.5，透明敷为100%（即不透明）
  43.       70%: brightness(100%) saturate(1)opacity(100%)  #传感器为7%状态下（本例中为3个继电器只开了任意2个），图片的亮度为100%，饱和度为1，透明敷为100%（即不透明）
  44.     style:                                            #style（样式）：实际上技术这个实体的图片在总图片的位置
  45.       left: 31%                                      #距离左侧
  46.       top: 71%                                      #距离顶部
  47.       width: 32%                                #这个实际上是图片的大小比例
  48.     tap_action:                          #单击这个图片的操作，我这里是none，你视情况而定 详见https://www.home-assistant.io/lovelace/actions/#tap-action
  49.       action: none
  50.     double_tap_action:                   #双击这个图片的操作，我这里是none，你视情况而定  详见https://www.home-assistant.io/lovelace/actions/#double-tap-action
  51.       action: none
  52.     hold_action:                         #长按这个图片的操作，我这里是none，你视情况而定  详见https://www.home-assistant.io/lovelace/actions/#hold-action
  53.       action: none

  55. #例子5，在本例中，我添加了开门和关门的图片，可按照门磁传感器的状态在房型图中进行动画显示
  56.   - type: image                      #type（类型）：是图片
  57.     entity: sensor.ciwomen         #entity（实体）：你要显示的开关或传感器等
  58.     state_image:                      #在传感器不同状态下显示的图片，这里不能是jpg，因为png的底层可以是透明的
  59.       'off': /local/floorplan/shili/door_guan2.png  #传感器off状态下所显示的图片
  60.       'on': /local/floorplan/shili/door_kai2.png    #传感器on状态下所显示的图片
  61.     state_filter:                    #同例4，不解释了
  62.       'off': brightness(120%) saturate(1.2)opacity(100%)
  63.       'on': brightness(120%) saturate(1.2)opacity(100%)
  64.     style:                          #同例4，不解释了
  65.       left: 60%
  66.       top: 68%
  67.       width: 7%

  69. #例子6，在本例中，我添加了一张女主人的图片，配合device_tracker，可以显示某个人是否在家
  70.   - type: image                           #type（类型）：是图片
  71.     entity: device_tracker.nvzhuren                    
  72.     image: /local/floorplan/shili/nvzhuren.png   #图片的位置
  73.     state_filter:
  74.       'off': brightness(100%) saturate(0.1)opacity(100%)  #同上例，这里实际上是当off时，图片是黑白的，你可以将opacity调整为0，这样就是当off时，这张图片是透明的（即看不到这张图片）
  75.       'on': brightness(100%) saturate(1)opacity(100%)
  76.     style:
  77.       left: 75%
  78.       top: 24%
  79.       width: 10%
  80.    
  81. #例子7，在本例中，我增加了一个摄像头的预览图框，可以在房型图中显示摄像头的预览图，因为我演示用的电脑里没有安装摄像头，所以上面的gif动画中看不到
  82.   - type: image
  83.     entity: camera.guodao         #摄像头的实体名称
  84.     camera_image: camera.guodao   #摄像头的实体名称
  85.     style:                              #缩略图位于位置及其他相关参数
  86.       top: 5%                    
  87.       left: 10%
  88.       width: 10%                         #缩略图的大小
  89.       border: 2px solid black              #在缩略图外面用红色边框，2px为边框的粗细，black为黑色
  90.       border-radius: 10%                  #边框四个角的倒角，0%为直角

  92. #例子8和9，我在这两个例子中加了一个次卧灯全开和全关的文字，通过点击这两行文字，实现call Services，来全开和全关次卧灯的操作
  93. #例子8，详见https://www.home-assistant.io/lovelace/picture-elements/#service-call-button
  94.   - type: service-button          #type（类型）：是服务呼叫按键
  95.     service: switch.turn_on       #服务的类型，就是打开继电器，你可以在你hass的http://192.**.**.**:8123/developer-tools/service或者http://192.**.**.**:8123/dev-service中查看到（视你hass的版本）
  96.     service_data:                #服务的实体，就是你要让哪几个switch执行turn_on的操作
  97.       entity_id: 'switch.jidianqi1,switch.jidianqi2,switch.jidianqi3'
  98.     style:
  99.       left: 80%
  100.       top: 95%
  101.       width: 0%
  102.     title: 次卧灯全开

  104. #例子9，详见https://www.home-assistant.io/lovelace/picture-elements/#service-call-button
  105.   - type: service-button          #type（类型）：是服务呼叫按键
  106.     service: switch.turn_off       #服务的类型，就是打开继电器，你可以在你hass的http://192.**.**.**:8123/developer-tools/service或者http://192.**.**.**:8123/dev-service中查看到（视你hass的版本）
  107.     service_data:                #服务的实体，就是你要让哪几个switch执行turn_on的操作
  108.       entity_id: 'switch.jidianqi1,switch.jidianqi2,switch.jidianqi3'
  109.     style:
  110.       left: 80%
  111.       top: 90%
  112.       width: 0%
  113.     title: 次卧灯全开   











复制代码


作者: comeon_000    时间: 2020-3-10 22:26
不错的想法，赞大别墅！
作者: lione95678    时间: 2020-3-11 09:45
comeon_000 发表于 2020-3-10 22:26
不错的想法，赞大别墅！

这不是我的房子，没这么多钱买别墅，随便从百度上下载的
作者: zsyg    时间: 2020-3-11 17:57
谢谢分享  
作者: lione95678    时间: 2020-3-12 13:20
忘了一件事，你要把例子4的type放在最上面，就是第一个type，否则次卧的图片会挡住几个灯的图标
作者: kaspar    时间: 2020-3-13 06:02
mark下，不错的想法
作者: turtlepeak    时间: 2020-3-21 19:15
详细的教程，赞。
作者: nisofer    时间: 2021-1-12 23:00

谢谢分享 ！！！
作者: angus9487    时间: 2021-9-10 15:01
mark下，正好要用
作者: jhbl    时间: 2021-9-29 17:19
赠人玫瑰，手有余香……
作者: kuoyeh    时间: 2022-1-23 14:43
请问，加入在图片元素中加入摄像头后，可以显示个缩略图，可不可以做到点一下，就显示摄像头的实时监控画面
作者: 758639304    时间: 2022-2-18 20:11
详细的教程，赞。



欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5