Problem in v2.0.0+ in Firefox, Safari and iOS companion app

[HepoH3]

Checklist

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

The problem

Hello, thank you for still working on this card. Apparantly there is a problem with picking up the point / moving / resizing custom zone area in firefox browsers. In Chrome and Edge browsers that's working just fine.

Chrome: Firefox (can't set point):

What version of a card has described problem?

v2.0.0

What was the last working version card?

No response

What vacuum model do you have problems with?

STYJ02YM

What version of Home Assistant do you use?

2021.11.3

What type of installation are you running?

Home Assistant OS

Card's configuration

- type: custom:xiaomi-vacuum-map-card
    entity: vacuum.kraken
    map_source:
      camera: camera.vacuum_extractor_camera
    calibration_source:
      camera: true
    map_modes:
      - template: vacuum_clean_zone
      - template: vacuum_goto
    vacuum_platform: KrzysztofHajdamowicz/miio2

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

Uncaught ReferenceError: TouchEvent is not defined
    _drag http://homeassistant.local:8123/hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js:181
    render http://homeassistant.local:8123/hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js:150
    handleEvent http://homeassistant.local:8123/hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js:31

Additional information

No response

[nickdos]

Seeing similar issues on Safari and Mac OS Companion app (v.2.0.1).

I can't move or change the size of manually added zones. I also can't remove a zone via the x either. When the map is "unlocked" and I add a manual zone, when I try to move the newly created zone, the entire map moves and not the zone. If I lock the map then nothing happens when trying to move the zone. Click and dragging does nothing.

Similarly on the iOS companion app I can't move, resize or remove a zone added via "Zone cleanup".

On Chrome (Mac) functionality works as expected but on FireFox I see a similar issue as above.

I'm also not seeing any predefined zones (discussion created), so thinking this bug might be related.

[Lyr3x]

Besides that I can also confirm that the bug exists in safari and the iOS/iPadOS I just want to state that the ROOM listing is also not working. In Chrome everything runs fine

[PiotrMachowski]

There are major improvements in v2.0.2, most of functionalities should work.

Remaining problem: selections are not mapped correctly when map is zoomed-in

[nickdos]

Just tested v2.0.2 and Safari is working now.

However both the iOS and Mac OS companion apps still do not show the zones. I've forced the apps to reload a few times and still not zones showing. I even edited the config to change the card display a little and the changes appeared but still no zones.

I do note that the manual zones are now working as expected on all browsers, so getting there 👍

[PiotrMachowski]

@nickdos can you check if any of new feature works on iOS/Mac to make yourself sure that they use the latest release? The easiest way to do it is to add language to config:

type: custom:xiaomi-vacuum-map-card
language: it
...

[nickdos]

Hey @PiotrMachowski - tried that. Still no good on companion apps:

vs Safari is OK:

[PiotrMachowski]

@nickdos does it work on mobile safari?

[nickdos]

No, not working on Safari browser on iOS, either. Chrome on iOS not working either but both use WebKit, so not surprising.

[Lyr3x]

After deleting the cache of the app the zones appear on my app but labels and icons not. I can also start the room cleaning. After closing the app I need to clear the cache again to make the rooms appear.

[PiotrMachowski]

@Lyr3x You can change URL in resources by adding ?v=v2.0.2, it should solve caching problem

[Lyr3x]

I added

/hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js?v=v2.0.2

that's not working either :) after a swipe down the zones are gone again

[PiotrMachowski]

If you use HACS then HACS should handle this case by itself... You can try removing and reinstalling the card

[Lyr3x]

I did, and already was on the latest version. But still in iOS zones, icons and texts are gone and only visible for a short time after clearing the frontend cache.

Edit: I just realized the behavior is slightly different. I can also navigate through homeassistant views and the zones appear after coming back to the view with the map card (text and labels are on the exact some position stacked). When swiping down to refresh, the zones are gone. This is the behavior for iOS/iPadOS and Safari

Safari / iOS stacked icons/texts:

Safari / iOS zones available after first navigation to the view:

Safari / iOS after a refresh (CMD+R / Swipe down):

Chrome / Android:

[cris1410]

Hi guys, I can confirm correct behavior on Safari on PC or MAC and still incorrect behavior on iOS web browsers.

[HepoH3]

@PiotrMachowski, from my side I can tell that problem gone in my Firefox browser, so appantly now this problem remain only on iOS.

[PiotrMachowski]

@HepoH3 there is still a problem with Firefox: pin & go doesn't work properly when zoomed-in.

[HepoH3]

@HepoH3 there is still a problem with Firefox: pin & go doesn't work properly when zoomed-in.

Oh, indeed. I just locked map from zooming/moving and didn't notice that.

[StWiesi]

I am also having issues with Safari on MacOS. In Chrome everything works flawlessly. I am using selection of predefined zones, selected zones and pin and go - including icons and labels.

In Chrome, selection of predefined zones looks like this:

In Safari, it looks like this with icons all being crunched together on the top left:

Also, on Safari some other things don't work reliable - at least for me. Here are some steps to reproduce this:

1. Refresh website where the card is on
2. Zone selection is selected by default - don't touch it
3. Add a rectangle by pressing + button.
4. Size cannot be adjusted, rectangle cannot be deleted
5. Select predefined zone option - looks like the picture above with incorrectly located icons; zones can be selected though
6. Select Pin & Go - works fine.

If I refresh the website once more , but don't add a zone as mentioned in step 2 above, but just move to Pin & Go right away, I cannot set any pin. If I then select predefined zones not only the icons are off, but also the labels:

So, it seems that when I initially add a selection (which cannot be deleted or adjusted) and then select one of the other options, everything (except icons for predefined zones) works fine - even the adjusting of a selected zone if I go back to that option. If I don't add a selection in the beginning, almost nothing works properly.

//edit - also wanted to mentioned that I highly appreciate the work you have been putting into this. I will send over a donation for all the time you spent! Thanks for doing this!!

[PiotrMachowski]

@HepoH3 @nickdos @Lyr3x @cris1410 @StWiesi

Everything should be fixed in v2.0.3, can you confirm it?

[HepoH3]

@HepoH3 @nickdos @Lyr3x @cris1410 @StWiesi

Everything should be fixed in v2.0.3, can you confirm it?

Yup, works in firefox on original scale and when scaled up and(or) moved map. Good work!

[Lyr3x]

iOS looks good now too. Thank you:)

