Lovelace: Decluttering Card

Omg, that’s a leftover from before I published the card, it shouldn’t be there, thanks for pointing it out, I’ll delete it.

There are two files from dist folder.

https://github.com/custom-cards/decluttering-card/tree/master/dist

Yes, I declared this file in the resources section.

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

I just read @ludeeus reply. He beat me by a few minutes. :slight_smile:

That does work, but it’s odd that it just stops working all of the sudden.

So I finally got into this after some weeks delay, and I must say this is great. It is much more versatile than anchors. I use it for my buttons and I was able to create a single template for all of my buttons (which is amazing btw). Just one thing, would it be possible to have the entire tap_action settings in a template? For example, if I want to use a service as tap_action it will require me to set up an extra line. But leaving that line in for entities that don’t need this will give an error when pressed (extra keys are not allowed). I hoped to use a single template for all my buttons. I have it pretty much sorted out for my other buttons, but for a service call I would need extra lines.

You could try something like:
Template:

button_template:
  xxxx:
    default:
      - tap_action:
    card:
      tap_action: '[[tap_action]]'

Card:

variables:
- tap_action:
    action: call-service
    [...]

And if undefined it will end up being null and not do anything.
A variable can be a complete object if needed as you can see.

1 Like

Ok I will try this.

Thanks @romrider this works perfectly fine. I would love to do this with a label/label_template as well but I can’t seem to get it to work.

I have tried this:

'[[label]]': '[[label_template]]' 

It works perfectly fine if it has only one line (so for a label it would work without a problem). However it gets more complicated when trying to put in a string like this:

    label_template: >
      var bri = Math.round(entity.attributes.brightness / 2.55);
      return (bri ? bri : '0') + '%';

It will throw an error like this:

JSON.parse: bad control character in string literal at line 1 column 279 of the JSON data

I would love to make a single template for buttons that use a label and buttons that use a label_template. I would love to do this as the light buttons are exactly the same as my switch buttons with the exception of this label/label_template issue. Thanks a lot again for the hard work.

Compatible with Swiper Card? When using a Decluttering card template within a Swiper card:

decluttering_templates:
  room_button_template:
    default:
      - entity: []
    card:
      type: custom:button-card
      entity: '[[entity]]'
      name: '[[name]]'
      ...

...
              - type: custom:swipe-card
                start_card: 1
                parameters:
                    freeMode: true
                    slidesPerView: auto
                    iOSEdgeSwipeDetection: true
                    slideToClickedSlide: true
                cards:
                  - type: custom:decluttering-card
                    template: room_button_template
                    variables:
                      - entity: sensor.living_room_ecobee_temperature
                     ...

Swiper Card adds the slide classes to the decluttering-card DIV:

<decluttering-card class="swiper-slide swiper-slide-active">...

Instead of the button card DIV:

<button-card class="swiper-slide swiper-slide-active" ...

This causes each swiper slide to be stretched out. Any thoughts on how to fix this? Thanks in advance!

Would it be possible to make “partial” templates, like the ones we can use for the button-card where we can add or overwrite keys when we instantiate the template, like so:

decluttering_templates:
  entities_card:
    card:
      type: entities
      style: |
        ha-card {
          border: solid 1px var(--dark-primary-color);
          border-radius: 12px;
          overflow: hidden;
          width: 97%;
          margin: 0 auto;
          padding-top: 0px;
        }

# Use the above template
cards:
  - type: custom:decluttering-card
    template: entities_card
    entities:  # This key is not present in the template
      - light.light_1
      - light.light_2

The example might not be 100% syntactically correct, but i hope you get the idea.
The use case is i have several entities card that all look the same but they have variable amounts of rows in them.

I see your point, however, that doesn’t work well with arrays :frowning: and that’s why I didn’t go this way.
Let me think about something, I might come up with a way to do it, a bit differently though!

2 Likes

I’ll have a look, but I think that’s something you’d have to see with the swiper card dev and the way he adds classes to elements in the DOM. I guess you’d have the same issue with card-modder/card-mod.
Please open an issue on github, it would be best.

Please open an issue on github also :slight_smile:

ignore me…

Forgive me in advance for digging up something we thought was fixed. I just discovered what appears to be a refresh issue with the PR you submitted for vertical-stack-in-card. Upon the initial loading of my 2-in-1 button card, a gap appears in between the two cards

However, if I click on another card and then click back, the gap disappears.

Good example, can you share .yaml for this

That has something to do with the way lovelace loads the stuff, maybe you should try to leverage card-loader.
For me, this solution fixes this kind of issues.

Hi friends,

I am trying to create a decluttering card for a blank button, with the only variable its width (in px).
Whatever I try, the variable “width_in_px” is not taken into account when rendering.

My definition of the decluttering template:

# ====================
# =   Button Blank   =
# ====================
blank_button_card:
  default:
    - width_in_px: 15px
  card:
    type: custom:button-card
    color_type: blank-card
    styles:
      card:
        - width: '[[width_in_px]]'

My attempt in ui-lovelace.yaml:

          - type: custom:decluttering-card
            template: blank_button_card
            variables:
              - width_in_px: 15px

Any help you could lend to somebody going crazy ?

Thx

I actually use the Templating functions built into custom:button-card to achieve what you are trying to do. For example:

Template:

button_card_templates:
  horizontal-divider-grey-layout:
    color_type: blank-card
    styles:
      card:
        - height: 1%
        - width: 100%
        - background-color: '#292929'

Declaration

- type: custom:button-card
  template: horizontal-divider-grey-layout
1 Like

Thx, Daphatty, for pointing this out.

Is there no way to do this with a Decluttering Card ?

The way I specify the width in the button-card is not compatible with decluterring card. It’s a bit hacky as Lovelace isn’t made to support fixed width because every object’s size is supposed to be dynamic.
The way to go here is to use the button card templates as @daphatty said.