Lovelace: Decluttering Card

Try removing the first line decluttering_templates: from the included file. You already have that on the include line.

1 Like

Hi, it looks like the project is not maintained. There is 27 open PR and maintainer is not approving them. Last release was more than 1 year ago.

Have anyone idea, how restart this project?

those are issues, not Pr’s…

but, decluttering is functioning properly mostly, so no need to update. It has its quirks, or should I say its own particulars. Even have an issue open myself :wink:

Romrider has been busy and away from the project, but, if you have a true breaking change, I am sure he will have a look.

What exactly is your issue, maybe we can help?

Declutterring seems like a good idea on the face of it. I have six tablets around the house and they all share common layouts with probably 30% differences between each. Ie for light controls in that room etc.

Managing these is not great as I obviously have to make changes across all devices. I do have a lot of mods and custom cards.

Is using declutterring the way to go or are there lots of potential issues that will drive me insane?

Hi everyone

I have a few dashboards with several mushroom-template-cards embedded in picture elements cards.
They are working well so far but I would like to declutter them with your card.

Is there a way to set variables for the template and card_mod sections?

Below is a (non working) example about what I try to archieve:

decluttering_templates:
  light:
    card:
      type: custom:mushroom-template-card
      primary: '[[name]]' # Light
      icon: 'mdi:[[icon]]' # mdi:brightness-5
      icon_color: |-
        {% if is_state('[[switch]]', 'on') %} '[[color_on]]'
        {% else %} '[[color_off]]'
        {% endif %}
      card_mod:
        style: |
          ha-card {
            --ha-card-background: none;
            --icon-size: '[[icon_size]]'; 
            --card-primary-font-size: 20px;
            --spacing: 1px;
          }
          mushroom-shape-icon {
            --shape-color: none !important;
          }
views:
  - title: Home
    type: panel
    cards:
      - type: picture-elements
        image: local\grey.png
        elements:
          - type: custom:decluttering-card
            template: light
            variables:
              - name: Light
              - icon: brightness-5
              - switch: switch.test
              - color_on: yellow
              - color_off: white
              - icon_size: 40px
            style:
              top: 80px
              left: 100px
              transform: scale(1.5)
              font-family: Arial

PS: Thanks for all the great work and this massive support to be found here.

First issue is that your template is named light yet you referenced a template named date.

1 Like

Hoppla, yes your right!
It was date before, → changed it to light for this post just forgot to change the second part.
Thanks, corrected the first post now!

Anyway the code is not correct this way.

And I just found this info:

https://community.home-assistant.io/t/lovelace-decluttering-card/118625/352?u=rolandfran

So if its not possible to use decluttering variables inside templates the same will probably apply to card_mod too!?

Well, take this example right from my setup.
A decluttering template that uses variables inside a template:

  game_stats:
    card:
      type: custom:auto-entities
      unique: true
      show_empty: false
      card:
        type: custom:layout-card
        layout_type: masonry
        width: 300px
        max-columns: 5
      card_param: cards
      filter:
        template: |
          {%- for team in integration_entities("teamtracker") -%}
            {%- if state_attr(team, "league") == "[[sport]]" -%}
            {%- if states(team) == "[[status]]" -%}
            {%- if state_attr(team, "team_homeaway") == "home" -%}
            {%- if team in state_attr('sensor.nfl_red_zone','teams') -%}
              {{{"type": "custom:teamtracker-card",
                "entity": team,
                "card_mod": {"style": "ha-card {\n\n    color:  black; \n    background-color:  #ffcccc; \n    box-shadow: 0 0 10px 5px red;\n}\n"},
                "home_side": "right"}}},
            {%- else -%}
              {{{"type": "custom:teamtracker-card",
                "entity": team, 
                "home_side": "right"}}},
            {%- endif -%}
            {%- endif -%}
            {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
        exclude:
          - entity_id: '*team_tracker*'
      sort:
        method: attribute
        attribute: date

I’m wondering if there’s something I don’t understand or the documentaiton is wrong. I just installed Decluttering card from HACS and kind of got it to work (I can play around with it), but when I put this into my Dashboard YAML at the top (1:1 from the documentation):

decluttering_templates:
  my_first_template:
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: mdi:[[icon]]

and then I create cards with this code (also 1:1 from the documentation):

  - type: custom:decluttering-card
    template: my_first_template
    variables: Default Icon Button
  - type: custom:decluttering-card
    template: my_first_template
    variables:
      - name: Test Button
      - icon: arrow-up

…then the test button card works, but for the first one I get this:

decluttering_card

It works as soon as I remove Default Icon Button or put it in a separate line beginning with - name: .

Is there something wrong with my config here or is the issue with the examples in the documentation?

Yeah. The docs are wrong. The first one should be

  - type: custom:decluttering-card
    template: my_first_template
    variables:
      - name: Default Icon Button

Basically, not defining the icon and using default.

I get a: “{“error”:“Not Found”}” on decluttering-card.js when trying to install it.

Hi there,

I have a question regarding passing LIST variables and use them in a template. I didn’t a solution this topic.
The best tutorial I found on passing variables was provided by @Ildar_Gabdullin , but passing a LIST and use that in a template was not addressed there.

So this example was provided:

The template

decl_test_var_list:
  default:
    - ENTITIES:
        - sun.sun
        - zone.home
  card:
    type: entities
    entities: '[[ENTITIES]]'
      - type: custom:decluttering-card
        template: decl_test_var_list

And the card

      - type: custom:decluttering-card
        template: decl_test_var_list
        variables:
          - ENTITIES:
              - entity: weather.home_met
                name: Weather (home)
              - entity: sensor.processor_use
                name: CPU load

I tried a variation with the markdown card:

Template:

  decl_test_var:
    default:
      - VALUE: xxx
    card:
      type: markdown
      content: '[[VALUE]]'

card:

type: custom:decluttering-card
template: decl_test_var
variables:
  - VALUE:
      - tst1.x
      - tst2.y

And that works!:
image

But any variation of content: to use the variable in a template fails:

      content: "{{ '[[VALUE]]' }}"

results in:
image
Very strange I get the default?!

And

      content: '{{ [[VALUE]] }}'

results in nothing:
image

Anyone have a suggestion how to catch a list variable in a template?!

Best Eric

“passing a LIST” - was described.
As for addressing elements inside a list or a dictionary - there were special remarks in my post for this.

I noticed that remark.
But I’m still hoping for a solution to get the list variable as a string in the template :smiling_face:. From there I know how to proceed.
Really strange is that I get the default value instead.

I tried to process attributes as dicts / list - and failed.
Hard to say anything w/o a card’s author.

@Ildar_Gabdullin I will ask Tom, thanks for the great variable passing tutorial. It saved me a lot of time :+1:

Pardon, who is Tom?

TomRider (Jerome) Question: can I use list variables in template?! · Issue #83 · custom-cards/decluttering-card · GitHub

I see, RomRider )))

Oeps, maybe dyslexic’s :face_with_peeking_eye: