FYI, I tried installing this via HACS. Apparently, it retrieves an incorrect file. It gives the “Custom element doesn’t exist” error.
When I replaced that file with the correct (dist) version, it worked.
No idea what happened for you… I only installed it a week ago via HACS and it’s fine. HACS is just pulling the same file as manually…
If it’s any help, the file HACS loaded for me began with:
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function e(e, t, r, n) {
The one that worked begins with:
var e = {},
t = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,
n = "[^\\s]+",
o = /\[([^]*?)\]/gm,
r = function () {};function i(e, t) {
for (var n = [], o = 0, r = e.length; o < r; o++) n.push(e[o].substr(0, t));return n;
}
Where can I get the correct decluttering-card.js file? I got the same problem as you and all the link above are not found now.
Same place as usual: Releases · custom-cards/decluttering-card · GitHub
HACS pulls the file from the releases. If it doesn’t work for you, you have another issue unrelated to decluttering-card.
I still got the same error as Russell above: “Custom element doesn’t exist: decluterring-card”. I really have no idea how to solve this. I checked HACS installation and lovelace resources. Everything looks right but the error still. Russell mentioned that there’s another version of declutteriing-card.js file that works! I really want to get this working as my lovelace ui file is a bit messy now.
There is only one version of decluttering-card (link above), and it works for everyone, so the problem is probably on your side
What does your lovelace resource list look like?
Having the same issue here.
Did a fresh install of HassIO+HACS (vmware based) just to try it and still the same.
Errormessage when checking the config: Component error: decluttering_templates - Integration ‘decluttering_templates’ not found.
Resouce pointing at “/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063” as a module.
Just a simple row with “decluttering_templates:” in configuration.yaml
(and without that row there are no errors at all but of course the function is non-existing)
Figured it out…
The decluttering_templates-tag needs to be within a lovelace yaml-file, did have it at root level and that doesn’t work at all…
Good find (and of course, you’re right. That’s where mine is.)
I need a help with some unusual case.
My YAML skills are not enough…
Let’s assume I need a vertical stack of cards:
- Entities card
- Glance card.
This is a simplified decluttering template:
my_stack:
card:
type: vertical-stack
cards: '[[CARDS]]'
How to use:
type: custom:decluttering-card
template: my_stack
variables:
- CARDS:
- type: entities
entities:
- sun.sun
- sun.sun
- type: glance
entities:
- sun.sun
- sun.sun
It works fine.
Now lets change the task a bit - the stack already has some cards and I need to add more cards as variables.
Let’s assume that the stack already has that Entity card, now I need to use the template with the added Glance card:
type: custom:decluttering-card
template: my_stack
variables:
- CARDS:
- type: glance
entities:
- sun.sun
- sun.sun
Now I do not know how to specify the template.
I tried this with no success:
my_stack:
card:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- sun.sun
- <<: '[[CARDS]]'
Actually I need only ONE card to be added as a variable, may be this can make a decision easier or at least possible.
Found how to add one card as a variable (or more cards with more variables, 1 card = 1 variable):
my_stack:
card:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- sun.sun
- '[[CARD_1]]'
- '[[CARD_2]]'
How to use:
type: custom:decluttering-card
template: my_stack
variables:
- CARD_1:
type: glance
entities:
- sun.sun
- sun.sun
- CARD_2:
type: glance
entities:
- person.ildar
- person.ildar
Now I wonder how to add a set of cards via ONE variable…
Can someone lend a hand on how to configure this icon colour sensor template?
decluttering_templates:
nasdrive_stats:
card:
type: custom:button-card
entity: '[[entity_nasdrivetemp]]'
name: '[[name]]'
icon: mdi:[[icon]]
aspect_ratio: 1/1
styles:
card:
- background-color: '#55555544'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "state state" "smart smart" "graph graph"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 15px
- color: white
- align-self: top
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 45%
- margin-top: '-10%'
- margin-bottom: '-12%'
- color: |
[[[
if (entity.state > 50) return "red";
if (entity.state >= 30) return "orange";
else return "lime";
]]]
custom_fields:
temp:
- align-self: start
- justify-self: end
- '--icon-color-sensor': lime
state:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--icon-color-sensor': |
[[[
if (states["[[entity_nasdrivestate]]"].state == "Normal") return "lime";
if (states["[[entity_nasdrivestate]]"].state == "Not_use") return "orange";
else return "red";
]]]
smart:
The [[entity_nasdrivestate]] variable supplied contains the entity name for a sensor other than the main entity for the card This obviously doesn;t work right now - it actually sets the sensor value…
I don’t think you can have a custom field named “state” as there is already something called state which shows the state of the main entity. (I use stat instead.)
Also, those custom field are meant to return text (or markup text) for display in the grid position(s) occupied by that field. For example:
stat: |
[[[
var status = '[[thing_name_off]]';
if (entity.state == "on") status = '[[thing_name_on]]';
return `<span>${status}</span>`
]]]
If you want to effect the color of the markup text displayed, you can do something like this which displays an icon in a state-based color and state text following in white.
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 ``
]]]
Thanks, yes I’d already realised not a good idea to use “state” and changed that.
I already have the text and icon displayed - I simply need a template to chaneg the icon color dependent on the state of another entity the name of which is contained in [[entity_nasdrivestate]].
I’ve tried your suggestion and still no joy - it sets the sate but not the icon colour:
stat: |
[[[
if (states['[[entity_nasdrivestate]]'].state == 'Normal') {
var staticon = "lime";
}
else {
var staticon = 'red';
}
return `<ha-icon
icon="mdi:power-standby"
style="width: 16px; height: 16px; color: $(staticon);">
</ha-icon> <span>Status: <span style="color: white;">${states['[[entity_nasdrivestate]]'].state}</span></span>`
]]]
Try this:
stat: |
[[[
var staticon = "red";
if (states['[[entity_nasdrivestate]]'].state == 'Normal') {
staticon = "lime";
}
return `<ha-icon
icon="mdi:power-standby"
style="width: 16px; height: 16px; color: $(staticon);">
</ha-icon> <span>Status: <span style="color: white;">${states['[[entity_nasdrivestate]]'].state}</span></span>`
]]]
Also, is the state capitalized? (eg: “Normal”). Case matters in those tests.
Thanks, got it in the end, and your comment about capitalization was useful - I forgot that it was capitalized by my style previosuly, not the actual state.
Hi Everyone,
After spending many hours trying to decide how to go ahead with the design of my Lovelace views, I decided to use the attached screen. However, working with UI and long lines of code resulted in the 1st and 2nd while when trying to use the decluttering card it always leaves the large space and dosen’t look like the long code version.
What am I doing wrong? or did I go blind from all the concentration on this piece?!! I would appreciate any advice I can get.
decluttering_templates:
section_name:
default:
- <name>: <section name>
card:
type: custom:button-card
name: '[[name]]'
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
switch_btn:
card:
type: custom:button-card
entity: '[[entity]]'
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
show-border: true
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
water_level:
card:
type: custom:button-card
entity: '[[entity]]'
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 180px
- width: 100px
- border-radius: 15px
- margin: 5px 5px
entity_picture:
- justify-self: start
- width: 80px
- border-radius: 5px
- transition: all 2s ease
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- animation: blink 2s ease infinite
title: Sober Home
views:
- title: Pool
path: pool
icon: mdi:swim
badges: []
cards:
- type: custom:stack-in-card
keep:
background: true
border_radius: true
box_shadow: false
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Pool
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pool_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 180px
- width: 90px
- border-radius: 15px
- margin: 5px 5px
entity_picture:
- justify-self: start
- width: 80px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.pool_tank_valve
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
show-border: true
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_filter_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_stairs_jet_1_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.pool_heating_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_waterfall_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_jet_2_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: grid
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Pool
styles:
name:
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- justify-self: start
- padding: 0px 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pool_tank_level_number
show_entity_picture: true
show_name: false
size: 25%
styles:
card:
- height: 180px
- width: 90px
- border-radius: 15px
- margin: 5px 5px
entity_picture:
- justify-self: start
- width: 80px
- border-radius: 5px
state:
- value: 5
operator: '=='
entity_picture: /local/my-icons/water 5.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- value: 4
operator: '=='
entity_picture: /local/my-icons/water 4.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
- transition: all 2s ease
- value: 3
operator: '=='
entity_picture: /local/my-icons/water 3.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
- transition: all 2s ease
- value: 2
operator: '=='
entity_picture: /local/my-icons/water 2.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
- box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
- transition: all 2s ease
- value: 1
operator: '=='
entity_picture: /local/my-icons/water 1.png
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
- box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
- transition: all 2s ease
- animation: blink 2s ease infinite
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.pool_tank_valve
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
show-border: true
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_filter_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_stairs_jet_1_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.pool_heating_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_waterfall_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
- type: custom:button-card
entity: switch.pool_jet_2_pump
show_name: false
show_entity_picture: true
show_state: false
show_icon: false
size: 60%
styles:
card:
- height: 90px
- width: 90px
- border-radius: 20px
entity_picture:
- justify-self: start
- width: 65px
- border-radius: 5px
state:
- value: 'on'
operator: '=='
styles:
entity_picture:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
- transition: all 2s ease
- border-radius: 5px
columns: 1
square: false
- type: grid
columns: 1
square: false
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: section_name
variables:
- name: Pool
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: water_level
variables:
- entity: sensor.pool_tank_level_number
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_tank_valve
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_filter_pump
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_stairs_jet_1_pump
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_heating_pump
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_waterfall_pump
- type: custom:decluttering-card
template: switch_btn
variables:
- entity: switch.pool_jet_2_pump
Also, I noticed that whenever I try to raw edit my views, I get the white lines of code starting at random places, but when I add an empty line before the white lines, they get the color back!! any reason for this behavior? attached a screenshot as well.
Thanks in advance