Xiaomi Cloud Vacuum Map Extractor

Share your Projects! Custom Integrations
535

I am quite a new person in this topic - please tell where I could make a mistake.

Task - show a Roborock S50 map on a floorplan.
Here is a card with a floorplan:

      - type: custom:decluttering-card
        template: decl_plot_plot_2d
        variables:
          - ...
          - MAP_NEW_ELEMENTS:
              - type: image
                camera_image: camera.xiaomi_cloud_map_extractor
                style:
                  top: 50%
                  left: 50%
                  transform: translate(-50%,-50%) scale(1,1)

The flooplan itself is done by some decluttering-card, then the camera image with a Xiaomi cloud map is added as one more image element.
The key points are top, left & scale.

By default the Xiaomi cloud map comes with these attributes:

    map_transformation:
      scale: 1
      rotate: 0
      trim:
        top: 0
        bottom: 0
        left: 0
        right: 0

The result is below:

image
image938×765 36.3 KB

Then we need to trim & rotate the image.
The element in a red circle is supposed to be moved to the left top corner of the floorplan.

To trim, the following steps are made:

  1. The picture above was opened in Adobe Photoshop.
  2. The picture is cropped, only map is left:
    image
    image1920×1127 192 KB
  3. First set image width = 1000px, then measure left & top margins by a “Ruler” tool:
    right 302px, left 272px
  4. Then set image height = 1000px, then measure top & bottom margins by a “Ruler” tool:
    bottom 308px, top 233px

Then edit the camera properties (with colors changed):

    map_transformation:
      scale: 3 #avoid blurred picture
      rotate: 90 ## counter-clockwise
      trim:
        top: 23 ### i.e. rounded 233/1000
        bottom: 31
        left: 27
        right: 30
    colors:
      color_map_outside: [0, 0, 0, 0]
      color_map_wall: [0, 255, 0, 85]
      color_path: [255, 255, 255, 127]
      color_charger: [246,178,107]
      color_robo: [255, 0, 0]
      color_scan: [0, 255, 0, 30]

And then a Lovelace card:

      - type: custom:decluttering-card
        template: decl_plot_plot_2d
        variables:
          - ...
          - MAP_NEW_ELEMENTS:
              - type: image
                camera_image: camera.xiaomi_cloud_map_extractor
                style:
                  top: 49.2%
                  left: 58.4%
                  transform: translate(-50%,-50%) scale(2.38,2.42)

The result is below:

image
image930×758 62.9 KB

Questions:

  1. Is it normal that “walls” in the vacuum’s map do not coincide with actual walls? (basically the plot is 99% correct). BTW, this is why I had to use different scaleX, scaleY for scaling.
  2. I realized that the color_scan property stands for “inside” color; it is specified in the Docs that this property is “Areas not assigned to any room (for software with rooms support)”. But also I used the color_map_wall which is “Walls (for software without rooms support)”. So it is “with support” vs “without support”, where could be a mistake?
  3. The main question - what will happen when I start the Roborock again, will it redraw the map? Or will it keep same map, same proportions - i.e. I will not have to tune my pictures once again?

My next step is to add a Xiaomi Vacuum Interactive Map Card on this floorplan. Have no idea what problems I will face then…