PiotrMachowski/lovelace-xiaomi-vacuum-map-card

Can not change Map Size --> Dreame L20 Ultra

pillemats opened this issue · 11 comments

Checklist

  • I have updated the card to the latest version available
  • I have cleared the cache of my browser
  • I have checked if the problem is already reported

The problem

i cant change the size of the map card.

i tried to add crop, but it always change the outlines and not the map itself. zoom in and zoom out works but only onetime.
i tried to close the lock. this works onetime too

this is my result now:

Bildschirmfoto 2023-11-02 um 20 35 37

Thanks for the help!

What version of a card has described problem?

2.2.2

What was the last working version card?

x.x.x.

What vacuum model do you have problems with?

Dreame L20 Ultra

Which integration do you use to control your vacuum (link)?

https://github.com/Tasshack/dreame-vacuum

What browser (browsers/apps) does have this problem?

safari/android/ios/windows/edge/firefox

What version of Home Assistant do you use?

11.1

What type of installation are you running?

Home Assistant OS

Card's configuration

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.dreamebot_l20_ultra_map
  crop:
    left: 80
    right: 80
    top: 140
    bottom: 165
calibration_source:
  camera: true
entity: vacuum.dreamebot_l20_ultra
vacuum_platform: send_command
map_modes:
  - template: vacuum_clean_zone
  - template: vacuum_goto
  - template: vacuum_clean_segment
    predefined_selections:
      - id: '1'
        icon:
          name: mdi:chef-hat
          x: -2150
          'y': 5050
        label:
          text: Kitchen
          x: -2150
          'y': 5050
          offset_y: 35
        outline:
          - - -6300
            - 3750
          - - -1500
            - 3750
          - - -1500
            - 6400
          - - -6300
            - 6400
      - id: '2'
        icon:
          name: mdi:foot-print
          x: -950
          'y': 6600
        label:
          text: Corridor
          x: -950
          'y': 6600
          offset_y: 35
        outline:
          - - -2300
            - 3300
          - - 1700
            - 3300
          - - 1700
            - 11350
          - - -2300
            - 11350
      - id: '3'
        icon:
          name: mdi:room-service-outline
          x: -10450
          'y': 5150
        label:
          text: Dining Hall
          x: -10450
          'y': 5150
          offset_y: 35
        outline:
          - - -11400
            - 3150
          - - -6300
            - 3150
          - - -6300
            - 7000
          - - -11400
            - 7000
      - id: '4'
        icon:
          name: mdi:monitor-shimmer
          x: 250
          'y': 1400
        label:
          text: Office
          x: 250
          'y': 1400
          offset_y: 35
        outline:
          - - -1650
            - -850
          - - 1750
            - -850
          - - 1750
            - 3300
          - - -1650
            - 3300
      - id: '5'
        icon:
          name: mdi:home-outline
          x: -4050
          'y': 1150
        label:
          text: Kinderzimmer
          x: -4050
          'y': 1150
          offset_y: 35
        outline:
          - - -6250
            - -850
          - - -1650
            - -850
          - - -1650
            - 2950
          - - -6250
            - 2950
      - id: '6'
        icon:
          name: mdi:sofa-outline
          x: -10100
          'y': -1400
        label:
          text: Living Room
          x: -10100
          'y': -1400
          offset_y: 35
        outline:
          - - -12800
            - -6400
          - - -6950
            - -6400
          - - -6950
            - 3150
          - - -12800
            - 3150

Javascript errors shown in the browser's console (if applicable)

No response

Additional information

No response

i tried to add crop, but it always change the outlines and not the map itself

What do you mean? Could you describe what do you want to achieve?

Sorry for the bad English!

now it looks like this:

IMG_4176

I want to resize the map like this

IMG_4177

the manual zoom in and out works but it can’t be saved! If I switched to another Lovelace board and go back to the vaccum card it switches back to the first picture I uploaded.
Also the lock dosnt work.
With crop in config I only can change the complete card size and not the room maps size

hopefully you know what i mean

i found this

#183

this is a perfect map:
Bildschirmfoto 2023-11-03 um 11 52 57

but how i can change my config to this?

here is my complete map card config and my button config:

MAP:

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.dreamebot_l20_ultra_map
  crop:
    left: 80
    right: 80
    top: 140
    bottom: 165
calibration_source:
  camera: true
