I have several “modes” (mostly booleans, but not always) that I like having displayed on my UI. I also like to have them displayed in a small, concise format, but one that still allows me to toggle them if I need to. So I combined the
- custom:button-card
- custom:decluttering-card and the
-
card-mod
to make one.
The custom:button-card provides the basic functionality. Custom:decluttering-card lets me set up variables that allow each instance of my Mode Card to be radically different from each other. The card-mod is used for a pop-up entity card that lets me work with the individual entities.
Here’s the coding:
First, the decluttering card template:
# card to show various (on/off) modes
mode-thing:
card:
type: custom:button-card
entity: '[[thing_entity]]'
name: '[[thing_name]]'
state_color: true
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
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:
- type: custom:template-entity-row
entity: '[[thing_entity]]'
icon: "{% if is_state('[[thing_entity]]','on') %} [[thing_icon_on]] {% else %} [[thing_icon_off]] {% endif %}"
active: "{{ is_state('[[thing_entity]]','on') }}"
state: "{% if is_state('[[thing_entity]]','on') %} [[thing_name_on]] {% else %} [[thing_name_off]] {% endif %}"
toggle: '[[thing_toggle]]'
- type: custom:template-entity-row
entity: '[[m0_entity]]'
icon: "{% if is_state('[[m0_entity]]','[[m0_on_state]]') %} [[m0_icon_on]] {% else %} [[m0_icon_off]] {% endif %}"
active: "{{ is_state('[[m0_entity]]','[[m0_on_state]]') }}"
state: "{% if is_state('[[m0_entity]]','[[m0_on_state]]') %} [[m0_status_on]] {% else %} [[m0_status_off]] {% endif %}"
toggle: '[[m0_toggle]]'
condition: '[[m0_show]]'
- type: custom:template-entity-row
entity: '[[m1_entity]]'
icon: "{% if is_state('[[m1_entity]]','[[m1_on_state]]') %} [[m1_icon_on]] {% else %} [[m1_icon_off]] {% endif %}"
active: "{{ is_state('[[m1_entity]]','[[m1_on_state]]') }}"
state: "{% if is_state('[[m1_entity]]','[[m1_on_state]]') %} [[m1_status_on]] {% else %} [[m1_status_off]] {% endif %}"
toggle: '[[m1_toggle]]'
condition: '[[m1_show]]'
- type: custom:template-entity-row
entity: '[[m2_entity]]'
icon: "{% if is_state('[[m2_entity]]','[[m2_on_state]]') %} [[m2_icon_on]] {% else %} [[m2_icon_off]] {% endif %}"
active: "{{ is_state('[[m2_entity]]','[[m2_on_state]]') }}"
state: "{% if is_state('[[m2_entity]]','[[m2_on_state]]') %} [[m2_status_on]] {% else %} [[m2_status_off]] {% endif %}"
toggle: '[[m2_toggle]]'
condition: '[[m2_show]]'
- type: custom:template-entity-row
entity: '[[m3_entity]]'
icon: "{% if is_state('[[m3_entity]]','[[m3_on_state]]') %} [[m3_icon_on]] {% else %} [[m3_icon_off]] {% endif %}"
active: "{{ is_state('[[m3_entity]]','[[m3_on_state]]') }}"
state: "{% if is_state('[[m3_entity]]','[[m3_on_state]]') %} [[m3_status_on]] {% else %} [[m3_status_off]] {% endif %}"
toggle: '[[m3_toggle]]'
condition: '[[m3_show]]'
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 m0 m0 m0" "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: |
[[[
if (entity.state == 'on') return '[[thing_icon_color_on]]';
else return '[[thing_icon_color_off]]';
]]]
- width: 80%
- margin-top: 0%
custom_fields:
stat:
- font-size: 12px
- align-self: middle
- justify-self: start
m0:
- 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>`
]]]
m0: |
[[[
if ('[[m0_show]]' == 'true') {
var icon = '[[m0_icon_off]]';
var icon_color = '[[m0_icon_color_off]]';
var status = '[[m0_status_off]]';
if (states['[[m0_entity]]'].state == '[[m0_on_state]]') {
icon = '[[m0_icon_on]]';
status = '[[m0_status_on]]';
icon_color = '[[m0_icon_color_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m1: |
[[[
if ('[[m1_show]]' == 'true') {
var icon = '[[m1_icon_off]]';
var icon_color = '[[m1_icon_color_off]]';
var status = '[[m1_status_off]]';
if (states['[[m1_entity]]'].state == '[[m1_on_state]]') {
icon = '[[m1_icon_on]]';
status = '[[m1_status_on]]';
icon_color = '[[m1_icon_color_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m2: |
[[[
if ('[[m2_show]]' == 'true') {
var icon = '[[m2_icon_off]]';
var icon_color = '[[m2_icon_color_off]]';
var status = '[[m2_status_off]]';
if (states['[[m2_entity]]'].state == '[[m2_on_state]]') {
icon = '[[m2_icon_on]]';
icon_color = '[[m2_icon_color_on]]';
status = '[[m2_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
m3: |
[[[
if ('[[m3_show]]' == 'true') {
var icon = '[[m3_icon_off]]';
var icon_color = '[[m3_icon_color_off]]';
var status = '[[m3_status_off]]';
if (states['[[m3_entity]]'].state == '[[m3_on_state]]') {
icon = '[[m3_icon_on]]';
icon_color = '[[m3_icon_color_on]]';
status = '[[m3_status_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
]]]
and then the Lovelace entry:
- type: 'custom:decluttering-card'
template: mode-thing
variables:
- aspect_ratio: 3/1.5
- card_background_color: darkSlateGrey
- thing_entity: input_boolean.in_bed
- thing_name: 'Modes'
- thing_icon_on: 'mdi:bed'
- thing_icon_color_on: yellow
- thing_name_on: 'in bed'
- thing_icon_off: 'mdi:walk'
- thing_icon_color_off: deepSkyBlue
- thing_name_off: 'about'
- thing_toggle: true
- m0_show: 'false'
- m1_show: 'true'
- m1_entity: sun.sun
- m1_on_state: 'above_horizon'
- m1_icon_on: 'mdi:weather-sunny'
- m1_icon_color_on: yellow
- m1_status_on: 'day'
- m1_icon_off: 'mdi:moon-waning-crescent'
- m1_icon_color_off: deepSkyBlue
- m1_status_off: 'night'
- m1_toggle: false
- m2_show: 'true'
- m2_entity: switch.presence_simulation
- m2_on_state: 'on'
- m2_icon_on: 'mdi:lightbulb-group'
- m2_icon_color_on: yellow
- m2_status_on: 'sim.lights on'
- m2_icon_off: 'mdi:lightbulb-group-outline'
- m2_icon_color_off: deepSkyBlue
- m2_status_off: 'sim.lights off'
- m2_toggle: true
- m3_show: 'true'
- m3_entity: switch.mailbox_opened
- m3_on_state: 'on'
- m3_icon_on: 'mdi:mailbox-open-up'
- m3_icon_color_on: yellow
- m3_status_on: 'check mail'
- m3_icon_off: 'mdi:mailbox-outline'
- m3_icon_color_off: deepSkyBlue
- m3_status_off: 'mail'
- m3_toggle: true
Here’s how the card looks (as defined above):
and here’s the popup:
A couple of things to point out:
- The m?_show variables determine whether that particular item is show on the mode card and the popup. The nice thing is that it’s the only thing that needs to be specified if you don’t have an item in that space. (Note m0_show: ‘false’)
- the m?_on_state specifically exists for non-on/off items. (Note m1 is based on sun.sun above (or below) the horizon)
- the main entity (thing_entity) displays in a large icon on the left and can be toggled simply by clicking on the card. All other entities display with smaller icons to the right and need the popup to toggle them.
- the popup is displayed with a long press on the card. Once you release, the entity card with all the entities on the card will be displayed. If m?_toggle is true, then you get a toggle at the right, otherwise you get the state displayed.