That wouldn’t be possible. But you can define default values in the template and if you don’t want any value, you can use undefined as the default value.
Hello,
i want to use this card, but I do not bring it working.
Also i do not find the “decluttering-card.js” file in the repository.
Thermostat is only a .ts file.
Please provide a actual description to install this card.
kind regards,
gerald
The file is in the release part of the github repository, but you should consider using HACS to install it
I think I’m beginning to understand the decluttering card but I have a slight problem with spacing as seen below. I’m building up the card variable by variable to ensure it all works, but I’ve noticed that the top, decluttering card version, has a lot of extra padding, whereas the original bottom button doesn’t.
Decluttering Code:
decluttering_templates:
remote_device_dtemplate:
default:
- icon: raspberry-pi
card:
type: custom:button-card
template: remote_device_btemplate
entity: '[[entity]]'
name: '[[name]]'
icon: 'mdi:[[icon]]'
styles:
custom_fields:
cpu:
- '--text-color-sensor': '[[[ if (states["[[cpu_used]]"].state > 80) return "red"; ]]]'
ram:
- '--text-color-sensor': '[[[ if (states["[[ram_used]]"].state > 4000) return "red"; ]]]'
button_card_templates:
remote_device_btemplate:
show_icon: true
styles:
card:
- background: 'linear-gradient(rgba(255,255,255,0.1)16%, rgba(0,0,20,0.3)84%)'
- border-radius: 15px
- border: 'solid 1.5px rgba(57,128,228)'
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- height: 132px
- width: 132px
- padding: 4%
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
# - '--text-color-sensor': '[[[ if (states["sensor.dhass_cpu_used"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
# - '--text-color-sensor': '[[[ if (states["sensor.dhass_ram_used_percent"].state > 4000) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.dhass_disk_used_percent"].state > 80) return
"red"; ]]]
speed:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
temp:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
grid:
- grid-template-areas: '"i temp""speed speed" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: |
[[[
if (entity.state < 60) return 'dodgerblue';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_cpu_used'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_ram_used_percent'].state}MB</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>SSD: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_disk_used_percent'].state}%</span></span>`
]]]
speed: |
[[[
return `<ha-icon
icon="mdi:pulse"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span> <span style="color: var(--text-color-sensor);">${states['sensor.dhass_cpu_hz_current'].state} GHz</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: orange;">
</ha-icon> <span>${entity.state}°C</span>`
]]]
- title: test
icon: mdi:run
panel: false
path: test
cards:
- type: 'custom:decluttering-card'
template: remote_device_dtemplate
variables:
- entity: sensor.dhass_cpu_temp
- icon: raspberry-pi
- name: HASS
- cpu_used: sensor.dhass_cpu_used
- ram_used: sensor.dhass_ram_used_percent
Original version code:
button_card_templates:
remote_device_btemplate_two:
show_icon: true
styles:
card:
- background: 'linear-gradient(rgba(255,255,255,0.1)16%, rgba(0,0,20,0.3)84%)'
- border-radius: 15px
- border: 'solid 1.5px rgba(57,128,228)'
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- height: 132px
- width: 132px
- padding: 4%
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.dhass_cpu_used"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.dhass_ram_used_percent"].state > 4000) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.dhass_disk_used_percent"].state > 80) return
"red"; ]]]
speed:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
temp:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
grid:
- grid-template-areas: '"i temp""speed speed" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: |
[[[
if (entity.state < 60) return 'dodgerblue';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_cpu_used'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_ram_used_percent'].state}MB</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>SSD: <span style="color: var(--text-color-sensor);">${states['sensor.dhass_disk_used_percent'].state}%</span></span>`
]]]
speed: |
[[[
return `<ha-icon
icon="mdi:pulse"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span> <span style="color: var(--text-color-sensor);">${states['sensor.dhass_cpu_hz_current'].state} GHz</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: orange;">
</ha-icon> <span>${entity.state}°C</span>`
]]]
- title: test
icon: mdi:run
panel: false
path: test
- type: 'custom:button-card'
template: remote_device_btemplate_two
entity: sensor.dhass_cpu_temp
icon: 'mdi:raspberry-pi'
name: HASS
Am I doing anything obviously wrong?
Thanks in advance.
I’ve solved it by using advice given in an earlier post to put everything into the decluttering card: 
decluttering_templates:
remote_device_dtemplate:
default:
- icon: raspberry-pi
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
icon: 'mdi:[[icon]]'
show_icon: true
styles:
card:
- background: 'linear-gradient(rgba(255,255,255,0.1)16%, rgba(0,0,20,0.3)84%)'
- border-radius: 15px
- border: 'solid 1.5px rgba(57,128,228)'
- color: ivory
- font-size: 11px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- height: 132px
- width: 132px
- padding: 4%
custom_fields:
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["[[cpu_used]]"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["[[ram_used]]"].state > 4000) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["[[disk_used]]"].state > 80) return
"red"; ]]]
speed:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
temp:
- font-size: 14px
- justify-self: end
- margin-top: '-5px'
grid:
- grid-template-areas: '"i temp""speed speed" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- color: |
[[[
if (entity.state < 60) return 'dodgerblue';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-5%'
img_cell:
- justify-content: start
- align-items: start
- margin: none
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>CPU: <span style="color: var(--text-color-sensor);">${states['[[cpu_used]]'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${states['[[ram_used]]'].state}MB</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>SSD: <span style="color: var(--text-color-sensor);">${states['[[disk_used]]'].state}%</span></span>`
]]]
speed: |
[[[
return `<ha-icon
icon="mdi:pulse"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span> <span style="color: var(--text-color-sensor);">${states['[[cpu_ghz]]'].state} GHz</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: orange;">
</ha-icon> <span>${entity.state}°C</span>`
]]]
- title: test
icon: mdi:run
panel: false
path: test
cards:
- type: 'custom:decluttering-card'
template: remote_device_dtemplate
variables:
- entity: sensor.dhass_cpu_temp
- icon: raspberry-pi
- name: HASS
- cpu_used: sensor.dhass_cpu_used
- ram_used: sensor.dhass_ram_used_percent
- disk_used: sensor.dhass_disk_used_percent
- cpu_ghz: sensor.dhass_cpu_hz_current
1 Like
Good day gents, does this card work if you have split lovelace yaml(s)?
i.e. if variables are set at the root of the ui-lovelance.yaml do they transponse onto the other files?
Thank you
I’ll have a look. Can you tell me what happens when you try to put it in a picture element please?
It works, but you have to define style outside the template. Additionally I had issues with overflow: when decluttering cards size was different then size of image inside of it (solved by adding overflow: hidden).
- type: custom:decluttering-card
template: dimmer_light_slider_popup
variables:
- entity: light.fibaro_dimmer_2_level_2
- name: "Kanapa"
style:
top: 65.5%
bottom: 19.5%
right: 12%
left: 75%
transform: translate(0%, 0%)
overflow: hidden
opacity: 0
dimmer_light_slider_popup:
card:
type: custom:hui-image-element
entity: '[[entity]]'
image: /local/images/floorplan/hitbox.png
tap_action:
action: toggle
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[name]]'
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: '[[entity]]'
secondary_info: last-changed
style: |
ha-card {
z-index: 5
}
- type: entities
entities:
- type: custom:light-slider-card
entity: '[[entity]]'
persist_features: true
header: false
style: |
ha-card {
z-index: 0
}
show_header_toggle: false
deviceID:
- this
Hi @RomRider
I use picture-elements inside decluttering templates to show presence of people in the home, works perfectly up to 0.105.5 but I’ve upgraded a test system to 0.106.0b and now all I get are thin red bars with no text showing the error.
I know there are changes in 0.106 that affect custom-cards, is this what’s affecting my setup?
This is the template code;
default:
- entity: device_tracker.brad_g7
- image: sunset-water.jpg
card:
type: picture-elements
style: |
ha-card {
border-radius: 5px;
font-family: var(--font-family);
font-size: 14px;
font-weight: bold;
color: rgba(250,250,250,1);
}
image: '/local/[[image]]'
elements:
- type: state-label
entity: '[[entity]]'
style:
top: 90%
left: 20%
Could you please check the javascript console and report the error please?
Hi, first thanks for your work again and again
I’m using decluttering with many cards, one of then are with mini-graphic-card, with this latest update show this error
Cannot read property ‘states’ of undefined
Could be for this update?
Anyone more having troubles with latest update?
I’m working on it, I have the same issue 
2 Likes
Thanks again
ah, i also had the issue wit mini-graph-card
thnx for the update and the work!
Is there a way to use the same decluttering template to my 3 diffrent types of service_data?
If i leave out ‘[[muted]]’ or ‘[[source]]’ i will get an error, and i cant include them either.
It would be nice if you could make a
service_data:
'[[service_data]]'
and then somehow include the 1, 2 or 3 lines of variables to that.
##################################################################################
# Button for remote icon and text
##################################################################################
button_icon_and_text:
default:
card:
type: "custom:button-card"
entity: '[[entity]]'
icon: 'mdi:[[icon]]'
name: '[[name]]'
show_name: true
tap_action:
action: call-service
service: '[[service]]'
service_data:
entity_id: '[[entity]]'
is_volume_muted: '[[muted]]'
source: '[[source]]'
styles:
card:
- background-color: rgba(56,60,69,1)
- border-radius: 20px
- border-style: solid
- border-width: 3px
- border-color: rgba(80,120,140,1)
- height: 75px
- padding: 5px
#--------------------------------------------------------------------------------
###################################################################################################
# button_icon_text (sonos)
###################################################################################################
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: button_icon_and_text
variables:
- entity: media_player.sonos_living_room
- name: 'MUTE'
- icon: volume-mute
- service: media_player.volume_mute
- muted: true
- type: custom:decluttering-card
template: button_icon_and_text
variables:
- entity: media_player.sonos_living_room
- name: 'VOLYM'
- icon: volume-plus
- service: media_player.volume_up
- type: custom:decluttering-card
template: button_icon_and_text
variables:
- entity: media_player.sonos_living_room
- name: 'NRJ'
- icon: youtube
- service: media_player.select_source
- source: RIX FM
You should be able to do that already:
#Template
template:
card:
tap_action:
action: xxx
service_data: '[[service_data]]'
#Card
type: custom:decluttering-card
variables:
- service_data:
entity_id: xxx
other_param: xxx