Custom vacuum-card for Home Assistant

pcwii · July 28, 2020, 2:02am

Here is my lovelace config, and image.
I had to modify the vacuum-card.js file to get the background of the card correct.
If you need any of my other command scripts for start, delay start etc. let me know.

              - type: custom:vertical-stack-in-card
                title: 'Wall-e Controls'
                cards:
                  - type: 'custom:vacuum-card'
                    entity: vacuum.wall_e
                    show_toolbar: false
                    image: '/local/pictures/wall-e.png'
                    stats:
                      default:
                        - attribute: filter_left
                          unit: hours
                          subtitle: Filter
                        - attribute: side_brush_left
                          unit: hours
                          subtitle: Side brush
                        - attribute: main_brush_left
                          unit: hours
                          subtitle: Main brush
                        - attribute: sensor_dirty_left
                          unit: hours
                          subtitle: Sensors
                      cleaning:
                        - attribute: cleaned_area
                          unit: m2
                          subtitle: Cleaning area
                        - attribute: cleaning_time
                          unit: minutes
                          subtitle: Cleaning time
                  - type: horizontal-stack
                    cards:
                      - type: entity-button
                        name: 'Delayed Cleaning'
                        icon: mdi:clock-start
                        entity: media_player.kodi
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.1583675350603
                      - type: entity-button
                        name: 'Immediate Cleaning'
                        icon: mdi:ray-start-arrow
                        entity: media_player.kodi
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.1583976617287
                      - type: entity-button
                        name: 'Locate'
                        icon: mdi:map-marker
                        entity: script.1583675238858
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.1583675238858
                          #service: script.1583675238858
                      - type: entity-button
                        name: 'Send Home'
                        icon: mdi:home-import-outline
                        entity: media_player.kodi
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.1583686496925
                      - type: entity-button
                        name: 'Stop'
                        icon: mdi:stop
                        entity: media_player.kodi
                        state_color: false
                        tap_action:
                          action: call-service
                          service: script.turn_on
                          service_data:
                            entity_id: script.1583704406106
                  - type: horizontal-stack
                    cards:
                      - type: entities
                        entities:
                          - entity: sensor.vacuum_bin_present
                            icon: mdi:minus-circle-outline
                            name: Bin Present
                      - type: entities
                        entities:
                          - entity: sensor.vacuum_bin_full
                            icon: mdi:delete-variant
                            name: Bin Full

deliwyn · August 16, 2020, 3:07pm

Hi @denysdovhan! Thank you for your great vaccum card!
Just to let you know that is works well also for the new Roborock S6 MaxV so it can be added to the supported models in your Github

Fusion · August 22, 2020, 7:33pm

Quick Display Tip

To make the card’s background fit your theme, without modifying the card’s source code, install the card-mod frontend, then:

          - type: 'custom:vacuum-card'
            style: |
              ha-card .preview {
                background-color: var(--secondary-background-color);
              }

lokety · September 18, 2020, 2:43pm

@denysdovhan
I’m having trouble to find and add the card to the UI.

I followed the manual installation and I’m stuck at step 4 “Find Custom: Vacuum Card in the list.” under “Using the card”. I can’t find such a card and when I tried to manually add the card by typing “custom:vacuum-card”, I get “Custom element doesn’t exist: vacuum-card.”

What am I doing wrong?

denysdovhan · September 21, 2020, 12:07pm

Please, make sure you’ve installed this card properly. Right now it seems like you’ve done something wrong on the installation step since the card is not available for you.

Lucan · September 30, 2020, 5:25pm

I have the exact same problem as @lokety.

I did the installation with HACS so there is more or less nothing I could have done wrong.

Lucan · October 1, 2020, 9:41am

Figured it out. Had to manually Add the Resources to Lovelace. I thought it would be done by HACS…

/hacsfiles/vacuum-card/vacuum-card.js

bussio · October 1, 2020, 4:41pm

How can I get the card to be displayed in a different language?

denysdovhan · October 1, 2020, 8:08pm

Just switch your Home Assistant display language. The card will automatically figure out in which language to display.

gulo101 · October 11, 2020, 8:34pm

Hello

I have a Deebot N95S. Unfortunately on my vacuum, the commands vacuum.start / vacuum.start_pause or vacuum.pause don’t work. It only recognizes vacuum_start and vacuum_stop.

I have created actions for these two and added them to the toolbar and they work. The problem is that it puts them on the right side of the toolbar, but the original “Clean” button is still on the left, and of course it doesn’t do anything. Also once the vacuum starts my custom buttons go away completely. Is there a way to assign custom actions to default buttons, or maybe make all buttons customizable?

Thanks!

tpbillund · October 12, 2020, 8:17am

Hi
First great job.
But can’t get it to see my vacuum cleaner.
It say “Vacuum cleaner not accessible”.

I have a Point Dusty 700, that’s look like an Xiaomi.
Point Dusty 700

Is there someone, that have the same vacuum cleaner or can guide me, what I can try writing in the “entity: vacuum.xxxxx” ?

Arthhh · October 18, 2020, 12:23pm

Looks nice and works! Thank you!

Is there a possibility / a script to clean many selected rooms?
It never let the robot only clean one room and also never all rooms.
It would be perfect, if I could select the Kitchen, the dining room and the living room and when I press the Play Button, it cleans this three areas - like in the Xiaomi App.
I know the segment numbers (Dining room = 16, living room = 17, kitchen = 18, WC = 19, Kids Room = 20, etc)
If I select three rooms and press Play, the Robot should start and clean for exampel segment 16, 17, 18.

Anyone has an idea or a script?

gizzmo · November 9, 2020, 8:06pm

