致敬蓝胖子的floorplan

angelyangw

背景：
论坛里有很多大神已经把floorplan的安装教程分享过了 这里就不在赘述
可以参考@倾微qiwe大神的https://bbs.hassbian.com/forum.php?mod=viewthread&tid=1087&highlight=floorplan
以及@cxlwill小姐姐的https://bbs.hassbian.com/forum.php?mod=viewthread&tid=1104&highlight=floorplan
受到cxlwill小姐姐的启示，原来floorplan不止是做一个户型图，所以才有了这篇分享，感谢小姐姐

首先，允许晒图


这个是未完成的作品，所以有几个图片默认还是会显示，完成后应该是默认都不显示，开启特定设备，显示特定图片，比如晒图中是点击哆啦A梦的左眼部分，会开启网关灯，同时小手电的图片会显示出来。下面一一说明:

1. 你得有一个svg 具体的做法么 看教程吧~~ 哈哈
2. 我这里是抠图出来单独做了一个图层，比如哆啦A梦的左眼部分，设置了网关灯的entities id
3. 设置特定图标的显示/隐藏  这里走了曲线救国的办法，我对css不熟悉，不知道怎么写，所以先写了一个sensor来监控网关灯的状态，然后用这个sensor的状态来显示/隐藏图片  希望有大神可以指导不用新建sensor怎么写这个css代码
floorplan.yaml中

    - name: Lights
          entities:
             - light.gateway_light_34ce0091ed6e            
          states:
            - state: 'on'
              class: 'light-on'
            - state: 'off'
              class: 'light-off'
          action:
            domain: homeassistant   
            service: toggle
            
        - name: Sensors    
          entities:
            - sensor.light_gateway_state
          states: 
            - state: 'off'
              class: 'light_gateway_hidden'
            - state: 'on'        
              class: light_gateway_visible

复制代码

floorplan.css中

.light_gateway_visible{
  visibility: visible; 
}

.light_gateway_hidden{
  visibility: hidden;
}

复制代码

sensor.yaml中定义的网关灯状态sensor

  - platform: template
    sensors:
      light_gateway_state:
        value_template: '{{  states.light.gateway_light_34ce0091ed6e.state }}'

复制代码

至此，如果不出问题，应该是可以做到晒图的这样咯，只是目前有个问题，图片太多，导致svg变的好大，加载有点慢  哈哈
晒完，希望各位能玩出更多花样

囧

太萌了

wanyakui520

卡哇伊

nakoururu

可以的，非常萌

倾微qiwe

厉害了！