Lovelace: Decluttering Card

Share your Projects! Dashboards & Frontend
385

Created file lovelace-ui.yaml,
/config/lovelace-ui.yaml

resources:
  - url: /local/decluttering-card.js
    type: module
    
decluttering_templates:
  air_purifier_control_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      icon: 'mdi:[[icon]]'
      state:
        - operator: template
          styles:
            card:
              - color: var(--primary-color)
          value: |
            [[[ return [[condition]] ]]]
        - operator: default
          styles:
            card:
              - color: 'rgba(150,150,150, 1.0)'
      styles:
        card:
          - height: 50px
          - color: 'rgba(150, 150, 150, 1.0)'
          - box-shadow: none
      tap_action:
        action: call-service
        service: '[[svc_name]]'
        service_data: '[[svc_data]]'
      type: 'custom:button-card'
  air_purifier_status_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      entity: '[[entity]]'
      show_icon: false
      show_name: true
      show_state: true
      size: 30%
      styles:
        card:
          - height: 70px
          - box-shadow: none
          - padding: 8% 0px 4% 0px
        grid:
          - grid-template-areas: '"s" "n"'
        name:
          - color: var(--primary-text-color)
          - font-size: 15px
          - align-self: start
        state:
          - color: var(--primary-text-color)
          - padding-left: 10px
          - font-size: 20px
          - font-weight: bold
          - align-self: end
      tap_action:
        action: '[[action]]'
      type: 'custom:button-card'

Сreate a manual card

cards:
  - cards:
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_filter_remaining
          - action: none
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_motor_speed
          - action: none
    type: horizontal-stack
  - cards:
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: power-standby
          - condition: 'states[''fan.xiaomi_miio_device''].state === ''on'''
          - svc_name: fan.toggle
          - svc_data:
              entity_id: fan.xiaomi_miio_device
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: weather-night
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Silent'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Silent
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-3
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              4)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 4
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-4
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              8)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 8
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-6
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              12)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 12
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-8
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              16)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 16
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: brightness-auto
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Auto'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Auto
    type: horizontal-stack
type: 'custom:vertical-stack-in-card'

Still no display. What am I doing wrong?

error
error535×697 77.1 KB

386

It work perfectly. So simple, thank you

387

btw, sometimes there is no need to use decluttering card for custom:button-card since this card has its own variables.

388

Start with the 1st card, remove the 2nd one. Now you cannot even see an error, everything is clipped.
Not to mention a fact that the template should be short and simple at the beginning, then you may add all needed additional functionality after clearing all basic functionality (here - working as a template). Otherwise you are making a common mistake - building monstrous software full of bugs.

389

Hi, I am new to decluttering Card. However, I have a some experience with templates for custom:button-card.

I am migrating some templates form Custom:Button-card to Custom:decluttering-card.

   name: '[[[ return states[variables.var_delay].state ]]]'

I try to set the name off an entity with the state of another entity. I try many things but cannot find the right format to do it in Custom:Decluttering-Card.
The above line of code works great within Button-Card template.

390

The repo seems to be abandoned.
Although the card works fine in most of cases, there are issues on GitHub and I do not observe any reaction from the Author.
Will be happy to be wrong here.

Found a new bug - Passing a jinjia template causes an error · Issue #60 · custom-cards/decluttering-card · GitHub

It is related to a “pass a template as a variable” case:

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

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: '{{ states(''sun.sun'') }}'
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {{ states('sun.sun') }}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
          {{states('zone.home')}}
          {%- else -%}
          {{states('sun.sun')}}
          {%- endif %}
  - type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: >-
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}

Update:
found a solution / workaround:

    type: custom:decluttering-card
    template: decl_test_var_template
    variables:
      - VALUE: "
          {% if false -%}
            {{states('zone.home')}}
          {%- else -%}
            {{states('sun.sun')}}
          {%- endif %}
          "
391

Have another issue. Think I mentioned it in the repo some time ago with another more complex card config but this is simple:

