Lovelace: Decluttering Card

Share your Projects! Dashboards & Frontend
347

Assume this is your “dashboards” file:

dashboards:

  lovelace-main:
    mode: yaml
    title: System
    icon: mdi:xxxxxxxxxxxx
    show_in_sidebar: true
    require_admin: false
    filename: lovelace/lovelace-system.yaml

  lovelace-climate:
    mode: yaml
    title: Climate
    icon: mdi:xxxxxxxxxxx
    show_in_sidebar: true
    require_admin: false
    filename: lovelace/lovelace-climate.yaml

And these are your files for each dashboard:

### lovelace/lovelace-system.yaml
views:
  - !include views/system/view11.yaml
  - !include views/system/view12.yaml
  - !include views/system/view13.yaml
  - !include views/system/view14.yaml

### lovelace/lovelace-climate.yaml
views:
  - !include views/climate/view21.yaml
  - !include views/climate/view22.yaml
  - !include views/climate/view23.yaml
  - !include views/climate/view24.yaml

Everything is inside this tree structure:

.storage
  |_ ...
  |_ ...
lovelace
  |_ views
  |    |_ climate
  |    |    |_ view11.yaml
  |    |    |_ view12.yaml
  |    |    |_ view13.yaml
  |    |    |_ view14.yaml
  |    |_ system
  |         |_ view21.yaml
  |         |_ view22.yaml
  |         |_ view23.yaml
  |         |_ view24.yaml
  |_ lovelace-climate.yaml
  |_ lovelace-system.yaml
...
configuration.yaml

Now add a new folder “decluttering-templates” for your templates and create any tree structure inside (like “these templates are for climate only”):

lovelace
  |_ decluttering-templates
  |     |_ common
  |     |     |_ template11.yaml
  |     |     |_ template12.yaml
  |     |     |_ template13.yaml
  |     |_ network
  |           |_ template21.yaml
  |           |_ template22.yaml
  |           |_ template23.yaml
  |_ views
        |_ ...

Each file may be 1 decluttering template:

my_template:
  default:
    ...
  card:
    ...

or several templates (like “a bit different representations of same card”):

my_template_1:
  default:
    ...
  card:
    ...

my_template_2:
  default:
    ...
  card:
    ...

And place this string into each file for each dashboard:

decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
  - ...

Now ALL your dashboards are sharing same templates.

Note: splitting config described here.

3 Likes
348

Thanks you!

So I can import decluttering templates only if I use “mode: yaml”? I can’t import a decluttering template file if I use this mode?

image

349

In storage mode you only may use templates defined in a “raw yaml editor”.
If you have 3 dashboards in storage mode - then the same template you need to put into each “raw yaml editor”.

2 Likes
350

Ok, thank you so much for your help!

351

Hey guys, if I have '[[var]]' in the decluttering template, passing a string like '14' works fine (right card), but passing '{{states("sensor.buienradar_temperature_1d")}},' produces the JSON parse error in the left card.

image
image799×781 67.2 KB

Then I found that passing '{{states(''sensor.buienradar_temperature_1d'')}},' (i.e. with two single apostrophes '' around the sensor name instead of one double apostrophe ") does not return this error but works as expected.

So everything works for me now but just wanted to notify here and/or ask why this behavior occurs?

352

I also have another question. Why is this code not working? It just returns the jinjia template as string.

type: custom:decluttering-card
template: weather_now_template
variables:
  - secondary: >-
      {% set buienalarm = states(''sensor.buienalarm_precipitation'')|float %}
      {% set owm = states(''sensor.openweathermap_rain'')|float %}
      {% if (buienalarm + owm)/2 > 0 %}
      {{min([buienalarm, owm])|round(1)}} tot {{max([buienalarm, owm])|round(1)} mm/h
      {% else %}
      {{states(''sensor.openweathermap_cloud_coverage'')}}% bewolkt
      {% endif %}

If I add newlines between each line in the template, I get a JSON parse error ‘unterminated string’.

353

so its not possible to use the same decluttering templates for multiple dashboards?

ups… I should read the whole comment. Thanks a lot for the explanation!

Edit: Sad that it’s not really worth to dive into this card, as everything seems to slow down if this card is used. Plus there have not been any updates for almost 3 years now…

It would declutter my code so much, but those are deal breakers imo

3 Likes
354

decluttering does not evaluate templates unfortunately. it only passes strings.

355

explain please? can not state the same experience on this side, using a rather extended frontend, and some serious decluttering going on.
Maybe you have another issue at hand?

now that is true. otoh, there have been no real issues to solve and it keeps doing its job nicely

356

I noticed this while using the tap_action: more-info popup. The popup is slowed down by a second if using decluttering card. That’s what scared me

357

Right, I see.
not using that myself, so I couldn’t respond to that really, but are you sure there’s nothing else in that card config that might cause the delay? The decluttering card really only ‘rewrites’ the yaml, and once that is loaded shouldn’t be any different than writing the card without it.

Note I say ‘shouldnt’… ofc there is always the exception to the rule :wink:

358

I only tested this with custom mushroom cards. But the delay is definitely not there if I use them regularly. Would you mind to test this on your environment?

359

sure.
paste you’re yaml here, and I can have a look

360

Thanks for the reply, that is too bad really. I wanted to show a mushroom card with a simple string on one lovelace page, but showing the template on another page. I guess there’s now way around this unless decluttering card gets an update?

I can confirm, I have a simple camera card with more-info popup which shows instantly, and multiple declutter cards in a stack-in-card (so different card, but same popup) where the popup shows with a slight delay. I’d say it’s almost unnoticeable (can’t be more than 0.3 seconds), but when compared to the popup of the camera card there is definitely a difference.

361

Have terrible experience with camera cards and especially the more info myself, but also without the decluttering card so that might be another issue. See this post

On the template , give us an idea in yaml what you would like and we can see.

Maybe it’s just taking it 1 step earlier in the yaml rebuild sequence

362

I guess I just found the issue. The delay is only happening if double_tap_action is defined in the card. if not it just pops up right away. That is great news as I can now use the decluttering card :smiley:

363

I don’t have a lovelace-ui.yaml, I guess because I only edit my lovelace from the UI itself. I added decluttering_templates: in the raw configuration editor, on the same level as views:, but the card I added says No card type configured. Anyone have any idea?

364

No code = no ideas (

365

Start of my raw lovelace config:

iron-overlay-backdrop-background-color: rgba(41,128,185,0.25)
swipe_nav:
  animate: swipe
  prevent_default: true
  swipe_amount: 30
  wrap: true
decluttering_templates:
  my_first_template:
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: mdi:[[icon]]
views:
  - theme: Backend-selected
    icon: mdi:home
    panel: false
    path: home
    title: Home
    visible:
etc.......

Test card:

  template: my_first_template
  variables:
    - name: Test Button
    - icon: arrow-up

This is the error I see if it helps any more:image

366

Is this a screenshot from UI editor?
Try to remove the leading “-“.

1 Like