【还有这种操作】Floorplan第一帖，图形化控制你的家居！

倾微qiwe · 发表于 2017-9-7 23:01:23

本帖最后由倾微qiwe 于 2017-9-8 16:15 编辑

导航：请按照顺序查看！！

【还有这种操作】用Floorplan制作一个简单的电视遥控器UI
【Floorplan教程三】制作自己的SVG图片文件
【Floorplan教程四】写Floorplan.yaml配置文件和CSS主题属性文件

Floorplan可以说是最完美的智能家居管理方式了，无奈较为复杂，今天我就分享一些简单的入门教程
写在前面：我不是什么大神，以下内容没有任何专业知识，纯粹个人理解和分享。我用最通俗易懂的方式说，这样就很容易理解了！
项目地址：ha-floorplan
1.先说什么是Floorplan
Floorplan 我理解的就是把HA中的项目以图形化的方式显示出来，且可以控制。
几乎可以容纳所有的HA项目，包含显示数据/文字（温湿度，传感器所有你需要显示的内容）。控制开关/灯光/等所有你想控制的HA设备。状态实时反馈。
上面说的不理解，那看图吧
屏幕快照 2017-09-08 上午8.51.58.png

作者的案例

外国人的

群友阳关下的冰分享

外国人房子就是大

外国人的房子就是大

这个厉害吧！

群友迷之音分享

这个厉害吧！群友迷之音分享！

看了上面这些是不是心动了！下面开始上车！

2.Floorplan的接入HA原理？
froolplan 接入HA需要三个文件
--1-floorplan.svg
---这个是主图像文件，SVG格式的图片文件，这种格式属于矢量格式，可以随意放大，缩小。图片里面的每一个图像都可以自定义ID，这样HA就可以控制了。
并且每一个子图像的大小，颜色，位置等主题属性都可以通过CSS文件后期调整。这样就能实现和HA中项目联动，不同状态显示不同的颜色/大小等等
--2-floorplan.css
---这个文件就是定义SVG图片里面的子图像的属性的文件，上面也说过。当然这个文件不是直接修改子图像的属性，而是先写好你需要的属性，后面再调用。
--3-floorplan.yaml
---yaml文件大家都很熟悉了，就是floorplan的配置文件。哪些设备要接入floorplan，要调用设什么属性，等等
以上三个文件，文件名字都可以改，只要配置文件写对就ok
3.Floorplan的接入HA方法？
1. 下载文件，把文件发到HA配置文件夹的对应位置，位置如下！
https://github.com/pkozul/ha-floorplan
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/ha-floorplan.html
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.svg
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.css
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/moment.min.js
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
/home/homeassistant/.homeassistant/floorplan.yaml
/home/homeassistant/.homeassistant/panels/floorplan.html
注意如果你的homeassistant配置文件夹不一样，放对应位置就对了。
下载的文件已经包含了作者做的一个案例，我们先按照作者做的接入到HA试试!
2.接入到HA（以group分组的方式）效果如图：
屏幕快照 2017-09-08 上午9.18.58.png

###1.添加一个实体id用于显示floorplan。  在对应位置添加
binary_sensor:    - platform: mqtt      
     state_topic: dummy/floorplan/sensor     
     name: Floorplan    ##名字可以自定义，如果要添加多个，名字不同就行了

###2.给这个ID写上customize属性
customize:      
  binary_sensor.floorplan:          ##这就是上面那个ID
    custom_ui_state_card: floorplan    ##这个不能动
    config: !include floorplan.yaml    ##这个ID的配置文件
###3.添加到你的group分组分页中。
zones:
  name: 我的家               ###名字   
  entities:
    - binary_sensor.floorplan    ###id
###4.重要的一步骤。给相关文件可读取权限！
在中终端中输入一下代码
sudo -i    ##进入ROOT权限账户
chmod -R 777 /home/homeassistant/.homeassistant/   ##修改次文件夹下所有文件的权限
exit       ##退出ROOT权限账户
###5.重启HA看看效果

3.以侧边栏的方式显示Floorplan，效果如图：
屏幕快照 2017-09-08 上午9.19.59.png

在ha配置文件中添加：

panel_custom:
  - name: floorplan ##ID名字
    sidebar_title: Floorplan ##显示的名字
    sidebar_icon: mdi:home ##图标
    url_path: floorplan ##这个不动
    config: !include floorplan.yaml ##floorplan网页配置文件
重启ok