Lovelace: Decluttering Card

yes the decluttering card - updated yesterday

Indeed it did. I checked and I did indeed update it yesterday.

Is it decluttering or possibly the card you are decluttering?

Really, every post about “card XYZ is broken” should contain the MINIMAL code reproducing the issue, otherwise it is a waste of time.

I updated decluttering card javascript file to the version released 4 days ago and rebooted home assistant but the error is still there

if it’s not installed via HACS, did you remember to change the version number in the resource to be sure it loads the new version? Rebooting won’t do that.

1 Like

Indeed, to add the version helped very much. Thank you

Hi,

I need to change --masonry-view-card-margin in decluttering card. Can you help me?

thx

Hi,

I am trying to reference an object/entity by its name which is created from a string.
In code it works as shown below when I use states(…) and state_attr(…) but can I can’t figure it out how to replace the default valiable ‘shutter_window’ with the generated string.

default:
  shutter_entity: cover.office_shutter
  shutter_window: binary_sensor.office_shutter_window_input
card:
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: '[shutter_window]'
            state: 'off'
        chip:
           type: template
           primary: ''
           entity:  '[[shutter_window]]'
           content: >-
              {% set state = states('binary_sensor.' + '[[shutter_entity]]'.split('.')[1] + '_window_input') %}
              {% if state == 'off' %}
                 closed
              {% else %}
                  open
              {% endif %}
            icon: >-
              {% set state = states('binary_sensor.' + '[[shutter_entity]]'.split('.')[1] + '_window_input') %}
              {% if state == 'off' %}
                 mdi:window-closed-variant
              {% else %}
                 mdi:window-open-variant
              {% endif %}
            icon_color: >-
              {% set state =  states('binary_sensor.' + '[[shutter_entity]]'.split('.')[1] + '_window_input') %}
              {% if state == 'off' %}
                 grey
              {% else %}
                 red
              {% endif %}

Has anyone an idea?

Cheers,
Chris

Hello together,

maybe someone can help me.
I’m trying to insert a condition weather a variable is not initial or has a default value.

Example:

- type: conditional
  conditions:
    - condition: template
      value_template: '{{ [[watch]] != "default" }}'
  card:
    type: vertical-stack

i want to only show the vertical-stack if the variable “watch” hasn’t the value “default” or maybe “” if its easier. :smiley:

cheers,
Miguel

The conventional Conditional card does NOT support templates - at least according to docs.
You may redesign this logics w/o using a template.

1 Like

exactly, as Ildar says, let me add to it:
just create a binary sensor for that and use the binary in the conditional.
.

1 Like

okey thank you. :smiley:

I have the same question to this, is there a solution?

So, entity is an object. That is expecting a string I believe. I am surprised that it passes [[entity]] and that you don’t get [object].

That should be fixable by wrapping it inside a custom:card-templater. You can then get the name of the entity that is passed using

{{ state_attr(''[[entity]]'', ''friendly_name'') }}

this is what I’m trying and it’s not working

decluttering_templates:
  big_button:
    default:
      - name: {{ state_attr('[[entity]]', friendly_name) }}
    card:
      type: custom:button-card
      entity: '[[entity]]'
      name: '[[name]]'

An example of what I am talking about is explained here:
Food in the Freezer Tracker - Share your Projects! - Home Assistant Community (home-assistant.io)

You need quotes around friendly_name.

But, also need to wrap the big_button inside the card-templater if big_button does not support it.

Hi

I’m having an issue with decluttering-cards not behaving in a horizontal stack.

Initially all of the individual cards were custom:button-cards. I’ve transitioned some to a decluttering-card so that I can pass the MAC address as a variable so that a click sends a wake_on_lan request.

As you can see the formatting is screwed up:

  • In the row of dining room and main bedroom the first decluttering-card of the 3 is missing.
  • In the last row the first card (Asustor2) is a decluttering card, Spare is a button card.
  - type: custom:button-card
    template: container
    color: "#808080"
    name: Computers / Servers
    custom_fields:
      buttons:
        card:
          type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:
                - type: custom:button-card
                  template: computer
                  entity: sensor.hasspi
                  icon: mdi:raspberry-pi
                  name: HassOS
                - type: custom:button-card
                  template: computer
                  entity: sensor.rasppi
                  icon: mdi:raspberry-pi
                  name: RaspberryPi
                - type: custom:button-card
                  template: computer
                  entity: sensor.server
                  icon: mdi:desktop-tower
                  name: Server
            - type: horizontal-stack
              cards:
                - type: custom:button-card
                  template: computer
                  entity: sensor.zephyrus
                  icon: mdi:laptop
                  name: Zephyrus
                - type: custom:button-card
                  template: computer
                  entity: sensor.swiftx
                  icon: mdi:laptop
                  name: SwiftX
            - type: horizontal-stack
              cards:
                - type: custom:decluttering-card
                  template: computer
                  variabes:
                    - entity: sensor.h570m
                    - icon: mdi:desktop-tower
                    - name: Lounge HTPC
                    - mac: "A8-A1-59-92-75-3E"
                - type: custom:decluttering-card
                  template: computer
                  variables:
                    - entity: sensor.h610m
                    - icon: mdi:desktop-tower
                    - name: Dining Room HTPC
                - type: custom:decluttering-card
                  template: computer
                  variables:
                    - entity: sensor.z370
                    - icon: mdi:desktop-tower
                    - name: Main Bedroom HTPC
            - type: horizontal-stack
              cards:
                - type: custom:button-card
                  template: computer
                  entity: sensor.h81t
                  icon: mdi:desktop-tower
                  name: Charlie HTPC
                - type: custom:button-card
                  template: computer
                  entity: sensor.h81t2
                  icon: mdi:desktop-tower
                  name: Girl's HTPC
            - type: horizontal-stack
              cards:
                - type: custom:button-card
                  template: computer
                  entity: sensor.mediamaster
                  icon: mdi:nas
                  name: MediaMaster
                - type: custom:button-card
                  template: computer
                  entity: sensor.readynas428
                  icon: mdi:nas
                  name: RN428
                - type: custom:button-card
                  template: computer
                  entity: sensor.backup
                  icon: mdi:nas
                  name: Backup
            - type: horizontal-stack
              cards:
                - type: custom:decluttering-card
                  template: computer
                  variables:
                    - name: Asustor2
                    - icon: mdi:nas
                    - entity: sensor.asustor2
                    - mac: "78-72-64-41-3D-C2"
                - type: custom:decluttering-card
                  template: computer
                  variables:
                    - entity: sensor.spare
                    - icon: mdi:nas
                    - name: Spare

