Hi - failing at the first hurdle here, installation! I found the card as an item in HACS and tried to download it from there but just got an infinitely spinning circle. (I have previously installed several other things from HACS). I note on the github page, installation notes, there is reference only to using wget and not HACS to install.
Am I missing something?
moving some stuff over to the decluttering card, and now I can’t find out how to get the variable payload_down to function.
I guess I have to figure out what the correct escape sequence is, but so far I haven’t. So any help is welcome!
the card in the UI
type: custom:decluttering-card
template: termostat
variables:
- entity_climate: climate.tv
- payload_down: '{"entity_id": "climate.tv", "action": "down"}'
and the corresponding part in the template
tap_action:
action: call-service
service: mqtt.publish
data:
topic: silverapple/termostat
payload: '[[payload_down]]'
This is a very special case - not everyone can simulate it.
So, probably you have to try&test yourself.
First, try this:
payload: [[payload_down]]
yeaht, got it to work!
found this site:
yaml-multiline info and of cource I have to escape the "…
- payload_down: '{\"entity_id\": \"climate.tv\", \"action\": \"down\"}'
Hello all, first day trying the decluttering card. Hoping to get some help with custom button card custom_fields.
Here is my template
decluttering_templates:
light_card:
card:
type: custom:button-card
entity: '[[light]]'
name: '[[name]]'
show_state: true
hold_action:
action: more-info
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: '[[temperature_sensor]]'
custom_fields:
th: |
[[[
return Math.round(states'[[temperature_sensor]]'.state)+"°"+"/"+ Math.round(states'[[humidity_sensor]]'.state)+"%"
]]]
state:
- value: 'off'
styles:
img_cell:
- background: '#CDFAD5'
icon:
- color: black
styles:
grid:
- grid-template-areas: '"i n" "i s" "i th"'
- grid-template-columns: 60px 1fr 10px
img_cell:
- background: '#FF7676'
- border-radius: 515px
- width: 50px
- height: 50px
name:
- justify-self: right
- font-size: 17px
- font-weight: 500
card:
- margin: 0
- border-radius: 20px
- padding: 5px 5px 5px 1px
state:
- justify-self: right
- font-size: 15px
- color: black
- opacity: '0.7'
custom_fields:
th:
- justify-self: right
- font-size: 15px
- color: black
- opacity: '0.7'
This is the card.
type: custom:decluttering-card
template: light_card
variables:
- light: light.kitchen_light
- name: Kitchen
- temperature_sensor: sensor.livingrmth_96a3_temperature
- humidity_sensor: sensor.livingrmth_96a3_humidity
and my error message
states['[[temperature_sensor]]'].state
Thank you! That worked. Another newbie question. Most of my cards all use the exact same format, however a few of them have some minor adjustments to them. For example, one of the icons I apply transform: rotateX(180deg). Is it possible to add these slight modifications to the declutter card, while still using the same template for all.
Here is an example of what I would look like in my mind, but of course does not work.
type: custom:decluttering-card
template: light_card
variables:
- light: light.living_room_lights
- name: Living Room
- icon: mdi:outdoor-lamp
- temperature_sensor: sensor.livingrmth_96a3_temperature
- humidity_sensor: sensor.livingrmth_96a3_humidity
card:
type: custom:button-card
styles:
icon:
- transform: rotateX(180deg)
Depends on a particular case. But in some cases it is possible to have ONE template:
my_template:
default:
- COLOR: green
- PADDING: …
card:
….
You have some variables with default values; in some particular case you use a custom COLOR=red, but in other cases it is green by default.
Hi
I had this all working but changed some stuff and now none is working, so i need the help from the experts here.
In my setup i have in my includes folder a notification.yaml file
This contains stuff like
- type: conditional
conditions:
- entity: binary_sensor.co_techniek
state: "on"
card:
type: custom:decluttering-card
template: notification_template
variables:
- name: CO gesignaleerd in de technische ruimte!I have 2 dashboards, one that is my default one (editing in yaml mode) and a second dashboard for mobile (not in editing yaml mode)
I want these notifications in my second mobile dashboard
I have this in my ui-lovelace.yaml
decluttering_templates:
notification_template: # This is the name of a template
card:
type: custom:button-card
name: '[[name]]'
size: 50%
show_state: false
show_label: false
layout: icon_name
tap_action:
action: none
hold_action:
action: none
styles:
card:
- --ha-card-background: rgba(0,0,0,0.0)
- box-shadow: none
- height: 10px
name:
- font-size: 18px
- font-family: Helvetica
- justify-self: start
- font-weight: normal
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 2% 1fr
- grid-template-rows: 1frI assume this isnt correct? since it should be in my thing for the second dashboard???
Cause when i add this as a card in my second dashboard:
- type: custom:swipe-card
parameters:
allowTouchMove: true
grabCursor: true
autoplay:
disableOnInteraction: false
cards:
!include ../../includes/notifications.yaml Its not working and i get:
Configuratiefouten ontdekt:
unknown tag !<!include> (1006:53)
1003 | …
1004 | … teraction: false
1005 | …
1006 | … ./includes/notifications.yaml
Any help?
Thx
Oh i didnt know that !include can only be used in yaml.
So what do i do then? Turn it into yaml? I loved the none yaml mode, since now its evolved.
Or do i have other options?
Storage mode - for testing only.
? i dont need 5 dashboards lol
I just need 1 template also
So i should go into yaml for it to work?
You have 2 dashboards and 1 template.
If you need to share the template in both places (yaml & storage) - you need to keep & maintain it in 2 places.
Sorry for being a noob. but im lost.
I did a card with this info
´´´
type: custom:decluttering-card
template: test
variables:
- entity_climate: climate.liveac
and I get this erro
Cannot read properties of undefined (reading 'test')
type: custom:decluttering-card
template: test
variables:
- entity_climate: climate.liveac
In your dashboard you called a decluttering-card with “test” template.
Have you defined this template?
If you are a beginner and using a dashboard in “storage mode” (i.e. not “yaml mode”) - then you need to paste your templates in “raw configuration editor”:
before a “views” option (i.e. before a definition of your views):
So what do i do now?
Do i have to get in yaml or not?7
I need to use !include so.
It doenst work in storage?
You decide yourself which mode you prefer - yaml or storage.
It was already explained - no “include” in storage.
@RomRider what a cool and time saving card. Many thanks for it.
I just stumbled upon it. and used it immediately for my shutters/covers.
I combined a shutter card and an entity card for the input_boolean to toggle the automatic mode in a vertical stack.
Adding a shutter to my dashboard now takes seconds! 
Thanks again 
Got some help and modified my shutter card:
If anyone is interested, please find the code for the template:
rolladen_template:
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-cover-card
entity: '[[cover]]'
name: '[[name]]'
show_position_control: false
show_buttons_control: true
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: Automatik
secondary: |-
{% if is_state('[[automatik]]', 'on') %}
ein
{% else %}
aus
{% endif %}
icon: |-
{% if is_state('[[automatik]]', 'on') %}
mdi:window-shutter-auto
{% else %}
mdi:window-shutter
{% endif %}
hold_action:
action: none
tap_action:
action: toggle
double_tap_action:
action: none
entity: '[[automatik]]'
icon_color: |-
{% if is_state('[[automatik]]', 'on') %}
green
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
}
And here the the code in the dashboard:
square: false
type: grid
cards:
- type: custom:decluttering-card
template: rolladen_template
variables:
- name: Rolladen links
- cover: cover.rollladen_wohnzimmer_links_eg
- automatik: automation.rollladen_wohnzimmer_links_cca
- type: custom:decluttering-card
template: rolladen_template
variables:
- name: Rolladen rechts
- cover: cover.rollladen_wohnzimmer_rechts_eg
- automatik: automation.rollladen_wohnzimmer_rechts_cca
columns: 2
I cant install…the link doesnt work:
wget https://raw.githubusercontent.com/custom-cards/decluttering-card/master/dist/decluttering-card.js
mv decluttering-card.js /config/www/