Lovelace: Decluttering Card

Share your Projects! Dashboards & Frontend
373

well, yeah, how do you suppose this is going to work? you declare a variable in the config, but you dont use it in your decluttering-template at all?

        variables:
          - room: buro

the way to go is always to first create the card you want in regular yaml full config. Next , notice you use that identical card for more than 1 few entities. Then, create that identical card config and name/add it in you decluttering templates folder, starting the template with

card:
  type: [your type of card]

and then paste the full config of the card.
Last step is removing the real entity_id’s or any other variable you want to ‘declutter’ and add that to the variables with the square braces [[ ]].
lastly, rewrite the frontend using the new template and declare the variables you need in the template.

cut it short: your template does not contain [[room] so it won’t do anything

374

Oh sry. Did not mention it. I did not use the variable to minimize the reasons the decluttering-card could break:)
Using the following does not work too.

decluttering_templates:
  test:
    type: conditional
    conditions:
      - entity: switch.[[room]]_alle_steckdosen
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
type: custom:mushroom-chips-card
chips:
  - type: custom:decluttering-card
    template: test
    variables:
      - room: flur_eingang

While the following code does work:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: switch.flur_eingang_alle_steckdosen
        state: 'on'
    chip:
      type: template
      icon: mdi:power-plug

If you see my problem i would be very happy :slight_smile:

375

given this, are you sure the path to the decluttering templates is set in you config? do you have any other decluttering cards that do work?

main setup of this resource should be something like this for Each dashboard:

title: Main Dashboard

button_card_templates: !include_dir_merge_named ../button_card_templates
decluttering_templates: !include_dir_named ../decluttering_templates
kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml

views:
376

I put the template in the same file which, works for the example given on the githubpage.

title: Zuhause
kiosk_mode:
  non_admin_settings:
    hide_header: true
    hide_sidebar: false
    ignore_entity_settings: true
decluttering_templates:
  my_first_template:
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: mdi:[[icon]]
  test:
    type: conditional
    conditions:
      - entity: switch.[[room]]_alle_steckdosen
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
views:
  - theme: Mushroom Shadow
    title: Home
    path: home
    icon: mdi:home
    badges: []
    cards:

Bildschirm­foto 2023-02-06 um 14.40.54
Bildschirm­foto 2023-02-06 um 14.40.54970×596 40.6 KB

377

uhm, really sorry, but you are confusing me now… what Test button is that? its not configured in the yaml you show here…

all I meant was, that the call to decluttering_template can only be successful if you have the main custom resource configured correctly.

next you should be calling the card correctly in the dashboard config.

those 2 relative configs should be ok, before you cn even begin to create a type: custom:decluttering-card config .

I can not see an obvious mistake in the latter, so I would think either the main resource is not set up correctly , or the dashboard can not find the templates.

Are you sure there is not a single error in either the dashboard, or the inspector console?

378

Sry:) The shown button is an example that is given on the GitHub page :).
I added this picture to show the decluttering-card is working in general.

I think the problem that occurs is that i’m not starting with a card definition, instead trying to use the the conditional statement.

As you can see the first template (test) is working like expected.
But the second template is not.

But what i need to declutter are the individual chips within a mushroom chip card.

Is there a workaround to achieve this?

decluttering_templates:
  test:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: person.administrator
        - type: conditional
          conditions:
            - entity: switch.flur_eingang_alle_steckdosen
              state: 'on'
          chip:
            type: template
            icon: mdi:power-plug
            entity: switch.flur_eingang_alle_steckdosen
            icon_color: orange
  testagain:
    card:
      - type: conditional
        conditions:
          - entity: switch.flur_eingang_alle_steckdosen
            state: 'on'
        chip:
          type: template
          icon: mdi:power-plug
          entity: switch.flur_eingang_alle_steckdosen
          icon_color: orange
views:
  - title: Home
    cards:
      - type: custom:decluttering-card
        template: test
        variables: null
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.administrator
          - type: custom:decluttering-card
            template: testagain
            variables: null

Bildschirm­foto 2023-02-07 um 01.09.44
Bildschirm­foto 2023-02-07 um 01.09.441102×478 14.9 KB

