search

PiotrMachowski / lovelace-xiaomi-vacuum-map-card

This card provides a user-friendly way to fully control map-based vacuums in Home Assistant. Supported brands include Xiaomi (Roborock/Viomi/Dreame/Roidmi/Valetudo/Valetudo RE), Neato, Wyze, Roomba, Ecovacs (and probably more).
MIT License
1.43k stars 247 forks source link

Feature Request: Card Side by Side #183

Open mcfly2283 opened 2 years ago

mcfly2283 commented 2 years ago

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

PiotrMachowski commented 2 years ago

Something like this?

image

PiotrMachowski commented 2 years ago

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;
  }
mcfly2283 commented 2 years ago

Yeah, thats it! Thank you, I'll give it a try

PiotrMachowski commented 2 years ago

There is only a slight problem...

image

mcfly2283 commented 2 years ago

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. image

Thank you for your continuous Work!

PiotrMachowski commented 2 years ago

That looks great! How are these buttons made?

mcfly2283 commented 2 years ago

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 ;) :

image

PiotrMachowski commented 2 years ago

Neat idea 👍 by the way, you can add additional tiles and icons with your own sensors/service calls ;)

tempmaseg commented 2 years ago

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;
    }
mcfly2283 commented 2 years ago

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

tempmaseg commented 2 years ago

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.

Denow commented 2 years ago

@mcfly2283 The current configuration stretches the card horizontally, is it possible to also stretch vertically so that the card fills the whole page?

PiotrMachowski commented 2 years ago

@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
mcfly2283 commented 2 years ago

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.

shred86 commented 2 years ago

Definitely would love to see this feature as I'm also trying to use this card on a wall mounted tablet.

idogrf commented 2 years ago

This would be a great feature for an already great card :)

PiotrMachowski commented 2 years ago

@mcfly2283 have you managed to figure it out using card mod?

mcfly2283 commented 2 years ago

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.

kimme1024 commented 2 years ago

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.

PiotrMachowski commented 2 years ago

@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?

kimme1024 commented 2 years ago

@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!

PiotrMachowski commented 2 years ago

@kimme1024 hmmmm, that seems to be a little bug 😉

kimme1024 commented 2 years ago

@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...

ddmmcz commented 2 years ago

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. image

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.

mcfly2283 commented 2 years ago

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. image 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...

https://pastebin.com/GyvbPYx5

ddmmcz commented 2 years ago

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...

https://pastebin.com/GyvbPYx5

Thank you very much!

Ender3Pro commented 2 years ago

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. image 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...

https://pastebin.com/GyvbPYx5

Hi @mcfly2283 is possible to show one of the "script.cleanup"?

Thanks a lot

ddmmcz commented 2 years ago

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
mcfly2283 commented 2 years ago

(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;
    }
ddmmcz commented 2 years ago

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

image

mcfly2283 commented 2 years ago

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

image

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!

Sysoev86 commented 2 years ago

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

Снимок экрана 2022-05-08 в 18 28 43

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

PiotrMachowski commented 2 years ago

You can add scale to map extractor:

map_transformation:
  scale: 2
PiotrMachowski commented 2 years ago

You can also try different values for width

mcfly2283 commented 2 years ago

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 :)

PiotrMachowski commented 2 years ago

@mcfly2283 have you tried to increase width for map-wrapper?

mcfly2283 commented 2 years ago

@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.

PiotrMachowski commented 2 years ago

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;
  }
mcfly2283 commented 2 years ago

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

image image

PiotrMachowski commented 2 years ago

that was the Point

exactly 😃

mattdevo1 commented 2 years ago

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;
   }
yoda98mnt commented 1 year ago 
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 roborock

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.

yoda98mnt commented 1 year ago

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

Снимок экрана 2022-05-08 в 18 28 43

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

Home_Assis 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?

ecstasy88 commented 1 year ago

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

Снимок экрана 2022-05-08 в 18 28 43

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

Home_Assis 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

yoda98mnt commented 1 year ago

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.

ecstasy88 commented 1 year ago

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. image

13860605362 commented 11 months ago

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.

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
PiotrMachowski commented 11 months ago

@13860605362 how does fan speed menu work?

13860605362 commented 11 months ago

风扇速度菜单如何工作？

It has the same issue, the position is incorrect. 1695896874934

senna1992 commented 3 weeks ago

Here's my take:

not quite perfect, but atleast its more useable:

2024-08-17 18 11 03 192 168 0 42 70ff413536d5

--> 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