Vacuum Interactive Map Card

dshokouhi · October 10, 2019, 8:22pm

so something like this?

{'boundaries': [
{'id': '4019e52b-b7bc-421f-906f-1a2216497e9e', 'type': 'polygon', 'vertices': [[0.3084, 0.4941], [0.5523, 0.4941], [0.5523, 0.7917], [0.3084, 0.7917]], 'name': 'Kitchen', 'color': '#FFC974', 'enabled': True},
{'id': '1003749a-03b7-4c84-bb40-b3f3ae0a1a51', 'type': 'polygon', 'vertices': [[0.6128, 0.3406], [0.7199, 0.3406], [0.7199, 0.6028], [0.6128, 0.6028]], 'name': 'Hallway', 'color': '#E06A83', 'enabled': True},
{'id': '1c00cf6d-1b50-4e1b-a552-62f8c4fd9fe2', 'type': 'polygon', 'vertices': [[0.2891, 0.1676], [0.6256, 0.1676], [0.6256, 0.4918], [0.2891, 0.4918]], 'name': 'Living room', 'color': '#7BB472', 'enabled': True}]}

I can at least provide instructions to grab this map data for users

3_14 · October 10, 2019, 8:53pm

Exactly!

Could this JSON be returned in device_state_attributes?

dshokouhi · October 10, 2019, 8:59pm

So when I tried to add zone cleaning the first time around it was denied as they did not want the zone ID in device_state_attributes not sure about the coordinates though. Instead we opted to use the name the user setup in the app which was a cleaner implementation.

@Santobert what are your thoughts on this? We already grab the boundaries in the update call but I am not sure if we can store that data in the state system. Here is the PR that talks about providing the data in a websocket call instead of the state which I am not sure how to do: https://github.com/home-assistant/home-assistant/pull/19835

3_14 · October 10, 2019, 9:23pm

I think possibility to get zones data using websocket api is a nice solution to avoid adding unnecessary data in devices state.

After quick research I have found example of websocket call that could be followed in this case:
https://github.com/home-assistant/home-assistant/blob/4b8a35dffb003e593480a0213252794afc155407/homeassistant/components/media_player/init.py#L216

Santobert · October 11, 2019, 3:28pm

I agree with the opinion of balloob. This information is not really part of the device’s state. But I’ve never used websockets yet, so I can’t help here without doing some research.

MarkR · October 20, 2019, 9:08am

I’m really struggling to get this to work… I used the zone points from both floe and debug, but my zones are not even close to being the right size… any ideas please?

type: 'custom:xiaomi-vacuum-map-card'
entity: vacuum.renvac
debug: true
map_image: /local/map.png
calibration_points:
  - vacuum:
      x: 25500
      'y': 25500
    map:
      x: 358
      'y': 631
  - vacuum:
      x: 26800
      'y': 25200
    map:
      x: 282
      'y': 669
  - vacuum:
      x: 29500
      'y': 19500
    map:
      x: 688
      'y': 1109
zones:
  - - - 25246
      - 19577
      - 30062
      - 25931

3_14 · October 20, 2019, 9:31am

2 suggestions here:

I think that your second point has incorrect x coordinate in map section
for best results place calibration points on a rectangle corners (e.g. using zoned cleanup). Try to draw as big rectangle as possible.

MarkR · October 20, 2019, 11:30am

thanks… I started again and I’m not much further forward… except I have less hair now… Any more pointers please? I have changed the image, I would prefer it rotated as it doesn’t fit on card very well vertically… but I got even more confused then… map attached I am using I know the zone is right as I just tested that.

type: 'custom:xiaomi-vacuum-map-card'
entity: vacuum.renvac
debug: true
map_image: /local/map.png
calibration_points:
  - vacuum:
      x: 25500
      'y': 25500
    map:
      x: 45
      'y': 45
  - vacuum:
      x: 27800
      'y': 22050
    map:
      x: 290
      'y': 404
  - vacuum:
      x: 30700
      'y': 14200
    map:
      x: 580
      'y': 1175
zones:
  - - - 24929
      - 11442
      - 27679
      - 15192

The area I am wanting as the zone is “circled”

MarkR · October 20, 2019, 5:32pm

or can I rotate the map image manually and then erm try to calibrate it, so it is rotated 90 degrees from the actual map on the phone app? ? I think I am making this far more complicated than I need to do… as usual

3_14 · October 20, 2019, 6:06pm

The easiest way is to rotate the image, but you have to calibrate it again after rotation

MarkR · October 20, 2019, 6:08pm

thank… I love this if I can get it to be calibrated :S

3_14 · October 20, 2019, 8:54pm

By following these steps you should achieve the best result:

In FloleVac in “zoned cleanup” mode draw as big zone as possible (green rectangle on a photo below)
As a calibration points choose three corners of rectangle from step 1
By choosing points like described in step 2 coordinate x of points 1 and 3 should be the same and coordinate y of points 2 and 3 should be the same

image672×1470 122 KB

MarkR · October 21, 2019, 7:26am

truly genius thank you… I have even rotated the map and got it to work. Thank you for the detailed reply and thank you for what is a brilliant card… This is just what I have been looking for… now time to clean up the map and label it

3_14 · October 21, 2019, 4:11pm

I plan to create a video tutorial for calibration procedure, it should help future users

Abeksis · October 22, 2019, 3:28am

it will be wonderful

n0ir · October 24, 2019, 10:30pm

I think I’m a bit confused. I’m not really getting how to express the coordinates… :S

I have used the FloleVac app to add a large zone on top of my map:

I get these coordinates:

[[23162,25106,29812,34856,1]]

In another thread I read that the coordinate order is [bottom-left-x, bottom-left-y, top-right-x, top-right-y]. Is this right?

Am I correct in assuming that the top left corner in the picture above have the coordinate X=23162 and Y=34856? The bottom right corner have coordinate X=29812 and Y=25106?

If I place the cursor on the image (in Paint.net) at the same place as the top left corner in the selection I get the coordinates 49,144. Does this mean the map coordinates should be X=49 and Y=144 if I use this specific image for the card?

3_14 · October 24, 2019, 10:58pm

It seems correct, you can make yourself sure by enabling “go to target” mode in FloleVac, select chosen corner and hold start button.

Exactly, you have to check these coordinates for 2 other points and calibration process is done

RAUS · October 29, 2019, 10:19am

Just bit curious about this. When will we get video. It will make thing easy for we new users. Thanks

3_14 · October 29, 2019, 10:49am

I am afraid it will take some time, I have a lot of things on my head right now.

For now the easiest way would be to follow instructions in this post:

RAUS · October 31, 2019, 12:26pm

Thanks @3_14. Configured card as per instructions. It’s working… Amazing work!!!

Looking forward to get more updates on this. Awesome card… Great work…