[Custom Card] Dreame Vacuum Map Card - A Native App-Like Experience

Share your Projects! Dashboards & Frontend
1

Dreame Vacuum Map Card

GitHub link: GitHub - noambergauz/dreame-vacuum-map-card: Dreame Vacuum Map Card for Home Assistant Integration · GitHub

Hey everyone!

I’ve been working on a custom Lovelace card for Dreame vacuum cleaners, and I’m excited to share the first version with you all.

While existing map cards are great, I wanted something that felt closer to the native Dreame app experience—smoother animations, better visuals, and easier control directly from the dashboard.

Features

  • Native Look & Feel: Designed to mimic the official Dreame app UI.
  • Live Map Updates: Real-time position tracking with smooth rendering.
  • Room Cleaning: Easily select specific rooms to clean.
  • Zone Cleaning: Support for zone selection (coming/in-progress).
  • Custom Theming: Supports both Light and Dark modes.
  • Performance: Built with React & TypeScript for a snappy experience.

Screenshots

Main Screen
Main Screen838×746 242 KB

Requirements

This card is designed to work best with the Dreame Vacuum Integration by Tasshack. Make sure you have that set up first!

Installation

Option 1: HACS (Custom Repository)

  1. Open HACS.
  2. 3-dot menu > Custom repositories.
  3. Add the GitHub URL
  4. Type: Dashboard.
  5. Click Add and then install the card.

Option 2: Manual

  1. Download dreame-vacuum-map-card.js from the (noambergauz/dreame-vacuum-map-card/releases).
  2. Upload it to your /config/www/ folder.
  3. Add the resource in your Dashboard settings (/local/dreame-vacuum-map-card.js).

Configuration

Add a manual card to your dashboard and use the following configuration:

type: custom:dreame-vacuum-map-card
entity: vacuum.your_robot_name
map_entity: camera.your_robot_map_entity
# Optional settings
theme: dark # or 'light'

Known Issues

  • Zone cleaning is broken
7 Likes
2

Nice job. - But how do i get the colored mad ?
i only see the option to get the greyd map that keeps updating.
its not looking like the images you show, and its without room names.

3

Well done! Finally a dreame card that resembles all the features in a neat ui.

Would it be possible for you to also add the cleaning cycles button that opens in the oem app when in room cleaning mode? Or is it there but I haven’t found it, yet? I’m using this quite a lot in the original app.

1 Like
4

Thank you so much for a great card!. The battery indicator is not working as expected. It shows 0% no matter what. I am not a coder but do you know how I can fix this?

1 Like
5

This is great. I was just about to make a dashboard for room cleaning for my vacuums. This works great.

One quick question. Is there a way to rotate the map?

6

Great card!!!

If I may, I’d like to suggest a couple of possible improvements:

  • Hide the map selector when only one map is available, or allow forcing it to be hidden

  • I’m currently unable to select rooms for manual cleaning on x40 ultra

many thanks

1 Like
7

Excellent work! I have an L50 Ultra and for some reason i'm unable to select any rooms from the map. I can select them from the "List" option and it recognizes the correct rooms. Do i need to manually add some parameters to the card yaml-file, or is there a bug that is preventing the room selection via the map to work?

image
image942×1550 205 KB

8

I think you have to configure first time on Dream APP and then this info will go to Home assistant by dreame integration.

9

It’s amazing. So grateful. I too would
Like to hide the map

10

Fantastic work. Thank you!

2 suggestions from me.

1)Hide the Map dropdown if only 1 map

2)My vacuum name appears twice on the same line. I’m not sure why this could be. Is it possible to elect to hide elements of the card?

11

Add this to ur card

card_mod:
  style: |
    /* Hide Home dropdown */
    .map-selector {
      display: none !important;
    }

    /* Hide title */
    .header__title {
      display: none !important;
    }
12

Really nice integration! Couldn't figure out whether i can add multiple zone rectangles to create custom zone cleaning shapes.

13

Is there a bug in the card? Every time if I select a room and click “Clean” if defaults back and does not start a clean at all. I now only have a nice view but cannot start a clean! Other settings do work though.

Guess wrong topic? https://dvc.tasshack.com/ is the one I use.