Lovelace: Decluttering Card

Got it

                name: >-
                  [[[ return
                  states['input_number.autolock_delay_[[subject]]'].state; ]]]
         

My statement was a bit hasty, actually.
It depends:
– a template for a “default” value of some variable cannot be resolved BEFORE using this variable;
– it may be resolved WHEN using this variable: if an option supports templates - then the template is resolved, otherwise - no.
Consider this decluttering-template:

  decl_test_var_template_2:
    default:
      - VALUE: >-
           {{ states('sun.sun') }}
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: '[[VALUE]]'
        - type: entities
          title: '[[VALUE]]'
          entities:
            - zone.home

where the variable is used for the “content” option (does support jinjia) and for the “title” option (does not support jinjia).

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: xxx
      
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: >-
          {{ states('device_tracker.iiyama') }}

Check this long read also.

Template:

  decl_test_var_marius:
    card:
      type: conditional
      conditions:
        - entity: input_boolean.[[event]]
          state: 'on'
      card:
        type: custom:button-card
        size: 20%
        entity: input_boolean.[[event]]

Card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
      ...
      - input_boolean.test_boolean_8

  - type: grid
    columns: 4
    square: false
    cards:
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_2

      ...

      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_8

So far seems OK.

Now comment the “square” option - and we got a gap:

And yes - this does not happen w/o decluttering-card:

  - type: grid
    columns: 4
    _square: false
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_2
      ...
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_8
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_8

Cannot explain it…

thanks for confirming…

I had not noticed the square option difference, will have a look. It makes it even stranger, because all of my buttons Are squared themselves via their setting aspect_ratio: 1. (Moreover, the square: true option is default, so I never use it unless needing square: false … Realize you used non squared buttons above, just stating the obvious probably) In any case, it should Not make a difference in my config…?

btw, I had another Grid/Decluttering issue some time ago: decluttering inside a core grid card behaves oddly, changes size of the grid tile · Issue #59 · custom-cards/decluttering-card · GitHub
They just dont play nicely

found another issue. variables this.entity_id in an auto-entities config not being handled by the decluttering card.

consider a regular entities with decluttering:

  - type: entities
    entities:

      - type: custom:decluttering-card
        template: event_date
        variables:
          - entity: sensor.verjaardag_me

and decluttering:

card:
  type: custom:template-entity-row
  entity: '[[entity]]'
  state: >
    {% if states[config.entity] is not none %}
    {{states(config.entity)}} {{state_attr(config.entity,'unit_of_measurement')}}
    {% else %} Not yet set
    {% endif %}
  secondary: >
    {% if states[config.entity] is not none %}
    {{state_attr('[[entity]]','type')}}: {{state_attr('[[entity]]','original_date')}}
    {% else %} Not yet set
    {% endif %}

showing perfectly in dashboard, including the secondary line based on config.entity (which is the template entity row translation of the cards entity_id.

now, setting this in an auto-entities, so I dont have to list all events manually, and, more importantly, can sort them based on state:

  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - entity_id: sensor.verjaardag*
        - entity_id: sensor.ontmoetings*
        - entity_id: sensor.trouwdag
      options:
        type: custom:decluttering-card
        template: event_date
        variables:
          - entity: this.entity_id
    sort:
      method: state
      numeric: true

it works perfectly fine, and sorts all events. However, there is no secondary line!

Ofc I also tries to use

        variables:
          - entity: config.entity

but that has no result at all either.

to test the card setup itself, I also entered a true entity_id like in the verbose config. No secondary line either!

yet again a decluttering-card anomaly? How come it recognizes the entity in the auto-entities, even without setting the variables:

      options:
        type: custom:decluttering-card
        template: event_date
#         variables:
#           - entity: this.entity_id

but does not use it for the secondary_line…

Ive also changed the secondary line template to:

  secondary: >
    {% if states[config.entity] is not none %}
    {{state_attr(config.entity,'type')}}: {{state_attr(config.entity,'original_date')}}
    {% else %} Not yet set
    {% endif %}

and still, no result using the decluttering card

heck, it doesnt even consider the options with decluttering card, I can take that out completely, and the listing remains identical… huh?

UPDATE

it was a user error…
I missed an Asterix after sensor.trouwdag, and had to copy&paste the options section on all inured filters:

    - type: custom:auto-entities
      card:
        type: entities
      filter:
        include:
          - entity_id: sensor.verjaardag*
            <<: &options
              options:
                type: custom:decluttering-card
                template: event_date
                variables:
                  - entity: this.entity_id
          - entity_id: sensor.ontmoetings*
            <<: *options
          - entity_id: sensor.trouwdag*
            <<: *options
      sort:
        method: state
        numeric: true

now works as expected.

1 Like

I posted in a thread here that makes use of decluttering, not going to report everything you can read there if you like. I will likely put all this on Git as I do with other chunks of my HA interfaces.

I must say that decluttering-card is one of the best things I have ever encountered. I have nothing but respect for @RomRider and what this allows. One dashboard reduced by over 20 times the lines of code because of it.

2 Likes

Is it possible to assign a value to “state” ?
Here is my template. The assignment of a to “label” work fine, but I get an error message for the assignment to “state”.
Is this a limitation of decluttering of Home Assistant?

decluttering_templates:
  flag_tile:
    card:
      type: custom:button-card
      entity: '[[v_ent]]'
      show_icon: false
      name: '[[v_name]]'
      show_state: true
      state: >-
        [[[
        var id =  states['[[v_from]]'].state;
        return id
        ]]]
      show_label: true
      label: >-
        [[[
        var id =  states['[[v_from]]'].state;
        return id + " my stuff"
        ]]]

I would take an in depth look at Lovelace: Decluttering Card - #395 by Ildar_Gabdullin

I find it invaluable information to understand things. I would think you pass in the whole template that makes the state and not try to pass in just the [[v_from]]. So (untested) like below, refer to example 2 in the link:

variables:
    - v_from_state: '{{states('your_v_from_entity_here').state }}'

And then in the decluttering template you just have

state: '[[v_from_state]]'

But it is possible that custom:button-card templates are colliding in Javascript, not sure. That example uses jinja and not javascript templates

Thank you your quick replay and suggestion. I tested it and could not get it to work.
However, looking at the link, I tough of a different solution; breaking the ‘label’ in two lines. First on having the from date and the second having the to date.
Thanks

The decluttering card appears to be broken with Core 2023.4.0.
There were some changes to the database. I wonder if that’s why.
At any rate all of my decluttering card - based buttons display error messages indicating a null entity.

did you update it? There was a fix released yesterday. Working perfectly here

Everything is updated as of today.
(Which “it” are you referring to?
the decluttering card?)

yes the decluttering card - updated yesterday

Indeed it did. I checked and I did indeed update it yesterday.

Is it decluttering or possibly the card you are decluttering?

Really, every post about “card XYZ is broken” should contain the MINIMAL code reproducing the issue, otherwise it is a waste of time.

I updated decluttering card javascript file to the version released 4 days ago and rebooted home assistant but the error is still there

if it’s not installed via HACS, did you remember to change the version number in the resource to be sure it loads the new version? Rebooting won’t do that.

1 Like

Indeed, to add the version helped very much. Thank you

Hi,

I need to change --masonry-view-card-margin in decluttering card. Can you help me?

thx