Thanks!
I plan to add all my custom components and cards to HACS, probably next week.
1 Like
Good job! This was awesome! Works like a charm.
Is there any way of setting the size of the map? Or do I just have to make the png a bit wider and recalibrate? The mode-selection goes just below the screen in my iPhone and I would like it to be on one screen.
And another question, can I make the “Zones” option in the mode pulldown menu the default instead of “Go to target”?
/Fredrik
Nice 
Btw, I was considering something: Instead of limiting the zones to 5, you could extend them with an automation. However I can’t come up with a good way to make it indefinite (infinite), or how to transfer zone data from your card to the automation.
So for now, this is my default cleaning schedule, which works out perfectly as my house is only 10 zones total. The automation sends the vacuum to do the first 5 zones, and turns on the next automation, which then does the next 5 (once the vacuum’s done) and turns itself off.
Maybe you can come up with some way to integrate this with your card, if possible?
- alias: Cleaning Schedule
trigger:
platform: time
at: 08:00:00
condition:
- condition: time
weekday:
- tue
- thu
action:
- service: vacuum.send_command
data:
entity_id: vacuum.xiaomi_vacuum_cleaner
command: app_zoned_clean
params: [[18886,25222,26286,30672,1],
[13872,25643,18822,27343,1],
[12928,23433,13828,26983,1],
[10026,27149,15426,29649,1],
[9978,29732,15378,32532,1]]
- service: automation.turn_on
entity_id: automation.clean_next_5_zones
id: 868c183f0311496f812d5c3f4771303a
- alias: Clean next 5 zones
initial_state: 'off'
trigger:
platform: state
entity_id: vacuum.xiaomi_vacuum_cleaner
from: 'cleaning'
to: 'returning'
condition:
condition: template
value_template: "{{ state_attr('vacuum.xiaomi_vacuum_cleaner', 'battery_level') > 19 }}"
action:
- service: vacuum.pause
data:
entity_id: vacuum.xiaomi_vacuum_cleaner
- delay: '00:00:01'
- service: vacuum.send_command
data:
entity_id: vacuum.xiaomi_vacuum_cleaner
command: app_zoned_clean
params: [[15294,28996,18144,31296,1],
[13867,32540,19817,36890,1],
[11034,32889,13884,36939,1],
[14460,23095,19410,25645,1],
[21386,22704,25486,25154,1]]
- service: automation.turn_off
entity_id: automation.clean_next_5_zones
@Dernebo I’m not sure what you mean by setting size of map. Could you share a screen of your issue?
To change order of options in dropdown you have to reorder them in paper-listbox:
<div class="dropdownWrapper">
<paper-dropdown-menu label="${textMode}" @value-changed="${e => this.modeSelected(e)}" class="vacuumDropdown">
<paper-listbox slot="dropdown-content" class="dropdown-content">
${preselected}
<paper-item>${textGoToTarget}</paper-item>
<paper-item>${textZonedCleanup}</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
@barteke22 I am not sure if it is possible to do this in UI, but will think about it 
. One hint: you can do it in single automation using wait_template https://www.home-assistant.io/docs/scripts/#wait
The reason they’re separate is that I don’t want the second part to trigger under other conditions, this way the second part is only on when the first automation triggers (tue+thu at 8am).
And if I want to abort the cleanup I just need to add ‘automation off’ services to my ‘return to dock’ buttons. Maybe there’s some cleaner way to do it, but this works well enough
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 selected="0" slot="dropdown-content" class="dropdown-content">
${preselected}
<paper-item>${textGoToTarget}</paper-item>
<paper-item>${textZonedCleanup}</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
I have tried your cards lot of times and the different way of cleanigs are work perfectly.
This is the best method that I have seen so far.
What would the code look like if it was written in a HA programming?
I mean if I select rooms with imput booleans for example the the robot cleans the selected areas continously without any break. It is working with node red almost but nobody has solved it with HA automation so far. Please check this tread for example:
I have only one issue with the card: I can not scroll the screen if the pointer is on the map picture.
@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.
It is working now, thank you!
I’ll try your script, I’m curious 
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.
1 Like
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 ).
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.
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:
2 Likes
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.
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
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.
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
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]]