tom_l
June 25, 2022, 7:07am
1226
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
3_14
June 25, 2022, 11:34am
1227
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
tom_l
June 25, 2022, 1:19pm
1228
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
3_14
June 25, 2022, 1:35pm
1229
Looking good
I’m very happy that you like it
1 Like
weemaba999
June 25, 2022, 9:43pm
1230
and @3_14 how can I extract the room numbers and coördinates please ? Calibration fails trying to open card
weemaba999
June 26, 2022, 8:34am
1232
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
Many thanks in advance !
Kr,
Bart
3_14
June 26, 2022, 10:39am
1233
Related discussion on GitHub:
weemaba999
June 27, 2022, 10:54am
1234
Has anyone embedded the mopping function too ?
3_14
June 27, 2022, 12:26pm
1235
It highly depends on vacuum model and used integration. Example config:
weemaba999
June 27, 2022, 1:17pm
1236
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
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
3_14
June 29, 2022, 8:05am
1239
Do cameras show map image? If so, what are cameras’ attributes?
Thank you for the response.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. "
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.
3_14
June 30, 2022, 12:21pm
1243
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.
Asos75
July 3, 2022, 1:32pm
1245
I probably missed it in the documentation, but is there currently a way to remove the non blured part of the vacuum card?
