How to set zones for Deebot

[dllfpp]

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

Hello, this is more of a distress call than an issue report, sorry.
I have this as my setup:

How can I link these attributes, which reflect my zones in the app, in the card so that if I chose the zone it automatically binds the corresponding area?

I know already which room is which zone in my house so it's not a problem matching them accordingly.

What version of a card has described problem?

2.2.4

What was the last working version card?

No response

What vacuum model do you have problems with?

DEEBOT N8 PRO+ (ifbw08)

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

https://www.home-assistant.io/integrations/ecovacs

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

Edge/iOS app/Firefox

What version of Home Assistant do you use?

core-2025.3.1

What type of installation are you running?

Home Assistant OS

Card's configuration

type: custom:xiaomi-vacuum-map-card
language: it
entity: vacuum.cenerentola
vacuum_platform: DeebotUniverse/Deebot-4-Home-Assistant
map_source:
  camera: image.cenerentola_map
map_locked: true
two_finger_pan: true
map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: 0
        icon:
          name: mdi:door
          label: Ingresso/Corridoio
          x: -8500
          "y": -11500
      - id: 1
        icon:
          name: mdi:knife
          label: Cucina
          x: -1000
          "y": -15000
      - id: 2
        icon:
          name: mdi:sofa
          label: Salotto
          x: -2900
          "y": -3000
      - id: 3
        icon:
          name: mdi:table-chair
          label: Sala da pranzo
          x: -2900
          "y": -9000
      - id: 4
        icon:
          name: mdi:bed
          label: Camera
          x: -15200
          "y": 0
      - id: 5
        icon:
          name: mdi:bed
          label: Cameretta
          x: -15200
          "y": -9000
      - id: 6
        icon:
          name: mdi:toilet
          label: Bagno Padronale
          x: -9000
          "y": 2200
      - id: 6
        icon:
          name: mdi:toilet
          label: Bagno Ospiti
          x: -17000
          "y": -14700
  - template: vacuum_clean_zone
  - template: vacuum_clean_zone_predefined
    predefined_selections:
      - zones:
          - - 239
            - 184
            - 1336
            - 665
        icon:
          name: mdi:rectangle
          x: -8500
          "y": -11500

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

Additional information

No response

[PiotrMachowski]

So what does happen when you start a room cleaning?

[dllfpp]

What do you exactly mean by this?
Do you mean if I select one of the rooms identified in

map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: 0
        icon:
          name: mdi:door
          label: Ingresso/Corridoio
          x: -8500
          "y": -11500

etcc?

Like these two, for example?

[PiotrMachowski]

Yes, you select two rooms and click the yellow "play" button

[dllfpp]

On top of this, this happens when I click on the + button for Zone cleanup:

[PiotrMachowski]

Ok, so the room cleaning with the card works correctly, but you have used incorrect IDs - they shouldn't be just consecutive numbers, they should be the same as the ones used by the vacuum:

[dllfpp]

This now works!

[PiotrMachowski]

Ok, so what does not work at this moment?

[dllfpp]

Hello, sorry for the delay.
What is not working is the GUI.
On iPhone I can create the manual area (but not on computer), on the other hands, room icons are positioned correctly on computer but completely messed up on iPhone.

[PiotrMachowski]

Can you show the full current card's config and all attributes of this entity image.cenerentola_map (from dev tools)?

[dllfpp]

Sure!

Card:

type: custom:xiaomi-vacuum-map-card
language: en
entity: vacuum.cenerentola
vacuum_platform: DeebotUniverse/Deebot-4-Home-Assistant
map_source:
  camera: image.cenerentola_map
map_locked: true
two_finger_pan: true
map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: 2
        icon:
          name: mdi:door
          label: Ingresso/Corridoio
          x: -8500
          "y": -11500
      - id: 0
        icon:
          name: mdi:knife
          label: Cucina
          x: -1000
          "y": -15000
      - id: 1
        icon:
          name: mdi:sofa
          label: Salotto
          x: -2900
          "y": -5000
      - id: 7
        icon:
          name: mdi:bed
          label: Camera
          x: -15200
          "y": 0
      - id: 5
        icon:
          name: mdi:bed
          label: Cameretta
          x: -15200
          "y": -9000
      - id: 8
        icon:
          name: mdi:toilet
          label: Bagno Padronale
          x: -9000
          "y": 2200
      - id: 3
        icon:
          name: mdi:toilet
          label: Bagno Ospiti
          x: -17000
          "y": -14700
  - template: vacuum_clean_zone
  - template: vacuum_clean_zone_predefined
    predefined_selections:
      - zones:
          - - 239
            - 184
            - 1336
            - 665
        icon:
          name: mdi:rectangle
          x: -8500
          "y": -11500

Attributes:

[PiotrMachowski]

Yeah, only one should be added here. You can remove the first one

[dllfpp]

Did it, but problems persist..

[PiotrMachowski]

Any other errors in the console?

[dllfpp]

I have a few actually:

[PiotrMachowski]

I can't see anything related to the problem you have... By the way, can you check if it works in a different browser?