Have a set of 8 conditional (state binary on) buttons in a grid of 4.
When the binary is on, it fills the grid from the left.

Since most of the yaml of those 8 cards is identical except the entity , I also made it with a decluttering template.

However, using that always ?except when the actual 1st card is on ) leaves the first in the grid unused and shows the first ‘on’ card in the 2nd place holder in the grid …

Anyone seen the same and maybe fixed that?

392

Post a short code for the card, will check it.

393

Does anyone know if jinja can be used in the default values?
For example:

 custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: {{ state_attr('[[light-entity]]','friendly_name') }}
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'
394

Damn, I just figured it out.
Just leave the name: null

Though it doesn’t look like jinja can be used in the default values. - Lovelace: Decluttering Card - #340 by Ildar_Gabdullin

decluttering_templates:
  custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: null
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'
395

Passing a value into a template
(a small tutorial)

What types of values are considered:
– string (incl. multiline)
– jinjia template
– jinjia template which is used INSIDE another jinjia template
– card-mod style
– dictionary
– list

1. String:

1.1. A simple case - passing a value of some option:

decl_test_var_string:
  default:
    - VALUE: xxx
  card:
    type: entities
    entities:
      - entity: sun.sun
        name: '[[VALUE]]'

      - type: custom:decluttering-card
        template: decl_test_var_string

      - type: custom:decluttering-card
        template: decl_test_var_string
        variables:
          - VALUE: yyy

image

1.2. Passing a multiline string:
Need to use “\n” as line breakers:

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

      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: xxx \n yyy \n zzz

image

But this does NOT work - using a pipe “|” to break a line:

      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: |
              xxx
              yyy
              zzz

1.3. Passing a string into a string:

decl_test_var_string_into_string:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: >-
      String with a string: [[VALUE]]

      - type: custom:decluttering-card
        template: decl_test_var_string_into_string

      - type: custom:decluttering-card
        template: decl_test_var_string_into_string
        variables:
          - VALUE: yyy

image

2. jinjia template:
A template may be passed into a card which supports jinjia for some it’s option, like a “markdown” card.

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

2.1. Simple templates:

      - type: custom:decluttering-card
        template: decl_test_var_template

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: '{% set STATE = states(''sun.sun'') -%} {{STATE}}'

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set STATE = states('sun.sun') -%}
              {{STATE}}

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}

image

2.2. Multiline template:
This does NOT work - with using a pipe “|” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: |-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              Hello!

You need to use “\n” or “< br >” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              \n
              Hello!

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              <br>
              Hello!

image

2.3. Template with conditions.
Actually all templates are similar, there is no “templates w/o conditions”, “templates with conditions”, … But this example is provided to demonstrate some trick.

This code works:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

image

But this does not - see indents inside a template:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

These indents help to structure templates, they are not supposed to cause any troubles.
Although this code works fine in “Dev tools → Template” and everywhere in Lovelace, these “indents” cause an error in this particular case (described here, here).
But there is a workaround - place the whole template into double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

3. jinjia template which is used INSIDE another jinjia template:
Consider this code:

{% set STATE = states(xxxx) -%}
{%- if STATE | int(default=0) < .... -%}
  {{ ... }}
{%- else -%}
  {{ ... }}
{%- endif %}

Assume the 1st line is

{% set STATE = '[[VALUE]]' -%}

where “VALUE” is a jinjia template "{% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }}" - and this code cannot work since templates cannot be passed into templates:

{% set STATE = {% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }} -%}

Luckily we got a new jinjia extension "ct_eval()" (check here & here) which “evaluates text as a template”.
Consider this decluttering-template:

