用于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
目录
更新记录
-18年6月10日
- 修复了按钮service的错误
- 增加了第二行显示
- 优化调整了部分显示效果
支持的功能
一句话慨阔是可以在任意一行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 第二行按钮
如果你觉得一行能增加的按钮有限,那么你可以选择增加第二行按钮.
第二行按钮默认不显示,当主ID实体状态为on时就显示第二行,所以请用于开关类型
#以下是如果需要第二行显示,第二行的配置内容
#格式和上面部分一致
~~~
b2_width: 26px
b2_height: 26px
b2_border_radius: 15px
b2_gap: 18px
b2_entities:
- entity: input_boolean.boolean_ceshi1
background_color_on: 'var(--paper-toggle-button-checked-button-color)' # 打开的时候背景色为主题颜色的打开颜色
background_color_off: '#04B404' # 平时背景色为青色
color_on: '#FFFFFF' # 文字的颜色-打开和关闭都为白色
color_off: '#FFFFFF' # 文字的颜色-打开和关闭都为白色
label: 睡眠 #文字标签
- entity: input_boolean.boolean_ceshi2
background_color_on: 'var(--paper-toggle-button-checked-button-color)'
background_color_off: '#FF8000' # 平时背景色为紫色
color_on: '#FFFFFF' # 文字的颜色-打开和关闭都为白色
color_off: '#FFFFFF' # 文字的颜色-打开和关闭都为白色
label: 影院 #文字标签
icon: mdi:volume-minus
- entity: input_boolean.boolean_ceshi3 #音量+
icon: mdi:volume-plus
- entity: input_boolean.boolean_ceshi4 #电源开关按钮
icon: mdi:power
color_off: '#E45E65' #电源按钮我把他设为红
- entity: climate.midea
image: /local/img/off.svg
image_height: 26px
service: climate.set_operation_mode
data:
entity_id: climate.gree #如果有写data就必须写entity_id,不写就是控制全部climate
operation_mode: 'off'
- entity: climate.midea
image: /local/img/auto.svg
image_height: 26px
service: climate.set_operation_mode
data:
entity_id: climate.gree #如果有写data就必须写entity_id,不写就是控制全部climate
operation_mode: auto注意事项
- 注意添加的按钮数量以及宽度,如果太长可能会造成显示不佳
文档更新时间: 2019-06-26 00:41 作者：Tristan
