Vacuum Interactive Map Card

[krovachek (Krisztian Borsi)]

I tried to add the card to HACS but doesn’t work:

[3_14 (Piotr Machowski)]

@krovachek Thank you, it is very nice to hear that you like my solution

• I haven’t tested it, but my idea of solution for selecting zones with input booleans would be something like this:

  - service: vacuum.xiaomi_clean_zone
    data_template:
      entity_id: vacuum.xiaomi_vacuum
      repeats: '{{ states.input_number.vacuum_times.state | int }}'
      zone: 
        {% if is_state('input_boolean.vacuum_room_1', 'on') %}
        - [13954, 14901, 31754, 32751]
        {% endif %}
        {% if is_state('input_boolean.vacuum_room_2', 'on') %}
        - [23954, 24901, 32754, 32752]
        {% endif %}
        {% if is_state('input_boolean.vacuum_room_3', 'on') %}
        - [33954, 34901, 33754, 32753]
        {% endif %}
  

• Unfortunately scrolling is disabled to make drawing zones possible. I think it can be enabled in other modes though.
• Card is already in official HACS repo, you should be able to find it in search. If you insist on adding it manually you have to use following address:
  https://github.com/PiotrMachowski/lovelace-xiaomi-vacuum-map-card
  as HACS doesn’t convert from uppercase itself.

[krovachek (Krisztian Borsi)]

@3_14

• Card is already in official HACS repo, you should be able to find it in search. If you insist on adding it manually you have to use following address:
  https://github.com/PiotrMachowski/lovelace-xiaomi-vacuum-map-card
  as HACS doesn’t convert from uppercase itself.

It is working now, thank you!
I’ll try your script, I’m curious

[jimz011 (Jim)]

I don’t understand what you mean, what is not possible with HA? To have a map like this? Or to have zoned cleaning? Because if it is the latter, this works perfectly fine with HA. I have presets to clean my rooms but I also have this interactive map card.

Edit: about the scrolling @3_14 could you make it that it won’t scroll horizontally as well? I use swipe-card and that works nicely, until I want to draw zones. It is a bit harder within a swipe card as it will try to swipe left/right.

Otherwise this card is really great. Here is an example of what I made.

Jimz011 Xiaomi Vacuum Control Centre

[krovachek (Krisztian Borsi)]

If you check the post what I shared you see what I mean. Have you tried the multiple zoned cleaning with HA automation? Not only one room but 3-4 rooms one after another, without any interuption or without that the vacuum goes back to the dock after every finished zone.
Well I have a Node RED flow to manage it but I’d like to know the HA solution too.
I have a map like your and it is working fine but not able to manage the scheduled multiple room cleaning, (I guess maybe in the future ).

[jimz011 (Jim)]

Ah I understand now. But my bedroom consists of 3 zones and that works without a problem as far as I know. It is a single button yes, but it has 3 zones.

Honestly I haven’t really tried otherwise but to my knowledge the robot gets lost if you set up more than 5 zones at once. I have read that somewhere (can’t remember where though).
Could it be you are trying to clean more than 5 zones at once?

I will play around with this some more as I don’t use Node red and only use HA automations.

[krovachek (Krisztian Borsi)]

My robot can clean all of my zones even timed it, one of them contains 3 zones (the living room) if I use the Node RED flow:

but solution of @3_14 very elegant.

My Node-RED flow:

[krovachek (Krisztian Borsi)]

I give up, I have little knowledge to do this with HA automation or Node RED. I’ve tried lot of syntax but it is failed.

[pergola.fabio]

i am struggling with the map.png, what resolution does it needs to be?

i have an orginal floor plan from the architect, if i take a screenshot/png from it, the zones are just to big, seems it needs to be smaller resolution

how do you guys make the plan with a non-rooted device ?

thnx

[3_14 (Piotr Machowski)]

Component should handle all resolutions, but each calibration is a separate case.
You can try to calculate coordinates of points using method described in this post, maybe it will help:
https://hackernoon.com/how-i-set-up-room-cleaning-automation-with-google-home-home-assistant-and-xiaomi-vacuum-cleaner-9149e0267e6d

Personally I have created map by first sending vacuum to desired points, then screenshotting it in Mi Home and finally cleaning up in Gimp.

[pergola.fabio]

Ok, gonna take the screenshot approach…

Now I have loaded a PDF, but the zone that I use for my kitchen, if I define it, it overlaps the whole plan

[pergola.fabio]

still struggling, with map, i have now idea how to set this up, my code is below, the zones there in the code, those coordinates are actually correct, i use them already now in my automations
but on the map itself, its so huge, seems to be resolution …
i think the red map, is like 1 zone for my kitchen or hallway, but its not that huge like its now in screenshot
the blue lines in pen, those are actual the zones, so the red zone should be like that

how can i adjust this?

for me also not clear what is the base and reference point?

see screenshot how it looks now :

code:

      - type: custom:xiaomi-vacuum-map-card
        entity: vacuum.xiaomi_vacuum
        map_image: '/local/custom_lovelace/xiaomi_vacuum_map_card/map1.png'
        base_position:
          x: 89
          y: 200
        reference_point:
          x: 1625
          y: 1336
        zones:
          - [[25500, 25500, 26500, 26500]]
          - [[24215, 28125, 29465, 32175]]

[3_14 (Piotr Machowski)]

Base position - coordinates of a point (on a image) that maps to position [25500,25500] in vacuum coordinates. It is usually equal or very near to localization of base station.

Reference point - coordinates of a point (on a image) that maps to position [26500,26500] in vacuum coordinates. I should be about 1.5m from base station.

If you use screenshot approach you can first call service:

{
  "entity_id": "vacuum.xiaomi_vacuum",
  "zone": [[25500, 25500, 26500, 26500]],
  "repeats": 1
}

and then make a screenshot. In this case corners of a rectangle shown in Mi Home will mark desired points on a map: base position - near docking station, reference point - on a diagonal from base position.

[pergola.fabio]

ok, i know now what base and ref is
i called that service, so the 2 blue dots are my base and reference

but how to translate it to pixels?

[3_14 (Piotr Machowski)]

You have to fire up Paint/Gimp/any other image editor and read pixel coordinates from it.

[pergola.fabio]

aha, more clear now, ok, gonna install those tools
if my screenshot above is like for example 1000 / 700
then base is around x : 800 , y 600 , ref = = like x 850 , y 650
so starting point x , y , is from left corner below, right?

[3_14 (Piotr Machowski)]

Pixel (1,1) is in upper left corner.
Coordinates for attached picture:

base_position:
  x: 782
  y: 130
reference_point:
  x: 848
  y: 66

[pergola.fabio]

perfect, working now, thnx for the info!!

[pergola.fabio]

2 more questions, in the combobox, there are 3 modes:
gototarget ,zoned cleanup, zones

i dont use gototarget , can i remove it from the selection and make 1 of the other 2 as default?

[3_14 (Piotr Machowski)]

It is already answered above:

Vacuum Interactive Map Card

It seems to work, but can’t test if it functions correctly atm, might need to clear browser cache: If you want a specific choice to be autoselected on start (I have Zones since that’s the most useful for me) add selected=“0” (or 1, 2 depending on choice you want) to paper-dropdown-menu and paper-listbox like below: <div class="dropdownWrapper"> <paper-dropdown-menu selected="0" label="${textMode}" @value-changed="${e => this.modeSelected(e)}" class="vacuumDropdown"> <paper-listbox s…

You can remove any item from <paper-listbox>