Skip to content

Vacuum Card

Description

example-image example-image example-image

This is a card to control your Robot-vacuum. It has support for all vacuums which use the services vacuum.start, vacuum.stop, vacuum.return_to_base and vacuum.locate

Variables

Variable Default Required Notes
entity vacuum.*
ulm_card_vacuum_name Add a custom name
ulm_card_vacuum_icon Add a custom MDI icon
ulm_card_vacuum_label Add a custom label
ulm_card_vacuum_room Add a script to clean a specific room
ulm_card_vacuum_room_icon Add custom icon to the room script
ulm_card_vacuum_camera Add a camera entity to the card to show the vacuum map
ulm_card_vacuum_camera_toggle Only show the camera entity while cleaning

Usage

- type: "custom:button-card"
  template: "card_vacuum"
  entity: "vacuum.<Your_Vacuum>"

- type: "custom:button-card"
  template: "card_vacuum"
  entity: "vacuum.<Your_Vacuum>"
  variables:
    ulm_card_vacuum_room: "script.clean_kitchen"
    ulm_card_vacuum_room_icon: "mdi:table-chair"
    ulm_card_vacuum_camera: "camera.vacuum_map"
    ulm_card_vacuum_camera_toggle: true
Template Code
card_vacuum.yaml
---
### Card Vacuum ###
card_vacuum:
  show_name: false
  show_icon: false
  show_label: false
  template:
    - "icon_more_info_new"
    - "ulm_translation_engine"
    - "ulm_actions_card"
  variables:
    ulm_card_vacuum_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_vacuum_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_vacuum_room:
    ulm_card_vacuum_room_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_vacuum_camera:
    ulm_card_vacuum_camera_toggle:
    ulm_card_vacuum_light_color: >
      [[[
        var state = entity.state.toLowerCase();
        var colors = {
          "cleaning": "rgba(var(--color-blue)",
          "paused": "rgba(var(--color-green)",
          "mopping": "rgba(var(--color-yellow)",
          "returning": "rgba(var(--color-purple)",
          "error": "rgba(var(--color-red)",
          "default": "rgba(var(--color-theme)"
        }
        return (colors[state] || colors["default"]);
      ]]]
    ulm_card_vacuum_camera_display: >
      [[[
        if (variables?.ulm_card_vacuum_camera){
          if (variables?.ulm_card_vacuum_camera_toggle) {
            if (entity.state.toLowerCase() === 'cleaning'){
              return "true";
            }
          } else {
            return "true";
          }
        }
      ]]]
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: >
          [[[
            return variables.ulm_card_vacuum_camera_display ? "'item1' 'item3' 'item2'" : "'item1' 'item2'";
          ]]]
      - grid-template-columns: "1fr"
      - grid-template-rows: >
          [[[
            return variables.ulm_card_vacuum_camera_display ? "repeat(3, min-content)" : "repeat(2, min-content)";
          ]]]
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - background-color: >
          [[[
            if(hass.themes.darkMode){
              return "variables.ulm_card_vacuum_light_color" + ", 0.1)";
              }
          ]]]
    custom_fields:
      item3:
        - display: >
            [[[
              return variables.ulm_card_vacuum_camera_display ? "block" : "none";
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              icon: "[[[ return variables.ulm_card_vacuum_icon ]]]"
              styles:
                icon:
                  - color: >
                      [[[
                        return variables.ulm_card_vacuum_light_color + ", 1)";
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                        return variables.ulm_card_vacuum_light_color + ", 0.05)";
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_card_vacuum_name ]]]"
              label: >
                [[[
                  let label = entity.attributes.friendly_name
                  if(variables.ulm_card_vacuum_label){
                    label = variables.ulm_card_vacuum_label;
                  } else {
                    label = variables.ulm_translation_state;
                  }
                  return label;
                ]]]
    item2:
      card:
        type: "custom:button-card"
        template: >
          [[[ return variables.ulm_card_vacuum_room ? "list_4_items" : "list_3_items"; ]]]
        styles:
          card:
            - background: "none"
            - border-radius: "0"
          custom_fields:
            item4:
              - display: >
                  [[[ return variables.ulm_card_vacuum_room ? "block" : "none"; ]]]
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "mdi:play"
              state:
                - operator: "template"
                  value: "[[[ return entity.state.toLowerCase() === 'cleaning' ]]]"
                  icon: "mdi:stop"
                  tap_action:
                    action: "call-service"
                    service: "vacuum.stop"
                    service_data:
                      entity_id: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: >
                  [[[
                    return entity.state.toLowerCase() === 'cleaning' ? "vacuum.stop" : "vacuum.start";
                  ]]]
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "mdi:home-map-marker"
              tap_action:
                action: "call-service"
                service: "vacuum.return_to_base"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "mdi:map-marker"
              state:
              tap_action:
                action: "call-service"
                service: "vacuum.locate"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
          item4:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              entity: "[[[ return variables.ulm_card_vacuum_room ]]]"
              icon: "[[[ return variables.ulm_card_vacuum_room_icon ]]]"
              tap_action:
                action: "call-service"
                service: "script.turn_on"
                service_data:
                  entity_id: "[[[ return variables.ulm_card_vacuum_room ]]]"
    item3:
      card:
        type: "picture-entity"
        camera_view: "live"
        entity: "[[[ return variables.ulm_card_vacuum_camera ]]]"
        show_name: false
        show_state: false