Vacuum Interactive Map Card

I have 2 floors, I have a Roborock Q7 Max which supports multiple maps. However, the room numbers are reused accross the floors (ie, Room 18 is the bedroom on one map, the kitchen on another).

By using a sensor to derive the floor from the calibration points, I can say that if Room 18 is Kitchen if the vacuum is downstairs, or bedroom if the vacuum is upstairs.


Hello, what do I have to change or is it even possible to adapt a map as shown in the picture? I would like to have the map and the control side by side. Since I am using it on a 10" touch panel

Hey @3_14 , hell of a job with this card. Well done.

I have a question though…
My map modes menu doesn’t open where it’s supposed to. As a matter of fact it pops-up all over the place. How can I solve this?

Screenshot_1

Here’s an example.

Thanks!

Unfortunately you can’t :frowning: I have to rewrite it again

Oh, that’s ok. No problem. Thanks for the reply! :wink:

Hi,
where do I have to install the follow_path.yaml

Thank you!

It is a script. You add it via UI editor, just remove the first line and name the script “vacuum follow path”

1 Like

does this work with Wyze vacuums?

Which integration do they use?

I’m using “Simple Wyze Vacuum” to make the vacuum work in HA, works great and have pretty much full control, minus the live map for now.

Here it is: GitHub - romedtino/simple-wyze-vac: Home Assistant Custom Component for Wyze Vacuum

It should be doable. You can create a feature request in the card repo

1 Like

Done! Filled it out best I could. Support Wyze Robot Vacuum · Issue #506 · PiotrMachowski/lovelace-xiaomi-vacuum-map-card · GitHub

Is there a way to hide all the tiles below the card so it just looked like this?

Thanks for that card :slight_smile:
I am still working on the dashboard, but the Card map is really a “must have”

1 Like
1 Like

Thanks for this! It deleted the tiles but for some reason now doesn’t open then menu when I click ‘zone cleanup’ below. It just flashes but doesn’t bring up the menu, any idea why this might be happening?

Code below:

          - type: custom:xiaomi-vacuum-map-card
            style: |
              ha-card {
                border-radius: var(--border-radius-bar);
                box-shadow: none;
                --map-card-primary-color: rgba(var(--color-teal),0.5);
                --map-card-secondary-color: rgba(var(--color-teal),0.2);
                --map-card-zoomer-background: rgba(var(--color-teal),0.05);
                --map-card-room-icon-color: rgb(var(--color-grey));
                --map-card-room-icon-color-selected: rgb(var(--color-teal));
                --map-card-predefined-point-icon-color: rgb(var(--color-grey));
                --map-card-predefined-point-icon-color-selected: rgb(var(--color-teal));
              }
            entity: vacuum.robot
            map_source:
              camera: camera.xiaomi_cloud_map_extractor
            vacuum_platform: default
            tiles: []
            calibration_source:
              camera: true
            map_modes:
              - template: vacuum_clean_zone
              - template: vacuum_goto 
              - template: vacuum_goto_predefined
                predefined_selections:
                  - position: [ 28450, 32820 ]
                    icon:
                      name: "mdi:trash-can"
                      x: 28450
                      y: 32820
              - template: vacuum_clean_segment
                predefined_selections:
                  - id: 1
                    icon:
                      name: "mdi:bunk-bed"
                      x: 33500
                      'y': 31600
                  - id: 2
                    icon:
                      name: "mdi:toilet"
                      x: 30750
                      'y': 32000
                  - id: 16
                    icon:
                      name: "mdi:fridge"
                      x: 28500
                      'y': 30200
                  - id: 19
                    icon:
                      name: "mdi:food-turkey"
                      x: 24550
                      'y': 30000
                  - id: 20
                    icon:
                      name: "mdi:bed-king"
                      x: 18000
                      'y': 26000
                  - id: 21
                    icon:
                      name: "mdi:bed-single"
                      x: 31500
                      'y': 26000
                  - id: 22
                    icon:
                      name: "mdi:sofa"
                      x: 22900
                      'y': 26000
                  - id: 23
                    icon:
                      name: "mdi:airballoon"
                      x: 28000
                      'y': 26000

Maybe it’s rendered somewhere else on the page? (Known issue with this menu) is there anything in browser’s console?

Hi There @3_14 - dude you card is sick!

Im trying to get the points calibrated from my Roborock s7 (it on the Mi home app).

I have setup the card and done all of the setup (map extractor etc)

When I try to generate the rooms (they boxes seem to overlap). How do did you manage to get map so well in your example. Im sure im missing something simple…

You have to treat these boxes as a starting point, now you can adjust outlines manually: