Vacuum Interactive Map Card

Lovely I been looking for something like this just got my gen 1. Some weeks ago

1 Like

Amazing! Works really well. Have a touchscreen in my kitchen and this is 10 times faster than opening the app.
Thanks!

1 Like

@krovachek Great setup!

@caiosweet I am very happy you like it :slight_smile:

@barteke22
Thank you for feedback! Map should be working for all resolutions, it’s hard to say what happened in your case, maybe positions from calibrations were not ideal.
Suggestions:

  • Thank you for this info, I didn’t know about it. Definitely have to introduce limit.
  • Currently order of cleaning is defined by order in configuration, but I also had the same feeling, that it should be ordered according to selection. Added to TODOs :wink:

@Tombstone Be careful, as gen1 sometimes likes to rotate the map, in which case you will have to recalibrate card.

@kabuki I’m happy that my card is useful :wink:

Another thing, perhaps related to my coordinate issue: I normally have my browser cover only part of the screen, so the cards are slightly smaller. Everything works perfectly, since that’s what I configured it for. But when I maximise my browser and the cards become full size, only presets work correctly.

‘Go to’/‘Zone’ mouse click seems to be off. The first image is the smaller window (I clicked in the corridor, and the circle appeared there). Second if fullscreen, clicked the same location. Not a big issue, but can be annoying if you use multiple window sizes across different devices.
s1 s2

The rotation issue exists (rarely) with S5 as well, reports seem to indicate that it only happens with Regular Cleaning.

Unfortunately this is not related to your coordinate issue. Currently size of map image and coordinate transformation are calculated only at load of card, so after resize everything is a mess :(. This card is my first thing written in JS, so not everything is perfect right now.

About rotation of map, I have S55 since October and my map has never rotated.

I see, well, so long as it’s calculated to work with the initial size it should be fine for the most part.

I’ve had mine for a year now and it’s rotated like 50+ times. Though I’ve only recently started using the map saving feature. I think getting better internet coverage and making sure it’s not too close to the wall when it starts cleaning helped as well.

My biggest gripe with map saving is how inefficiently it splits up the cleaning-zones. I pretty much had to set up this to make it worth it. Without map saving for 110m2: 107min. With map saving: 140+min. Map saving + proper zoning: Less than 100min.

I just have implemented your suggestions, check out newest version of card :wink:

  • Fixed card resizing issue (still not perfect, but it is definitely better)
  • Changed order of cleaning in preselected mode
  • Introduced limit for number of zones
1 Like

Amazing…:+1: i like it to work in predefined way

1 Like

Very nice card, but I am using HACS, I can’t seem to import the repo into HACS, probably because it needs multiple files to work. Would you want to consider releasing this on HACS? Or could you bundle the files in a single js like some addons do?

Would be amazing. Great card btw!

1 Like

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

@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

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:

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>

@jimz011

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

3 Likes

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.

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

@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.

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