小白教小白-lovelace的房型图

lione95678 · 发表于 2020-3-10 15:22:56

本帖最后由 lione95678 于 2020-3-10 15:24 编辑

先上gif

很羡慕高手用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、然后点击+号，跳出来如下图

标题：随意，比如“房型图”

其他的我没有填写，你按需要填写，注意后面的“面板模式”，是指这个卡片你是否需要全屏显示，我没有点开，所以示例中是卡片模式，不是全屏的，但这时你要注意一下，后面的房型图你要使用竖向的，卡片模式好像宽度是定死的，如果你的房型图是横向的，建议改成竖向的，否则房型图是很小的。或者打开这个“面板模式”，然后修改图片的分辨率或者比例，我没试过。

3、点击保存，跳出如下图：

选择图片元素（英文的话是PictureElements）

4、点击后如下图，把里面的内容清空，把我后面提供的fangxingtu.yaml文件中的内容按你的需要复制过去。

在fangxingtu.yaml文件中，我把注释都写好了，你自己看一下吧。

把我提供的floorplan文件夹的放到home-assistant的www文件夹内，然后按你需要修改或增减图片，然后在卡片配置里面进行修改，注意，www文件夹对应的就是卡片配置中/local/

lione95678 · 发表于 2020-3-10 15:26:28

示例.rar (1.93 MB, 下载次数: 163)

lione95678 · 发表于 2020-3-10 15:49:14

我把配置单独贴出来吧，省的下载附件
说一下esphome的配置，因为我的实际需要，我一个房间里有3个灯，我要求当3个灯在不同的开关状态下，需要房间显示不同的亮度，所以在esphome里加了一个自动化的脚本和一个文本传感器模块，做到3个灯全关，这个房间是黑白的，开1个灯，房间的亮度是30%，开2个灯是70%，全开就是亮度100%
1、esphome的配置

switch:                           #示例中用了3个switch，基本设置没问题，看里面的on_turn_on和on_turn_off
  - platform: gpio
    pin:
      number: D5
      inverted: False
      mode: OUTPUT
    name: "jidianqi1"
    id: jidianqi1
    on_turn_on:                              #当jidianqi1的switch打开时，触动自动化的脚本
      then:
        - script.execute: zidonghua1
    on_turn_off:
      then:
        - script.execute: zidonghua1
          
    
  - platform: gpio
    pin:
      number: D6
      inverted: False
      mode: OUTPUT
    name: "jidianqi2"
    id: jidianqi2
    on_turn_on:
      then:
        - script.execute: zidonghua1
    on_turn_off:
      then:
        - script.execute: zidonghua1   
    
    
  - platform: gpio
    pin:
      number: D7
    name: "jidianqi3"
    id: jidianqi3
    on_turn_on:
      then:
        - script.execute: zidonghua1
    on_turn_off:
      then:
        - script.execute: zidonghua1 
    
text_sensor:                             #这事一个文本传感器，详见https://esphome.io/components/text_sensor/template.html?highlight=text_sensor
  - platform: template
    name: "ciwodeng_zhuangtai"
    id: ciwodeng_zhuangtai    



script:                                   #这个就是自动化 的脚本，
  - id: zidonghua1                        #这事这个脚本的id
    then:
      - if:                                #以下就是当jidianqi1、jidianqi2、jidianqi3全部打开，在id为 ciwodeng_zhuangtai的text_sensor下发布的值为100%
          condition:
            and:
              - switch.is_on: jidianqi1
              - switch.is_on: jidianqi2
              - switch.is_on: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "100%"
      - if:                                   #以下就是当jidianqi1、jidianqi2、jidianqi3全部关闭，在id为 ciwodeng_zhuangtai的text_sensor下发布的值为0%
          condition:
            and:
              - switch.is_off: jidianqi1
              - switch.is_off: jidianqi2
              - switch.is_off: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "0%"   
                
      - if:
          condition:
            and:
              - switch.is_on: jidianqi1
              - switch.is_off: jidianqi2
              - switch.is_on: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "70%"                
      - if:
          condition:
            and:
              - switch.is_on: jidianqi1
              - switch.is_on: jidianqi2
              - switch.is_off: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "70%"                 
                
      - if:
          condition:
            and:
              - switch.is_off: jidianqi1
              - switch.is_on: jidianqi2
              - switch.is_on: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "70%"                 
                
      - if:
          condition:
            and:
              - switch.is_on: jidianqi1
              - switch.is_off: jidianqi2
              - switch.is_off: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "30%"                  
                
      - if:
          condition:
            and:
              - switch.is_off: jidianqi1
              - switch.is_on: jidianqi2
              - switch.is_off: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "30%"                
                
      - if:
          condition:
            and:
              - switch.is_off: jidianqi1
              - switch.is_off: jidianqi2
              - switch.is_on: jidianqi3
          then:
            - text_sensor.template.publish:
                id: ciwodeng_zhuangtai
                state: "30%"

2、lovelace的卡片配置

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


  #例子2，同上
  - type: state-icon     
    entity: switch.jidianqi1    
    style:                        
      left: 34%                 
      top: 63%                  
    tap_action:                 
      action: toggle            

  #例子3，同上
  - type: state-icon     
    entity: switch.jidianqi1    
    style:                        
      left: 44%                  
      top: 63%                  
    tap_action:                 
      action: toggle            


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

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

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

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

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

comeon_000 · 发表于 2020-3-10 22:26:51

不错的想法，赞大别墅！

lione95678 · 发表于 2020-3-11 09:45:40

comeon_000 发表于 2020-3-10 22:26
不错的想法，赞大别墅！

这不是我的房子，没这么多钱买别墅，随便从百度上下载的

zsyg · 发表于 2020-3-11 17:57:04

谢谢分享

lione95678 · 发表于 2020-3-12 13:20:03

忘了一件事，你要把例子4的type放在最上面，就是第一个type，否则次卧的图片会挡住几个灯的图标

kaspar · 发表于 2020-3-13 06:02:38

mark下，不错的想法

turtlepeak · 发表于 2020-3-21 19:15:29

详细的教程，赞。

nisofer · 发表于 2021-1-12 23:00:08

谢谢分享！！！

		自动登录	找回密码
密码			立即注册

[新奇玩法] 小白教小白-lovelace的房型图

评分