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

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

 找回密码
 立即注册
查看: 1003|回复: 117

[经验分享] 简单粗暴的写个custom-ui的教程贴

  [复制链接]

10

主题

530

帖子

1484

积分

金牌会员

Rank: 6Rank: 6

积分
1484
金钱
944
HASS币
0

活跃会员

发表于 2018-6-7 20:29:01 | 显示全部楼层 |阅读模式
本帖最后由 咸味土豆 于 2018-6-10 01:51 编辑

更新,附上几个大神的帖子,我也是照着帖子一步一步来的:
1、EabeyTong 大神的: Customze-UI 新的分组UI,让你的分组更直观(更新自动化安装)

https://bbs.hassbian.com/thread-851-1-1.html

2、Jones 大的,使用custom_ui将小米产品剩余电量显示在设备下方

https://bbs.hassbian.com/thread-861-1-1.html

最早就是看这俩个帖子装了custom-ui,现在有好多种玩法了,进阶和高级的,我已经眼花缭乱了。

余歌唱晚 色彩缤纷续集--Custom UI通配符修改一类实体图标颜色
https://bbs.hassbian.com/thread-3141-1-1.html

还有这个热乎乎的:
倾微qiwe  〖Custom_UI〗【6.10更新】多功能按钮的自定义UI发布,及教程

https://bbs.hassbian.com/thread-3921-1-1.html


--------------------------------------------------------------------------------------
其实论坛已经有很多custom-ui的安装贴了,但是总看到有人发帖,结合我自己的安装经验再写个比较浅显的教程吧。

1、前提条件:
(1)、安装好了HA,不管你是什么平台、什么系统,Homeassistant也好、Hassio也好,都可以哒;

(2)、能进入HA的配置文件夹,不管你是通过安装Samba share还是群晖Docker(装Samba share的话不说了,群晖docker安装的,直接进你给HA映射的路径,PS:windows里面看不见的原因一般是因为docker文件夹默认是没有共享出来的,设置一下就行了);

2、安装步骤:

第一步:下载两个必须的文件:

文件1:https://github.com/andrey-git/home-assistant-custom-ui
1.jpg

文件2:https://github.com/andrey-git/home-assistant-customizer

2.jpg

如图,点那儿

3.jpg

第二步:复制粘贴(看图照着来)
上面的文件下载之后,得到两个压缩包,解压之后,将”home-assistant-custom-ui-master“中的:

4.jpg

这4个文件拷贝到你的HA配置文件夹下”config/www/custom_ui“文件夹下(没有的话就新建就行了):

5.jpg

将”home-assistant-customizer-master“中的”customizer“文件夹(或者里面的两个文件):

6.jpg

这俩个文件拷贝到”config/custom_components/customizer“文件夹下(没有的话就新建就行了):
7.jpg



如果实在找不到目录在哪儿,再附一张文件夹层级结构参考图咯:

8.jpg

3、配置步骤:

激活:
在”configuration.yaml“文件中写入:
[AppleScript] 纯文本查看 复制代码
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui


配置属性:加入:

[AppleScript] 纯文本查看 复制代码
customizer:
  custom_ui: local
  hide_attributes:
    - node_id
    - value_index


(备注:上面的这个配置,个人理解应该是custom-ui的显示属性之类的取值,没深入研究,最早大神们的原帖里面有,可以搜搜看。)

继续配置:
再加一段:

[AppleScript] 纯文本查看 复制代码
frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html


参考图:

根据自己的实际情况来,红框标出来的一定要写进去:

30.jpg

然后应该就可以用了,
可能有忽略的地方,我随时补充。

当然,官方文档也写的很清楚:

20.jpg 40.jpg 41.jpg


4、简单应用:

比如,加上这一段代码:


[AppleScript] 纯文本查看 复制代码
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui

    automation.*:
      extra_data_template: >
        var t = attributes.last_triggered;
        if (t === null) {
          return '尚未触发' ;
        }else {
          var tt = new Date(t);
          var time = (tt.getMonth()+1) +'月'+tt.getDate()+'日 '+tt.getHours()+':'+(tt.getMinutes()<10?('0'+tt.getMinutes()):tt.getMinutes());
          return '上次触发:'+ time;
        }
      custom_ui_state_card: state-card-custom-ui


45.jpg

就可以实现这个效果了:


46.jpg



以上所有内容均来自于各路大神的帖子和教程,不好意思没附原帖地址,回头我有时间了再补上。


评分

参与人数 3金钱 +53 收起 理由
jyz_0501 + 3 分享是一&lt;span id=&quot;transmark&quot; st
Milo + 40 请多来一些这样详细的基础教程.
windgo + 10 膜拜大神!

查看全部评分

回复

使用道具 举报

2

主题

76

帖子

473

积分

中级会员

Rank: 3Rank: 3

积分
473
金钱
397
HASS币
0
发表于 2018-6-7 20:40:06 来自手机 | 显示全部楼层
看看什么是好东西
回复

使用道具 举报

1

主题

39

帖子

237

积分

中级会员

Rank: 3Rank: 3

积分
237
金钱
198
HASS币
0
发表于 2018-6-7 20:49:23 | 显示全部楼层
前来学习学习!
回复

使用道具 举报

2

主题

52

帖子

176

积分

注册会员

Rank: 2

积分
176
金钱
124
HASS币
0
发表于 2018-6-7 20:52:43 | 显示全部楼层
看看  。。。
回复

使用道具 举报

0

主题

16

帖子

64

积分

注册会员

Rank: 2

积分
64
金钱
48
HASS币
0
发表于 2018-6-7 20:56:36 | 显示全部楼层
xiexiefenxiang~!~!~!
回复

使用道具 举报

1

主题

59

帖子

237

积分

中级会员

Rank: 3Rank: 3

积分
237
金钱
178
HASS币
0
发表于 2018-6-7 21:06:34 | 显示全部楼层
感谢分享~~~
回复

使用道具 举报

1

主题

68

帖子

331

积分

论坛积极会员

积分
331
金钱
263
HASS币
0
发表于 2018-6-7 21:08:32 | 显示全部楼层
真粗!!!!!!爆
回复

使用道具 举报

18

主题

185

帖子

696

积分

高级会员

Rank: 4

积分
696
金钱
511
HASS币
0
发表于 2018-6-7 21:11:56 | 显示全部楼层
这个可以有~~~~~~
回复

使用道具 举报

0

主题

56

帖子

312

积分

论坛积极会员

积分
312
金钱
256
HASS币
0
发表于 2018-6-7 21:38:55 | 显示全部楼层
学习学习。
回复

使用道具 举报

0

主题

64

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
金钱
212
HASS币
0
发表于 2018-6-7 21:44:47 来自手机 | 显示全部楼层
谢谢大神分享
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2018-6-25 17:34 , Processed in 0.253896 second(s), 44 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

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