本帖最后由 hungheo 于 2024-7-27 22:44 编辑 4、一些有意思的模板卡片 4.1、自动生成看板小图标
button_card_templates:
row_pill:
show_icon: false
show_name: true
show_label: false
variables: #想要更多这里再加entity_?
entity_1:
entity_id: ""
name: ""
icon: ""
color: ""
entity_2:
entity_id: ""
name: ""
icon: ""
color: ""
entity_3:
entity_id: ""
name: ""
icon: ""
color: ""
entity_4:
entity_id: ""
name: ""
icon: ""
color: ""
entity_5:
entity_id: ""
name: ""
icon: ""
color: ""
styles:
grid:
- grid-template-areas: >
[[[
var pills = []
const entities = [variables.entity_1?.entity_id, variables.entity_2?.entity_id, variables.entity_3?.entity_id, variables.entity_4?.entity_id, variables.entity_5?.entity_id] //想要更多这里再加variables
function entity_check(item) {
if (item != "") {
pills.push("item" + (pills.length+1))
}
}
entities.forEach(entity_check)
return pills.join(" ")
]]]
- display: flex
- grid-template-rows: min-content
- justify-content: space-evenly
card:
- background: none
- box-shadow: none
- broder: 0px
- border-radius: none
- padding: 12px
- overflow: visible
custom_fields:
item1:
- display: "[[[ return (variables.entity_1.entity_id != '') ? 'block' : 'none' ]]]"
item2:
- display: "[[[ return (variables.entity_2.entity_id != '') ? 'block' : 'none' ]]]"
item3:
- display: "[[[ return (variables.entity_3.entity_id != '') ? 'block' : 'none' ]]]"
item4:
- display: "[[[ return (variables.entity_4.entity_id != '') ? 'block' : 'none' ]]]"
item5:
- display: "[[[ return (variables.entity_5.entity_id != '') ? 'block' : 'none' ]]]"
item6:
- display: "[[[ return (variables.entity_6.entity_id != '') ? 'block' : 'none' ]]]"
item7:
- display: "[[[ return (variables.entity_7.entity_id != '') ? 'block' : 'none' ]]]"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "pill"
variables: "[[[ return variables.entity_1; ]]]"
entity: "[[[ return variables.entity_1.entity_id ]]]"
name: "[[[ return variables.entity_1.name ]]]"
icon: "[[[ return variables.entity_1.icon ]]]"
color: "[[[ return variables.entity_1.color ]]]"
item2:
card:
type: "custom:button-card"
template: "pill"
variables: "[[[ return variables.entity_2; ]]]"
entity: "[[[ return variables.entity_2.entity_id ]]]"
name: "[[[ return variables.entity_2.name ]]]"
icon: "[[[ return variables.entity_2.icon ]]]"
color: "[[[ return variables.entity_2.color ]]]"
item3:
card:
type: "custom:button-card"
template: "pill"
variables: "[[[ return variables.entity_3; ]]]"
entity: "[[[ return variables.entity_3.entity_id ]]]"
name: "[[[ return variables.entity_3.name ]]]"
icon: "[[[ return variables.entity_3.icon ]]]"
color: "[[[ return variables.entity_3.color ]]]"
item4:
card:
type: "custom:button-card"
template: "pill"
variables: "[[[ return variables.entity_4; ]]]"
entity: "[[[ return variables.entity_4.entity_id ]]]"
name: "[[[ return variables.entity_4.name ]]]"
icon: "[[[ return variables.entity_4.icon ]]]"
color: "[[[ return variables.entity_4.color ]]]"
item5:
card:
type: "custom:button-card"
template: "pill"
variables: "[[[ return variables.entity_5; ]]]"
entity: "[[[ return variables.entity_5.entity_id ]]]"
name: "[[[ return variables.entity_5.name ]]]"
icon: "[[[ return variables.entity_5.icon ]]]"
color: "[[[ return variables.entity_5.color ]]]"
#椭圆形图标
pill:
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: 54px
- grid-template-rows: 54px min-content
card:
- border-radius: 50px
- place-self: center
- width: 54px
- height: 84px
- padding: 0px
icon:
- color: '[[[ return variables?.color ]]]'
- width: 24px
img_cell:
- background-color: '[[[return "color-mix(in srgb, "+ variables?.color +" 20%, transparent)" ]]]'
- border-radius: 50%
- width: 42px
- height: 42px
name:
- justify-self: center
- font-weight: bold
- font-size: 12px
state:
- value: 'off'
styles:
card:
- height: 54px
name:
- display: none
tap_action:
action: more-info
复制代码
模板只编辑5个小图标，想要多少照着格式改下就行。
type: custom:button-card
template: row_pill #template名称
variables:
entity_1:
entity_id: sensor.0x00158d000444b5af_humidity
name: 湿度
icon: mdi:water
color: var(--light-green-color) #这里涉及到计算透明背景，只能用var(--颜色名称-color)，等效于light-green
entity_2:
entity_id: sensor.0x00158d000444b5af_humidity
name: 湿度
icon: mdi:bed
color: var(--light-blue-color)
entity_3:
entity_id: sensor.0x00158d000444b5af_humidity
name: 湿度
icon: mdi:lightbulb
color: var(--red-color)
entity_4:
entity_id: sensor.0x00158d000444b5af_humidity
name: 湿度
icon: ''
color: var(--orange-color)
#......,总共有5个，如果只想要4个，最后一个不定义就可以复制代码
效果：
4.2、仿homekit灯卡片
button_card_templates:
light_card: #仿HomeKit卡模板
show_state: false
show_icon: true
show_name: true
icon: > #根据不同的名称，返回不同的图标
[[[ var friendlyName = entity.attributes.friendly_name;
if (friendlyName.includes('灯带')) return 'mdi:led-strip-variant'; //检测包含文字
else if (entity.entity_id.includes('auto_light')) return 'mdi:lightbulb-auto'; //检测包含文字
else if (friendlyName.includes('吸顶灯')) return 'mdi:wall-sconce-flat'; //检测包含文字
else if (friendlyName.includes('射灯')) return 'mdi:track-light'; //检测包含文字
else if (friendlyName.includes('床头灯')) return 'mdi:lamp'; //检测包含文字
else if (friendlyName.includes('浴霸')) return 'mdi:light-recessed'; //检测包含文字
else if (friendlyName.includes('插座')) return 'mdi:power-socket-us'; //检测包含文字
else return 'mdi:lightbulb';
]]]
label: > #根据不同的类型，返回不同的详情状态
[[[
if (entity.entity_id.startsWith('light.')) {
if (entity.state === "on") {
if (entity.attributes.color_temp_kelvin) return `开 ${entity.attributes.color_temp_kelvin}k ${Math.floor(entity.attributes.brightness * 100 / 255)}%`;
else return '开启';
}
if (entity.state === "off") return '关闭';
} else if (entity.entity_id.startsWith('switch.')) {
if (entity.state === "on") return '开启';
if (entity.state === "off") return '关闭';
} else if (entity.entity_id.includes('auto_light')) {
if (entity.state === "on") return '开启';
if (entity.state === "off") return '关闭';
}
return '错误';
]]]
show_label: true
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
styles:
label:
- font-size: 12px
- justify-self: start
- padding-left: 10px
card:
- width: 90px
- height: 90px
img_cell:
- justify-content: flex-start
icon:
- padding-left: 5px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 14px
state:
- value: 'off'
styles:
icon:
- color: var(--light-grey-color)
name:
- color: var(--light-grey-color)
label:
- color: var(--light-grey-color)
#使用：
type: custom:button-card
entity: switch.6cd3eec81262_channel_1
name: 客厅射灯
template: light_card复制代码
4.3、light卡片模板
button_card_templates:
light_ls_card: #乐式灯卡片模板
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: |
"x a c z d y"
"x w w w w y"
"x b b b b y"
- grid-template-columns: 4% 1fr 120px 15px 40px 4%
- grid-template-rows: 40px 5px 50px
custom_fields:
a: #灯光图标、详情
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]' #这里的entity是为了点击图标开关灯
show_icon: true
show_state: false
show_name: true
show_label: true
icon: mdi:lightbulb
name: '[[[ return variables.light_name ]]]' #这里的name因为这里是二级card
label: >
[[[
if (entity.state == "on")
return '开启 ' + entity.attributes.color_temp_kelvin + 'k ' + Math.floor(entity.attributes.brightness *100 / 255) + '%'; //计算取整
else if (entity.state == "off")
return '关闭';
else return '错误'
]]]
styles:
grid:
- grid-template-areas: |
"i a n"
"i a s"
"i a l"
- grid-template-rows: 1fr min-content 1fr;
- grid-template-columns: 40px 5px 1fr;
card:
- height: 40px
- padding: 0px
- box-shadow: none
- border-radius: 0px
- border: 0px
- background: none
icon:
- width: 24px
- height: 24px
- padding: 8px
- border-radius: 50%
- color: orange
- background: rgb(255, 152, 0, 0.2)
name:
- font-size: 14px
- justify-self: flex-start
label:
- font-size: 12px
- justify-self: flex-start
state:
- value: 'on'
styles:
icon:
- background: rgba(255, 152, 0, 0.2)
- color: orange
- value: 'off'
styles:
icon:
- background: rgb(158, 158, 158,0.2)
- color: rgb(158, 158, 158)
b: #亮度色温控制
card:
type: custom:mushroom-light-card
primary_info: none
secondary_info: none
icon_type: none
show_brightness_control: true
show_color_temp_control: true
entity: '[[[ return entity.entity_id ]]]'
card_mod:
style: |
ha-card {
padding: 0px !important;
border-radius: 0px !important;
border: 0px !important;
margin: 0px !important;
box-shadow: none !important;
}
c: #模式选择
card:
type: custom:mushroom-select-card
entity: '[[[ return variables.light_select ]]]'
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
padding: 0px !important;
border-radius: 0px !important;
border: 0px !important;
margin: 0px !important;
--mdc-theme-surface: white !important;
background: white !important;
box-shadow: none !important;
overflow: visible !important;
}
d: #自动调光开关
card:
type: custom:button-card
entity: '[[[ return variables.light_auto ]]]'
tap_action:
action: toggle
show_icon: true
show_name: false
show_state: false
icon: mdi:lightbulb-auto
styles:
grid:
- grid-template-areas: '"i"'
- grid-template-columns: 40px
- grid-template-rows: 40px
card:
- padding: 0px
- background: none
- border-radius: 12px
- box-shadow: none
- background: none
img_cell:
- border-radius: 12px
icon:
- width: 24px
state:
- value: 'on'
styles:
img_cell:
- background: rgb(255, 152, 0, 0.2)
icon:
- color: rgb(255, 152, 0)
- value: 'off'
styles:
img_cell:
- background: rgb(158, 158, 158, 0.1)
icon:
- color: rgb(158, 158, 158)
#使用
type: custom:button-card
entity: light.b850d8174501_light
template: light_ls_card
variables:
light_name: 吸顶灯
light_select: select.b850d8174501_mode
light_auto: input_boolean.auto_light_zhuwo_xidingdeng复制代码
4.3、两种样式卡片互相切换
button_card_templates:
light_card_exchange:
show_icon: false
show_state: false
show_name: false
styles:
grid:
- grid-template-areas: '"b" "d"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
card:
- padding: 0px
- broder: 0px
- margin: 0px
- background: none
- border-radius: 0px
- box-shadow: none
- overflow: visible
custom_fields:
b:
- display: > #block显示，none不显示
[[[ return entity.state == "on" ? "block" : "none" ]]]
d:
- padding-top: 10px
- display: >
[[[ return entity.state == "off" ? "block" : "none" ]]]
custom_fields:
b:
card:
type: custom:button-card
entity: '[[[return entity.entity_id]]]'
template: light_ls_card #引用模板
variables:
light_name: '[[[return variables.light_name]]]'
light_select: '[[[return variables.light_select]]]'
light_auto: '[[[return variables.light_auto]]]'
d:
card:
type: custom:button-card
name: '[[[return variables.light_name]]]'
entity: '[[[return entity.entity_id]]]'
template: light_card #引用模板
#使用
type: custom:button-card
entity: light.dced830254b8_light
template: light_card_exchange
variables:
light_name: 吸顶灯
light_select: select.dced830254b8_mode
light_auto: input_boolean.auto_light_keting_xidingdeng复制代码
效果：
发表于 2024-7-27 12:10:22
楼主
