请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居第一站

 找回密码
 立即注册
查看: 1660|回复: 71

[新奇玩法] 【还有这种操作】用Floorplan制作一个图形化的电视遥控器UI

  [复制链接]

18

主题

88

帖子

533

积分

高级会员

Rank: 4

积分
533
彼岸币
0

教程狂人论坛风云人物

发表于 2017-9-7 23:40:23 | 显示全部楼层 |阅读模式
本帖最后由 倾微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,不然我这个分享没法进行。
上篇文章看不懂的,我也没办法了。 看作者的教程吧!
教程之前, 先看效果图
屏幕快照 2017-09-11 上午8.50.21.png
上车
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是图像文件,默认打开是图片哈,这里要用代码编辑器打开!!
如图:
屏幕快照 2017-09-08 上午9.39.42.png

打开之后这个样子就对了!
屏幕快照 2017-09-11 上午9.08.24.png
3.修改控制ID为你的控制ID!
请对照着上面图片!把对应的ID换成你的HA id就是了。
注意重点:  两个文件都要换!  一定要先换tv.svg文件,建议用搜索的方式定位查找!

4.在HA配置文件中相应位置添加以下代码!
[Shell] 纯文本查看 复制代码
###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.保存,修改权限,重启
[Shell] 纯文本查看 复制代码
sudo -i    ##进入ROOT权限账户
chmod -R 777 /home/homeassistant/.homeassistant/   ##修改次文件夹下所有文件的权限
exit       ##退出ROOT权限账户
最后重启HA,下车!

下载文件:
游客,如果您要查看本帖隐藏内容请回复


最后:
上面代码可能有没有对齐的地方,自己多检查一下哈,主要是论坛编辑有点不熟。。。
如果你按照我这两篇帖子,成功了!  ok  那么你几乎已经掌握Floorpian了!  
接下来,我再教大家如果绘制自己的SVG图像文件,如何写配置文件和css文件。Floorplan不再遥不可及!  不谢!
【Floorplan教程三】制作自己的SVG图片文件





评分

参与人数 2金钱 +18 收起 理由
Jones + 6 谢谢大神分享!
lidicn + 12 膜拜大神!

查看全部评分

回复

使用道具 举报

4

主题

79

帖子

407

积分

论坛技术达人

积分
407
彼岸币
0
发表于 2017-9-8 08:07:20 | 显示全部楼层
本帖最后由 alei643 于 2017-9-8 08:18 编辑

这个必须顶,但是下载的附件呢?
回复

使用道具 举报

1

主题

80

帖子

237

积分

中级会员

Rank: 3Rank: 3

积分
237
彼岸币
0
发表于 2017-9-8 08:39:02 | 显示全部楼层
这个必须mark
回复

使用道具 举报

3

主题

32

帖子

263

积分

中级会员

Rank: 3Rank: 3

积分
263
彼岸币
0
发表于 2017-9-8 08:55:24 | 显示全部楼层
mark一下,等待后续!
回复

使用道具 举报

14

主题

195

帖子

758

积分

高级会员

Rank: 4

积分
758
彼岸币
0

教程狂人

发表于 2017-9-8 09:10:27 | 显示全部楼层
请教如何绘制图形?
回复

使用道具 举报

4

主题

246

帖子

754

积分

高级会员

Rank: 4

积分
754
彼岸币
0
发表于 2017-9-8 10:57:19 | 显示全部楼层
不错不错
回复

使用道具 举报

5

主题

144

帖子

730

积分

高级会员

Rank: 4

积分
730
彼岸币
0
发表于 2017-9-8 11:20:23 | 显示全部楼层
这个可以研究下
回复

使用道具 举报

2

主题

106

帖子

512

积分

高级会员

Rank: 4

积分
512
彼岸币
0
发表于 2017-9-8 12:10:31 | 显示全部楼层
新东西,好好消化一下
回复

使用道具 举报

7

主题

198

帖子

692

积分

高级会员

Rank: 4

积分
692
彼岸币
0
发表于 2017-9-8 12:22:35 | 显示全部楼层
看完这篇感觉好点了
回复

使用道具 举报

5

主题

98

帖子

394

积分

权限提升计划-30

积分
394
彼岸币
0
发表于 2017-9-8 13:25:21 | 显示全部楼层
辛苦了楼主 加油
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2017-12-14 06:29 , Processed in 0.260957 second(s), 30 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表