Vacuum Interactive Map Card

Share your Projects! Dashboards & Frontend
,
32

Nice :slight_smile: 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
33

@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 :wink: . One hint: you can do it in single automation using wait_template https://www.home-assistant.io/docs/scripts/#wait

34

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 :slight_smile:

35

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>
36

@jimz011

Well, it took some time, but I have finally added this card to official HACS repo :slight_smile:

3 Likes
37

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.

38

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

image
image1729×352 16.2 KB

39

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

  • 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.
40

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

41

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
42

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 :slight_smile: ).

43

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.

44

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:

image
image794×858 168 KB

but solution of @3_14 very elegant.

My Node-RED flow:

image
image1408×619 91.6 KB

2 Likes
45

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.

46

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

47

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.

48

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 :wink:

49

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]]
50

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.

51

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?