Hi All,
I’m using the following code: Untitled (pr0upy0e) - PasteCode.io
Everything appears to be working ok other than my icons. For some reason all the icons are being stacked at all times instead of the mapping working. I hopped onto the discord channel and someone suggested that the code looks right and they think it’s decluttering causing the issues but they weren’t sure. Anyone have any thoughts why mapping to icons isn’t working ?
Thanks in advance.
please post the code in this community so we dont need to click on external links
decluttering_templates:
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: name_state
name: '{{ states(''sensor.day_en'') }}, {{ states(''sensor.date_en'') }}'
state: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: left
float: left
width: 140px
button:
pointer-events: none
align-items: left
width: 140px
line-height: 1.6em
state:
font-weight: 700
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: left
float: left
width: 140px
- layout: icon|name_state
name: ⌂ {{ states('sensor.home_temperature') }}°F
state: '{{ state_attr(''weather.home'',''temperature'') }}°F'
image: |
{% set mapper =
{ 'breezy':'cloudy',
'clear-night':'night',
'clear':'day',
'mostly-clear':'day',
'clear-day':'day',
'cloudy':'cloudy',
'fog':'fog',
'hail':'rainy-7',
'haze':'haze',
'lightning':'thunder',
'mostly-cloudy':'cloudy',
'partlycloudy':'cloudy-day-3',
'partly-cloudy-day':'partly-cloudy-day',
'partly-cloudy-night':'partly-cloudy-night',
'rain':'rainy-4',
'scattered-showers':'rainy-3',
'showers':'rainy-6',
'sleet':'sleet',
'snow':'snowy-6',
'mostly-sunny':'day',
'sunny':'day',
'thunderstorm':'thunder',
'tornado':'tornado',
'wind':'wind',
'windy':'wind'} %}
{% set state = states('weather.maison_2') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/icons/weather_icons/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
views:
- theme: noctis
icon: ''
path: default_view
title: HOME
visible:
- user: 12345678901234567000
type: sidebar
badges: []
cards:
- type: custom:decluttering-card
template: header_main
well there you go.
decluttering templates do No process templates, they only use the variable templates to connect between the config and the decluttering template itself
if you want to use templates you need to find a card that can process them (custom:button-card) eg, and use its configuration template possibilities (in Javascript, not Jinja like here)
example:
card:
type: vertical-stack
cards:
- type: custom:button-card
template: button_default_title
name: '[[title]]'
- type: custom:auto-entities
card:
type: custom:layout-card
layout_type: masonry
filter:
include:
- domain: '[[domain]]'
area: '[[area]]'
options:
type: tile
this is a decluttering template, and it uses a button-card that again uses its own
this is an example of a decluttering template c&p a more complex config, using decluttering variables and letting the configured card in the template use that:
card:
type: conditional
conditions:
- entity: device_tracker.heater_[[id]]
state: home
card:
type: vertical-stack
cards:
# - type: thermostat
# entity: climate.heater_[[id]]
- type: entities
title: '[[name]]'
state_color: true
card_mod:
class: class-header-margin
entities:
- type: custom:template-entity-row
entity: sensor.heater_[[id]]_uncalibrated_temperature
state: >
{{states(config.entity,with_unit=True)}}
# {{states(config.entity)|round(2,default='Not ready')}}
- entity: binary_sensor.heater_[[id]]_heating
secondary_info: last-changed
- type: custom:fold-entity-row
# card_mod: #!secret style_toggle_icon
# style:
# ha-icon:
# $: |
# ha-svg-icon {
# color: var(--primary-color);
# width: 24px;
# }
head:
type: section
label: Details
card_mod: #!secret style_label_margin
style: |
.label {
margin-left: 0px !important;
}
padding: 0
entities:
- entity: device_tracker.heater_[[id]]
secondary_info: last-changed
- entity: sensor.heater_[[id]]_control_signal
so yeah, I was a bit too fast/didnt check the config you posted above thoroughly enough
Interesting. Is that a new(ish) change? This code was taken directly from a template someone shared online where it’s working without a hitch.
I won’t put the link since that’s not allowed but it can be easily found by searching for “Mobile First Dashboard”.
no it has been like that since its conception…
what isnt allowed?
btw funny you use this icon template, I did make that some years ago 
I misinterpreted your original post about links. Here’s where I took it from: 📱 Mobile First Dashboard - A minimalist and user-friendly UI for your dashboard
That user shows a fully functional dashboard based on the exact code I provided.
this is what you are referring too:
Need to check that, I might have been too hasty to respond. Declutering card can be used as a yaml anchor on steroids, and this might be just that: a pure c&p of the same code, without injecting any other variable from the decluttering template. see my edited post above for some more precision on the possible options
need to explain what you mean by:
more precisely though. are you talking about the weather icon template?
If yes, can you confirm that to work in the dev tools templates?
I had to re-edit most of those quotes to not have it throw errors
name: >
{{ states('sensor.dag_deel') }}, {{ states('sensor.komende_wekker_dag') }}
state: >
{{ now().strftime('%H') }}:{{ now().strftime('%M')}}
helps. just use multiline > notation and fix your quotes to single quotes inside
Here’s graphically what’s going on. All the “none” and “unknown” issues are resolved. Only one remaining is the icon.
yeah, thats a default icon ‘weather.svg’ for when the template doesnt find a correct state.
{% set weather = mapper[state] if state in mapper else 'weather' %}
post the template in dev tools states and show it please
has nothing to do with decluttering but with your template syntax or source you’re feeding it
Now I’m getting unknown again for my day/date which is frustrating. To simplify I’m focusing just on the weather. Here’s my current code:
decluttering_templates:
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: icon|name_state
name: ⌂ {{ states('sensor.home_temperature') }}°F
state: '{{ state_attr(''weather.home'',''temperature'') }}°F'
image: |
{% set mapper =
{ 'breezy':'cloudy',
'clear-night':'night',
'clear':'day',
'mostly-clear':'day',
'clear-day':'day',
'cloudy':'cloudy',
'fog':'fog',
'hail':'rainy-7',
'haze':'haze',
'lightning':'thunder',
'mostly-cloudy':'cloudy',
'partlycloudy':'cloudy-day-3',
'partly-cloudy-day':'partly-cloudy-day',
'partly-cloudy-night':'partly-cloudy-night',
'rain':'rainy-4',
'scattered-showers':'rainy-3',
'showers':'rainy-6',
'sleet':'sleet',
'snow':'snowy-6',
'mostly-sunny':'day',
'sunny':'day',
'thunderstorm':'thunder',
'tornado':'tornado',
'wind':'wind',
'windy':'wind'} %}
{% set state = states('weather.maison_2') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/icons/weather_icons/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
views:
- theme: noctis
icon: ''
path: default_view
title: HOME
visible:
- user: 12345678901234567000
type: sidebar
badges: []
cards:
- type: custom:decluttering-card
template: header_main
Dev tools spits out this error:
TemplateSyntaxError: expected token ',', got 'weather'
Interestingly enough though, when I’m typing out:
{{ state_attr(''weather.home'',''temperature'') }}°F'
A pop up status comes up saying “sunny” so the value is being detected.
Yep it’s a syntax error, as I said above.
Stop posting all non relevant card code and focus on the templates.
The error is already telling you what the issue is, so it’s an easy fix?
The template still uses the double single quotes btw, so take those out too.
make that
{{ state_attr('weather.home','temperature') }}°F
(note there is a stray end quote in your paste above after the F, but it is because that paste isnt complete and your full code also has the opening quote. I repeat, please use multiline notation, it makes life so much easier)
if you still get the ‘weather’ output in the icon template, then check the state of the weather entity, and see if it is actually mapped in the template. If not, just add it ofc.
Hi Mariusthvdb -
Sorry I’m not entirely sure what this means but I’ll continue to try.
I actually think that the weather call that I have is no longer supported. I think I have to move to weather.forecast based on some Googling last night. I’m attempting to figure that out now.
that means in stead of using:
'{{ state_attr(''weather.home'',''temperature'') }}°F'
use:
>
{{ state_attr('weather.home','temperature') }}°F
and have no more quoting issues, (which is what you’re seeing)
that indeed has been changed sometime ago, but shouldn’t trouble/interfere getting a state from the weather entity, or cause your issue at hand
Ah - interesting. I was on discord a lot yesterday and, several issues were resolved, a bug was discovered (HA is adding ` in various places for no apparent reason, trying to consistently reproduce). I’ll modify the entire yaml to be multiline instead of single line with quotes. Any other specific suggestions as to the weather state that you can think of or do you need me to provide something else to assist? You said it’s a syntax error potentially so mabe the multiline changes will help. Stay tuned . . . and ongoing thanks for the help.
Ok. Still no success (several more hours trying). My latest yaml is:
decluttering_templates:
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: name_state
name: |
{{ states('sensor.day_en') }}, {{ states('sensor.date_en') }}
state: |
{{ now().strftime('%H') }}:{{ now().strftime('%M')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: left
float: left
width: 140px
button:
pointer-events: none
align-items: left
width: 140px
line-height: 1.6em
state:
font-weight: 700
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: left
float: left
width: 140px
- layout: icon|name_state
name: |
⌂ {{ states('sensor.home_temperature') }}°F
state: |
{{ state_attr('weather.home','temperature') }}°F
image: >
{% set mapper =
{ 'breezy':'cloudy',
'clear-night':'night',
'clear':'day',
'mostly-clear':'day',
'clear-day':'day',
'cloudy':'cloudy',
'fog':'fog',
'hail':'rainy-7',
'haze':'haze',
'lightning':'thunder',
'mostly-cloudy':'cloudy',
'partlycloudy':'cloudy-day-3',
'partly-cloudy-day':'partly-cloudy-day',
'partly-cloudy-night':'partly-cloudy-night',
'rain':'rainy-4',
'scattered-showers':'rainy-3',
'showers':'rainy-6',
'sleet':'sleet',
'snow':'snowy-6',
'mostly-sunny':'day',
'sunny':'day',
'thunderstorm':'thunder',
'tornado':'tornado',
'wind':'wind',
'windy':'wind'} %}
{% set state = states('weather.home') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path =
"https://github.com/bramkragten/weather-card/tree/master/icons/animated/"
%}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
It’s something to do with passing on a url to the icon. Dev Tools clearly shows that the right value is being passed, for example, right now dev tools shows:
image: >
https://github.com/bramkragten/weather-card/tree/master/icons/animated/day.svg
What appears is a tiny (literally have to zoom way in) string “ICON”.
so this is now the 3d or 4th different issue you throw at us…
you keep changing your config, and this is the last of the new iterations you make: loading remotely served images.
Ofc that would require a different syntax than what is proposed in the existing template, which gets the icons from your /local/ (www) folder in the iterations you had above
my suggestion would be to keep it that way, and not change requirements in every response you make or help you get.
Sorry I should have said, I did that first. I moved to remote based on a suggestion on Discord but same result either way.