Vacuum Interactive Map Card

Share your Projects! Dashboards & Frontend
,
100

Thank you. I’ll give it a try.
It works!

101

It’s still possible to select more than 5 zones because zones that you put in the same row in the config is considered as one zone, is this fixeable?

102

I just made the map more square-like and uploaded that to HA. Then recalibrated the map and it works on iPhone as well.

Tho, for me I see no use for the go-to feature and even the manual zone-drawing. I am only using the preconfigured zones. it would be great if it was possible to set the Zones-view as default in an easier way than editing the code. And I guess the zone-drawing is the reason why you can’t scroll the card while holding the finger on the map. All of this would be great if it was configurable.

103

@Maximus97 It should be, I will try to fix it

@Dernebo I will try to make it configurable :slight_smile:

104

Hi,

I would like to use this card but am confused as to installation.
Using the instructions on github I downloaded the files

I don’t have a ui-lovelace.yaml file to insert the resources. Not sure how to close this gap.

Thanks,
Dennis

Error message
Custom element doesn’t exist: xiaomi-vacuum-map-card.
{
“entity”: “vacuum.xiaomi_vacuum”,
“type”: “custom:xiaomi-vacuum-map-card”
}

105

Hi, you have to add resources in raw config editor.
Example: How do I add custom cards with the Lovelace UI?

106

@Dernebo I have implemented your suggestions, you can check out the latest version

From now you can define which modes should be displayed an which one should be default. Additionally Scrolling is disabled only when drawing zones by hand.

107

A: Downloaded files are in place
B: This is top of config

resources:

  • type: module
    url: /www/custom_lovelace/xiaomi_vacuum_map_card/xiaomi-vacuum-map-card.js
    title: Home
    views:
  • badges:
    • light.outside
      cards:
    • type: ‘custom:xiaomi-vacuum-map-card’
    • entity: vacuum.xiaomi_vacuum

I’m sure I’m still referencing it incorrectly.

Just not sure what to try.
Thanks,
Dennis

also looking at source in cloud9 I get this warning on line 14 “customElements is not defined…”
/www/custom_lovelace/xiaomi_vacuum_map_card/xiaomi-vacuum-map-card.js

108

There is a mistake in url: it should be /local/custom_lovelace/xiaomi_vacuum_map_card/xiaomi-vacuum-map-card.js

Also if you didn’t have www folder before then you have to restart HA.

109

You are awesome! This makes both HA and the Roborock far more useful. You have done a great job. :grinning: Thanks.

110

And while I am at it I can add a suggestion that it should be possible to set number of rounds to go when in predefined_zones. It works to go to the zone-settings and set number of rounds and then go back to the predefined zones, but it would be even better if you can set it without changing view.

Thanks again. :wink:

1 Like
112

That would be a great addition :slight_smile:

113

@Dernebo :open_mouth: I was not aware that it is possible, I think I can add it “legally” :smiley:

Another thing that I am working on is improving calibration process, but it is possible it will end up with some breaking changes.

Next thing I have to do is to add configuration for calling different services instead of ones dedicated for Xiaomi vacuum. It is necessary for me as I need to execute scripts to make it compatible with my vacuum garage.

114

Status: Same error
Question: Could it be the warning in the code file? “customElements is not defined…”?

Lovelace
**Error**
Custom element doesn't exist: xiaomi-vacuum-map-card.
{
  "type": "custom:xiaomi-vacuum-map-card",
  "entity": "vacuum.xiaomi_vacuum",
  "map_image": "/local/custom_lovelace/xiaomi_vacuum_map_card/map.png"
}

Overview%202%20cards
Overview%202%20cards2445×1167 88.8 KB

  1. Files are in place (image attached)

**

ha-xiami-files-cap
ha-xiami-files-cap1350×2072 373 KB
**

  1. Resource file is this
resources:
  - type: module
    url: /local/custom_lovelace/xiaomi_vacuum_map_card/xiaomi-vacuum-map-card.js
title: Home2
views:
  - badges:
      - person.dennis_willis
      - sun.sun
      - group.all_lights
      - group.all_locks
      - group.all_switches
      - light.basement
      - light.outside
    cards:
      - type: 'custom:xiaomi-vacuum-map-card'                                 <----(appears RED)
        entity: vacuum.xiaomi_vacuum
        map_image: /local/custom_lovelace/xiaomi_vacuum_map_card/map.png
path: default_view

Install is straight hass.io to Pi.

Thanks,
Dennis

115

What about map? Card will not work without it

116

@Dernebo @Maximus97
Another day, another improvement :slight_smile: “Repeats” button for predefined zones mode has landed.
Remember to update also the style.js file, as it was updated this time

2 Likes
117

mapIsThere

118

Found this in HACS docs. Could my directory be wrong?

### Step 6 - (Bonus)[¶](https://hacs.netlify.com/installation/manual/#step-6-bonus)

If you are a seasoned user, skip to step 7.

Cool you are still reading.

Open the folder where you have your  `configuration.yaml`  file. Don't open that file (yet) just the folder for now.

If you see a folder named  `custom_components`  there, go back to Step 5 if you think you need to do something here.

If you  **do not**  see a  `custom_components`  folder in  **the same**  folder as  `configuration.yaml` , you need to create it.

The  `custom_components`   **needs**  to be in  **the exact same**  folder as  `configuration.yaml`
119

Right now I have more deeply looked at your previous screen an I think your www folder might be in a wrong place. It should in the same directory as configuration.yaml.

If you use HACS the easiest way would be to install this card with it.

120

i was thinking of installing HACS. I’d just come across it.

Should I leave off the www prefix?

Should I just whole move the dir?