Add possibility to set the floor plan in the background

[pax2011]

I would like to add the map of my house in the background, so that the path of robots are drawn on my map. Maybe setting a fixed point for the charging dock so you can maintain a correct orientation.

[TheLastProject]

So, this would just be a background image that you manually created to be displayed below the map, right? Just making sure.

[pax2011]

Yes exactly!
It would also be nice to be able to click the different cleaning areas, but I don't know if it's possible to integrate this.

[pax2011]

Look at this https://medium.com/@hans.oischinger/zoned-cleanup-with-live-map-922240b4cf8c

[TheLastProject]

A single background image would be easy. Different areas are more difficult. But it could be interesting. Maybe I should start with letting people define areas, and then letting people set a picture as background for each area. That way I could ensure pretty good integration of this all

[pax2011]

It seems a nice solution

[TheLastProject]

Sadly, this will have to wait a bit, because my Valetudo locks up when I try to create a zone: Hypfer/Valetudo#344.

After that though, my plan is as follows:

1. Getting all zones from Valetudo and drawing borders around them on the map of this card
2. Allow setting things about zones (like colour or background image)
3. Maybe later, allow selecting them for starting a cleanup

[TheLastProject]

Valetudo doesn't yet expose this in MQTT, so this would require calling the API and wouldn't work for MQTT users. So that needs to change first.

[TheLastProject]

https://github.com/TheLastProject/lovelace-valetudo-map-card#displaying-as-overlay may help you. I guess it kinda solves your issue but I still want to add support for zones anyway so I'm leaving this open.

[jbabio]

Hi!, Thank you for your gretat work, I'm trying to overlay the vacuum map on my floorplan and detected an awkward behavior of the scaling.
If I scale the vacuum map to fit my floorplan as seen on a PC, the vacuum map appears bigger, and offset, when viewed on the HA app on the Phone.

I'm attaching an image with the comparison.

My config:

  - type: custom:valetudo-map-card
    entity: camera.map_data
    show_floor: false
    background_color: transparent
    wall_opacity: 1
    segment_opacity: 0
    map_scale: 2.32
    icon_scale: 0.8
    vacuum_color: black
    crop:
      top: 0
      bottom: 0
      left: 25
      right: 0
    min_height: 0
    style:
      top: 43%
      left: 56%

Currently I'm using the "style" property to position the map, but I was using left-padding whith simmilar results. The issue apears to be related to the "map_scale" property not scaling with the same proportions as the background.

Regards.

[AngellusMortis]

It would actually be really cool to get some integration between Valetudo and HA Floorplan.

That way I can overlay the robot path/location onto the floorplan and just use that single card.

[rjcds]

https://github.com/TheLastProject/lovelace-valetudo-map-card#displaying-as-overlay may help you. I guess it kinda solves your issue but I still want to add support for zones anyway so I'm leaving this open.

Hi I'm trying to get the map with floorplan overlay working as per the docs, however only the floorplan is showing...

type: picture-elements
elements:
  - type: custom:valetudo-map-card
    entity: camera.valetudo_robotname_map_data
    show_floor: false
    background_color: transparent
    map_scale: 0.8
image: /local/floorplan.png

The only camera entity I have is as above (not camera.map_data as in the docs)

The valetudo-map-card itself works fine in another card

Is there something else I should be doing ?

[coxtor]

https://github.com/TheLastProject/lovelace-valetudo-map-card#displaying-as-overlay may help you. I guess it kinda solves your issue but I still want to add support for zones anyway so I'm leaving this open.

Hi I'm trying to get the map with floorplan overlay working as per the docs, however only the floorplan is showing...

type: picture-elements
elements:
  - type: custom:valetudo-map-card
    entity: camera.valetudo_robotname_map_data
    show_floor: false
    background_color: transparent
    map_scale: 0.8
image: /local/floorplan.png

The only camera entity I have is as above (not camera.map_data as in the docs)

The valetudo-map-card itself works fine in another card

Is there something else I should be doing ?

I had the same issue, it shows, but it is hidden telling you about an undefined camera (you will find it if you inspect the DOM in your browser), anyway this configuration works for me:

  - type: picture-elements
    image: /local/img.png
    elements:
      - type: 'custom:valetudo-map-card'
        vacuum: valetudo_robot
        title: ""
        show_floor: false
        show_walls: false
        show_locate_button: false
        show_start_button: false
        show_battery_level: false
        show_status: false
        rotate: -90
        background_color: transparent
        map_scale: 2.1
        icon_scale: 1.5
        path_opacity: 1
        path_color: "#000"
        min_height: "1w"
        card_mod:
          style: |
            :host {
              position: relative;
              top:48%;
              left:42.5%;
              }