As far as I remember there were some issues with repeats in segment cleaning mode.
I think it might be achievable using card mod
Awesome card. Thank you.
Is there a way to add a border to the control elements?
Trying to fit it to my current theme:
Current styling upstairs card:
card_mod:
class: top-level-card
style: |
ha-card {
--map-card-zoomer-background: rgba(0, 0, 0, 0);
--map-card-small-radius: 10px;
--map-card-big-radius: 10px;
--map-card-tertiary-color: var(--card-background-color);
--map-card-secondary-color: var(--card-background-color);
--map-card-secondary-text-color: var(--primary-text-color);
--map-card-primary-color: var(--card-background-color);
}
Downstairs:
card_mod:
class: top-level-card
style: |
ha-card {
--map-card-zoomer-background: rgba(0, 0, 0, 0);
--map-card-small-radius: 10px;
--map-card-big-radius: 10px;
--map-card-tertiary-color: rgba(0, 0, 0, 0);
--map-card-secondary-color: rgba(255, 255, 255, 0.0);
--map-card-secondary-text-color: var(--primary-text-color);
--map-card-primary-color: rgba(0, 0, 0, 0);
}
1 Like
Is this ok for you?
card_mod:
style: |
ha-card {
--map-card-zoomer-background: rgba(0, 0, 0, 0);
--map-card-small-radius: 10px;
--map-card-big-radius: 10px;
--map-card-tertiary-color: var(--card-background-color);
--map-card-secondary-color: var(--card-background-color);
--map-card-secondary-text-color: var(--primary-text-color);
--map-card-primary-color: var(--card-background-color);
}
.modes-dropdown-menu-entry-button.selected,
.modes-dropdown-menu-entry.selected,
.tile-wrapper,
.vacuum-actions-list,
.map-actions-list,
.map-actions-item.main,
.modes-dropdown-menu-button-button,
.map-zoom-icons,
.standalone-icon-on-map,
.map-zoom-icons-main {
box-shadow: inset 0px 0px 0px 1px black;
}
1 Like
That was exactly what I needed (with one very minor tweak). Thank you.
card_mod:
class: top-level-card
style: |
ha-card {
--map-card-zoomer-background: rgba(0, 0, 0, 0);
--map-card-small-radius: 10px;
--map-card-big-radius: 10px;
--map-card-tertiary-color: rgba(0, 0, 0, 0);
--map-card-secondary-color: rgba(0, 0, 0, 0);
--map-card-secondary-text-color: var(--primary-text-color);
--map-card-primary-color: var(--card-background-color);
}
.modes-dropdown-menu-entry-button.selected,
.modes-dropdown-menu-entry.selected,
.tile-wrapper,
.vacuum-actions-list,
.map-actions-list,
.map-actions-item.main,
.modes-dropdown-menu-button-button,
.map-zoom-icons,
.standalone-icon-on-map,
.map-zoom-icons-main {
box-shadow: inset 0px 0px 0px 1px var(--primary-color);
}
I’m still playing around with combinations of button shadow and border but so far this is the best.
Again: amazing card (and camera) thanks! Have some “sensors” lol.
1 Like
Looking good 
I’m very happy that you like it
1 Like
and @3_14 how can I extract the room numbers and coördinates please ? Calibration fails trying to open card
Thanks,
But after adding the camera in the config file, add using the template file, I get following error:
TypeError: 'NoneType' object is not iterable
I’m using code below:
{% set camera_entity = "camera.xiaomi_cloud_map_extractor" %}
{% set vacuum_entity = "vacuum.jarvis" %}
{# ------------------- DO NOT CHANGE ANYTHING BELOW ------------------- #}
{% set attributes = states[camera_entity].attributes %}
type: custom:xiaomi-vacuum-map-card
entity: {{ vacuum_entity }}
map_source:
camera: {{ camera_entity }}
calibration_source:
camera: true
map_modes:
- template: vacuum_goto
- template: vacuum_clean_zone
- template: vacuum_clean_segment
predefined_selections:
{%- for room_id in attributes.rooms %}
{%- set room = attributes.rooms[room_id] %}
{%- set keep_float = "." in (room["x0"] | string) %}
{%- set x = ([room["x0"], room["x1"]] | sum / 2) if keep_float else (([room["x0"], room["x1"]] | sum / 2) | int) %}
{%- set y = ([room["y0"], room["y1"]] | sum / 2) if keep_float else (([room["y0"], room["y1"]] | sum / 2) | int) %}
- id: {{room_id}}
label:
text: Room {{room_id}}
x: {{ x }}
y: {{ y }}
offset_y: 35
icon:
name: "mdi:broom"
x: {{ x }}
y: {{ y }}
{%- endfor %}
These are the attributes for vacuum.jarvis:
fan_speed_list: Silent, Standard, Medium, Turbo, Gentle, Auto
battery_level: 100
battery_icon: mdi:battery-charging-100
fan_speed: Medium
status: Charging
friendly_name: Jarvis
supported_features: 14204
Many thanks in advance !
Kr,
Bart
Related discussion on GitHub:
Has anyone embedded the mopping function too ?
It highly depends on vacuum model and used integration. Example config:
Thanks @3_14
I’m using the Xiaomi Miio integration for my Roborock S7 vmax ultra vacuum. Unfortunately I don’t have attributes in this integration available (like mop, watergrade etc…) so probably need to wait until the integration supports the mop functionality ?
Kr,
Bart
Yeah, I think so
Thank you for this amazing addition to HA.
This was working perfectly for me for a few months and something happened where I’m now getting the:
“Invalid calibration, please check your configuration”.
What I have tried so far:
- Uninstalled and reinstalled the Xiaomi Miio integration
- Uninstalled and reinstalled custom:xiaomi-vacuum-map-card
- Removed the camera settings from configuration.yaml, restarted HA and re-added.
- Removed my rooms and zones from the card
- Read all the posts (I think) that contained “Invalid calibration, please check your configuration”
And I’m out of ideas, so any help is appreciated!
Here’s my config.yaml
camera:
- platform: xiaomi_cloud_map_extractor
host: 192.168.50.152
name: "Vacuum Upstairs Roborock S5"
token: !secret upstairs_vacuum_token
username: !secret xiaomi_cloud_username
password: !secret xiaomi_cloud_password
country: "us"
draw: ["all"]
attributes:
- calibration_points
map_transformation:
scale: 2
trim:
top: 19
bottom: 19
left: 19
right: 19
- platform: xiaomi_cloud_map_extractor
host: 192.168.50.137
name: "Vacuum Basement Roborock S4 Max"
token: !secret downstairs_vacuum_token
username: !secret xiaomi_cloud_username
password: !secret xiaomi_cloud_password
country: "us"
draw: ["all"]
attributes:
- calibration_points
map_transformation:
scale: 2
trim:
top: 18
bottom: 18
left: 18
right: 18
And here’s the yaml for one of my vacuum cards:
type: custom:xiaomi-vacuum-map-card
entity: vacuum.roborock_vacuum_s5
title: Roborock S5 Upstairs
preset_name: Live map
map_locked: true
map_source:
camera: camera.vacuum_upstairs_roborock_s5
calibration_source:
camera: true
map_modes:
- template: vacuum_clean_zone
- template: vacuum_clean_zone_predefined
predefined_selections:
- zones:
- - 26302
- 29743
- 30402
- 32893
label:
text: Our Bedroom
x: 28000
'y': 31000
offset_y: 5
- zones:
- - 27056
- 24988
- 30279
- 28837
- - 27931
- 28320
- 30499
- 29657
label:
text: Kids Bedroom
x: 29500
'y': 30339
offset_y: 35
- zones:
- - 16886
- 28687
- 23736
- 32937
label:
text: Kitchen
x: 22000
'y': 32000
offset_y: 15
- zones:
- - 18153
- 24865
- 23822
- 28700
label:
text: Living Room
x: 21000
'y': 28000
offset_y: 15
- zones:
- - 23936
- 29708
- 25675
- 32975
label:
text: Bath
x: 25000
'y': 32000
offset_y: 15
- zones:
- - 23771
- 28336
- 28023
- 29753
label:
text: Hall
x: 25000
'y': 30000
offset_y: 15
- zones:
- - 23879
- 25002
- 26929
- 27886
- - 25900
- 27623
- 26929
- 27886
label:
text: Closet
x: 25000
'y': 28000
offset_y: 15
- template: vacuum_clean_segment
predefined_selections:
- id: 1
outline:
- - 26337
- 32885
- - 30330
- 32934
- - 30280
- 29977
- - 26337
- 29927
- - 26288
- 32835
label:
text: Master
x: 28250
'y': 31000
offset_y: 5
icon:
name: mdi:bed
x: 28000
'y': 32500
- id: 2
outline:
- - 30224
- 25041
- - 30224
- 29684
- - 28040
- 29738
- - 27985
- 28864
- - 27057
- 28864
- - 27002
- 25096
- - 30224
- 25096
label:
text: Kids
x: 28750
'y': 28000
offset_y: 5
icon:
name: mdi:baby-face-outline
x: 29000
'y': 26000
- id: 3
outline:
- - 23824
- 24949
- - 23774
- 28794
- - 21951
- 28843
- - 21951
- 28597
- - 18106
- 28646
- - 18106
- 25048
- - 23774
- 24949
label:
text: Living room
x: 21000
'y': 29500
offset_y: 35
icon:
name: mdi:sofa
x: 21000
'y': 26000
- id: 4
outline:
- - 23824
- 25097
- - 26978
- 25146
- - 26929
- 28794
- - 25943
- 28794
- - 25894
- 28005
- - 23873
- 27956
- - 23824
- 25146
label:
text: Closet
x: 25500
'y': 29250
offset_y: 35
icon:
name: mdi:hanger
x: 25500
'y': 26000
- id: 5
outline:
- - 23824
- 28794
- - 18205
- 28794
- - 18205
- 30617
- - 16923
- 30568
- - 16874
- 32983
- - 23774
- 33033
- - 23824
- 28843
label:
text: Kitchen
x: 21000
'y': 33000
offset_y: 35
icon:
name: mdi:chef-hat
x: 21000
'y': 30000
- id: 6
outline:
- - 25401
- 29730
- - 25499
- 31357
- - 25499
- 32934
- - 24021
- 32934
- - 24021
- 32195
- - 24415
- 32145
- - 24563
- 29730
- - 25401
- 29730
label:
text: Bath
x: 24750
'y': 34000
offset_y: 35
icon:
name: mdi:shower
x: 24750
'y': 30750
- id: 7
outline:
- - 23824
- 29681
- - 27126
- 29681
- - 27126
- 26829
- - 27694
- 26829
- - 27915
- 28695
- - 27126
- 28695
- - 27175
- 28794
- - 23774
- 28794
- - 23824
- 29681
label:
text: Hall
x: 24750
'y': 31125
offset_y: 35
icon:
name: mdi:shower
x: 24750
'y': 30750
additional_presets: null
vacuum_platform: default
Do cameras show map image? If so, what are cameras’ attributes?
Thank you for the response.
Where the camera image used to be, it now says “failed to retrieve map from vacuum”.
I’m not sure which attributes you mean, but if I click on it in the entities list, I get " This entity (‘camera.vacuum_upstairs_roborock_s5’) does not have a unique ID, therefore its settings cannot be managed from the UI. See the documentation for more detail."
You can:
- check if IP address and token are still valid
- restart the vacuum
Thanks for all of your help so far. I have double checked the IP address of the vacuums and checked the token with two different methods.
I must be missing something somewhere, since they worked before. I think I will remove all traces of the vacuums and your card and start over.
Have you tried restarting the vacuum? (by pressing and holding power button)
Thank you for the suggestion. Yes, I have restarted it. I might try a factory reset next.