Map / card background transparency

[YannickEvH]

Hi and first of all thanks for this great vacuum map card and your help.

I am completely new to home automation in home assistant and started working on my dashboard.

I got it somehow working to have the vacuum map as an overlay in top of my floorplan using a picture elements card, but I can't figure out how to set the black background image of the vacuum card to transparent.

My code looks like this:

type: picture-elements
image: /local/images/floorplan/FloorplanBG.png
dark_mode_image: /local/images/floorplan/FloorplanBG.png
layout_options:
  grid_columns: 11
  grid_rows: auto
elements:
  - type: custom:xiaomi-vacuum-map-card
    style:
      top: 43%
      left: 49%
      width: 83%
      height: 76%
      opacity: 50%
    map_source:
      camera: camera.x40_ultra_complete_map
    calibration_source:
      camera: true
    card_mod:
      style: |
        #map-zoomer-overlay > div:nth-child(1) {
          left: 0;
          right: unset;
        }
    tiles: []
    icons: []
    map_modes: []
    entity: vacuum.x40_ultra_complete
    vacuum_platform: default
    map_locked: true
  - type: state-badge
    entity: light.esstischlampe
    style:
      top: 82%
      left: 24%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

I dropped the control buttons (only the lock is left, can't figure out how to remove it) because I want to add them in later directly in the dashboard. I now have just the map and the live activity of the Dreame which works perfectly.

EDIT:

Using just the vacuum map card it was possible to make the background transparent using the following code (I think). But I can't get this to work with the picture elements card.

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.x40_ultra_complete_map
calibration_source:
  camera: true
card_mod:
  style: |
    ha-card {
      --ha-card-background: ….
      --ha-card-shadows: false
      --map-card-room-outline-line-color: rgb(155, 87, 148, 0);
      --map-card-room-label-color: rgb(255, 255, 255);
      --map-card-room-label-color-selected: rgb(255, 255, 255);
    }

    #map-zoomer-overlay > div:nth-child(1) {
      left: 0;
      right: unset;
    }
     ha-card {
      --map-card-zoomer-background: rgba(155, 130, 131, 0.0);
    }

Can you help me out here?

Thanks a lot.

Regards

[PiotrMachowski]

Hi!
If you want to just show the map without actually using any features of the map card then I think it would be easier for you to display just an image from the camera instead. The potential problem is that map image itself is not transparent (probably), so it would still interfere with the floorplan below it.

[YannickEvH]

All right, thanks a lot! I will try this out. So I have to use camera.x40_ultra_complete_map as Image?

For the alpha I wanted to just use a custom one to cut away the black parts around my rooms, not dynamically around the drive path of the vacuum. You think this is possible somehow?

Thanks again for your time and help.

[YannickEvH]

Finally I figured it out!

The way to do this was to use the plugin 'hui-element' in combination with the plugin 'card-mod' from hacs.

With hui-elements it was possible to add the camera as a picture-entity within the picture-elements card, which was not possible before.
With card-mod I could set the map background to transparent which works perfectly now.

Next step will be to reduce the opacity of the room floors if this is possible, then I will start to add the other basic devices like lights and speakers to the map and get rid of the dummy light switch.

But for now I am more than happy. :D

This is the final code:

type: picture-elements
image: /local/images/floorplan/FloorplanBG.png
dark_mode_image: /local/images/floorplan/FloorplanBG.png
layout_options:
  grid_columns: 11
  grid_rows: auto
elements:
  - type: custom:hui-element
    style:
      top: 51%
      left: 49%
      width: 83%
      height: 76%
      opacity: 75%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: ….
        }
    card_type: picture-entity
    camera_image: camera.x40_ultra_complete_map
    entity: vacuum.x40_ultra_complete
    show_state: false
    show_name: false
    camera_view: auto
  - type: state-badge
    entity: light.esstischlampe
    style:
      top: 82%
      left: 24%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

Once more: Thank you @PiotrMachowski for your plugin!

Regards

[PiotrMachowski]

I think image element would be a better solution to use inside picture-elements card (it doesn't use non-standard plugins, so it would be more stable).

type: picture-elements
image: /local/images/floorplan/FloorplanBG.png
dark_mode_image: /local/images/floorplan/FloorplanBG.png
layout_options:
  grid_columns: 11
  grid_rows: auto
elements:
  - type: image
    style:
      top: 51%
      left: 49%
      width: 83%
      height: 76%
      opacity: 75%
    camera_image: camera.x40_ultra_complete_map
    entity: vacuum.x40_ultra_complete
    filter: none
    camera_view: auto
  - type: state-badge
    entity: light.esstischlampe
    style:
      top: 82%
      left: 24%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

Once more: Thank you @PiotrMachowski for your plugin!

You doesn't use it anymore, but you're welcome 😁

[YannickEvH]

I swear I tried to use the image solution but couldn't get it to work for some reason and gave up ending with google search and my mentioned way to do this... It looks so easy now and (of course) works.

And I will use your vacuum controls, but I will add them either to the side of the map or under it in specific conditions, I dont want them to be visible the whole time.

[PiotrMachowski]

Sounds great 👍