[nickdos]

Hey @PiotrMachowski - looks good to me on both iOS and Mac companion apps. Great work fixing this 💪

[StWiesi]

Hey @PiotrMachowski,

almost everything works fine now. Pin & Go & predefined zones are not having any issues. However, the (non-predefined) rectangular zone selection is not adjustable/movable/deletable if it is the first thing I do when loading the card. After using predefined zones or pin & go, the rectangular selection works fine again.

Thanks for the quick fixes though!!

//edit - using macOS 11.6 and Safari 15

[Lyr3x]

On my iPhone and iPad the zoned cleanup where you just set the rectangle, is working fine. I can move and resize it with no issues. Not using the Mac app though!

[PiotrMachowski]

@StWiesi is there anything in browser's console?

[StWiesi]

@StWiesi is there anything in browser's console?

unfortunately, no. Just the information around what cards and version I am using. Since "XIAOMI-VACUUM-MAP-CARD Version v2.0.3" is displayed it should be the updated version already.

[PiotrMachowski]

Can you show a screen recording of the problem?

[StWiesi]

Sure - you can see it here:

https://user-images.githubusercontent.com/29369564/142850746-59d603ec-b24b-4309-90b4-5cb542a47ed5.mov

[PiotrMachowski]

Can you try disabling map_locked and try again?

[StWiesi]

Just the map shifts initially:

https://user-images.githubusercontent.com/29369564/142887297-3bc4af04-fcc3-44dc-a363-e41228b8384c.mov

[PiotrMachowski]

@StWiesi any change in v2.0.5?

[StWiesi]

Hey @PiotrMachowski,

unfortunately, no change in behavior.

[cris1410]

Hi,

I can confirm that v2.0.5 works for me on 98%. Only issue is exactly what @StWiesi reported " rectangular zone selection is not adjustable/movable/deletable if it is the first thing I do when loading the card. After using predefined zones or pin & go, the rectangular selection works fine again."

But this is not big limitation for me. Thank you @PiotrMachowski

[PiotrMachowski]

@StWiesi @cris1410 v2.0.6 should fix the last 2% 🙂 Can you check it out?

[StWiesi]

Hey @PiotrMachowski,

unfortunately, still the same issues as before 🙈 I am on v2.0.7

[PiotrMachowski]

@StWiesi Can you try again in incognito mode?

[StWiesi]

Still the same behavior - I tried it several times always opening a new private window in Safari.

[PiotrMachowski]

@StWiesi that's really weird, it works on my instance with iPhone 6s... Is there anything in browser's console? Does the map blink after switching "locked mode"? Is the map restored to default position after locking?

[StWiesi]

Hey @PiotrMachowski,

I made another video to better illustrate it. I am using a Macbook Pro with macOS Big Sur 11.6 and Safari 15.1

Is it working for you @cris1410?

https://user-images.githubusercontent.com/29369564/143618929-0c9d456a-6c21-4248-aad0-1a20d85940e0.mov

[PiotrMachowski]

Can you check browser's console for any errors? It should also contain a badge with currently loaded version (to confirm that everything is loaded correctly)

[StWiesi]

no errors at all - v2.0.7 is loaded.

[PiotrMachowski]

Ok, I'm out of ideas... It works perfectly well on all my devices. I think I will close this issue and create a new one just for this specific case

[PiotrMachowski]

I have created a dedicated issue for this case: #230

[cris1410]

@StWiesi @cris1410 v2.0.6 should fix the last 2% 🙂 Can you check it out?

Still same behaviour. But as I said, its not big deal. just need to switch either to Pin&Go or Zone list and then back to Zone cleanup.

[PiotrMachowski]

@cris1410 @StWiesi You can also try to change order of map modes to make "Zone cleanup" a non-default one

[StWiesi]

@cris1410 @StWiesi You can also try to change order of map modes to make "Zone cleanup" a non-default one

That's what I did. Makes everything work perfectly for me :)