Quick question @RomRider
In the above instance, [[name]] is set to ‘Default Icon’ and [[icon]] is set to ‘Button’ ??
Sorry it was a documentation error, I updated the post (not github yet)
Name has the entire value and icon will be the default value (fire in this case)
Ok. That’s what I thought.
For some reason, the following template is not working.
decluttering_templates:
mediaplayer_template: # This is the name of a template
type: conditional
conditions:
- entity: '[[entity_1]]'
state: playing
card:
type: media-control
entity: '[[entity_1]]'
I am using this template like this.
- type: custom:decluterring-card
template: mediaplayer_template
variables:
- entity_1: media_player.rokuexpressbasement
I am not sure if I created the template wrong or some other issue. There are no errors in the HA log and in the Chrome dev tools console.
Here is the error message on the page.
Are you sure the file is loaded correctly? If you don’t have errors in the javascript console then it probably doesn’t find the file on your disk.
Did you use the file from the dist folder?
Make sure you’re using the raw version of the file and not the HTML page, this is a common mistake related to to this error.
Since the 0.2.0 update I sometimes get errors on all of the decluttering cards that I use.
The template that I use is:
media-player-volume-slider:
card:
type: conditional
conditions:
- entity: '[[entity]]'
state_not: "off"
card:
type: 'custom:mini-media-player'
entity: '[[entity]]'
max_volume: '[[max_volume]]'
hide:
controls: true
icon: true
info: true
name: true
power: true
source: true
It’s not just this template, but all of the templates that I use. Forcing a refresh of the Lovelace or in my browser doesn’t help either.
At the moment I have this issue on my computer, but on my phone it’s working perfectly.
I used HACS to download this card and verified both js files were downloaded.
What is lovelace-template-card? This one is only decluttering-card.js and you should only include that in your resource list.
It’s not enough to download the file, you also have to declare it in the resources of lovelace.
That’s probably a caching issue. Clear your cache and restart your browser.
That template card I can explain (partially).
It’s here https://github.com/custom-cards/decluttering-card/tree/0.2.0/dist and therefor downloaded.
1 Like
Omg, that’s a leftover from before I published the card, it shouldn’t be there, thanks for pointing it out, I’ll delete it.
There are two files from dist folder.
https://github.com/custom-cards/decluttering-card/tree/master/dist
Yes, I declared this file in the resources section.
- url: /community_plugin/decluttering-card/decluttering-card.js
type: module
That does work, but it’s odd that it just stops working all of the sudden.
So I finally got into this after some weeks delay, and I must say this is great. It is much more versatile than anchors. I use it for my buttons and I was able to create a single template for all of my buttons (which is amazing btw). Just one thing, would it be possible to have the entire tap_action settings in a template? For example, if I want to use a service as tap_action it will require me to set up an extra line. But leaving that line in for entities that don’t need this will give an error when pressed (extra keys are not allowed). I hoped to use a single template for all my buttons. I have it pretty much sorted out for my other buttons, but for a service call I would need extra lines.
You could try something like:
Template:
button_template:
xxxx:
default:
- tap_action:
card:
tap_action: '[[tap_action]]'
Card:
variables:
- tap_action:
action: call-service
[...]
And if undefined it will end up being null and not do anything.
A variable can be a complete object if needed as you can see.
1 Like
Ok I will try this.
Thanks @romrider this works perfectly fine. I would love to do this with a label/label_template as well but I can’t seem to get it to work.
I have tried this:
'[[label]]': '[[label_template]]'
It works perfectly fine if it has only one line (so for a label it would work without a problem). However it gets more complicated when trying to put in a string like this:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
It will throw an error like this:
JSON.parse: bad control character in string literal at line 1 column 279 of the JSON data
I would love to make a single template for buttons that use a label and buttons that use a label_template. I would love to do this as the light buttons are exactly the same as my switch buttons with the exception of this label/label_template issue. Thanks a lot again for the hard work.
Compatible with Swiper Card? When using a Decluttering card template within a Swiper card:
decluttering_templates:
room_button_template:
default:
- entity: []
card:
type: custom:button-card
entity: '[[entity]]'
name: '[[name]]'
...
...
- type: custom:swipe-card
start_card: 1
parameters:
freeMode: true
slidesPerView: auto
iOSEdgeSwipeDetection: true
slideToClickedSlide: true
cards:
- type: custom:decluttering-card
template: room_button_template
variables:
- entity: sensor.living_room_ecobee_temperature
...
Swiper Card adds the slide classes to the decluttering-card DIV:
<decluttering-card class="swiper-slide swiper-slide-active">...
Instead of the button card DIV:
<button-card class="swiper-slide swiper-slide-active" ...
This causes each swiper slide to be stretched out. Any thoughts on how to fix this? Thanks in advance!
Would it be possible to make “partial” templates, like the ones we can use for the button-card where we can add or overwrite keys when we instantiate the template, like so:
decluttering_templates:
entities_card:
card:
type: entities
style: |
ha-card {
border: solid 1px var(--dark-primary-color);
border-radius: 12px;
overflow: hidden;
width: 97%;
margin: 0 auto;
padding-top: 0px;
}
# Use the above template
cards:
- type: custom:decluttering-card
template: entities_card
entities: # This key is not present in the template
- light.light_1
- light.light_2
The example might not be 100% syntactically correct, but i hope you get the idea.
The use case is i have several entities card that all look the same but they have variable amounts of rows in them.