custom-cards / decluttering-card Goto Github PK
View Code? Open in Web Editor NEW🧹 Declutter your lovelace configuration with the help of this card
License: MIT License
🧹 Declutter your lovelace configuration with the help of this card
License: MIT License
Checklist:
Release with the issue:
0.6.3 HACS
Home Assistant 2023.2.0b7
Supervisor 2023.01.1
Operating System 9.4
Frontend-versie: 20230130.0 - latest
Last working release (if known):
Browser and Operating System:
Any really tested Chrome, Safari, Firefox on Mac
Description of problem:
seems decluttering changes the way a grid card sees the final card, in this case a custom minimalistic area card.
first card is decluttered and only shows the top section of the grid 1st card
2nd card is a verbose card and shows full size
- type: grid
columns: 4
cards:
- type: custom:decluttering-card
template: minimalistic_area
variables:
- title: ' '
- main_id: light.laundry_ceiling
- temp_id: sensor.laundry_sensor_temperature
- humid_id: sensor.laundry_sensor_illuminance
- motion_id: binary_sensor.laundry_sensor_motion
- image: bijkeuken_klein.jpg
- path: bijkeuken
- type: custom:minimalistic-area-card
card_mod:
style: |
ha-card {
filter: {{'grayscale(0%)' if
(is_state('light.laundry_ceiling','on') or
is_state('binary_sensor.laundry_sensor_motion','on'))
else 'grayscale(100%)'}};
border-top: {{'1rem solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
else 'none'}};
}
# title: Laundry
image: /local/images/areas/bijkeuken_klein.jpg
shadow: false
tap_action:
action: navigate
navigation_path: /ui-sub-views/bijkeuken
hold_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.laundry_ceiling
entities:
- entity: sensor.laundry_sensor_temperature
Javascript errors shown in the web inspector (if applicable):
No errors
Additional information:
decluttering template is a verbosely copied original card, albeit with variables:
card:
type: custom:minimalistic-area-card
card_mod:
style: |
ha-card {
filter: {{'grayscale(0%)' if
(is_state('[[main_id]]','on') or
is_state('[[motion_id]]','on'))
else 'grayscale(100%)'}};
border-top: {{'1rem solid red' if is_state('[[motion_id]]','on')
else 'none'}};
}
title: '[[title]]'
hide_unavailable: true
area: '[[area]]'
image: /local/images/areas/[[image]]
shadow: false
tap_action:
action: navigate
navigation_path: /ui-sub-views/[[path]]
hold_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[main_id]]'
entities:
- entity: '[[temp_id]]'
- entity: '[[humid_id]]'
all other functionality is alive and working perfectly, including the card_mod templates and actions
Checklist:
Release with the issue:
0.6.3
Last working release (if known):
Browser and Operating System:
Chrome 84, HA on official docker image
Description of problem:
I tried to install the card, but it fails with
The configuration is
- url: /hacsfiles/decluttering-card/decluttering-card.js
type: module
It is then used as
decluttering_templates:
michael:
card:
entities:
- switch.michael_lampe_haute
- light.michael_mur
- light.michael_bureau_gauche
- light.michael_bureau_droite
title: Michael
type: entities
state_color: true
title: Maison
views:
- badges:
- device_tracker.oppo_reno
- device_tracker.galaxy_s9
- device_tracker.mi9_mi9
- device_tracker.mi9tpro_t_l_phonem
cards:
- type: custom:decluttering-card
template: michael
(...)
Javascript errors shown in the web inspector (if applicable):
chunk.c136a66895309b59c3fe.js:1 Uncaught (in promise) https://hass.swtk.eu/hacsfile/decluttering-card.js
o.onerror @ chunk.c136a66895309b59c3fe.js:1
error (async)
(anonymous) @ chunk.c136a66895309b59c3fe.js:1
r @ chunk.c136a66895309b59c3fe.js:1
s @ chunk.c136a66895309b59c3fe.js:1
(anonymous) @ chunk.c136a66895309b59c3fe.js:21843
s @ chunk.c136a66895309b59c3fe.js:21843
(anonymous) @ chunk.c136a66895309b59c3fe.js:25455
Promise.then (async)
value @ chunk.c136a66895309b59c3fe.js:25455
value @ chunk.c136a66895309b59c3fe.js:25455
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
A @ app.664a8247.js:1
r @ chunk.c136a66895309b59c3fe.js:25230
value @ app.664a8247.js:44798
value @ app.664a8247.js:44798
_currentLoadProm.c.then._currentLoadProm @ app.664a8247.js:44798
Promise.then (async)
value @ app.664a8247.js:44798
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
set @ app.664a8247.js:1
value @ app.664a8247.js:44798
value @ app.664a8247.js:48086
value @ app.664a8247.js:48086
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
r @ app.664a8247.js:44798
r @ app.664a8247.js:48086
_clone @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
a @ app.664a8247.js:1
A.render @ app.664a8247.js:1
update @ app.664a8247.js:1
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
initialize @ app.664a8247.js:1
initialize @ app.664a8247.js:1
w @ app.664a8247.js:1
A @ app.664a8247.js:1
n @ app.664a8247.js:48086
_clone @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
update @ app.664a8247.js:1
__commitTemplateResult @ app.664a8247.js:1
commit @ app.664a8247.js:1
a @ app.664a8247.js:1
A.render @ app.664a8247.js:1
update @ app.664a8247.js:1
performUpdate @ app.664a8247.js:1
_enqueueUpdate @ app.664a8247.js:1
async function (async)
_enqueueUpdate @ app.664a8247.js:1
_requestUpdate @ app.664a8247.js:1
set @ app.664a8247.js:1
value @ app.664a8247.js:40600
(anonymous) @ app.664a8247.js:40600
n @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
Promise.then (async)
a @ core.abb95f18.js:1
u @ core.abb95f18.js:1
subscribe @ core.abb95f18.js:1
u @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
Promise.then (async)
194 @ core.abb95f18.js:1
r @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
(anonymous) @ core.abb95f18.js:1
Additional information:
Checklist:
Release with the issue:
Always had the issue.
Last working release (if known):
N/A
Browser and Operating System:
Chrome 89.0.4389.82 and Firefox 86.0 on Windows 10
Description of problem:
On every startup, and this is true up until the set-temperature change, the themrostat card doesn't show the set-temperature value. It does start to appear the moment that temperature change.
I've also noticed, that if you run multiple thermostat-card in the same view, only the first one is affected (for the same entities) while the other simply show the value
To show the set-temperature at all time.
Javascript errors shown in the web inspector (if applicable):
Additional information:
My config:
thermostat view
title: Thermostat
icon: mdi:home-thermometer
panel: true
path: thermostat
cards:
- type: custom:layout-card
layout: vertical
cards:
- type: custom:decluttering-card
template: thermostat_card
variables:
- title: House
- area: house
- break
- type: custom:decluttering-card
template: thermostat_card
variables:
- title: House
- area: house
Thermostat Card (technically is more complex, but this is the bare minimum to replicate the issue)
---
thermostat_card:
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:decluttering-card
template: title
variables:
- title: '[[title]]'
- type: thermostat
icon: mdi:thermometer-lines
entity: climate.[[area]]
name: " "
Outcome:
As you can see, the first doesn't have the "18.0 Idle" text, while the second does (no changes ofc, they are literally the same code :) )
Checklist:
Release with the issue:
0.5.0
Last working release (if known):
N/A
Browser and Operating System:
Chrome, OSX + Windows 10
Description of problem:
When decluttering-card
is used to create a card of type: iframe
which is subsequently used in a panel
, the iframe only consumes 50% of the screen height. Simply using the iframe card directly causes the iframe to consume exactly the full viewport area. This is due to the way that decluttering-card
wraps the iframe with its own card, but does not pass through the necessary CSS styles.
Javascript errors shown in the web inspector (if applicable):
N/A
Additional information:
N/A
Checklist:
Release with the issue:
HA: 0.111.2
IOS 13.4
--mdc-icon-size: 90%
--mdc-icon-size doesn't show the correct size when switches between vertical mode and horizontal mode with decluttering-card template, it will show the mdi icon bigger than the background button when my phone / tablet is vertical , but the size is right if my phone / tablet is horizontal. If i just use --mdc-icon-size in lovelace , it will fine. showing the correct size only 90% of the background button both vertical mode and horizontal mode on my tablet and iphone.
in nomally lovelace
`
element:
entity: light.test_light
style:
**'--mdc-icon-size': 90%**
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 40%
display: flex
height: 4vw
justify-content: center
left: 43%
top: 93%
width: 4vw
tap_action:
action: toggle
type: state-icon`
in decluttering-card template
`
element:
entity: '[[entity]]'
style:
**'--mdc-icon-size': 90%**
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 40%
display: flex
height: '[[height]]'
justify-content: center
left: '[[left]]'
top: '[[top]]'
width: '[[width]]'
font-size: 40px
tap_action:
action: toggle
type: state-icon `
Last working release (if known):
Browser and Operating System:
Javascript errors shown in the web inspector (if applicable):
Additional information:
Can you please add sample screenshots of this card? I do not understand what it is and ignored installation
Hi. First of all, this card is amazing. It allowed me to shrink my UI config by a lot. It's way easier to maintain by a huge margin.
The only thing I haven't been able to do is declutter my picture-elements cards. I have a couple of them that contain similar elements, but the "frame itself" (the picture-elements card) is too different so I can't just go and move the whole card to a template.
Doing something like so would actually be amazing:
decluttering_templates:
demo_icon:
element:
- type: icon
icon: mdi:alert-circle
title: Problem detected!
entity: '[[entity]]'
tap_action:
action: more-info
style:
right: -1%
top: 7%
color: var(--google-red-500)
filter: drop-shadow(black 0 0 1px)
views:
- title: Home
path: home
icon: mdi:home
cards:
- type: picture-elements
image: /local/frontend/demo_bg.jpg
elements:
- type: custom:decluttering-card
template: demo_icon
variables:
- entity: sensor.demo
Thanks again for the awesome work!
Checklist:
Release with the issue:
Home Assistant2023.4b0
Last working release (if known):
Home Assistant 2023.3.6
Browser and Operating System:
any
Description of problem:
Card is no longer able to load templates located in lovelace config.
This is caused by changes in dom structure in HA frontend and getLovelace() (from "custom-card-helpers" dependency)
no longer returning lovelace config to Decluittering Card
Javascript errors shown in the web inspector (if applicable):
card custom:decluttering-card TypeError: can't access property "config", t is null
Additional information:
I'm getting a 404 (file not found) error message when trying to update via HACS. I tried uninstalling, then reinstalling the card, and I rebooted my server, but I still cannot update to 0.3.0. If I select 0.2.0 from the HACS menu I can get the previous version installed.
Checklist:
Release with the issue:
latest
Last working release (if known):
don tknow
Browser and Operating System:
Any browser on Mac
Description of problem:
creating a decluttering for many repeating conditional rows:
- type: conditional
conditions:
- entity: media_player.googlehome_library
state_not: unavailable
row:
entity: input_boolean.googlehome_library
state_color: true
with decl. template:
card:
type: conditional
conditions:
- entity: media_player.googlehome_[[id]]
state_not: unavailable
row:
entity: input_boolean.googlehome_[[id]]
state_color: true
doesnt work and reports below error
Javascript errors shown in the web inspector (if applicable):
can clearly see the variables are replaced as they should:
Additional information:
Can we not use decluttering in a conditional row? Or am I missing another important config option.
Please have a look?
thanks
Checklist:
Release with the issue:
0.6.3
Last working release (if known):
NA
Browser and Operating System:
Mobile (IOS & Android)
Description of problem:
Hello,
When I use the decluttering templates for https://github.com/AmoebeLabs/flex-horseshoe-card, on mobile devices, the icons dont show on the screen. They work on Chrome/IE/Edge.
Without declatering-card, they work well on any platform.
PS: I am not using the icons as variables.
Javascript errors shown in the web inspector (if applicable):
Additional information:
This does not work:
wget https://raw.githubusercontent.com/custom-cards/decluttering-card/master/dist/decluttering-card.js
because the folder master does not exist. Where can I get a copy of decluttering-card.js?
My decluttering templates are getting rather large and was wondering if I was able to map these to individual files?
Instead of this in my lovelace.yaml
decluttering_templates:
my_first_template: # This is the name of a template
default:
- icon: fire
card:
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
my_second_template: # This is the name of another template
card:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: '[[entity_1]]'
- type: custom:button-card
entity: '[[entity_2]]'
we could do something like the views
decluttering_templates:
- !include lovelace/decluttering_templates/my_first_template.yaml
- !include lovelace/decluttering_templates/my_second_template.yaml
is this already possible? I have tried and it doesn't error rendering but says it cant find the template.
I would like to have a fallback support for example for the icon so that if no icon got specified in the card it will fall back to the fallback icon.
decluttering_templates:
my_first_template: # This is the name of a template
default:
- icon: fire
card:
type: custom:button-card
icon: [[icon]]
fallback: mdi:alert
name: '[[name]]'
It could look something like this.
Since updating Home Assistant to 0.107, my template, which includes a divider for use in entities lists, no longer works.
I'm receiving this message:
Unknown type encountered: divider
I updated my decluttering card to version 0.4.1 and I have migrated my lovelace resources from ui-lovelace.yaml
to the lovelace:
section in my config.
If I specify the divider manually (don't use decluttering-card) the divider works fine.
My template is as follows:
large_divider:
default:
- opacity: 0.25
card:
type: divider
style:
background-color: var(--secondary-text-color)
height: 1px
margin: 15px auto
opacity: '[[opacity]]'
I'm using the template as follows:
type: entities
show_header_toggle: false
entities:
[ ... entities ... ]
- type: custom:decluttering-card
template: large_divider
[ ... entities ... ]
Thanks!
I can't seem to figure out how/where to add the decluttering templates definitions when using UI managed lovelace dashboards. Could someone point me in the right direction?
What I tried was changing my lovelace config from this:
lovelace:
mode: storage
to this
lovelace:
mode: storage
decluttering_templates:
my_first_template: # This is the name of a template
default:
- icon: fire
card:
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
But this is not valid for the lovelace configuration:
Invalid config for [lovelace]: [decluttering_templates] is an invalid option for [lovelace].
Hello, I have this template:
light_rgb_template:
card:
- type: custom:slider-entity-row
entity: light.[[light_name]]
style: |
:host {
color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
}
toggle: true
And I use it like this:
- type: custom:decluttering-card
template: light_rgb_template
variables:
- light_name: hallway_tablelight
This is replacing my old config:
- type: custom:slider-entity-row
entity: light.hallway_tablelight
style: |
:host {
color: {% if is_state('binary_sensor.hallway_tablelight_autoon', 'on') %} green {% endif %};
}
toggle: true
In the Lovelace I get the error:
Cannot read property 'startsWith' of undefined
type: 'custom:decluttering-card'
template: light_rgb_template
variables:
- light_name: hallway_tablelight
What I'm doing wrong? Or is this a bug?
Thank you
Hello,
My decluttering templates are taking too much code lines and im looking to split my code in different .yaml files.
For now im didnt find any solution on the old posts, so it is possible to use !include my_template.yaml???
I would appreciate some help!
Thanks
In Home Assistant 2021.5 we're going to introduce strategies. A strategy is a JavaScript block that is executed on the loaded configuration before the dashboard as a whole or a specific view is being rendered.
It is the right spot to pre-process configurations and replace templates etc. The exact thing that decluttering-card does.
In the case of decluttering-card:
An example of a strategy is here: https://gist.github.com/balloob/bf2715efba46420d6ba1a01586946308 . Note, this example is purely generating a configuration, but as you can see, the original configuration is passed in as info.config
.
You will be able to play with a preview of this in the April 24 nightly.
This isn't a bug report, but a question.
Is it possible to nest variables, both in the caller and the default? I'm guessing it isn't, but I wanted to be sure before I try to find a workaround.
Example:
default:
row1:
- name
- image
With the idea being to call them with [[ row1.name ]]
I'm not expecting it to work, but I wanted to know if I was wrong before I try to figure out how to make it work :)
I am having a weird problem where using the decluttering card with vertical-stack-in-card would not show the standard box-shadow that comes with every card on the UI.
Example below:
- type: 'custom:vertical-stack-in-card'
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.home_theatre
icon: 'mdi:movie-roll'
name: Pot lights
layout: icon_name
styles:
card:
- height: 88px
- width: 180px
name:
- font-size: 15px
- font-weight: bold
- text-transform: uppercase
- type: entities
entities:
- type: 'custom:slider-entity-row'
entity: light.home_theatre
icon: 'mdi:lamp'
full_row: true
hide_state: true
- type: 'custom:decluttering-card'
template: dimmer_button_slider
variables:
- entity: light.home_theatre
- icon: movie-roll
- name: Pot lights
The decluttering_card_template:
decluttering_templates:
dimmer_button_slider:
type: 'custom:vertical-stack-in-card'
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: '[[entity]]'
icon: 'mdi:[[icon]]'
name: '[[name]]'
layout: icon_name
styles:
card:
- height: 88px
- width: 180px
name:
- font-size: 15px
- font-weight: bold
- text-transform: uppercase
- type: entities
entities:
- type: 'custom:slider-entity-row'
entity: '[[entity]]'
icon: 'mdi:[[icon]]'
full_row: true
hide_state: true
Tested it with button-card and works fine.
When I did a dev inspect, it seems the box-shadow is set on a lower div.. that is as much I can check..
Just tested on 0.2.0 as well.
Hello I have created a decluttering card to simplify my RGB lights:
light_rgb_template:
card:
type: custom:slider-entity-row
entity: light.[[light_name]]
style: |
:host {
color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
}
toggle: true
min: 1
max: 100
step: 1
Also tried the variant
light_rgb_template:
card:
type: custom:slider-entity-row
entity: '[[entity]]'
style: |
:host {
color: {% if is_state('binary_sensor.[[light_name]]_autoon', 'on') %} green {% endif %};
}
toggle: true
min: 1
max: 100
step: 1
It works ok, but the "entities" card toggle header does not detect the entity and keeps the header switch off when the entity in the "decluttering-card" is on:
Is this possible?
Thamk You
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Release with the issue:
2023.4.0
Last working release (if known):
2023.3.6
Browser and Operating System:
Edge on Windows 11 also on Windows app and on Android App
Description of problem:
All previously working decluttering templates now display an error message like this:
Additional information:
decluttering card template:
# card with automated light control
auto-light-thing:
card:
type: 'custom:button-card'
entity: '[[thing_entity]]'
name: '[[thing_name]]'
template: standard-button
triggers_update: all
aspect_ratio: '[[aspect_ratio]]'
styles:
grid:
- position: relative
custom_fields:
lt:
- position: absolute
- right: 0%
- top: 0%
- height: 20px
- width: 20px
custom_fields:
lt: |
[[[
var icon = "mdi:alpha-a-circle-outline";
var color = "darkGrey";
var status = states['[[light_entity]]'].state;
if (status == 'on') {
icon = "mdi:alpha-a-circle";
color = "darkGreen";
}
return `<ha-icon icon="${icon}"
style="width 18px; height: 18px; color: ${color};"></ha-icon>`
]]]
hold_action:
action: call-service
service: homeassistant.toggle
service_data:
entity_id: '[[light_entity]]'
state:
- value: 'on'
id: value_on
icon: '[[thing_icon_on]]'
- value: 'off'
id: value_off
icon: '[[thing_icon_off]]'
decluttering card use in ui-lovelace.yaml:
- type: 'custom:decluttering-card'
template: auto-light-thing
variables:
- thing_entity: switch.grow_light_outlet
- thing_name: 'Grow Lt'
- light_entity: input_boolean.grow_light_automated
- thing_icon_on: 'mdi:lightbulb-on'
- thing_icon_off: 'mdi:lightbulb-outline'
- aspect_ratio: 1/1.1
Is it possible to use this on the badges? I've tried creating a badge template but when i try to follow the guide on custom: they either vanish or nothing is applied many thanks for your help in advance
Checklist:
Release with the issue:
2023.4
Last working release (if known):
Browser and Operating System:
Description of problem:
Please see: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer/ on the matter.
Javascript errors shown in the web inspector (if applicable):
Additional information:
Would be very much appreciated if you could update the card accordingly. There currently hardly is an alternative, so it would be a 'big deal' if we could no longer use our heavily decluttered Dashboards...
thanks for considering
Checklist:
Release with the issue:
0.6.3
Browser and Operating System:
N/A (issue replicates on Google TV in Kiosk browser, Google Chrome on Ubuntu, Google Chrome on Mac, etc)
Description of problem:
The decluttering card still takes up space even when all its contents are hidden. Since this is a wrapper card I can see how it would be difficult to know when all it's content is hidden, though.
It isn't completely the fault of this card as it seems like it does try to detect this and hide itself. However, some cards don't hide themselves properly and I think we could try to be more robust in how we hide ourselves.
Additional information:
The only idea I have here is in addition to how we check if child cards are hidden, we could also hide ourselves if the size they are taking up is 0? You can see here that the offending card (that should be applying display: none
but doesnt) has no dimensions:
but the decluttering-card still does since we don't apply display: none
:
Have decluttering cards set up and working across single dashboards, but using it on different dashboards results in an error:
"undefined is not an object (evaluating 't.config.decluttering_templates[e.template]’)”
The use case is tablets with different dashboards in different rooms, so I would want to use, for example, my 'House Status’ card across each room.
Is this possible? I’m using the Lovelace GUI and pasting the template YAML in the default dashboard’s Raw Configuration editor.
I'd like to be able to reference variables in defaults. For example:
decluttering_templates:
room_card:
default:
light_entity: 'light.[[room]]'
card:
type: entity
entity: '[[light_entity]]'
That template could then be used with either of the following:
- type: custom:decluttering-card
template: room_card
variables:
- room: office
- type: custom:decluttering-card
template: room_card
variables:
- room: office
- light_entity: light.office_floor_lamp
I get this error when trying to define a simple template:
ui-lovelace.yaml:
decluttering_templates:
test:
card:
- type: sensor
entity: '[[sensor_temperature]]'
name: test
the card:
type: 'custom:decluttering-card'
template: test
variables:
- sensor_temperature: sensor.synology_dsm_cpu_load_total
the error:
s is undefined
{
"type": "custom:decluttering-card",
"template": "test",
"variables": [
{
"sensor_temperature": "sensor.synology_dsm_cpu_load_total"
}
]
}
the console log:
decluttering-card TypeError: "s is undefined"
setConfig decluttering-card.js:209
Ei create-card-element.ts:73
xi create-card-element.ts:98
createCardElement hui-view.ts:75
_rebuildCard hui-view.ts:322
createCardElement hui-view.ts:83
r fire_event.ts:76
xi create-card-element.ts:111
create-card-element.ts:76:12
So I've got a simple grid from layout_card:
base_myhomekit_card_grid:
# Detault vars ####
default:
- cards: ""
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 8px
mediaquery:
"(max-width: 650px)":
grid-template-columns: 1fr 1fr 1fr
cards: '[[cards]]'
However, the mediaquery doesn't work for some reason. If I use the layout-card on its own and not as a template for the decluttering-card everything works as it should.
What's going on here?
Reference for layout-card
Checklist:
Release with the issue:
Home Assistant: 2022.2.3
decluttering card: 0.6.3
Probably a long time issue. It can be easily reproduced in v0.5 at least.
Last working release (if known):
?
Browser and Operating System:
Firefox 96.0.3 (windows 10)
Google Chrome 99.0 (windows 10)
HA mobile app 2022.1.1 (Android 11)
Description of problem:
Decluttering card does not handle text values with new line characters properly.
Error card with "Unexpected token in JSON at positon xxx" is shown in Lovelace.
"Unexpected token" error is thrown from JSON.parse() method is shown in browser console.
Javascript errors shown in the web inspector (if applicable):
6b28abc1.js:1 card custom:my-template-card SyntaxError: Unexpected token
in JSON at position 1130
at JSON.parse (<anonymous>)
at :8123/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063:870:16
at MyTemplateCard.setConfig (:8123/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063:871:7)
at MyTemplateCard.setConfig (:8123/local/my/templates-loader.js?ts=1640036327063&dashboard_url=lovelace-resources:76:20)
at o (:8123/frontend_latest/6b28abc1.js:1:5675)
at :8123/frontend_latest/6b28abc1.js:1:6389
at c (:8123/frontend_latest/6b28abc1.js:1:6651)
at s (:8123/frontend_latest/6b28abc1.js:1:6068)
at y (:8123/frontend_latest/1f3f8c5c.js:150:3576)
at i.value (:8123/frontend_latest/1f3f8c5c.js:222:9176)
Additional information:
Create markdown card in UI editor and make a simple template out of it.
'markdown-example':
default:
- content: >-
The **Markdown** card allows you to write any text. You can style it **bold**,
*italicized*, ~strikethrough~ etc. You can do images, links, and more.
For more information see the [Markdown
Cheatsheet](https://commonmark.org/help).
card:
type: markdown
content: '[[content]]'
I tried to use the !include statement to have some sort of re-use within templates, but I get errors (mapping errors, expecting ':', etc.), so include doesn't seem to be supported or I am doing something wrong 😄.
What I would want for instance:
So for template 'specific1':
default:
!include 'template-defaults.yaml' (defines defaults for valuex, valuey and valuez)
# Now override some values
- valuex: 11
- valuey: 22
And template 'specific2':
default:
!include 'template-defaults.yaml' (defines defaults for valuex, valuey and valuez)
# Now override some values
- valuex: 11
- valuez: 33
Checklist:
Release with the issue:
HA 0.110.0+
Last working release (if known):
HA 0.109.6
Browser and Operating System:
Chrome
Windows 10
Description of problem:
A card with another custom:decluttering-card within it doesn't work anymore e.g.:
AndroidTVControl_WithLGNetcastTV:
card:
card:
cards:
- content: >-
{% set InitialImage = states.sensor.base_url.state +
state_attr('media_player.' + '[[Entity_LGNetcastTV_NoDomain]]',
'entity_picture') %} <img src='{{ InitialImage }}' width=100%
onload="setTimeout(() => this.src = '{{ InitialImage }}&' + (new
Date()).getTime(), 2500)" onerror="this.src = '{{ InitialImage
}}&' + (new Date()).getTime()">
ignore_line_breaks: true
type: 'custom:html-template-card'
- template: AndroidTVControl
type: 'custom:decluttering-card'
variables:
- Entity: '[[Entity_AndroidTV]]'
type: 'custom:vertical-stack-in-card'
conditions:
- entity: 'media_player.[[Entity_LGNetcastTV_NoDomain]]'
state_not: 'off'
type: conditional
default:
- Entity_AndroidTV: ''
- Entity_LGNetcastTV_NoDomain: ''
Javascript errors shown in the web inspector (if applicable):
No JS errors
Additional information:
I am trying to use this card to cleanup my code, but I am facing an issue with the "variables" configuration inside the config-template-card
This is my code:
---
temperature:
card:
type: custom:config-template-card
entities:
- [[entity]]
- input_number.night_time
variables:
- states['sensor.[[entity]]'].state
card:
type: custom:mini-graph-card
name: Temperature
icon: "${vars[0] > 30 ? 'fas:thermometer-full' : vars[0] > 25 ? 'fas:thermometer-three-quarters' : vars[0] > 20 ? 'fas:thermometer-half' : vars[0] > 10 ? 'fas:thermometer-quarter' : 'fas:thermometer-empty' }"
more_info: false
height: 150
line_width: 4
hours_to_show: 168
points_per_hour: 0.25
aggregate_func: max
group_by: hour
group: false
hour24: true
animate: false
decimals: 1
font_size: 100
font_size_header: 14
align_header: default
align_icon: right
align_state: center
lower_bound: -5
upper_bound: 40
show:
name: true
icon: true
state: true
graph: line
fill: true
points: false
legend: false
extrema: false
labels: false
labels_secondary: false
name_adaptive_color: true
icon_adaptive_color: true
color_thresholds:
- value: 5
color: "#0055FF"
- value: 15
color: "#FF6600"
- value: 20
color: "#FFAA00"
- value: 22.5
color: "#FF7700"
- value: 25
color: "#FF3700"
style: |
ha-card {
padding: 16px !important;
}
entities:
- entity: '[[entity]]'
name: Temperature
color: '#FF5000'
show_fill: false
- entity: input_number.night_time
color: '#B3B3B3'
name: Night Time
show_fill: true
show_line: false
show_points: false
show_legend: false
y_axis: secondary
The problem seems to be caused by this:
variables:
- states['sensor.[[entity]]'].state
The decluttering card doesn't seems to replace the [[entity]] because wrapped around other []
The error I receive in the console is:
VM577:1 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
at eval (eval at _evaluateTemplate (config-template-card.js:3305), <anonymous>:1:29)
at HTMLElement._evaluateTemplate (config-template-card.js:3305)
at config-template-card.js:3276
at Array.forEach (<anonymous>)
at HTMLElement._evaluateConfig (config-template-card.js:3265)
at HTMLElement.render (config-template-card.js:3256)
at HTMLElement.update (config-template-card.js:2827)
at HTMLElement.performUpdate (config-template-card.js:2285)
at HTMLElement._enqueueUpdate (config-template-card.js:2237)
Please note, if I use actual entities values instead of [[entity]] (ex. sensor.living_room_temperature) it does work as expected.
Thanks
see here for background https://community.home-assistant.io/t/lovelace-decluttering-card/118625/74
The specific case referenced there is a custom button card based on a de-clutterring template. The template includes a default defined boolean for lock
of false
which is ignored if it is not passed anything. The lock still appears.
First the view itself,
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: simple_header
variables:
- label: -- Hall --
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:decluttering-card
template: simple_header_options_button
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
then the de-cluttering templates,
#==================
#=== Simple Header
#==================
simple_header:
card:
type: custom:button-card
label: '[[label]]'
show_label: true
aspect_ratio: 9/1
# color_type: label-card
styles:
card:
- height: 50px
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
# - background-color: var(--paper-card-background-color)
label:
- justify-self: start
- padding-left: 20px
- font-size: 24px
#=================================
#=== Simple Header Options Button
#=================================
simple_header_options_button:
default:
icon: mdi:settings
lock: false
lock_color: var(--primary-text-color)
tap_action: more-info
card:
type: custom:button-card
icon: '[[icon]]'
show_name: false
tap_action:
action: '[[tap_action]]'
lock: '[[lock]]'
styles:
card:
- border-radius: 50%
- height: 50px
- width: 50px
- background: rgba(255,255,255,0.45)
lock:
- color: '[[lock_color]]'
icon:
- color: gray
- width: 35px
It will be nice to have an option for some templating.
Checklist:
Release with the issue:
Version 0.6.3
Last working release (if known):
Browser and Operating System:
Windows Chrome
Description of problem:
I'm seeing this in the front-end but it took me a while to track it down as the error is a bit misleading.
The cause of the issue is in fact that I forgot to add the object decluttering_templates to my main lovelace config
The error occurs when the code is checking that decluttering exists in the config (js object)
These line numbers are not going to help but I'm sure you can find the code
The exception on line 1717 never gets thrown because of the way the the pre-check is being done
I think you need...
if (!t.config || ('decluttering_templates' in !t.config))
When I run this in the console it behaves as expected
Javascript errors shown in the web inspector (if applicable):
Additional information:
Checklist:
Release with the issue:
latest
Last working release (if known):
Browser and Operating System:
Chrome
Winows 10
Description of problem:
I'm trying to use decluttering card and lovelace_gen together but ran in to a problem where variables from the decluttering card isn't parsed the way they're supposed to with lovelace_gen.
I have this declaration: decluttering_templates: !include test_template.yaml
test_template.yaml:
# lovelace_gen
test_template:
card:
{% set showIt = '[[showMe]]' %}
{% if showIt == 'a' %}
type: custom:mushroom-title-card
title: '{{showIt}} - a'
{% elif showIt == 'b' %}
type: custom:mushroom-entity-card
entity: sensor.my_sensor
{% else %}
type: custom:mushroom-title-card
title: '{{showIt}} - failed'
{% endif %}
and my decluttering-card:
- type: custom:decluttering-card
template: test_template
variables:
- showMe: 'a'
- type: custom:decluttering-card
template: test_template
variables:
- showMe: 'b'
the problem is that lovelace_gen seems to interpret [[showMe]]
as 'showMe'
instead of 'a'
or 'b'
.
The output becomes a - failed
or b - failed
.
Is there a way to solve this?
HA 2021.4 introduced a new feature: Warnings for undefined variables in Templates.
This jams up decluttering-card if you keep a browsers open during HA restart. Lovelace tries to render the card, and HA starts spewing the warnings because they allow things to start before everything's ready.
I reported it over here as an enhancement, but they feel this should be an issue for the decluttering-card. Not sure if you can hold off until started or not...
Release that introduces this issue:
2021.4
Description of problem:
During a HA restart, Lovelace reports not all entities will be available until HA Completes starting, but if any browser window is open, Lovelace starts rendering that decluttering_templates card.
Checklist:
Release with the issue:
v1.0.0
Last working release (if known):
Browser and Operating System:
Chrome on Win10, HA App on iOS
Description of problem:
Unable to use standard HACS ressource reference, have to manually enter it.
Problem occurs since 2023.4.x (went from 2023.3.6 to 2023.4.4 and got the issue). Tested on 2 different HA systems and same thing happens.
Error message on each declut card: Cannot read properties of null (reading'config')
Into resource.yaml:
Normal reference:
- url: /hacsfiles/decluttering-card/decluttering-card.js
type: module
Modified reference:
- url: /local/community/decluttering-card/decluttering-card.js
type: module
When I tried to upgrade I was getting an error from HACS:
GitHub returned 404 for https://api.github.com/repos/custom-cards/decluttering-card/contents/dist
So I tried uninstalling it and reinstalling it, and I'm getting the same error
Checklist:
Release with the issue:
HA core 2022.5.5, running on RPi 4B with DietPi 8.4.2 (Debian 11 'Bullseye')
Decluttering card: 0.6.3
HACS: 1.25.5 (rolled back to 1.24.5 and issue persisted)
Last working release (if known):
not known, but was working last week and so I suspect HA core 2022.5.4
Browser and Operating System:
Mac app 2022.358 (MacOS 12.4)
Safari 15.5 (MacOS 12.4)
Firefox 100.0.2 (MacOS 12.4)
iOS app (iOS 15.5)
Description of problem:
I need to restart HA in order to see any changes made in my declutter.yaml file reflected in my dashboard. Previously, I simply needed to refresh (clear cache).
Javascript errors shown in the web inspector (if applicable):
no error.
Additional information:
I am sure this was working for me last week.
The only change I can think of is updating HA itself from 2022.5.4 to 2022.5.5
I did update HACS, but I rolled that back to 1.24.5 and the problem persisted.
Hi, I have decluttering templates working quite well, including nested ones. However, I've run into a block.
I have several rooms, each with a binary_sensor.[[roomname]]_window
entity. I pass the roomname as text when I call the template entity, and it all works great.
However, I'd also like to have a separate page where the [[roomname]]
is set by input_select.room_selector
with the various room names listed.
So I have this:
decluttering_templates:
test_decluttering_template:
card:
type: entities
title: '[[title]]'
entities:
- type: custom:template-entity-row
state: '[[roomname]]'
name: roomname_variable
- type: custom:template-entity-row
state: '{{ states("binary_sensor.[[roomname]]_window") }}'
name: Window state
And the cards:
cards:
- type: custom:decluttering-card
template: test_decluttering_template
variables:
- title: Passing the value of the input_select
- roomname: '{{ states.input_select.room_selector.state }}'
- type: custom:decluttering-card
template: test_decluttering_template
variables:
- title: passing_direct_string (\"kitchen\")
- roomname: kitchen
I've tried all sorts of variations, using custom:template-entity-row
or directly using - entity: 'binary_sensor.[[roomname]]_window'
and so on. I've tried using the '{{states("input_select.room_selector")}}'
function instead of states.input_select.room_selector.state
and so on.
Nothing is working for me. Some fail with "Unknown" in the UI, others don't render the card with various types of error. Happy to supply those errors if anyone thinks it might help.
Has anyone every seen this before and have an idea on how to fix please?
Checklist:
Release with the issue:
0.6.3
Last working release (if known):
Browser and Operating System:
Chrome, Win10x64
Description of problem:
The card uses a declutter-child
value as an ID for css elements.
Here is an example for custom:mini-graph-card
:
As a result - css elements do not have unique IDs in case of presence of several cards on the view.
This becomes a problem when using a card-mod
in Safari - using pointers like rect#some_id
affects on all similar cards on the view instead of only one particular card.
See a more detailed description: kalkih/mini-graph-card#839
Javascript errors shown in the web inspector (if applicable):
None
Additional information:
Checklist:
Release with the issue:
0.6.3
Last working release (if known):
N/A
Browser and Operating System:
arch | x86_64 |
---|---|
dev | false |
docker | true |
hassio | false |
installation_type | Home Assistant Container |
os_name | Linux |
os_version | 4.19.107-Unraid |
python_version | 3.7.7 |
timezone | America/Chicago |
version | 0.111.2 |
virtualenv | false |
Description of problem:
When I use decluttering-card with button-card and it causes additional space after each button.
If I use only button-card then no issues.
- type: custom:decluttering-card
template: motion_sensors_battery_square
variables:
- name: Bedroom
- entity: binary_sensor.wyzesense_777bfd2e
- entity2: sensor.tmpl_wyze_br_motion_sensor_battery
- type: 'custom:button-card'
template: blank_card_2px_width_style
- type: custom:decluttering-card
template: motion_sensors_battery_square
variables:
- name: Laundry
- entity: binary_sensor.wyzesense_77a5f319
- entity2: sensor.tmpl_wyze_lr_motion_sensor_battery
Javascript errors shown in the web inspector (if applicable):
No errors
Additional information:
Checklist:
Release with the issue: 0.6.3
Last working release (if known):
Browser and Operating System: Chrome, Win10
Description of problem:
Consider this template:
decl_test_var_template:
default:
- VALUE: xxx
card:
type: markdown
content: '[[VALUE]]'
and a card:
type: vertical-stack
cards:
- type: custom:decluttering-card
template: decl_test_var_template
variables:
- VALUE: '{{ states(''sun.sun'') }}'
- type: custom:decluttering-card
template: decl_test_var_template
variables:
- VALUE: >-
{{ states('sun.sun') }}
- type: custom:decluttering-card
template: decl_test_var_template
variables:
- VALUE: >-
{% if false -%}
{{states('zone.home')}}
{%- else -%}
{{states('sun.sun')}}
{%- endif %}
- type: custom:decluttering-card
template: decl_test_var_template
variables:
- VALUE: >-
{% if false -%}
{{states('zone.home')}}
{%- else -%}
{{states('sun.sun')}}
{%- endif %}
Here the indented template does NOT work:
- VALUE: >-
{% if false -%}
{{states('zone.home')}}
{%- else -%}
{{states('sun.sun')}}
{%- endif %}
Javascript errors shown in the web inspector (if applicable):
Additional information:
Enhancement Request.
I have 30+ button cards in my HA instance and I am now using the decluttering-card to provide a consistent behavior and style for all the buttons on all the views. This has worked great in that it allows me to update this one card to change the behavior (ie. tap_action) or style (ie. label color) across the entire site!
I have found that there are occasions where I need a few cards to be slightly different than what was defined in the decluttering-card. I don't want to create another variable and have the color specified in the variable section of every instance of the card, as it defeats the purpose of making a single change to update the style for all the cards. I could also duplicate the decluttering-card and specify the one item that's different, but again, it defeats the purpose of decluttering-card.
It would be nice if I could specify a variable in the decluttering-card, but have a default value if I don't specify it when using the card. For instance, I may want the labels on all my cards to be blue, but I need a few of them to be red for whatever reason. I would like to specify the blue style color in the decluttering-card, but allow the variable to be overridden with the color red for the specific button instantiation.
A decluttering-card configuration may look like this:
decluttering_templates:
my_first_template: # This is the name of a template
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
styles:
label:
- color: '[[label_color]]'' | blue
Can you add Home Assistant Cast support.
A comment on the HA forum is:
**The best thing is to reach out to the dev of the card. There are issues with the lit element and maybe even the local files they might be pulling…
Copy to clipboard
var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-view"));
if the corresponding bit at the end doesn’t say “hui-view” you can try editing it to say that… and make sure you change the version number in lovelace resources or it won’t load it.
That might make it work. I my case I also had to wrap a file URL to make it work as well.**
Can you do something with it?
Regards!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.