Lovelace: Decluttering Card

pergola.fabio · May 21, 2020, 12:40pm

thnx in advance

for a test i did below, its actually the same header, the texf “Fabio Slow” is only visible after 5 sec after refreshing a lovelace view
the text “Fabio Fast” is visible instant…

      - type: custom:decluttering-card
        template: header
        variables:
          - content: '## Fabio Slow'
          
      - type: markdown
        style: |
          ha-card {
            box-shadow: none;
            height: 33px;
            background: none;
            padding: 0px 10px;
            color: var(--header-color);
          }
        content: '## Fabio Fast'

here is the template:

# Default Config
default:
  # Name/Title
  
#### #### #### #### #### #### #### #### #### #### #### #

  type: markdown
  style: |
    ha-card {
      box-shadow: none;
      height: 33px;
      background: none;
      padding: 0px 10px;
      color: var(--header-color);
    }
  content: '[[content]]'

RomRider · May 21, 2020, 12:44pm

Version 0.6.3

Bugfixes

Attempt to fix issues with HA 0.110 (Might be related to https://github.com/home-assistant/frontend/issues/5965)

RomRider · May 21, 2020, 1:04pm

So this will get fixed in core as it is a bug, but in the meantime, the version above should do the trick @BradAU, @pergola.fabio

pergola.fabio · May 21, 2020, 1:11pm

much appreciated
my header with buttons are back
my header with markdown texts are back!!

BradAU · May 21, 2020, 1:14pm

Thanks very much @RomRider, confirming this fixes issues pending the fix in core.

Mariusthvdb · May 21, 2020, 2:46pm

though still on 109.6 the new decluttering card makes this:

out of this:

decluttering cards in a stack-of-card:

type: custom:stack-in-card
keep:
  background: true
cards:

  - type: custom:button-card
    name: Set Hue sensitivity
    template: button_default_title_fixed

  - !include /config/lovelace/buttons/buttons_set_hue_sensitivity.yaml

  - type: entities
    show_header_toggle: false
    entities:
      - input_select.select_hue_motion_sensor
      - entity: script.set_hue_sensitivity
        action_name: Set

with decluttering card:

card:
  type: custom:button-card
  template: button_picture_script_small
  show_label: true
  size: 50%
  icon: '[[icon]]'
  label: '[[label]]'
  tap_action:
    action: call-service
    service: script.buttons_set_hue_sensitivity
    service_data:
      option: '[[option]]'
  state:
    - operator: template
      value: >
        [[[
        return states['input_select.select_hue_sensitivity'].state == '[[option]]'
        ]]]
      color: 'silver'
    - operator: default
      styles:
        background:
          - color: '#595959'
        name:
          - color: 'white'

Is the new decluttering card only for 110 upward?

pergola.fabio · May 21, 2020, 2:50pm

No thing it’s a temp fix… Why not downgrade for now the declutter or update to 110?

Dansker · May 24, 2020, 12:03am

Thank you for this card, a godsend.

Trying to get conditional cards to work inside a decluttered card. Running 109.6 and tried the two latest versions of the decluttering card. Can certainly post the code, but is it supposed to work? It is being used inside a vertical-stack, also tried with ‘custom:vertical-stack-in-card’, same behavior.

RomRider · May 24, 2020, 12:06am

Yes it’s supposed to work but if you don’t say what doesn’t work and share your config it’s going to be hard for me to help you

Dansker · May 24, 2020, 12:27am

Thank you for your quick response! Here is the call:

  - template: my_receiver_power_off_card
    type: 'custom:decluttering-card'
    variables:
      - p_label: Kitchen Receiver
      - p_receiver: media_player.living_room_z2

This is the template:

decluttering_templates:
  my_receiver_power_off_card:
    card:
      cards:
        - label: '[[p_label]]'
          template: bct_power_label
          type: 'custom:button-card'
        - entity: '[[p_receiver]]'
          tap_action:
            service: media_player.toggle
            service_data:
              entity_id: '[[p_receiver]]'
          template: bct_power_button
          type: 'custom:button-card'
      type: horizontal-stack
    conditions:
      - entity: '[[p_receiver]]'
        state: 'off'
    type: conditional

The card displays fine, but the conditional is ignored, as in it always displays. I have a few such conditional cars, all exhibit the same behavior.

Thank you for taking a look.

RomRider · May 24, 2020, 6:24am

Which version of HA are you running?

Dansker · May 24, 2020, 6:34am

109.6, tried both 6.2 and 6.3 of the decluttering-card.

RomRider · May 24, 2020, 1:30pm

~~I have a similar setup in my test env and that works fine. Does it work as expected if you remove the decluttering-card and use directly the conditional card?~~

Edit: I see the problem… Your indentation is wrong

decluttering_templates:
  my_receiver_power_off_card:
    card:
        cards:
          - label: '[[p_label]]'
            template: bct_power_label
            type: 'custom:button-card'
          - entity: '[[p_receiver]]'
            tap_action:
              service: media_player.toggle
              service_data:
                entity_id: '[[p_receiver]]'
            template: bct_power_button
            type: 'custom:button-card'
        type: horizontal-stack
      conditions:
        - entity: '[[p_receiver]]'
          state: 'off'
      type: conditional

Dansker · May 25, 2020, 12:40am

Wow, my pride has been (in)dented.

Thanks, I’ll give it a try…

Dansker · May 27, 2020, 4:47am

Romrider,

Got back on this one, it seems the built-in ‘raw configuration editor’ mangles the file when closing, especially making them invalid (it alters the indentation).

Wanting to try the Visual Studio editor, but where is the file…, not in .storage.

RomRider · May 27, 2020, 8:13am

There’s no editable file in storage mode. You’ll have to migrate to yaml mode for that (copy the whole content of the raw editor to ui-lovelace.yaml and switch the mode to yaml)

Also it seems unlikely that the raw editor changes indentation. It changes the line order (alphabetically) but that should be it. If it’s doing something else it’s probably a bug.

Trouble-51 · May 28, 2020, 7:16am

Help Please!

I have read the repository many times and went through the the messages above but cannot figure out how to use the card. I have more than 15 thermostats en air conditioners that have the same lines in Lovelace for a total of more than 300 lines which I have tried and tried to reduce by using this card. The only variable is re the entities.

this is the code;

          - type: custom:simple-thermostat
            entity: climate.hall_downstairs
            name: Hall Downstairs
            step_size: 0.5
            tap_action:
              action: more-info
            style: |
              ha-card {
                --st-font-size-xl: 24px;
                --st-font-size-m: 10px;
                --st-font-size-title: 20px;
                --st-font-size-sensors: 15px;
                --st-spacing: 2px;
                --st-mode-active-color: red;
                --st-mode-background: seagreen;
              }
            control:
             _names: false
              - hvac
              - preset

How can I use the decluttering card to have this only one time in lovelace and use it by changing the entity? Any help would be very much appreciated.

davefi · May 28, 2020, 10:31am

I think @Mariusthvdb reported similar earlier in the thread here Lovelace: Decluttering Card but I did not see a response.

I have a custom button that simulates the multiple-entity-row card. To demonstrate the issue more clearly, if I put 3 one after the other, I get this:

If I change them to a decluttering-card template, I get this:

Note the shadow at the top of each row when created via a decluttering-card template.

My decluttering-card template is:

  multi_entity_row:     # This is the name of a template
    default:
      - secondary-info: last-changed
    card:
      type: custom:button-card
      entity: '[[entity]]'
      icon: 'mdi:[[icon]]'
      secondary-info: '[[secondary-info]]'
      name: '[[name]]'
      show_state: false
      show_label: true
      show_last_changed: true
      styles:
        card:
          - padding: 0px 16px 16px 16px # top right bottom left
        grid:
          - grid-template-areas: '"i n left_state right_state" "i l left_state right_state"'
          - grid-template-columns: min-content 2fr 0.5fr 0.5fr
          - grid-template-rows: 1em 1em
        img_cell:
          - align-self: start
          - text-align: start
          - width: 40px
          - height: 40px
        icon:
          - height: 24px
          - width: 24px
        name:
          - justify-self: start
          - margin-left: 16px
          - font-size: var(--paper-font-body1_-_font-size)
          - font-weight: var(--paper-font-body1_-_font-weight)
        label:
          - justify-self: start
          - margin-left: 16px
          - color: var(--secondary-text-color)
          - font-size: var(--paper-font-body1_-_font-size)
          - font-weight: var(--paper-font-body1_-_font-weight)
          - color: var(--secondary-text-color)
        state:
          - justify-self: end
          - font-size: var(--paper-font-body1_-_font-size)
          - font-weight: var(--paper-font-body1_-_font-weight)
        custom_fields:
          left_state:
            - justify-self: end
            - font-size: var(--paper-font-body1_-_font-size)
            - font-weight: var(--paper-font-body1_-_font-weight)
          right_state:
            - justify-self: end
            - font-size: var(--paper-font-body1_-_font-size)
            - font-weight: var(--paper-font-body1_-_font-weight)
      custom_fields:
        left_state: >
          [[[
            return `<span style="color: var(--secondary-text-color); font-size: 10px;">Local</span><br>${states['sensor.ha_local_version'].state}`
          ]]]
        right_state: >
          [[[
            return `<span style="color: var(--secondary-text-color); font-size: 10px;">Remote</span><br>${states['sensor.ha_remote_version'].state}`
          ]]]

My stack-in-card is as follows (note: I changed this to a standard vertical-stack card to eliminate the stack-in-card from the equation, and I see the same results, so its not related to the stack-in-card):

      - type: custom:stack-in-card
        mode: vertical
        keep:
          background: true
        cards:
          ### Header
          - type: custom:button-card
            color_type: label-card
            color: rgb(129, 0, 0)
            name: Uptime & Updates
          - type: entities
            entities:
              - entity: sensor.ha_uptime
                icon: mdi:clock
                name: Home Assistant Uptime

Then where I use the decluttering-card option, this is appended to the end 3 times:

          - type: custom:decluttering-card
            template: multi_entity_row
            variables:
              - entity: sensor.ha_local_version
              - icon: home-assistant
              - name: Home Assistant Versions

Or if I use the custom-button directly, this is appended 3 times:

          - type: custom:button-card
            entity: sensor.ha_local_version
            icon: mdi:home-assistant
            secondary-info: last-changed
            show_state: false
            show_label: true
            show_last_changed: true
            name: Home Assistant Versions
            styles:
              card:
                - padding: 0px 16px 16px 16px # top right bottom left
              grid:
                - grid-template-areas: '"i n left_state right_state" "i l left_state right_state"'
                - grid-template-columns: min-content 2fr 0.5fr 0.5fr
                - grid-template-rows: 1em 1em
              img_cell:
                - align-self: start
                - text-align: start
                - width: 40px
                - height: 40px
              icon:
                - height: 24px
                - width: 24px
              name:
                - justify-self: start
                - margin-left: 16px
                - font-size: var(--paper-font-body1_-_font-size)
                - font-weight: var(--paper-font-body1_-_font-weight)
              label:
                - justify-self: start
                - margin-left: 16px
                - color: var(--secondary-text-color)
                - font-size: var(--paper-font-body1_-_font-size)
                - font-weight: var(--paper-font-body1_-_font-weight)
                - color: var(--secondary-text-color)
              state:
                - justify-self: end
                - font-size: var(--paper-font-body1_-_font-size)
                - font-weight: var(--paper-font-body1_-_font-weight)
              custom_fields:
                left_state:
                  - justify-self: end
                  - font-size: var(--paper-font-body1_-_font-size)
                  - font-weight: var(--paper-font-body1_-_font-weight)
                right_state:
                  - justify-self: end
                  - font-size: var(--paper-font-body1_-_font-size)
                  - font-weight: var(--paper-font-body1_-_font-weight)
            custom_fields:
              left_state: >
                [[[
                  return `<span style="color: var(--secondary-text-color); font-size: 10px;">Local</span><br>${states['sensor.ha_local_version'].state}`
                ]]]
              right_state: >
                [[[
                  return `<span style="color: var(--secondary-text-color); font-size: 10px;">Remote</span><br>${states['sensor.ha_remote_version'].state}`
                ]]]

I think that covers everything!

Thanks all.

Trouble-51 · June 1, 2020, 7:32pm

I solved the problem but how do I get the sensors in the card?

my decluttering template:

decluttering_templates:
my_template:
card:
type: ‘custom:simple-thermostat’
step_size: 0.5
tap_action:
action: more-info
style: |
ha-card {
–st-font-size-xl: 24px;
–st-font-size-m: 10px;
–st-font-size-title: 20px;
–st-font-size-sensors: 15px;
–st-spacing: 2px;
–st-mode-active-color: red;
–st-mode-background: seagreen;
}
control:
_names: true
entity: ‘[[entity]]’

my card:

          - type: custom:decluttering-card
            template: my_template
            variables:
              - entity: climate.living_and_kitchen
            sensors:
                  - entity: sensor.netatmo_girassol_living_room_humidity
                    name: Humidity
                  - entity: sensor.netatmo_girassol_living_room_co2
                    name: CO2
                  - entity: sensor.netatmo_girassol_living_room_battery
                    name: Battery
                  - entity: sensor.netatmo_girassol_living_room_battery_percent
                    name: Battery %
                  - entity: sensor.netatmo_girassol_living_room_radio
                    name: Radio Signal
                  - entity: sensor.netatmo_girassol_living_room_temperature
                    name: Netatmo

results in:

I am clearly doing something wrong! How do I get the sensors in the card?

Thanks for your help!

RomRider · June 1, 2020, 7:44pm

Please format your post so it’s easier to understand.

But the solution is this one:

## Template
decluttering_templates:
  my_template:
    card:
      type: 'custom:simple-thermostat'
      step_size: 0.5
      tap_action:
        action: more-info
      style: |
        ha-card {
        –st-font-size-xl: 24px;
        –st-font-size-m: 10px;
        –st-font-size-title: 20px;
        –st-font-size-sensors: 15px;
        –st-spacing: 2px;
        –st-mode-active-color: red;
        –st-mode-background: seagreen;
        }
      control:
        _names: true
      entity: '[[entity]]'
      sensors: '[[sensors]]'

## Card
          - type: custom:decluttering-card
            template: my_template
            variables:
              - entity: climate.living_and_kitchen
              - sensors:
                  - entity: sensor.netatmo_girassol_living_room_humidity
                    name: Humidity
                  - entity: sensor.netatmo_girassol_living_room_co2
                    name: CO2
                  - entity: sensor.netatmo_girassol_living_room_battery
                    name: Battery
                  - entity: sensor.netatmo_girassol_living_room_battery_percent
                    name: Battery %
                  - entity: sensor.netatmo_girassol_living_room_radio
                    name: Radio Signal
                  - entity: sensor.netatmo_girassol_living_room_temperature
                    name: Netatmo