『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 8119|回复: 8

[技术探讨] 〖Custom_UI〗多功能按钮的自定义UI发布,及Custom_UI详细教程

[复制链接]

31

主题

188

帖子

1798

积分

论坛技术达人

积分
1798
金钱
1590
HASS币
20

教程狂人论坛风云人物

发表于 2018-6-3 00:21:31 | 显示全部楼层 |阅读模式
本帖最后由 倾微qiwe 于 2018-6-3 20:58 编辑

论坛的Markdown格式用着不错!
下面仅仅是测试!
详细内容看这个帖子!
〖Custom_UI〗多功能按钮的自定义UI发布,及Custom_UI详细教程


用于Homeassistant的多功能按钮的自定义UI

state-card-button.html

什么是Custom_UI? 中文翻译就是 自定义UI
HA的原版UI局限性太大了,一行一个控制.一个空气净化器就要6/7行.太占地方
一个灯光呢?除了开关方便,如果你要调颜色,亮度神马的,都要点开详情页才能实现,太麻烦.
所以就有了Custom_UI=自定义UI.
最早的,也是目前最常用的Custom_UI就是这个了,我们通常叫原版Custom_UI
这个能实现很多功能,也有很多玩法,比如增加圆形徽章组,给灯光增加滑杆直接调亮度,显示更多的信息等...
但是貌似忽略了一些按键功能.
然后我就针对按钮的方便性制作了一个Custom_UI.state-card-button


作者 Qinver
E-mail [email protected]
版本 1.01
最后更新 2018年06月03日 10:50

目录

  • [支持的功能]
    • [图片展示]
  • [安装教程]
    • [准备]
    • [安装]
    • [激活]
  • [配置文件格式]
    • [完整的配置格式]
    • [按钮样式]
      • [原按钮是否显示]
      • [附加信息显示]
    • [自定义按钮功能]
  • [注意事项]
  • [帮助与支持]

支持的功能

一句话慨阔是可以在任意一行ID中增加一些按钮,这些按钮的大小/颜色/图标/状态/功能等都可以自定义,极大的提高了扩展性

 1. 增加按钮时候可以选择本来的控制开关是否隐藏.
 2. 增加的按钮支持方块/文字/图标/自定义图片的显示
 3. 图标和背景方块的颜色支持自定义,且可以根据状态不同改变颜色
 4. 按钮的尺寸、间距、圆角半径均可自定义
 5. 可以在名称下显示附加信息.(这个和原版Custom_UI差不多)
 6. 每一个按钮可以自定义按下的动作,也是就action,和自动化的action功能一样.

功能简单,但是玩法很多!

图片展示

!

安装教程

准备: 如果之前没有用过任何的Custom_UI!

那么:下载这个链接里面的两个文件,并放入你的配置文件目录的~/custom_components/customizer下!
!
完成第一步就可以使用别人制作的Custom_UI文件了

安装state-card-button.html

下载我制作的Custom_UI文件(state-card-button.html)放入你的配置目录的~/www/custom_ui下.
!

激活:完成以以上两步,那么就安装好了,接下来让它在HA生效

在HAconfiguration.yaml配置文件中对应位置添加以下代码:

frontend:
  javascript_version: auto
  extra_html_url:
    - /local/custom_ui/state-card-button.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-button.html

配置文件格式

完整的配置格式

以下是一个完整的配置格式,当然一般情况不需要这么齐全,请阅读注释内容以做编辑

#下面是一个完整的配置写法,可能大多数都不会完全用的上,可以直接注释掉或者删除!
#下面注释中凡是写了默认值的,都是可以删除的!删除不写就是默认值!
homeassistant:
  customize:
    input_boolean.boolean_ceshi2:            ###主ID
      friendly_name: 这是我的名字
      icon: mdi:fan    ###主图标
      custom_ui_state_card: state-card-button    ##要用这个custom_ui,就必须写这个!
      config:
        width: 70px                 # 宽度,低于35px无效,默认为35px
        height: 35px                # 高度,低于35px无效,默认为35px
        border_radius: 10px        # 圆角半径(默认为5px)
        gap: 10px                   # 间距(默认为8px)
#以上几个都建议可以不写,保持默认值就行!
        ha_entity_toggle_display: none       # 不显示右边本来的按钮(默认为显示)
        extra_badge:                         #在设备名称下方显示其他附加信息(默认不显示)
          - entity_id: light.led_tasmota     #在设备名称后显示其他设备信息的ID
            title: 亮度                       #显示的前文本(默认不显示))
            attribute: brightness            #若加此项则显示该设备的附加属性(默认显示state值)
            unit: '%'                        #单位(也就是后文本,默认不显示)
          - entity_id: input_boolean.boolean_ceshi2   #可以写多个id的信息,默认就是这个ID的state值