entity: vacuum.dreamebot_l20_ultra
vacuum_platform: send_command
map_modes:
  - template: vacuum_clean_zone
  - template: vacuum_goto
  - template: vacuum_clean_segment
    predefined_selections:
      - id: '1'
        icon:
          name: mdi:chef-hat
          x: -2150
          'y': 5050
        label:
          text: Kitchen
          x: -2150
          'y': 5050
          offset_y: 35
        outline:
          - - -6300
            - 3750
          - - -1500
            - 3750
          - - -1500
            - 6400
          - - -6300
            - 6400
      - id: '2'
        icon:
          name: mdi:foot-print
          x: -950
          'y': 6600
        label:
          text: Corridor
          x: -950
          'y': 6600
          offset_y: 35
        outline:
          - - -2300
            - 3300
          - - 1700
            - 3300
          - - 1700
            - 11350
          - - -2300
            - 11350
      - id: '3'
        icon:
          name: mdi:room-service-outline
          x: -10450
          'y': 5150
        label:
          text: Dining Hall
          x: -10450
          'y': 5150
          offset_y: 35
        outline:
          - - -11400
            - 3150
          - - -6300
            - 3150
          - - -6300
            - 7000
          - - -11400
            - 7000
      - id: '4'
        icon:
          name: mdi:monitor-shimmer
          x: 250
          'y': 1400
        label:
          text: Office
          x: 250
          'y': 1400
          offset_y: 35
        outline:
          - - -1650
            - -850
          - - 1750
            - -850
          - - 1750
            - 3300
          - - -1650
            - 3300
      - id: '5'
        icon:
          name: mdi:home-outline
          x: -4050
          'y': 1150
        label:
          text: Kinderzimmer
          x: -4050
          'y': 1150
          offset_y: 35
        outline:
          - - -6250
            - -850
          - - -1650
            - -850
          - - -1650
            - 2950
          - - -6250
            - 2950
      - id: '6'
        icon:
          name: mdi:sofa-outline
          x: -10100
          'y': -1400
        label:
          text: Living Room
          x: -10100
          'y': -1400
          offset_y: 35
        outline:
          - - -12800
            - -6400
          - - -6950
            - -6400
          - - -6950
            - 3150
          - - -12800
            - 3150

Buttons:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_haus_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Haus saugen
        hold_action:
          action: none
        show_state: false
        icon_height: 81px
        icon: mdi:robot-vacuum-alert
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_buro_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Büro saugen
        hold_action:
          action: none
        show_state: false
        icon_height: 81px
        icon: mdi:robot-vacuum
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_flur_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Flur saugen
        hold_action:
          action: none
        icon_height: 81px
        icon: mdi:robot-vacuum
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_kuche_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Küche saugen
        hold_action:
          action: none
        icon_height: 81px
        icon: mdi:robot-vacuum
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_kinderzimmer_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        hold_action:
          action: none
        icon: mdi:robot-vacuum
        icon_height: 81px
        name: Kinderzimmer saugen
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_wohnzimmer_saugen
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Wohnzimmer saugen
        hold_action:
          action: none
        icon_height: 81px
        icon: mdi:robot-vacuum
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: automation.trigger
          target:
            entity_id: automation.vac_fahre_zuruck
          data:
            skip_condition: true
        entity: vacuum.dreamebot_l20_ultra
        name: Fahre zurück
        hold_action:
          action: none
        show_state: false
        icon_height: 81px
        icon: mdi:sleep

the manual zoom in and out works but it can’t be saved! If I switched to another Lovelace board and go back to the vaccum card it switches back to the first picture I uploaded.
Also the lock dosnt work.
With crop in config I only can change the complete card size and not the room maps size

Crop config works and can be used to do what you want to achieve, but it requires some dialing-in to match your expectations. Card size also changes because it adjusts to size of map (and you change it using crop config).

i found this

#183

this is a perfect map:

Configuration of this view requires card-mod and layout card (pretty advanced stuff). Configs to get such view are available in the comments in the issue

thanks for your comment.... i will try side by side next days.

you can see my config above. what i need to change to freeze the map card?
with this config i only get the "cutted" map

I think this config should be ok:

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.dreamebot_l20_ultra_map
  crop:
    left: 30
    right: 30
calibration_source:
  camera: true
entity: vacuum.dreamebot_l20_ultra
vacuum_platform: Tasshack/dreame-vacuum
map_modes:
...

Please notice that I have also changed vacuum platform to one dedicated for Dreame integration

thanks! now it shows this:

Bildschirmfoto 2023-11-03 um 14 42 53

However, it must not be larger overall than the buttons next to it.
I have a tablet on the wall and it doesn't display properly there otherwise.

that's my problem

Ok, so you can decrease left/right crop and reintroduce top/bottom ones:

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.dreamebot_l20_ultra_map
  crop:
    top: 60
    bottom: 65
calibration_source:
  camera: true
entity: vacuum.dreamebot_l20_ultra
vacuum_platform: Tasshack/dreame-vacuum
map_modes:
...

it looks not better then before:

Bildschirmfoto 2023-11-04 um 16 20 36

it is possible to zoom in and out with 2 fingers. but it is not possible to fix this position.... the lock dosent work

You have to try different values for crop config to find ones that will be ok. The lock works, It just isn't persisted after page refresh/change. To make it locked by default you can toggle appropriate entry in card editor or add map_locked: true.

the only way i found is to disabling the icons, but that is not the perfect solution

Bildschirmfoto 2023-11-04 um 16 26 36