I’m having this strange card info:
2020-11-09_21h01_26
When I open the status card i get more info:
2020-11-09_21h05_15
Anyone an idea? I have a Roomba 696

moostmartijn · November 12, 2020, 8:02pm

I keep getting these error messages in my log, any idea why?

2020-11-12 16:47:41 ERROR (MainThread) [frontend.js.latest.202010214] xxxxx/local/community/vacuum-card/vacuum-card.js:522:37655 Uncaught TypeError: Cannot read property 'states' of undefined
2020-11-12 16:51:10 ERROR (MainThread) [frontend.js.latest.202010214] xxxxx/local/community/vacuum-card/vacuum-card.js:522:73840 TypeError: undefined is not an object (evaluating 'this.hass.states')

            - type: 'custom:vacuum-card'
              entity: vacuum.de_stofzuiger

And these two during restart:

2020-11-12 21:14:52 ERROR (MainThread) [frontend.js.latest.202010214] xxxxx/local/community/vacuum-card/vacuum-card.js:522:37655 Uncaught TypeError: Cannot read property 'states' of undefined
2020-11-12 21:14:52 ERROR (MainThread) [frontend.js.latest.202010214] xxxxx/frontend_latest/chunk.d7ce65414e9c07df6f20.js:2:20908 Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined

read1st · November 30, 2020, 3:07pm

i’m having the same kind of messages Doesn’t seem to be affecting any functionality ( (roborock s6) ) though.

bmorgan · December 2, 2020, 6:35pm

Nice! How do I get the map working? Shark

EDIT: It responds on port 80 with Hello World, but I let blue iris scan it for streaming ports and came up empty. I’m assuming it’ll have to come from aylanetworks where the cloud part resides, and see that others with real skills are already working on it, so I will get out of the way.

huntrm · December 16, 2020, 7:14pm

Can you share a bit more on how this worked? I never got this to function in my custom theme. The buttons for activating the vacuum are hard to see. I installed in the HACS front-end the card-mod frontend. I activated it as a resource in my theme, and when I tried the above code, nothing happened. I also tried to change the background color to red to see if it would do anything, but nadda/zip/nothing happened.

Thank you.

bmorgan · December 17, 2020, 5:17pm

I changed some colors in mine. Needs card-mod.

type: 'custom:vertical-stack-in-card'
cards:
  - entity: vacuum.kajigger
    type: entity
    name: Vacuum
    style: |-
      ha-card {
        font-size 32px;
      }
      ha-icon {
        color: RoyalBlue;
      }
      :host {
        --ha-card-background:
          {% if is_state('vacuum.kajigger', 'cleaning') %} DarkSeaGreen
          {% elif is_state('vacuum.kajigger', 'idle') %} #f2f2f2
          {% elif is_state('vacuum.kajigger', 'paused') %} LightSalmon
          {% elif is_state('vacuum.kajigger', 'stop') %} IndianRed
          {% elif is_state('vacuum.kajigger', 'returning') %} PaleTurquoise
          {% elif is_state('vacuum.kajigger', 'unavailable') %} Pink
          {% else %} WhiteSmoke
          {% endif %}
          ;
      }
  - type: history-graph
    entities:
      - entity: vacuum.kajigger
        name: status
    hours_to_show: 80
    refresh_interval: 0
  - type: 'custom:vacuum-card'
    entity: vacuum.kajigger
    image: /local/travolta.gif
    stats:
      default:
        - attribute: last_error_code
          subtitle: Last Error
        - attribute: last_error_message
    actions:
      - name: Clean Family Room
        service: script.vacuum_clean_family_room
        icon: 'mdi:sofa'
      - name: Clean Dining Room
        service: script.vacuum_clean_dining_room
        icon: 'mdi:silverware'
      - name: Clean Master Bedroom
        service: script.vacuum_clean_master_bedroom
        icon: 'mdi:bed-empty'
      - name: Clean Kitchen
        service: script.vacuum_clean_kitchen
        icon: 'mdi:silverware-fork-knife'
      - name: Clean Study
        service: script.vacuum_clean_den
        icon: 'mdi:desktop-tower-monitor'
    style: |
      ha-card {
        --lovelace-background: white;
      }
      ha-card .preview {
        background: SteelBlue
      }
      .stats {
        background: 
          {% if state_attr("vacuum.kajigger", "last_error_code") == empty and
              state_attr("vacuum.kajigger", "last_error_code") != 0 %} Crimson
          {% else %} SteelBlue
          {% endif %}
          ;
      }
      .header {
      }
      .battery {
      }
      .preview {
      }
      .source {
      }
      .status {
      }
      .status-text {
      }
      .stats-block {
      }
      .vacuum-name {
        font-size: 24px;
        font-family: "Tahoma";
      }
entity: vacuum.kajigger

mr_white · December 30, 2020, 10:12pm

I love this card thank you

I am using a Ecovacs 950

One thing that’s not working is the brush and filter sensors, because they are not attributes. They are integrated as sensors in homeasisstant like sensor.myvacuumcleaner_brush_left.

Is it possible to configure this in the card?

thx

sleuchsi · January 2, 2021, 11:31pm

Hi all,

I’ve manually installed vacuum-card on my HA system and added to resources (yaml-mode).
Now I get the following error in the ui: Custom element doesn’t exist: vacuum-card

In the log file I get this error:

Logger: frontend.js.latest.202011112
Source: components/system_log/init.py:193
First occurred: 00:12:42 (4 occurrences)
Last logged: 00:26:01

http://192.168.2.253:8123/local/vacuum-card.js:1:33 TypeError: Fehler beim Auflösen des Modulspezifierers “lit-element”. Relative Modulspezifierer müssen mit “./”, “…/” oder “/” beginnen.

Has someone an idea what went wrong?