Lovelace: Decluttering Card

[RomRider]

Just use the template feature of the button-card itself instead of decluttering-card for that and it will fix this issue. I’ll check what is happening though.

That would be your button card template:

button_card_templates:
  light_button_with_brightness:
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    layout: icon_label
    show_label: true
    label_template: >
      var bri = Math.round(entity.attributes.brightness / 2.55);  return (bri ?
      bri : '0') + '%';
    show_name: true
    state:
      - styles:
          card:
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
          icon:
            - color: var(--paper-item-icon-active-color)
        value: 'on'
    styles:
      card:
        - border-radius: 15px
        - height: 76px
        - width: 76px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - '--paper-card-background-color': 'rgba(40, 40, 40, 0.5)'
      grid:
        - grid-template-rows: 42px auto 0px
        - grid-template-columns: 42px auto
      icon:
        - width: 30px
        - color: white
      label:
        - font-size: 12px
        - font-weight: bold
        - color: white
      name:
        - justify-self: start
        - align-self: end
        - padding: 9px 10px
        - font-size: 12px
        - font-weight: bold
        - color: white

used like this:

- type: custom:button-card
  template: light_button_with_brightness
  entity: light.kitchen_lights_79
  name: Kitchen
  icon: mdi:lightbulb

[alanthewild (Alan Wild)]

Going to give that a shot now. Not sure why I didn’t try that earlier to be fair.

Thanks heaps.

[RomRider]

Also instead of setting width and height in the card style, use aspect_ratio: 1/1, it should work better for multiple screen size and will use the whole width of you horizontal-stack automatically

[alanthewild (Alan Wild)]

Will try that after I convert the buttons over to the template. Then I can just change it on 4 lines rather than 80+. Thanks again.

[alanthewild (Alan Wild)]

Finished converting that dashboard to button_templates. Went from 1233 lines down to 187. That’s awesome!!

[alanthewild (Alan Wild)]

And just changed to aspect_ratio: 1/1 for the buttons and all looking good.
Will see what my wife’s response is to the revised look when she gets home.
[edit: wife didn’t seem fussed either way so that’s a win!]

Although, to be fair, 1/1 aspect ratio isn’t actually 1/1 in my config for some reason but it’s using the space better so I don’t actually mind.
Either way, I have now taken my main remote and updated that with the templates and gone from a nightmare of 2500 lines of YAML down to a more manageable 608 lines. Still using specific height/width for the buttons on this one as I like it to have a fixed size.Thanks again @RomRider.

And one last thing to add which is relevant to the decluttering card:
Just tried it and happy to report you can use the decluttering card in conjunction with the button_card templates from custom:button-card.

I have standard buttons for everything (now) based on templates then I use the decluttering card to further simplify the config by nesting a button_card_template within a decluttering card config for the AVR commands. If I want to change the standard button that change is now in a single place.

decluttering_templates:
  arb_avr_picture_only:     
    entity_picture: '[[entity-picture]]'
    entity: rest_command.avr_buttons
    template: rb_picture_only
    type: 'custom:button-card' 
    tap_action:
      action: call-service
      service: rest_command.avr_buttons
      service_data:
        command: [[avr_command]] 

Button Card Template:

buttom_card_templates:
  rb_picture_only:
    show_entity_picture: true
    show_name: false
    styles:
      card:
        - padding: 0px 0px
        - border-radius: 15px
        - height: 76px
        - width: 76px
        - margin: 5px 5px 0px 0px
        - '--paper-card-background-color': white
        - box-shadow: '0px 0px 10px 3px rgba(100, 189, 54)'
      entity_picture:
        - width: 70px

Button config:

 - type: 'custom:decluttering-card'
   template: rb_avr_picture_only
   variables:
     - entity-picture: /local/img/radio-nz-logo.png
     - avr_command: TPANA8

[RomRider]

@alanthewild

Although, to be fair, 1/1 aspect ratio isn’t actually 1/1 in my config for some reason but it’s using the space better so I don’t actually mind.