Grateful for any advice?
Thanks
Andy

Can you show us your decluttering card?

And, note, the last row, both are decluttering cards. Not one decluttering and a button card.

Hi
Sorry you are right about the bottom row - same with one of each however - they are not next to each other.

Card:

computer:
  default:
    - mac: "ff-ff-ff-ff-ff-ff"
  card:
    type: custom:button-card
    hold_action:
      action: none
    tap_action:
      action: call-service
      service: wake_on_lan.send_magic_packet
      service_data:
        mac: '[[mac]]'
    name: '[[name]]'
    icon: '[[icon]]'
    entity: '[[entity]]'
    styles:
      card:
        - background-color: rgba(115, 115, 115, 0.2)
        - border-radius: 10%
        - padding: 5px
        - color: ivory
        - font-size: 10px
        - text-transform: capitalize
        - width: 90px
        - height: 90px
        - align-items: start
      grid:
        - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 3fr 1fr 1fr 1fr 1fr
      name:
        - font-weight: bold
        - font-size: 13px
        - color: white
        - align-self: middle
        - justify-self: start
        - padding-bottom: 4px
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
      icon:
        - width: 70%
        - margin-top: "-10%"
        - color: |
            [[[
              if (states[entity.entity_id].state == 'off') return 'gray';
              if (isNaN(states[entity.entity_id].attributes.cpu_temperature)) return 'white';
              if (states[entity.entity_id].attributes.cpu_temperature < 60) return 'lime';
              if (states[entity.entity_id].attributes.cpu_temperature >= 60 && 
                  states[entity.entity_id].attributes.cpu_temperature < 80) return 'orange';
              else return 'red';
            ]]]
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
        cpu:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": "[[[ if (states[entity.entity_id].attributes.cpu_use > 80) return 'rgba(255,96,96,1)'; ]]]"
        ram:
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": "[[[ if (states[entity.entity_id].attributes.memory_use > 80) return 'rgba(255,96,96,1)'; ]]]"
        sd:
          - align-self: middle
          - justify-self: start
          - "--text-color-sensor": "[[[ if (states[entity.entity_id].attributes.disk_use > 80) return 'rgba(255,96,96,1)'; ]]]"
    custom_fields:
      temp: |
        [[[
          if (states[entity.entity_id].state == 'on' && !isNaN(states[entity.entity_id].attributes.cpu_temperature)) {
            return `<ha-icon
              icon="mdi:thermometer"
              style="width: 12px; height: 12px; color: yellow;">
              </ha-icon><span>${states[entity.entity_id].attributes.cpu_temperature}°C</span>`
          } else {
            return '';
          }
        ]]]
      cpu: |
        [[[
          if (states[entity.entity_id].state == 'on' && !isNaN(states[entity.entity_id].attributes.cpu_use)) {
            return `<ha-icon
              icon="mdi:server"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states[entity.entity_id].attributes.cpu_use}%</span></span>`
          } else {
            return '';
          }    
        ]]]
      ram: |
        [[[
          if (states[entity.entity_id].state == 'on'  && !isNaN(states[entity.entity_id].attributes.memory_use)) {
            return `<ha-icon
              icon="mdi:memory"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states[entity.entity_id].attributes.memory_use}%</span></span>`
          } else {
            return '';
          }
        ]]]
      sd: |
        [[[
          if (states[entity.entity_id].state == 'on' && states[entity.entity_id].attributes.disk_use && !isNaN(states[entity.entity_id].attributes.disk_use)) {
            return `<ha-icon
              icon="mdi:harddisk"
              style="width: 12px; height: 12px; color: deepskyblue;">
              </ha-icon><span>Disk: <span style="color: var(--text-color-sensor);">${states[entity.entity_id].attributes.disk_use}%</span></span>`
          } else {
            return '';
          }
        ]]]

Thanks
Andy