Lovelace: Decluttering Card

Another one, updated ui-lovelace.yaml to this content, this is the entire file. Commented the decluttering line from configuration.yaml and restarted HA. The error in dashboard remains the same! :frowning_face:

resources:
  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module

decluttering_templates:
  state_sensor_card_template:
    card:
      type: entity
      entity: '[[entity]]'
      icon: '[[icon]]'
      unit: '[[unit]]'

Do you put that in configuration.yaml or lovelace-ui.yaml? Because it needs to be in configuration.yaml, like all resources when using YAML mode. Only card-mod has a different setup.

The correct way inside configuration.yaml if you use YAML is:

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/apexcharts-card/apexcharts-card.js
      type: module  
    - url: /hacsfiles/alarmo-card/alarmo-card.js
      type: module  
    - url: /hacsfiles/atomic-calendar-revive/atomic-calendar-revive.js
      type: module      
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /hacsfiles/config-template-card/config-template-card.js
      type: module  
    - url: /hacsfiles/decluttering-card/decluttering-card.js
      type: module   

Also show some extra code of your lovelace-ui.yaml where you use the card decluttering. Where in lovelace yaml do you use it, is it nested inside another card? Reason I ask is because of this:

Try above things and then create the most basic decluttering template and test that. Also post your code of what you tested if that doesn’t work also.

it was in ui-lovelace.yaml, now moved to configuration.yaml in format you provided, then restarted. No change in error message.

btw, is this file with the template definition supposed to be named ui-lovelace.yaml or lovelace-ui.yaml?

this is the entire card I have been using after simplification:

type: custom:decluttering-card
template: state_sensor_card_template
variables:
  - entity: sensor.room_state
  - icon: mdi:motion-sensor-off
  - color_code: green

What is the template itself? And do you put that in lovelace yaml at the top? Do you even already have a dashboard in YAML?

Yes. Partial screen shot of dashboard. Maybe I am confused about what a YAML dashboard is supposed to be?

Ok so that’s not YAML mode but GUI, since you’re literally using the GUI card editor… So you’re not even using lovelace-ui.yaml You need to put the decluttering template at the top of your dashboard. Since you’re not using YAML, that lovelace-ui.yaml file doesn’t do anything for you. You need to press RAW editor and paste it there at the top… Hit the dots in GUI editor and then RAW editor.

1 Like

Isn’t the template the first picture in my previous post? If you meant the card:

Please refresh page, I updated my post.

And now it works in all its glory. Thanks a bunch!

When using it in this mode, configuration seems to work just fine with the Lovelace section commented:

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Text to speech
tts:
 
frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js
    - /hacsfiles/lovelace-state-switch/state-switch.js
    - /hacsfiles/decluttering-card/decluttering-card.js

#lovelace:
#  mode: yaml
#  resources:
#  - url: /hacsfiles/decluttering-card/decluttering-card.js
#    type: module

When I drive my car I can shift gears without using the shift pedal. It make an awful noise, but it still works. Doesn’t mean it’s the correct way though.

When using GUI mode like you are, you need to add resources through Dashboard settings page. Which is located here (use your own IP and add config/lovelace/resources behind url).

http://YOUR-IP:8123/config/lovelace/resources

sure, but in the case of car gears there is a mechanical reason for doing it that way.

if you help me understand the difference between these, I would learn something from it:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js
    - /hacsfiles/lovelace-state-switch/state-switch.js
    - /hacsfiles/decluttering-card/decluttering-card.js
lovelace:
  mode: yaml
  resources:
  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module

Thank you.

Then you should read the docs, they’re very well writen and there for a reason :wink: . I simply pointed out what the correct way is to add resources in GUI and YAML, in order to prevent issues later on and prevent issues troubleshooting.

Anyway, this thread is about decluttering-card, while your issue actually had more to do with not loading up your resources correctly and not decluttering-card itself. Let’s not misuse this thread with off-topic subjects. There are many threads in the Configuration section in this forum if you are interested in why and how resources and stuff works.

Did try that before asking any questions. There is no docs page the explains the difference between or even explains lovelace > resources in any meaningful way :slight_smile:

Did you ever get this working? I’m currently trying to add a chip via a decluttering-card template but it just doesn’t render similar to your issue.

The person you asked has a wrong code:

  testagain:
    card:
      - type: conditional

the “dash” should not be here.
Other things have not checked (may be they are correct, may be not).

Yeah, I noticed the error, I wondered more whether decluttering an individual chip is possible. (not the complete chip card)

You may solve the problem faster if your issue is a bit changed: imagine this is a standard Entities card with “entity” entries; and try to apply same question to this case. Reason - many people do not use mushrooms.

I’ve been having a play with this and it’s broadly working great!
My only issue is the fact that I have to use so much YAML.

This is either a feature request or me missing something here, so bear with…

It would be great if you could create a card (visually) in Lovelace (perhaps in a view that isn’t visible), then change this card to change all other instances of it. I guess this is defining a template.

I’m using it to duplicate the left column of this wallpanel - as such, there is quite a lot of code if I want to make changes to it. Creating the card visually and copying the code kinda works, but this throws out the indentations in the YAML which is a bit of a pain to correct:

1 Like

Highlight the lines that need fixed and use Tab/Shift-Tab to adjust the indentation.

1 Like