Static map image with live paths

[jfsaturos]

Description

It should be awesome have the possibility of add an static image and see on there the Xiaomi Vacuum position and cleaning path.

Solution

Add cleaning path on a static image.

Alternatives

No response

Context

No response

[17kisern]

+1 for this request. I use the Floorplan provided by my builder as the static image, and have calibrated it so the rooms and zones are correctly positioned. Perhaps the map_source field could take in a list of objects, and each object has it's own calibration_points? Hopefully that would be enough data for have them properly overlap.

[Misiu]

I'm wondering if the vacuum has the current position as an attribute or if can we get the position somehow. If yes, then this can be moved forward.

[PiotrMachowski]

@Misiu it doesn't. Map Extractor can retrieve it though

[theres]

@PiotrMachowski maybe we can set background/wall colors in Map Extractor to transparent and draw this camera over static image?

[PiotrMachowski]

@theres https://github.com/PiotrMachowski/Home-Assistant-custom-components-Xiaomi-Cloud-Map-Extractor/issues/39

[Cellivar]

I use the valetudo_vacuum_card with card mod to accomplish this.

cards:
  - entities:
      - name: Hygieia
        type: weblink
        url: http://valetudo-wealthyacademicgrouse.local/
    type: entities
    show_header_toggle: false
    card_mod:
      style: |
        div {
          font-size: 19px
        }
  - type: custom:xiaomi-vacuum-map-card
    map_source:
      camera: camera.hygieia_camera
    calibration_source:
      camera: true
    entity: vacuum.valetudo_hygieia
    vacuum_platform: Hypfer/Valetudo
    internal_variables:
      topic: valetudo/Hygieia
    map_locked: true
    card_mod:
      style: |
        #map-zoomer-content {
          background: var(--map-card-zoomer-internal-background);
          background-image: url(/local/floorplans/ground_floor_crop.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
type: vertical-stack

The really annoying part is figuring out the vacuum's map crop settings, as you have to make sure that vacuum's map image is scaled perfectly to layer on top of the floorplan image. It required a lot of "change this by 5 pixels" again and again to get it just right. By reducing the transparency down low I can still see the segment colors.

The magic part here is that #map-zoomer-content background image. By setting that object's background image to my floor plan image it will follow the map around as you move and zoom.

If you were so inclined @PiotrMachowski I suspect it wouldn't be very difficult for you to add a background-image-url YAML parameter to make it easier for other folks. I also understand if you think this card isn't the place for that and you'd rather it be part of the map-camera-providing systems instead.