Lovelace: Decluttering Card

I am just at the start of re-doing all my dashboards and cards using this method, but before I break it, can anyone just double check my assumptions below and tell me if I have done anything wrong:

I have a lost of these cards, most of which stays the same, I have Put “(variable)” next to the items that will change by instance:

type: custom:button-card
name: Living Room (Variable)
icon: mdi:sofa (Variable)
entity: sensor.master_temperature (Variable)
padding: 0px
margin: 0px
tap_action:
  action: navigate
  navigation_path: '#livingroom-pop' (Variable)
show_state: true
show_label: false
custom_fields:
  arrow: |
    [[[
      return '<ha-icon icon="mdi:chevron-right" style="width:16px;height:16px;"></ha-icon>'
    ]]]
styles:
  grid:
    - grid-template-areas: ' "i n arrow" "i s arrow"'
    - grid-template-columns: 40px 90px 20px
  card:
    - margin: '-10px 0px 0px 0px'
    - border-radius: 40px
    - height: 52px
    - padding: 0px 150px 0px 6px
  icon:
    - width: 24px
    - color: black
  img_cell:
    - background: '#C1D8C3' (Variable)
    - border-radius: 100px
    - width: 40px
    - height: 40px
  name:
    - justify-self: start
    - font-size: 12px
    - font-weight: 500
    - padding-left: 4px
    - padding-top: 8px
  state:
    - justify-self: start
    - padding-bottom: 10px
    - font-size: 12px
    - opacity: '0.7'
    - padding-left: 4px
  custom_fields:
    arrow:
      - justify-self: end
      - font-size: 14px
      - opacity: '0.7'
      - padding-right: 0px

Now If I understand the instructions correctly, this is what I should end up with in the Dashboard Yaml:

decluttering_templates:
  room_button_template:
    padding: 0px
    margin: 0px
    tap_action:
      action: navigate
      navigation_path: ‘[[nav_path]]’ 
    show_state: true
    show_label: false
    custom_fields:
      arrow: |
        [[[
          return '<ha-icon icon="mdi:chevron-right" style="width:16px;height:16px;"></ha-icon>'
        ]]]
    styles:
      grid:
        - grid-template-areas: ' "i n arrow" "i s arrow"'
        - grid-template-columns: 40px 90px 20px
      card:
        - margin: '-10px 0px 0px 0px'
        - border-radius: 40px
        - height: 52px
        - padding: 0px 150px 0px 6px
      icon:
        - width: 24px
        - color: black
      img_cell:
        - background: ‘[[bg_colour]]’
        - border-radius: 100px
        - width: 40px
        - height: 40px
      name:
        - justify-self: start
        - font-size: 12px
        - font-weight: 500
        - padding-left: 4px
        - padding-top: 8px
      state:
        - justify-self: start
        - padding-bottom: 10px
        - font-size: 12px
        - opacity: '0.7'
        - padding-left: 4px
      custom_fields:
        arrow:
          - justify-self: end
          - font-size: 14px
          - opacity: '0.7'
          - padding-right: 0px

And this is what I would use in place of the original yaml.


- type: custom:decluttering-card
  template: room_button_template:
  variables:
    - name: Living Room
    - icon: mdi:sofa 
    - entity: sensor.master_temperature
    - nav_path: '#livingroom-pop' 
    - bg_colour: '#C1D8C3'

Usually there is no need to use decluttering card for custom:button-card since button-card has its own variables.

These quotes are a bit strange.
Compare with

navigation_path: '[[nav_path]]'

Unrelated to the thread, but here “padding” & “margin” are misplaced.

In short - go to button-card thread repo to learn how to use variables.

Thanks @Ildar_Gabdullin ,

I will take on what you have said.

In general, have I done the rest right thought?

A common observation:
I would choose names for variables in capitals (like “ENTITY”) to avoid “visual mixing” with native options. Just my preferences.

2 Likes

Your template should not have : after its name.

1 Like

Good catch.

There is more than variables to using custom button templates. In custo button, you can reference multiple additive templates. I create like a base template, then action templates and style templates and then say use base + action2 + style1 + style4. In other words, you can template inside the card with more than variables.

