I’m using the custom:decluttering-card to create a status tile in Lovelace and it doesn’t seem to be taking setting the tap or hold action.
Here’s the definition (Note that I’m using the custom:button-card as well).
# card to show various (on/off) modes
mode-thing:
card:
type: custom:button-card
entity: '[[thing_entity]]'
name: '[[thing_name]]'
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
styles:
card:
- background-color: '[[card_background_color]]'
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n n n n" "i i m1 m1 m1" "i i m2 m2 m2" "stat stat m3 m3 m3"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: '[[thing_icon_color]]'
- width: 80%
- margin-top: 0%
custom_fields:
stat:
- font-size: 12px
- align-self: middle
- justify-self: start
m1:
- align-self: middle
- justify-self: start
m2:
- align-self: middle
- justify-self: start
m3:
- align-self: middle
- justify-self: start
state:
- value: 'on'
id: value_on
icon: '[[thing_icon_on]]'
- value: 'off'
id: value_off
icon: '[[thing_icon_off]]'
custom_fields:
stat: |
[[[
var status = '[[thing_name_off]]';
if (entity.state == "on") status = '[[thing_name_on]]';
return `<span>${status}</span>`
]]]
m1: |
[[[
if ('[[m1_show]]' == 'true') {
var icon = '[[m1_icon_off]]';
var status = '[[m1_status_off]]';
if (states['[[m1_entity]]'].state == '[[m1_on_state]]') {
icon = '[[m1_icon_on]]';
status = '[[m1_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
m2: |
[[[
if ('[[m2_show]]' == 'true') {
var icon = '[[m2_icon_off]]';
var status = '[[m2_status_off]]';
if (states['[[m2_entity]]'].state == '[[m2_on_state]]') {
icon = '[[m2_icon_on]]';
status = '[[m2_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
m3: |
[[[
if ('[[m3_show]]' == 'true') {
var icon = '[[m3_icon_off]]';
var status = '[[m3_status_off]]';
if (states['[[m3_entity]]'].state == '[[m3_on_state]]') {
icon = '[[m3_icon_on]]';
status = '[[m3_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
}
return ``
]]]
and here’s how I call it in my ui-lovelace.yaml file:
- type: 'custom:decluttering-card'
template: mode-thing
variables:
- aspect_ratio: 3/1.5
- card_background_color: darkSlateGrey
- thing_icon_color: deepSkyBlue
- thing_entity: input_boolean.in_bed
- thing_name: 'Modes'
- thing_icon_on: 'mdi:bed'
- thing_name_on: 'in bed'
- thing_icon_off: 'mdi:walk'
- thing_name_off: 'about'
- m1_show: 'true'
- m1_entity: sun.sun
- m1_on_state: 'above_horizon'
- m1_icon_on: 'mdi:weather-sunny'
- m1_status_on: 'day'
- m1_icon_off: 'mdi:moon-waning-crescent'
- m1_status_off: 'night'
- m2_show: 'true'
- m2_entity: switch.presence_simulation
- m2_on_state: 'on'
- m2_icon_on: 'mdi:lightbulb-group'
- m2_status_on: 'mimic on'
- m2_icon_off: 'mdi:lightbulb-group-outline'
- m2_status_off: 'mimic off'
hold_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Modes
hide_header: false
card:
type: entities
entities:
- entity: input_boolean.in_bed
name: In Bed
- entity: sun.sun
name: sun position
- entity: switch.presence_simulation
name: mimic lights
It only does this with the custom:decluttering-card implementation. (If I create a “hard-coded” card like the following, hold action works.
# mode-tile
mode-tile-compact:
color_type: card
aspect_ratio: 3/1.5
tap_action:
action: toggle
styles:
card:
- background-color: darkSlateGrey
- border-radius: 0%
- padding: 1%
- color: ivory
- font-size: 12px
- text-transform: capitalize
grid:
- grid-template-areas: '"n n n n n" "i i m1 m1 m1" "i i m2 m2 m2" "stat stat m3 m3 m3"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 0px
img_cell:
- justify-content: start
- align-items: start
- margin: 0%
icon:
- color: deepSkyBlue
- width: 80%
- margin-top: 0%
custom_fields:
stat:
- font-size: 12px
- align-self: middle
- justify-self: start
m1:
- align-self: middle
- justify-self: start
m2:
- align-self: middle
- justify-self: start
m3:
- align-self: middle
- justify-self: start
state:
- value: 'on'
id: value_on
icon: 'mdi:bed'
- value: 'off'
id: value_off
icon: 'mdi:walk'
custom_fields:
stat: |
[[[
var status = "about";
if (entity.state == "on") status = "in bed";
return `<span>${status}</span>`
]]]
m1: |
[[[
var icon = "mdi:weather-sunny";
var status = "Day";
if (states['sun.sun'].state == "below_horizon") {
icon = "mdi:moon-waning-crescent";
status = "Night";
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
]]]
m2: |
[[[
var icon = "mdi:lightbulb-group";
var status = "mimic on";
if (states['switch.presence_simulation'].state == "off") {
icon = "mdi:lightbulb-group-outline";
status = "mimic off";
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: yellow;">
</ha-icon><span> ${status}</span>`
]]]
Here’s the Lovelace coding for that card:
- entity: input_boolean.in_bed
name: Modes
template: mode-tile-compact
type: 'custom:button-card'
hold_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Modes
hide_header: false
card:
type: entities
entities:
- entity: input_boolean.in_bed
name: In Bed
- entity: sun.sun
name: sun position
- entity: switch.presence_simulation
name: mimic lights