379

Hi all. Does decluttering-card work for state_filter into piture-elements card? I’am trying but it seems to ignore it.

My template

mapa_termico:
    default:      
      image: '[[path_imagen]]'
      tap_action: none
    element:
      type: image      
      entity:
        - '[[sensort]]'
      state_filter:
        '10': hue-rotate(250deg)
        '11': hue-rotate(240deg)
        '12': hue-rotate(230deg)
        '13': hue-rotate(220deg)
        '14': hue-rotate(210deg)
        '15': hue-rotate(200deg)
        '16': hue-rotate(190deg)
        '17': hue-rotate(180deg)
        '18': hue-rotate(170deg)
        '19': hue-rotate(145deg)
        '20': hue-rotate(135deg)
        '21': hue-rotate(125deg)
        '22': hue-rotate(115deg)
        '23': hue-rotate(95deg)
        '24': hue-rotate(60deg)
        '25': hue-rotate(50deg)
        '26': hue-rotate(40deg)
        '27': hue-rotate(30deg)
        '28': hue-rotate(20deg)
        '29': hue-rotate(10deg)
        '30': hue-rotate(0deg)
        unavailable: invert(70%)
      style:
        left: 50%
        top: 50%
        width: 100%
        opacity: 0.2

And this is how I intended to use it…

  - type: image
    elements: 
      - type: custom:decluttering-card
        template: mapa_termico
        variables:
          - sensort: sensor.temperatura_invitados
          - path_imagen: /local/thermal/therm_invitados_floor9.png

Short explanation: I overlay an image over the floors of my rooms so that floor’s color change with temperature from red (warm room) to blue (cold room). It works without using the decluttering card but code looks cleaner using it.

Any help apreciated.
Thanks in advance,
Gmigan

380

Hi, I am trying to design a card for my batteries status. I wish to change the icon and the background colors in function of the state of the battery.

I build a card directly in the dashboard and I am able to achieve my objective.
However, when I use the same code (+ the structure for decluttering template) I do not get the same result.

While using the template, I always get the ELSE scenario of the if statements : background : black and icon: orange.

Can anyone help, I think that my problem is the code to retrieve the value of the entity. But, I don’t know how to do it.

Code use in the dashboard


type: custom:button-card
entity: sensor.lock_1531_battery_2
show_name: false
show_state: true
styles:
  card:
    - background-color: >-
        [[[ if (entity.state>60) return "rgb(0,255,200)"; else return "black"
        ]]]
  state:
    - color: black
  icon:
    - mdi:battery
    - color: |
        [[[ 
          if( entity.state >70) return "green";
          if( entity.state <45) return "red";          
          else return "orange" ;
        ]]]

Following is the code in the template


  lock_battery:
    card:
      type: custom:button-card
      entity: '[[lock]]'
      show_name: false
      show_state: true
      styles:
        card:
          - background-color: >-
              [[[ if ('[[lock]]'.state>60) return "rgb(0,255,200)"; else return
              "black" ]]]
        state:
          - color: black
        icon:
          - mdi:battery
          - color: |
              [[[ 
                if( '[[lock]]'.state >70) return "green";
                if( '[[lock]]'.state <45) return "red";          
                else return "orange" ;
              ]]]

And the code to use my template


type: custom:decluttering-card
template: lock_battery
variables:
  - lock: sensor.lock_1531_battery_2
381

Add in file /config/configuration.yaml

decluttering_templates: !include decluttering_templates.yaml

File clean decluttering_templates.yaml

When updating the configuration
Integration error: decluttering_templates - Integration ‘decluttering_templates’ not found.

382

  1. An element of picture elements card cannot be represented by decluttering card since this is an element, not a card.

  2. This is wrong:

since the “image” type (which may only be an element) cannot contain other elements.

  1. In the “mapa_termico” template you specified a default value for the “image” variable but the “image” is supposed to be an option, not a variable.
383

This line is not supposed to be added into configuration.yaml.
It should be added for each dashboard in a corresponding file (files).

384

Try with just “entity.state”.

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.