Ohh now this is interesting. Would you mind sharing an example?

Look here … it has changed many times sine I posted this but still answers your request:

Simple to say, I can do this:

                          - type: custom:button-card
                            icon: mdi:arrow-up-circle
                            template:
                              - icon_button
                              - kitchen_vizio
                              - vizio_action

Which imports all three templates,

I only use such templates for custom button, decluttering is still great and I use it for many, many things.

1 Like

Can I include multiple template files?

decluttering_templates: 
  - !include file1.yaml
  - !include file2.yaml
  - ect.

or something like:

decluttering_templates: !include_dir_list /foldername

I have a split config and like to keep that structure
Thanks

decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
  - !include views/.....
  ...

where “templates-decluttering” folder may contain:

  • 1 file with all your 100500 templates
  • many files - “one per template”, “one per several related templates”
  • subfolders to organize a tree-like structure
2 Likes

I’m trying to conditionally display a button-card using decluttering-template. Entity is a battery sensor. If it falls below a certain % say 50, i’d like for the card to appear on dashboard. Else, it can stay hidden.

Code:

friendly_warning_low_battery:
    card:
      type: conditional
      conditions:
        - entity: '[[entity]]'
          state: '[[[ return (entity.state < 50) ]]'
      card:
        type: custom:button-card
        name: '[[name]]'
        deep_press: true
        icon: mdi:battery-60
        size: 28px
        aspect_ratio: 7/1
        show_name: true
        show_icon: true
        show_state: false
        show_label: false
        show_last_changed: false
        styles:
          name:
            - font-size: 15px
            - font-family: Helvetica
            - justify-self: start
            - padding-left: 18px
            - padding-top: 5px
          img_cell:
            - align-self: start
            - text-align: start
            - margin-left: 21px
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-column: 8% 1fr
            - grid-template-rows: 1fr

Calling it in dashboard like so:

- type: custom:decluttering-card
    template: friendly_warning_low_battery
    variables:
      - entity: sensor.door_battery
      - name: "battery level about to fall into low zone”

Battery’s current state is 45%. Ideally, the condition in the template should be met, and this msg should be shown in the dashboard. But it isn’t. What might be wrong in the above? Also, how does one go about debugging front end issues? (Apologies for the naive question).

I’ve also tried various other suggestions adding state attribute to template but to no avail:

state:
  value: 50
  operator: '<'
  styles:
    - card: blue

Hello.
I have been using this card for a long time (lots of templates), and this is the first time I get a wierd behaviour, can’t spot what i’m doing wrong:

I have this code:

decluttering_templates:
  cartao_leds_de_natal:
    card:
      type: vertical-stack
      cards:
        - type: grid
          cards:
            - show_name: true
              show_icon: false
              type: button
              name: J3
              tap_action:
                action: call-service
                service: remote.send_command
                service_data:
                  device: leds-natal
                  command: jump3
                target:
                  entity_id: remote.broadlink_ir_rf_rm4
... # then a bunch of other buttons

When I use this in a card in the dashboard directly, I get the full card:
image

but when I call it as a popup using browser_mod, I get an empty card:´

image

This is the code that I have for the popup, that works for other cards and templates:

image

I have build A LOT of remotes for each of my devices, with popups, with success; this one is driving me nuts since it’s one of the simplests ones… Any thoughts?

For testing - try to minimize your code:

decluttering_templates:
  test_template:
    card:
      type: entity
      entity: sun.sun

and then call THIS template.

I have HUGE remotes made like this:


These ones work…

Well, I advised you already how to localize the error.
Go step by step.

1 Like

It works. OK, I’ll try to simplify to spot the error, step by step, but this is really wierd…

Also, even with a simple code - check Code Inspector for errors.

This is the code in a normal card: I simplified:

This is what I have in the templates area:

decluttering_templates:
  cartao_leds_de_natal:
    card:
      type: grid
      cards:
        - type: button
          show_name: true
          show_icon: false
          name: J3
        - type: button
          show_name: true
          show_icon: false
          name: J4

it works as a standalone card, but not with browser_mod popups; but all the others I have work…