decl_test_var_template_into_template:
  default:
    - VALUE: >-
        {{states('sun.sun')}}
  card:
    type: markdown
    content: |-
      {% set STATE = ct_eval("[[VALUE]]") -%}
      Current state is {{STATE}}
      Zone state is {{states('zone.home')}}

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: yyy

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: '{{states(''person.ildar'')}}'

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {{states('person.ildar')}}

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {% if true -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

image

This code with added indentations does not work - same reasons as it was described above:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: |-
              {% if true -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

But workaround is same - double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

4. card-mod style:

decl_test_var_style:
  default:
    - STYLE: 'ha-card { color: magenta; }'
  card:
    type: entities
    title: Title
    entities:
      - entity: sun.sun
        secondary_info: last-changed
      - entity: sensor.season
        secondary_info: last-changed
      - entity: person.ildar
        secondary_info: last-changed
      - entity: sensor.processor_use
        secondary_info: last-changed
    card_mod:
      style: '[[STYLE]]'

      - type: custom:decluttering-card
        template: decl_test_var_style
      - type: custom:decluttering-card
        template: decl_test_var_style
        variables:
          - STYLE:
              hui-simple-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: red !important;
                  }
              hui-sensor-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: orange !important;
                  }
              .: |
                .card-header .name {
                  color: yellow;
                } 
                ha-card {
                  background: lightblue;
                }

image
image461×556 28.8 KB

5. Dictionary:

decl_test_var_dict:
  default:
    - ENTITY:
        entity: zone.home
        name: my zone
  card:
    type: entities
    entities:
      - sun.sun
      - '[[ENTITY]]'

      - type: custom:decluttering-card
        template: decl_test_var_dict

      - type: custom:decluttering-card
        template: decl_test_var_dict
        variables:
          - ENTITY:
              entity: weather.home_met
              name: Weather (home)

image

Unfortunately, I do not know a way to add an element(s) into a dictionary - consider this example:
– a decluttering-template is an Entities card;
– one row is defined by a dictionary ({‘entity’: ‘sun.sun’, ‘name’:“my sun”});
– an input variable is a dictionary with other options ({‘type’: ‘attribute’, ‘attribute’:“elevation”});
– you can use an input variable-dictionary to define the WHOLE row and you cannot merge two dictionaries to set additional options.

Also, I do not know a way to address elements inside a dictionary-variable like "VALUE['subvalue_a']" or "VALUE.subvalue_a"(although similar operations are available for dictionaries, but not inside the decluttering-card for variables).
Update 29.11.24 - it is possible in some cases, see below.

6. Lists:

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

      - type: custom:decluttering-card
        template: decl_test_var_list

      - 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

image

Unfortunately I do not know a way to address an element in the list like "VALUE[0]" - consider this example:
– a card is an Entities card;
– an input variable-list contains a list of entities;
– you cannot use 1st entity for the 1st row, 2nd element - for the 2nd row, …
Update 29.11.24 - it is possible in some cases, see below.

Update 29.11.24:
There is a way to address:
– a particular element of an input dictionary,
– a particular element of an input list,
only in cards supporting jinja.

test_decl_pass_complex_to_markdown:
  default:
    - LIST:
        - sun.sun
        - person.ildar
    - DICT:
        xxx: yyy
        aaa: bbb 123
  card:
    type: markdown
    LIST: '[[LIST]]'
    DICT: '[[DICT]]'
    content: >-
      {% set LIST = config.LIST -%}
      {%- set DICT = config.DICT -%}
      list[0]={{LIST[0]}}{{"\n"}}
      list[1]={{LIST[1]}}{{"\n"}}
      dict[xxx]={{DICT.xxx}}{{"\n"}}
      dict[aaa]={{DICT.aaa}}{{"\n"}}
      xxx

  - type: custom:decluttering-card
    template: test_decl_pass_complex_to_markdown
  - type: custom:decluttering-card
    template: test_decl_pass_complex_to_markdown
    variables:
      - LIST:
          - entity: sensor.season
            name: season xxx
          - entity: person.mama
            name: mmmm
      - DICT:
          xxx: xyz 456
          aaa: zzz

Result:
image
Note a “LIST: '[[LIST]]'” & “DICT: '[[DICT]]'” lines to create fictitious options which are then addressed in a template.

6 Likes
396

thx.
consider this grid:

    - type: grid
      columns: 4
      cards:

#decluttering causes first grid column to be empty

#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_1
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_2
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_3
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_4
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_5
#
#          etcetcetc

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_1
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_1

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_2
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_2

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_3
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_3
etcetc

and this decluttering_template:

card:
  type: conditional
  conditions:
    - entity: binary_sensor.[[event]]
      state: 'on'
  card:
    type: custom:button-card
    template: button_feest_alert
    entity: binary_sensor.[[event]]

ive seen this in more spots in my config, but always shrug and make it work another way. this seems too straightforward not to have another look though, so if you can spot an issue: please!

397

Dont think you mentioned this in your wonderful post (thank you!) above, but I was pleasantly surprised the other day we can even drop in a complete entities list from a calling card.

Consider this deculttering, and especially note the bottom

  entities:
    '[[entities]]'

in:

default:
  - trigger_state: 'on'
card:
  type: picture-glance
  card_mod:
    style: |
      ha-card {
        border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                else 'none'}};
      }
      .box div:nth-child(1) .wrapper {
        pointer-events: none;
      }
  entity: '[[main_id]]'
#   title: '[[title]]'
  show_state: true
#   state_color: true # picture-glance does Not use state_color!! 
  state_filter:
    'off': grayscale(80%)
    'unavailable': grayscale(100%)
#   area: '[[area]]'
  image: /local/images/areas/[[image]]
  aspect_ratio: 100%
  tap_action: none
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  double_tap_action:
    action: toggle
  entities:
    '[[entities]]'

and call this with something like:

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.laundry_ceiling
          - trigger_id: binary_sensor.laundry_sensor_motion
          - image: bijkeuken.jpg
          - path: bijkeuken
# this complete entities object gets injected 
          - entities:
              - entity: sensor.laundry_sensor_temperature
              - entity: sensor.laundry_sensor_illuminance
              - entity: binary_sensor.back_door
              - entity: switch.boiler_bijkeuken
                <<: &none
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.patchboard_attic
          - trigger_id: binary_sensor.lekkage_op_zolder
          - image: zolder_living_klein.jpg
          - path: zolder
          - entities:
              - entity: sensor.attic_sensor_temperature
              - entity: sensor.attic_sensor_illuminance
              - entity: binary_sensor.smart_co_alarm_zolder_carbon_monoxide_sensor
              - entity: binary_sensor.attic_heater_flood_sensor_water_alarm_water_leak_detected
              - entity: binary_sensor.attic_flood_sensor_water_alarm_water_leak_detected
              - entity: switch.cv_zolder
                <<: *none

I never realized that would work, but needed to find a way to have the same decluttering and take care of different entities listings… it simply does!

(only thing this does Not do is color the icons using state_color: true but that is an issue with the picture-glance card, and Ive filed a FR/discussion to add that, really ugly those whitish icons everywhere… but, besides the point for this topic :wink: )

1 Like
398

This is a “list-variable” case described in my post.
In my setup I usually use this notation (probably gives same yaml output):

  entities: '[[entities]]'

even this

  entities: '[[LIST_ENTITIES]]'

to prevent mixing with options’ names, where “LIST_”, “VALUE_”, “INPUT_”, “SENSOR_”, “DICT_” prefixes used to define a type of a variable (and “STYLE” is always for card-mod style).

399

I’ll check it tonight.

400

right, I missed you mentioning it, its a big post :wink: I now see it under 6.
most important part for me is that we can change the number of entities and are not fixed to a predefined list length.

and yes the position is mostly on the same line. However, I always mimic a verbose post, and since we use that list notation

entities:
  - entity1
  - entity2

I mimicked that with:

  entities:
    '[[entities]]'

Aware you use the CAPS in your vars :wink: It’s just not for my taste, and of no further consequence.

thanks!

401

Got it

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

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') }}

image
image463×607 14.6 KB

Check this long read also.

403

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

image
image1860×621 29.4 KB

image
image1857×643 27.1 KB

So far seems OK.

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

image
image1871×820 11.1 KB

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…

404

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