本帖最后由 倾微qiwe 于 2017-9-11 09:12 编辑
导航：请按照顺序查看！！
1.Floorplan第一帖，图形化控制你的家居
2.【还有这种操作】用Floorplan制作一个简单的电视遥控器UI
3.【Floorplan教程三】制作自己的SVG图片文件
4.【Floorplan教程四】写Floorplan.yaml配置文件和CSS主题属性文件
9月11号更新1.调整轮廓粗细，变粗了一些
2.增加了菜单按钮
3.增加了鼠标划过和点击的颜色变化反馈。
用ha接入过电视机的朋友可能有这种困惑
电视机这么多按键，上下左右，开关，音量。。。 ha的界面控制可就尴尬了
上一篇文章简单的介绍了Floorplan的接入方法，但是我估计不容易看懂。这次我就分享一个最简单的遥控器UI，好让大家与一反三，抛砖引玉，再对Floorplan熟悉一二！
看这个分享之前请先按照我上一篇分享成功把作者的Floorplan接入到HA，不然我这个分享没法进行。
上篇文章看不懂的，我也没办法了。 看作者的教程吧！
教程之前， 先看效果图
上车
1.下载最下面的文件，解压后放在以下对应位置
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/tv.svg
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/tv.css
/home/homeassistant/.homeassistant/tv.yaml
如果你的ha配置文件夹地址不一样，放在对应位置即可
2.用代码编辑器（如：notepad++/ATMO等等，不能用文本编辑器哈）打开tv.yaml这个文件！
重点！： 再用用代码编辑器打开tv.svg！ svg是图像文件，默认打开是图片哈，这里要用代码编辑器打开！！
如图：
打开之后这个样子就对了！
3.修改控制ID为你的控制ID！
请对照着上面图片！把对应的ID换成你的HA id就是了。
注意重点： 两个文件都要换！ 一定要先换tv.svg文件，建议用搜索的方式定位查找！
4.在HA配置文件中相应位置添加以下代码！
###1.添加一个实体id用于显示floorplan。 在对应位置添加
binary_sensor:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: tv ##名字可以自定义，如果要添加多个，名字不同就行了
###2.给这个ID写上customize属性
customize:
binary_sensor.tv: ##这就是上面那个ID
custom_ui_state_card: floorplan ##这个不能动
config: !include tv.yaml ##这个ID的配置文件
###3.添加到你的group分组分页中。
tv:
name: 电视 ###名字
entities:
- binary_sensor.tv ###id
5.保存，修改权限，重启
sudo -i ##进入ROOT权限账户
chmod -R 777 /home/homeassistant/.homeassistant/ ##修改次文件夹下所有文件的权限
exit ##退出ROOT权限账户
最后重启HA，下车！
下载文件：
最后：
上面代码可能有没有对齐的地方，自己多检查一下哈，主要是论坛编辑有点不熟。。。
如果你按照我这两篇帖子，成功了！ ok 那么你几乎已经掌握Floorpian了！
接下来，我再教大家如果绘制自己的SVG图像文件，如何写配置文件和css文件。Floorplan不再遥不可及！ 不谢！
【Floorplan教程三】制作自己的SVG图片文件
| 
[复制链接]
发表于 2017-9-7 23:40:23