##下面开始写按钮了!
        entities:
          - entity: input_boolean.boolean_ceshi3       #增加的按钮的entity_id
            label: 风类                   #这个按钮显示的文字内容!(默认不显示文字)
            icon: mdi:home-outline        #这个按钮显示的图标(默认不显示)
            image: 'https://www.easyicon.net/api/resizeApi.php?id=1210167&size=48'         #这个按钮的背景图片,地址格式可以为全连接.或者将图片放在www文件下,就像模板这样写!支持多中图片格式,甚至是GIF! 但注意尺寸!并且写了这个那么下面的背景颜色将失效!
            image_height: 35px            #背景图片高度,默认为24px,和icon同尺寸.写 auto ,为图像本身大小.(写了image才需要写这个,或者不写就为默认)
##以上三个显示为文字/图标/图片,可选择,建议三选一.当然也可以全部选!
            background_color_off: 'var(--paper-toggle-button-checked-button-color)'    # 按钮方块背景颜色-关闭的时候(默认为透明)
            background_color_on: 'var(--paper-toggle-button-checked-button-color)'     # 按钮方块背景颜色-打开的时候(默认为透明)
            color_on: 'var(--primary-text-color)'               # 图标和文字的颜色-打开的时候(默认为主题按钮颜色)
            color_off: 'var(--primary-text-color)'              # 图标和文字的颜色-关闭的时候(默认为主题按钮颜色)
##上面的颜色,以及颜色随状态改变. 颜色的写法为CSS颜色格式.比如 '#FFFFFF' / 'rgba(129, 176, 128,0.6)' .也可以为css变量.我上面的模板就是用的变量,直接引用的主题颜色,这样就可以随主题切换!
            service: light.turn_on         #当这个按钮点击时候的动作,也就是action.(默认为toggle)
            data:                          #如果需要发送data就写,写法和自动化的action差不多!(默认没有)
              entity_id: light.led_tasmota  #如果有写data就必须写entity_id,不写就是控制全部 light
              rgb_color: [255,0,0]
              brightness: 200
#按钮点击时候的动作,也就是action.写法和自动化的action差不多! 不会的搜索自动化教程!  当然也可以不写,不写就是单纯的按钮动作!
          - entity: input_boolean.boolean_ceshi4   #可以加多个按钮,就像上面格式这样写!
            image: 'https://www.easyicon.net/api/resizeApi.php?id=1210201&size=48'         #这个按钮的背景图片,地址格式可以为全连接.或者将图片放在www文件下,就像模板这样写!支持多中图片格式,甚至是GIF! 但注意尺寸!并且写了这个那么下面的背景颜色将失效!
            image_height: 30px            #背景图片高度,默认为24px,和icon同尺寸.写 auto ,为图像本身大小.(写了image才需要写这个,或者不写就为默认)

######最后注意!由于我上面写的是完整的配置,所以直接用效果肯定不好,很多其实没必要都写,自己多试试,多一些组合就有更多的玩法! 
###另外由于上面注释很多! 一定要看准对齐喔!

按钮样式

按钮可以显示为背景/图标/文字/图片的各种组合.
背景和图标文字的颜色可以分别设置开和关的颜色,以达到状态反馈
按钮可以自定义尺寸和圆角半径,可以实现显示为圆形  

~~~
      config:
        width: 70px                 # 宽度,低于35px无效,默认为35px
        height: 35px                # 高度,低于35px无效,默认为35px
        border_radius: 10px        # 圆角半径(默认为5px)
        gap: 10px                   # 间距(默认为8px)
        entities:
          - entity: input_boolean.boolean_ceshi3       #增加的按钮的entity_id
            label: 风类                   #这个按钮显示的文字内容!(默认不显示文字)
            icon: mdi:home-outline        #这个按钮显示的图标(默认不显示)
            image: 'https://www.easyicon.net/api/resizeApi.php?id=1210167&size=48'         #这个按钮的背景图片,地址格式可以为全连接.或者将图片放在www文件下,就像模板这样写!支持多中图片格式,甚至是GIF! 但注意尺寸!
            image_height: 35px            #背景图片高度,默认为24px,和icon同尺寸.写 auto ,为图像本身大小.(写了image才需要写这个,或者不写就为默认)
##以上三个显示为文字/图标/图片,可选择,建议三选一.当然也可以全部选!
            background_color_off: 'var(--paper-toggle-button-checked-button-color)'    # 按钮方块背景颜色-关闭的时候(默认为透明)
            background_color_on: 'var(--paper-toggle-button-checked-button-color)'     # 按钮方块背景颜色-打开的时候(默认为透明)
            color_on: 'var(--primary-text-color)'               # 图标和文字的颜色-打开的时候(默认为主题按钮颜色)
            color_off: 'var(--primary-text-color)'              # 图标和文字的颜色-关闭的时候(默认为主题按钮颜色)