Are you sure you’re using the latest version of button-card? Did you clear your cache?

@alanthewild

service_data: command: [[avr_command]]

[[avr_command]] should be enclose in quotes: '[[avr_command]]' else it’s considered as an array of array in YAML.

[RomRider]

Version 0.2.0

BREAKING CHANGES

• To support default values, I had to change the template format. It has to be defined like this now:

  decluttering_templates:
    <template_name>:
      card:
        <card_config>
  

  Instead of

  decluttering_templates:
    <template_name>:
      <card_config>
  

NEW FEATURES

• Add support for default values (this is optional). If no value is provided for a variable in the actual card, then the default value for that variable will be used (if any). (Fixes #1)

  <template_name>
    default:
      - variable: default_value
      - variable2: default_value2
      [...]
  

• Add support for variables values which are not string (objects, numbers and booleans). Previously they were all converted to string.

[RomRider]

@daphatty

should probably clarify that I am encompassing my buttons inside of a vertical-stack-in-card in order to control the spacing between cards. This is how I achieved the effect of two buttons looking like one button. Of course, using vertical-stack-in-card also means that I have to explicitly create my own gaps, hence the horizontal and vertical dividers using the blank-card feature of custom:button-card.

@daphatty, would you mind trying the version of vertical-stack-in-card from the master branch (it’s not part of a release yet). I PRed something there yesterday that might fix your issue.

[daphatty]

It required a cache purge but your PR for vertical stack in card seems to have solved my gap card issue. Time to start templating all my buttons!

[sbmlat (shreram)]

@RomRider

- type: custom:decluttering-card template: my_first_template variables: Default Icon Button

Quick question @RomRider

In the above instance, [[name]] is set to ‘Default Icon’ and [[icon]] is set to ‘Button’ ??

[RomRider]

Sorry it was a documentation error, I updated the post (not github yet)
Name has the entire value and icon will be the default value (fire in this case)

[sbmlat (shreram)]

Ok. That’s what I thought.

For some reason, the following template is not working.

decluttering_templates:
  mediaplayer_template:     # This is the name of a template
    type: conditional
    conditions:
      - entity: '[[entity_1]]'
        state: playing
    card:
      type: media-control
      entity: '[[entity_1]]'

I am using this template like this.

      - type: custom:decluterring-card
        template: mediaplayer_template
        variables:
          - entity_1: media_player.rokuexpressbasement

I am not sure if I created the template wrong or some other issue. There are no errors in the HA log and in the Chrome dev tools console.

Here is the error message on the page.

[RomRider]

Are you sure the file is loaded correctly? If you don’t have errors in the javascript console then it probably doesn’t find the file on your disk.
Did you use the file from the dist folder?

[Gluwc (Lucas Bramlage)]

Make sure you’re using the raw version of the file and not the HTML page, this is a common mistake related to to this error.

[FireFly]

Since the 0.2.0 update I sometimes get errors on all of the decluttering cards that I use.

The template that I use is:

media-player-volume-slider:
  card:
    type: conditional
    conditions:
      - entity: '[[entity]]'
        state_not: "off"
    card:
      type: 'custom:mini-media-player'
      entity: '[[entity]]'
      max_volume: '[[max_volume]]'
      hide:
        controls: true
        icon: true
        info: true
        name: true
        power: true
        source: true

It’s not just this template, but all of the templates that I use. Forcing a refresh of the Lovelace or in my browser doesn’t help either.
At the moment I have this issue on my computer, but on my phone it’s working perfectly.

[sbmlat (shreram)]

I used HACS to download this card and verified both js files were downloaded.

[RomRider]

What is lovelace-template-card? This one is only decluttering-card.js and you should only include that in your resource list.
It’s not enough to download the file, you also have to declare it in the resources of lovelace.

[RomRider]

That’s probably a caching issue. Clear your cache and restart your browser.

[ludeeus]

That template card I can explain (partially).
It’s here https://github.com/custom-cards/decluttering-card/tree/0.2.0/dist and therefor downloaded.