Vacuum zone cards

[acesyde]

Preview

Description

These buttons are linked to the robot vacuum. The top six buttons represent rooms and zones that can be vacuumed. By selecting one or more of these, the robot vacuum will only vacuum those areas. We can also view the last time each room/zone was vacuumed. The green button can be used to start the robot vacuum, and if no rooms/zones are selected, the robot vacuum will vacuum the entire home. The ‘number of repetitions’ button speaks for itself and will determine how many times the robot vacuum will vacuum the areas. Finally, we have the ‘Empty vacuum’ button, which can be used to manually send the robot vacuum to the trash can. However, this also happens automatically when it is full, so we rarely use this.

In case you would like to learn more about the triggered vacuum script and how it vacuums just the selected areas: 🟣 Rounded - Dashboard guide - #25 by LE0N

I think we can create a reusable card

Todo

• translations
• editor
• card
• documentation

Button card code

6 zone cards

Here we also highlight one of the six buttons. In the code I use two helpers. A toggle for selecting and deselecting the area and a date helper for keeping track of the last cleaned date.

type: custom:button-card
icon: mdi:sofa-single
entity: input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen
name: Woonkamer
label: '[[[return states["sensor.robotstofzuiger_laatst_actief_woonkamer"].state ]]]'
show_label: true
tap_action:
  action: toggle
  haptic: medium
state:
  - value: 'on'
    styles:
      card:
        - background-color: var(--yellow)
        - box-shadow: none
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
      label:
        - color: var(--black)
        - opacity: '0.5'
  - value: 'off'
    styles:
      card:
        - background: var(--contrast2)
        - box-shadow: none
      icon:
        - width: 24px
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)
      label:
        - color: var(--contrast9)
styles:
  icon:
    - width: 24px
  img_cell:
    - justify-content: flex-start
    - margin-top: '-4px'
  name:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - font-size: 12px
    - margin-bottom: 0px
  card:
    - height: 84px
    - border-radius: 24px
    - padding: 12px 0 12px 14px
    - box-sizing: border-box
    - '--mdc-ripple-press-opacity': 0
  label:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - font-size: 12px

Start vacuum card

This button calls a script when pressed. The script determines whether zones or the entire house should be vacuumed. Depending on whether zones are selected or not, the name and icon will change.

type: custom:button-card
entity: input_boolean.algemeen_robotstofzuiger_zones_selected
icon: mdi:robot-vacuum
name: Zones
label: Stofzuigen
show_label: true
tap_action:
  action: call-service
  service: script.selectie_stofzuigen
  haptic: success
state:
  - value: 'off'
    name: Huis
    icon: mdi:home
styles:
  icon:
    - width: 24px
    - color: var(--black)
  img_cell:
    - justify-content: flex-start
    - margin-top: '-4px'
  name:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--black)
    - font-size: 12px
    - margin-bottom: 0px
  card:
    - height: 84px
    - background-color: var(--green)
    - box-shadow: none
    - border-radius: 24px
    - padding: 12px 0 12px 14px
    - z-index: 1
  label:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--black)
    - font-size: 12px

Number of repetitions card

This button allow the user to loop over 1, 2, or 3 repetitions of vacuuming the selected areas. Pressing the buttons will trigger a script that determines whether the number of repetitions should be increased by 1 or reset back to 1 if it is currently set to 3.

type: custom:button-card
icon: mdi:numeric-1-box
entity: input_number.algemeen_robotstofzuiger_zone_herhalingen
name: Aantal
label: herhalingen
show_label: true
state:
  - value: '1.0'
    icon: mdi:numeric-1-box
  - value: '2.0'
    icon: mdi:numeric-2-box
  - value: '3.0'
    icon: mdi:numeric-3-box
tap_action:
  action: call-service
  service: script.robotstofzuiger_herhalingen
  haptic: medium
styles:
  icon:
    - width: 24px
    - color: var(--contrast1)
  img_cell:
    - justify-content: flex-start
    - margin-top: '-4px'
  name:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--contrast1)
    - font-size: 12px
    - margin-bottom: 0px
  card:
    - height: 84px
    - background-color: var(--contrast20)
    - box-shadow: none
    - border-radius: 24px
    - padding: 12px 0 12px 14px
    - z-index: 1
  label:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--contrast1)
    - font-size: 12px

Empty vacuum card

As mentioned above, this button sends the robot vacuum to the trash can. Additionally, the button also displays how many cubic meters the robot vacuum has already vacuumed. Based on this, it is determined whether the robot vacuum should automatically go to the trash can after vacuuming.

type: custom:button-card
icon: mdi:broom
name: Leeg maken
label: >-
  [[[return states["sensor.robotstofzuiger_meters_schoongemaakt"].state + "m²
  gezogen"]]]
show_label: true
tap_action:
  action: call-service
  service: script.stofzuiger_legen
  haptic: success
styles:
  icon:
    - width: 24px
    - color: var(--contrast1)
  img_cell:
    - justify-content: flex-start
    - margin-top: '-4px'
  name:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--contrast1)
    - font-size: 12px
    - margin-bottom: 0px
  card:
    - height: 84px
    - background-color: var(--contrast20)
    - box-shadow: none
    - border-radius: 24px
    - padding: 12px 0 12px 14px
    - z-index: 1
  label:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - color: var(--contrast11)
    - font-size: 12px