Open mcfly2283 opened 2 years ago
Something like this?
It's possible to do it using card-mod:
...
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
.map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 300px;
}
Yeah, thats it! Thank you, I'll give it a try
There is only a slight problem...
Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons
Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!
That looks great! How are these buttons made?
This is a 1-Panel made with custom:layout-card in Grid-Mode. The Buttons are just simple buttons and thanks to the 1-Panel-Grid you can place it wehre you want inside the (static) grid, even onto other Cards. With that you can do cool Graphic-Overlays when the post man arrives ;) :
Neat idea 👍 by the way, you can add additional tiles and icons with your own sensors/service calls ;)
I have installed card_mod and added below to the bottom of the card, but it doesn't split.
card-mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
#map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 300px;
}
You have to use the right Dashboard-View. Try to use the 1-Panel or the other new "Sidebar", dont know how its realy called in english
Thanks @mcfly2283 !
@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.
@mcfly2283 The current configuration stretches the card horizontally, is it possible to also stretch vertically so that the card fills the whole page?
@Denow height of the card is adjusted to match map proportions. You can change them by adding crop
(with big left
and right
values in your case) to your settings:
...
map_source:
camera: camera.vacuum
crop:
top: 10
bottom: 10
left: 100
right: 110
Unfortunately that was a short Story. Since the last Update of card-mod, the View does not work anymore. Maybe the Syntax has changed or something like that.
I can`t fix it for myself.
Definitely would love to see this feature as I'm also trying to use this card on a wall mounted tablet.
This would be a great feature for an already great card :)
@mcfly2283 have you managed to figure it out using card mod?
No, after the last update of card-mod the syntax above won‘t work for me and i don’t have the knowledge to get this working again.
Thanks @mcfly2283 !
@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.
That would indeed be a good option to have! Really waiting for that as well! Also, as I mentioned in #247, when using panel mode, the crop function doesn't work.
@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?
@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?
Aha! I was assuming that the cropping was relative to the picture itself but it's relative to the dashboard it's displayed on... I increased the crop values and now it works!
Thanks!
@kimme1024 hmmmm, that seems to be a little bug 😉
@kimme1024 hmmmm, that seems to be a little bug 😉
It would indeed make more sense if your crop was correct for any way of displaying it.
When using tile top and bottom are 100 When using panel top and bottom are 320 and 310 to be displayed correctly on my wall tablet, however then it doesn't display correctly on any other screen than the tablet...
Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!
Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.
Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!
Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.
Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...
Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...
Thank you very much!
Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!
Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.
Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...
Hi @mcfly2283 is possible to show one of the "script.cleanup"?
Thanks a lot
Hi @mcfly2283 is possible to show one of the "script.cleanup"?
Thanks a lot
Hi, my control scripts:
empty_dust_bin:
alias: Vycisteni zasovniku vysavace
sequence:
- data:
command: app_goto_target
params: [28471,30389]
service: vacuum.send_command
entity_id: vacuum.roborock_vacuum_a10
obyvak_stul:
alias: Vysavac ke stolku
sequence:
- data:
command: app_goto_target
params: [23198,26294]
service: vacuum.send_command
entity_id: vacuum.roborock_vacuum_a10
(Thanks ddmmcz)
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
card-mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
#map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 300px;
}
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
I have it like this -> https://pastebin.com/CYpaE3f3
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
I have it like this -> https://pastebin.com/CYpaE3f3
Thank you, i think have to update to the new Version of Layout-Card. Thanks for the new Syntax, that helps to migrate the old Version!
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
I have it like this -> https://pastebin.com/CYpaE3f3
![]()
Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice?
You can add scale to map extractor:
map_transformation:
scale: 2
You can also try different values for width
Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice? https://pastebin.com/R6Nserh3
i am getting the same View, even with the latest hints From Piotr, at the moment im using the Standard-View. If you get this to work, please let me know since i don`t have time right now to get deeper in this :)
@mcfly2283 have you tried to increase width for map-wrapper?
@mcfly2283 have you tried to increase width for map-wrapper?
Yes, but due to my very old "layout-card", the problem could be located there. If i change the width, nothing happens or the map is very small as shown in the prev. Post. It's def. not seemless.
Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change #map-wrapper
to .map-wrapper
). Current version:
...
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
.map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 300px;
}
Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change
#map-wrapper
to.map-wrapper
). Current version:
Great, that was the Point. Thank you for your Support, Piotr! :) Now everything looks fine again
that was the Point
exactly 😃
Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change
#map-wrapper
to.map-wrapper
). Current version:... style: | ha-card { display: flex !important; align-items: stretch; flex-wrap: wrap; justify-content: space-evenly; } .map-wrapper { flex-grow: 3; width: 600px; } .controls-wrapper { flex-grow: 1; width: 300px; }
I can't get this to work :(
Running card-mod 3.1.4 and lovelace-xiaomi-vacuum-map-card 2.0.11.
Any thoughts on why this might not work for me?
Here is my YAML:
type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
entity: vacuum.roborock_vacuum_a27
vacuum_platform: default
card_mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
.map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 300px;
}
square: true
columns: 1
type: grid
cards:
- type: conditional
conditions:
- entity: binary_sensor.roborock_downstairs
state: 'on'
card:
type: custom:layout-card
layout_type: grid-layout
layout:
grid-template-columns: repeat(15, 80px)
grid-template-rows: repeat(11, 50px)
cards:
- type: vertical-stack
view_layout:
grid-column-start: 1
grid-column-end: 15
grid-row-start: 1
grid-row-end: end
cards:
- type: custom:xiaomi-vacuum-map-card
title: ''
preset_name: Live map
entity: vacuum.roborock_s6_maxv
vacuum_platform: default
map_locked: true
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
map_modes:
- template: vacuum_clean_segment
card_mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
#map-wrapper {
flex-grow: 3;
width: 300px;
}
.controls-wrapper {
flex-grow: 1;
width: 100px;
}
.room-wrapper {
--map-card-internal-room-label-color: red;
--map-card-internal-room-label-font-size: 20px;
}
- type: vertical-stack
view_layout:
grid-column-start: 12
grid-column-end: 14
grid-row-start: 8
grid-row-end: 10
cards:
- type: entity-button
name: Servis
icon: mdi:tools
entity: script.obyvak_stul
tap_action:
action: call-service
service: script.obyvak_stul
type: custom:xiaomi-vacuum-map-card
entity: vacuum.roborock_s6_maxv
language: de
camera: camera.xiaomi_cloud_map_extractor
title: Roborock S6 Erdgeschoss
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
append_icons: true
card_mod: null
icons:
- icon: mdi:home-floor-0
tooltip: Erdgeschoss
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.roborock_s6_maxv
command: load_multi_map
params: 0
- icon: mdi:home-floor-1
tooltip: Obergeschoss
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.roborock_s6_maxv
command: load_multi_map
params: 1
vacuum_platform: default
map_locked: true
map_modes:
- template: vacuum_clean_segment
repeats_type: EXTERNAL
max_repeats: 3
service_call_schema:
service: vacuum.send_command
service_data:
command: app_segment_clean
entity_id: '[[entity_id]]'
params:
- segments: '[[selection]]'
repeat: '[[repeats]]'
name: Erdgeschoss
predefined_selections:
- id: 23
outline:
- - 23978
- 30172
- - 23935
- 29568
- - 24151
- 29525
- - 24151
- 27068
- - 24108
- 24999
- - 25918
- 25042
- - 25961
- 28534
- - 26392
- 28534
- - 26349
- 30388
- - 25444
- 30431
- - 25401
- 30646
- - 24366
- 30646
- - 24323
- 30388
label:
text: Flur
x: 24975
'y': 27591
offset_y: 25
icon:
name: mdi:floor-lamp-torchiere
x: 24975
'y': 27591
- id: 19
outline:
- - 21995
- 28620
- - 23892
- 28663
- - 23892
- 29525
- - 23935
- 30215
- - 22168
- 30344
- - 22125
- 29482
- - 21952
- 29525
label:
text: Badezimmer
x: 22932
'y': 29539
offset_y: 25
icon:
name: mdi:bathtub
x: 22932
'y': 29539
- id: 18
outline:
- - 23069
- 21675
- - 25504
- 21675
- - 25504
- 23756
- - 23069
- 23756
label:
text: Sofa Teppich
x: 24193
'y': 22754
offset_y: 25
icon:
name: mdi:rug
x: 24193
'y': 22754
- id: 21
outline:
- - 27326
- 26637
- - 27326
- 23189
- - 30229
- 23189
- - 30229
- 26637
label:
text: Tisch Teppich
x: 28677
'y': 25387
offset_y: 25
icon:
name: mdi:rug
x: 28677
'y': 25387
- id: 20
outline:
- - 26131
- 27243
- - 30235
- 27243
- - 30235
- 26669
- - 27326
- 26669
- - 27326
- 23303
- - 30194
- 23303
- - 30235
- 21497
- - 29496
- 20676
- - 22683
- 20635
- - 22683
- 20923
- - 22109
- 20923
- - 22068
- 21785
- - 25515
- 21826
- - 25597
- 24781
- - 26049
- 24781
label:
text: Wohnzimmer
x: 27427
'y': 22111
offset_y: 25
icon:
name: mdi:table-chair
x: 27427
'y': 22111
- id: 23
outline:
- - 26090
- 28405
- - 27125
- 28405
- - 27168
- 29913
- - 29280
- 29913
- - 29668
- 29568
- - 29625
- 27887
- - 28504
- 27844
- - 28504
- 27241
- - 26047
- 27284
label:
text: Küche
x: 28246
'y': 29310
offset_y: 25
icon:
name: mdi:table-chair
x: 28246
'y': 29310
- template: vacuum_clean_zone
- template: vacuum_follow_path
- template: vacuum_goto
- type: conditional
conditions:
- entity: binary_sensor.roborock_downstairs
state: 'off'
card:
type: custom:xiaomi-vacuum-map-card
entity: vacuum.roborock_s6_maxv
language: de
camera: camera.xiaomi_cloud_map_extractor
title: Roborock S6 Obergeschoss
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
append_icons: true
icons:
- icon: mdi:home-floor-0
tooltip: Erdgeschoss
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.roborock_s6_maxv
command: load_multi_map
params: 0
- icon: mdi:home-floor-1
tooltip: Obergeschoss
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.roborock_s6_maxv
command: load_multi_map
params: 1
vacuum_platform: default
map_locked: true
map_modes:
- template: vacuum_clean_segment
repeats_type: EXTERNAL
max_repeats: 3
service_call_schema:
service: vacuum.send_command
service_data:
command: app_segment_clean
entity_id: '[[entity_id]]'
params:
- segments: '[[selection]]'
repeat: '[[repeats]]'
name: Obergeschoss
predefined_selections:
- id: 24
outline:
- - 27342
- 24886
- - 28062
- 24886
- - 28100
- 23863
- - 28290
- 23749
- - 31474
- 23749
- - 31474
- 20262
- - 27418
- 20338
- - 27380
- 23332
- - 26735
- 23370
- - 26698
- 24204
label:
text: Schlafzimmer
x: 29802
'y': 22254
offset_y: 25
icon:
name: mdi:bed-king
x: 29802
'y': 22254
- id: 24
outline:
- - 28469
- 25204
- - 28428
- 24134
- - 31515
- 24134
- - 31474
- 24751
- - 30651
- 25492
- - 30239
- 25204
- - 29786
- 25245
- - 29786
- 25781
- - 30733
- 26769
- - 31515
- 26810
- - 31474
- 28251
- - 30939
- 27674
- - 30033
- 28374
- - 28428
- 28374
label:
text: Badezimmer
x: 29704
'y': 27551
offset_y: 25
icon:
name: mdi:hot-tub
x: 29704
'y': 27551
- id: 25
outline:
- - 26169
- 25463
- - 25917
- 25463
- - 25455
- 25001
- - 25455
- 24077
- - 25581
- 24035
- - 25581
- 23909
- - 26337
- 23951
- - 27303
- 24959
- - 28101
- 24917
- - 28269
- 24959
- - 28227
- 26135
- - 26169
- 26135
label:
text: Flur
x: 27114
'y': 25816
offset_y: 25
icon:
name: mdi:floor-lamp-torchiere
x: 27114
'y': 25816
- id: 26
outline:
- - 25437
- 25019
- - 25982
- 25606
- - 26024
- 25858
- - 25647
- 25900
- - 25563
- 28330
- - 24892
- 28288
- - 24850
- 27366
- - 22964
- 27366
- - 22964
- 27995
- - 21707
- 27911
- - 21707
- 25900
- - 22126
- 25900
- - 22084
- 24726
- - 21707
- 24768
- - 21665
- 24517
- - 22839
- 24517
- - 22839
- 24642
- - 25186
- 24684
- - 25228
- 24852
label:
text: Gästezimmer
x: 23677
'y': 26612
offset_y: 25
icon:
name: mdi:bed-king
x: 23677
'y': 26612
card_mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-evenly;
}
#map-wrapper {
flex-grow: 3;
width: 600px;
}
.controls-wrapper {
flex-grow: 1;
width: 100px;
}
.room-wrapper {
--map-card-internal-room-label-color: white;
--map-card-internal-room-label-font-size: 16px;
}
- template: vacuum_clean_zone
- template: vacuum_follow_path
- template: vacuum_goto
Error: Konfigurationsfehler erkannt: duplicated mapping key (10:5)
7 | - entity: binary_sensor.robor ... 8 | state: 'on' 9 | card: 10 | type: custom:layout-card ----------^ 11 | layout_type: grid-layout 12 | layout:
I would like a SidebySide like the Picture
and therefore have the code from here: https://pastebin.com/R6Nserh3 but I have tried everything now and I either get an error or the view is not sidebySide. Can anyone tell me what I am doing wrong? Unfortunately, I am still a complete beginner.
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
I have it like this -> https://pastebin.com/CYpaE3f3
![]()
Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice? https://pastebin.com/R6Nserh3
Hello, I have now finally managed that both cards are next to each other. Unfortunately I still have a problem, the map is centered. As you can see in the post above it also works that you move it to the left. My question what do I have to do so that the map is left?
Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.
I have it like this -> https://pastebin.com/CYpaE3f3
![]()
Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice? https://pastebin.com/R6Nserh3
Hello, I have now finally managed that both cards are next to each other. Unfortunately I still have a problem, the map is centered. As you can see in the post above it also works that you move it to the left. My question what do I have to do so that the map is left?
yeah, i also have this issue, no matter what i try
I got it to work with this:
card_mod:
style: |
ha-card {
display: flex !important;
align-items: stretch;;
flex-wrap: wrap;
width: 95%;
margin-left: -20vw;
}
#map-wrapper {
flex-grow: 3;
width: 65px;
}
.controls-wrapper {
flex-grow: 1;
width: 80px;
}
.room-wrapper {
--map-card-internal-room-label-color: red;
--map-card-internal-room-label-font-size: 20px;
}
.map-controls {
width: 58% !important;
}
This Point is important: margin-left: -20vw; This will move the entire card to the left. Not pretty, but works.
hi,
thanks for the reply.
in the mean time, i managed to arange it with place-content: center for the layout, it turned out ok.
I also encountered a layout issue. I am unsure whether this is a bug or if I am not using it correctly. The problem arises when attempting to use the layout-card to set the width of the card to fill the entire screen. This results in a noticeable offset of the Map modes options, as shown in the attached image.
it's my config
type: custom:layout-card
layout_type: custom:vertical-layout
style:
left: 58.5%
top: 51%
layout:
width: 900
cards:
- type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.dreamebot_s10_map
calibration_source:
camera: true
entity: vacuum.dreamebot_s10
vacuum_platform: Tasshack/dreame-vacuum
map_locked: true
@13860605362 how does fan speed menu work?
风扇速度菜单如何工作?
It has the same issue, the position is incorrect.
Here's my take:
not quite perfect, but atleast its more useable:
--> new page on HA dashboard: [segemnted experimental style, 2 rows] --> add 2nd segment --> add first card to left or right row --> add second card to other row (place at top) --> add third card (same row as 2nd)
first card:
type: custom:xiaomi-vacuum-map-card map_source: camera: camera.d10s_plus_map calibration_source: camera: true entity: vacuum.d10s_plus vacuum_platform: default tiles: [] icons: []
second card:
type: custom:gap-card layout_options: grid_columns: 4 grid_rows: 2
third card:
type: custom:xiaomi-vacuum-map-card map_source: image: test.jpg calibration_source: null entity: vacuum.d10s_plus
Description
The Card with its Sensor-Tiles are very high at all. It would be great if there is an Option to place the Map and Tiles Side by Side. Especially with a Wallpanel, the palcement could be very Hard.
Solution
Optional Side by Side-View MAP-TILES
Alternatives
No response
Context
No response