Lovelace: Decluttering Card

Hi,
after so many tries I need help :frowning:

I’d like to test decluttering-card starting with a simple example so:

- I've installed it using HACS (and removed and re-istalled again...)
- I can see it in /local/www/community/decluttering-card and under MY_IP:8123/config/lovelace/resources, so I suppose is well installed
- in ui-lovelace.yaml:

in the ‘resource:’ section, among others modules

..- url: /local/community/decluttering-card/decluttering-card.js
....type: module

and then

decluttering_templates:
..my_template:
....default:
......- icon: fire
......- name: TestButton
......- entity_1: switch.sonoff_02
....card:
......type: button
......tap_action:
........action: toggle
......name: '[[name]]'
......icon: 'mdi:[[icon]]'
......entity: '[[entity_1]]'
......show_name: true
......show_state: true

I’ve replaced spaces with dots to show indentation

Finally in a manual card:

- type: 'custom:decluttering-card'
..template: my_template
..variables:
....- name: Lampada verde
....- icon: arrow-up
....- entity_1: switch.sonoff_02

But it doesn’t work :frowning: It get me “No card type configured”
After some days I’m hopeless, I can’t solve it. I think there a silly error but can’t find it!

One of my try was to change
- type: 'custom:decluttering-card'
with
- type: 'custom:decluttering-carde'
and I got the same error

Please help

I’m not sure why I did this with my install, but I put the decluttering-card.js file in /config/www/ and my resources section reads:

lovelace:
  mode: yaml
  resources:
    - url: /local/decluttering-card.js
      type: module

I imagine, given other entries, that if I’d done the HACS install, the .js file would be in a subfolder of local/www/community which has a shorthand of /hacsfiles/ so the resources section would read

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/decluttering-card/decluttering-card.js
      type: module

is it still working on 2021.XX?! thanks

Decluttering-card works in 2021.12.7

i’m asking because i can have it working only in ui-lovelace.yaml and not in the other dashboards, i get “cannot read properties of undefined” error…

can anyone provide a little example of multiple dashboard settings?!

thanks

edit: ok, solved… have to declare “decluttering_template:” in each dashboard file…

If case you weren’t already, you can also use !include variable in each dashboard.yaml. This way you can have all your decluttering templates in one .yaml file and then include that one in each dashboard by using !include, like this:

decluttering_templates:
  !include decluttering-card-templates.yaml

If you change a decluttering template, it will change in all your dashboards since they’re using the same decluttering file.

1 Like

Exactly. I do this and the same with my custom:button-card templates. It’s cleaner and since these are general definitions, I hardly ever edit them along with the individual button definitions (that are in my ui-lovelace.yaml file).

is it possible to achive in a template something like this?!

    card_mod:
      style: >-
        ha-card {
          {% if '[[availability]]' == 'false' %}
          opacity: 0.40 !important;
          pointer-events: none !important;
          {% endif %}
        }

where availability is defined this way

      - type: 'custom:decluttering-card'
        template: 'card'
        variables:
          - contents:
              type: 'custom:decluttering-card'
              template: 'thermometer'
              variables:
                - sensor_temperature: sensor.thermometer_temperature
                - sensor_humidity: sensor.thermometer_humidity
          - availability: "{{  is_state( 'sensor.thermometer_state', 'online' )  }}"

or is it better to simulate this behaviour using a “disabled” card and showing them conditionally?!

thanks

there is a big big problem of cpu usage using nested templates… let’s see what happens if i put all in one template

edit: same results using one template only… super simple template, it just encapsulates a generic_thermostat… cpu usage is 300-400% respect using generic_thermostat …

Hi

I’m using decluttering cards now quite some time
For example

- type: conditional
  conditions:
    - entity: binary_sensor.lampen
      state: "on"
  card:
    type: custom:decluttering-card
    template: notification_template
    variables:
      - name: Er zijn lampen aan!

Using template :

decluttering_templates:
  notification_template:     # This is the name of a template
    card:
      type: custom:button-card
      name: '[[name]]'
      size: 50%
      show_state: false
      show_label: false
      layout: icon_name
      tap_action: 
        action: none
      hold_action: 
        action: none
      styles:
        card:
          - --ha-card-background: rgba(0,0,0,0.0)
          - box-shadow: none
          - height: 10px
        name:
          - font-size: 18px
          - font-family: Helvetica
          - justify-self: start
          - font-weight: normal
        grid: 
          - grid-template-areas: '"i n"'
          - grid-template-columns: 2% 1fr
          - grid-template-rows: 1fr

