Create visual editors for decluttering cards and templates.

[j9brown]

The new 'custom:decluttering-template' card declares a template. It can be placed in any view of the dashboard and it is only visible in edit mode. Use the visual editor to conveniently create a template, configure the card or element, set variables with their default values, and preview the results.

The existing 'custom:decluttering-card' card now searches for templates declared by 'custom:decluttering-template' cards in addition to those in the traditional decluttering_templates dashboard configuration. Use the visual editor to conveniently pick an existing template defined elsewhere, set variables, and preview the results.

Fixed possible race conditions when cards are loaded and streamlined the logic.

Restored previously set styles when element styles are modified. The element styling behavior is curiously undocumented...?

[badbl0cks]

Maintainers, can this be merged? It adds more functionality and also fixes #80, making this compatible with the new sections view type (just have to set the layout size on the template card)!

[werehamster999]

@j9brown - This is awesome and exactly what’s needed. I hope the original author picks up on this and merges it soon. I can’t wait to try it out.

PS: The devil’s advocate in me says “stencil” is a better name to use for the templates (Only because the HA team haven’t worked out the difference that decluttering-card brings to the table and it’ll be less confusing to use in discussion) :-)

[j9brown]

I'm glad you like it. I'm somewhat tempted to hard fork the project and publish a new version under a different name and I'd like to contact the original author before I do that.

There are a bunch of changes needed to support new features in Home Assistant 2024.8, so expect to see those in my fork once I find some free time.

That said, I do think that this "stencil" abstraction would be better off implemented directly within Home Assistant. It could also be considered a "blueprint" for cards and badges and other dashboard objects.

[werehamster999]

@j9brown - Hi Jeff! Thanks for the response. Yeah, it’s a bit awkward not getting a response yet. Hopefully the author is okay and just busy. I believe the HASS agent integration had a similar situation crop up.

As long as the release is respectfully done as a fork/variant then I’m sure the author will understand. A little free field-testing and feedback prior to a merge might be useful to the author too.

If you do a fork, you’re guaranteed one visitor. I have enough custom cards to keep me busy in other ways. The decluttering card helped so much at keeping them neatly (and DRY-ly) in line :-).

As for “stencil”, yeah, it’s not a strong advocacy thing :-), it’s just a thought. I’ve always felt decluttering card’s methods are just more KISS in nature. It’s also got elements of “boilerplate” now I come to think of it :-).

Anyway, I’d better leave you to it. I’ve yet to read up on the August beta.

regards and best wishes,

Hammy

[RomRider]

I'll review that asap but not before mid-august

[smitt04]

Just tested out your fork and that is really sweet, great job.

[iceboundflame]

Tested this out and I like the concept of custom:decluttering-template - I can put my templates in a hidden subview instead of editing a yaml file. Unfortunately, using the visual editor fails for me as my changes keep getting reset - i.e. I make changes to the via the editor and a couple seconds later the changes are reverted.

HA Version details:
Core
2024.9.2
Supervisor
2024.09.1
Operating System
12.4
Frontend
20240909.1

[j9brown]

Oh that’s weird. I haven’t observed this behavior before. What cards are you putting into the template? Anything interesting in the logs?

[iceboundflame]

I can repro by creating a new dashboard, adding a decluttering template card, and making a change to the "Variables" field of the editor. I found the following in the JS log:

decluttering-card.js?hacstag=772402175103:277 Uncaught TypeError: Cannot assign to read only property 'template' of object '#<Object>'
    at Ue._valueChanged (decluttering-card.js?hacstag=772402175103:277:144)
    at k.handleEvent (decluttering-card.js?hacstag=772402175103:82:4665)
    at i.__boundHandleEvent (decluttering-card.js?hacstag=772402175103:82:4044)
    at n (fire_event.ts:76:8)
    at ShadowRoot.<anonymous> (ha-form.ts:217:7)
    at n (fire_event.ts:76:8)
    at o.value (ha-yaml-editor.ts:140:5)
    at $.handleEvent (lit-html.ts:2018:29)
    at n (fire_event.ts:76:8)
    at ha-code-editor.ts:311:5

[j9brown]

How strange! I'm sorry, I'm unable to reproduce this issue. I'm on the same version of Home Assistant so what browser are you using? I'm on Chrome.

[j9brown]

@iceboundflame I've uploaded a new version 1.0.4 with an attempt to fix the issue by treating the incoming config object as immutable. I don't know why I can't reproduce it myself though and perhaps your browser is being more strict than mine. Please let me know if it helps!

[iceboundflame]

Thanks! Could you please post a compiled .js so I can test? 1.0.4 doesn't download via HACS and I can't find the .js.

[j9brown]

I've already posted the release. You might need to ask HACS to update the repository information.

https://github.com/j9brown/decluttering-card/releases

[iceboundflame]

Just installed and it's working great now. Thank you, this is awesome!