原按钮是否显示

是否显示这个ID右边原有的开关按钮,默认为显示,如果需要不显示,则添加以下配置

~~~
      config:
        ha_entity_toggle_display: none       # 不显示右边本来的按钮(默认为显示)

附加信息显示

可以在名称下方显示一些附加的信息

~~~
      config:
        ha_entity_toggle_display: none       # 不显示右边本来的按钮(默认为显示)
        extra_badge:                         #在设备名称下方显示其他附加信息(默认不显示)
          - entity_id: light.led_tasmota     #在设备名称后显示其他设备信息的ID
            title: 亮度                       #显示的前文本(默认不显示))
            attribute: brightness            #若加此项则显示该设备的附加属性(默认显示state值)
            unit: '%'                        #单位(也就是后文本,默认不显示)
          - entity_id: input_boolean.boolean_ceshi2   #可以写多个id的信息,默认就是这个ID的state值

自定义按钮功能

按钮点击时候的动作,也就是action.写法和自动化的action差不多! 不会的搜索自动化教程!  当然也可以不写,不写就是单纯的按钮toggle动作!

~~~
      config:
        entities:
          - entity: input_boolean.boolean_ceshi3       #增加的按钮的entity_id
            icon: mdi:home-outline
            service: light.turn_on                #当这个按钮点击时候的动作,也就是action.(默认为toggle)
            data:                           #如果需要发送data就写,写法和自动化的action差不多!(默认没有)
              entity_id: light.led_tasmota           #如果有写data就必须写entity_id,不写就是控制全部 light
              rgb_color: [255,0,0]
              brightness: 200
          - entity: climate.midea
            image: 'https://www.easyicon.net/api/resizeApi.php?id=1181722&size=48'
            image_height: 26px 
            service: climate.set_operation_mode
            data:
              entity_id: climate.midea  #如果有写data就必须写entity_id,不写就是控制全部climate
              operation_mode: auto 

注意事项

  • 注意添加的按钮数量以及宽度,如果太长可能会造成显示不佳

帮助与支持

欢迎加入『瀚思彼岸』论坛
我在论坛中的其它主题 ,以及联系方式
如果遇到问题请在这个帖子中提交回复


回复

使用道具 举报

123

主题

4661

帖子

1万

积分

管理员

囧死

Rank: 9Rank: 9Rank: 9

积分
16409
金钱
11663
HASS币
45
发表于 2018-6-3 00:31:00 | 显示全部楼层
标题与内容不一致,把我看晕啦!
回复

使用道具 举报

31

主题

188

帖子

1798

积分

论坛技术达人

积分
1798
金钱
1590
HASS币
20

教程狂人论坛风云人物

 楼主| 发表于 2018-6-3 00:31:47 | 显示全部楼层
Jones 发表于 2018-6-3 00:31
标题与内容不一致,把我看晕啦!

测试了好几次才成功呢......
回复

使用道具 举报

123

主题

4661

帖子

1万

积分

管理员

囧死

Rank: 9Rank: 9Rank: 9

积分
16409
金钱
11663
HASS币
45
发表于 2018-6-3 00:32:26 | 显示全部楼层
倾微qiwe 发表于 2018-6-3 00:31
测试了好几次才成功呢......

是啊,暂时得手动加md标签~
回复

使用道具 举报

14

主题

266

帖子

1639

积分

论坛技术达人

积分
1639
金钱
1352
HASS币
40

教程狂人

发表于 2018-6-3 23:05:15 | 显示全部楼层
大佬终于发布了
回复

使用道具 举报

2

主题

321

帖子

1927

积分

金牌会员

Rank: 6Rank: 6

积分
1927
金钱
1606
HASS币
0
发表于 2018-6-4 01:47:09 | 显示全部楼层
有几张图挂了
回复

使用道具 举报

6

主题

121

帖子

760

积分

高级会员

Rank: 4

积分
760
金钱
639
HASS币
0
发表于 2018-6-4 10:26:13 | 显示全部楼层
好像好复杂,努力学习
回复

使用道具 举报

0

主题

19

帖子

336

积分

中级会员

Rank: 3Rank: 3

积分
336
金钱
317
HASS币
0
发表于 2018-6-5 12:38:54 | 显示全部楼层
大神學習中
回复

使用道具 举报

13

主题

333

帖子

1418

积分

金牌会员

Rank: 6Rank: 6

积分
1418
金钱
1085
HASS币
0
发表于 2018-6-5 16:48:38 | 显示全部楼层
看一看是怎样搞
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-11-1 09:30 , Processed in 0.085270 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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