However, now i’m trying to do the same but instead of putting in the name “Er zijn lampen aan” , i want to count the lamps that are on.

I have a sensor for that, thats has state equal to number lights that are on.

However i dont succeed in putting that into "Er zijn (states('sensor.current_lights_on) lampen aan

Any help?

@ASNNetworks
Could you help me here pls?

You need to use Javascript templates. You’re trying to use Jinja2 templates with button card. That doesn’t work. Most likely you used Markdown card before.

    name:  |
      [[[
        return "Er zijn " + states['sensor.current_lights_on'].state + " lampen aan";
      ]]]

I’m not a Javascript expert myself though. So for further help you should ask in the Button-Card thread.

1 Like

Superb thx

I’m gonna try that and seek further help if needed.
True i used markdown before

1 Like

I tried and i get this error

I asked in the custom button topic, and they say your code is correct and its probably a decluttering thing… lol

Since the code works within button-card, you should open a ticket and report this at the github repo of decluttering-card. The code itself is fine as others have confirmed. So not much else there is to do about it. Seems like decluttering-card doesn’t render Javascript somehow.

So you need to think outside the box and reverse it, which is how I use it myself. Use the variable in the template itself and only the entity in the card on lovelace. I like to keep my decluttering-card as tidy as possible and only pass through single codes (and set everything else like text strings and Javascript in the template).

image

Use this in your decluttering template:

    name:  |
      [[[
        return "Er zijn " +  states['[[lights]]'].state + " lampen aan";
      ]]]

And then in the decluttering-card code:

    type: custom:decluttering-card
    template: notification_template
    variables:
      - lights: sensor.current_lights_on

This way you can use this decluttering template only for cards that need to show the current lights on.

If you have a different room, just change the entity variable to a different sensor tracking those lights and it’s set. If you want something else to show instead of current lights on, copy the template and change the variables.

1 Like

it has never done that, and it will not,. Has been asked before, when decluttering came to existence.

Decluttering card simply replaces strings (like anchors) and does not use templating itself. Its as I explained in button-card this morning: Lovelace: Button card - #6376 by Mariusthvdb

you can however, replace a string in the template, as you did above.

1 Like

Working, thx a lot !

1 Like

I cannot get this to work for some reason. I installed it via HACS and HACS placed the folder in: /www/community/decluttering-card

So, in ui-lovelace.yaml I have:

resources:
  url: /local/www/community/decluttering-card/decluttering-card.js
  type: module

decluttering_templates:
  test_template:
    card:
      type: button
      tap_action:
        action: toggle
      entity: '[[test_variable]]'

I then have a manual card added to my dashboard:

type: custom:decluttering-card
template: test_template
variables:
    - test_variable: light.basement_office_light_switch

I receive the error : "Cannot read properties of undefined (reading ‘test_template’)

This doesn’t go in lovelace.yaml, but in configuration.yaml if you use YAML mode.

lovelace:
  mode: yaml
  resources:

Also, the path has been change a few months ago to hacsfiles instead of local/www/community. hacsfile path points to the same folder, so the location of the files is correct.

    - url: /hacsfiles/decluttering-card/decluttering-card.js
      type: module 

After adding that you need to restart Home Assistant and then it should be loaded (or click the three dots menu (top-right) and click on Reload resources for Lovelace to pick up changes without restarting Home Assistant. You can also call lovelace.reload_resources service directly.) Sometimes it helps to clear your browser caches if a card isn’t loaded.

More: Multiple Dashboards - Home Assistant

can anyone spot the issue in my decluttering config… I must be overlooking the obvious, but can see it…

decluttering:

card:
  type: conditional
  conditions:
    - entity: media_player.googlehome_[[id]]
      state_not: unavailable
  row:
    entity: input_boolean.googlehome_[[id]]
    state_color: true

and card config, with the verbose conditional row, and the one using the decluttering:

      - type: custom:decluttering-card
        template: conditional_row_boolean
        variables:
          - id: library

      - type: conditional
        conditions:
          - entity: media_player.googlehome_library
            state_not: unavailable
        row:
          entity: input_boolean.googlehome_library
          state_color: true

somehow I keep getting:

even though I strictly followed (copied) the verbose row, and as yo can see the variables get replaced correctly…

can we not do this for a row?

edit

not without a trick, but with custom:hui-element, yes we can !

card:
  type: custom:hui-element
  row_type: conditional
  conditions:
    - entity: media_player.googlehome_[[id]]
      state_not: unavailable
  row:
    entity: input_boolean.googlehome_[[id]]
    state_color: true

thanks Thomas for the nudge!