search

serge-web / map

Mapping component used in Serge wargaming environment.
https://serge-map.herokuapp.com/index.html
Apache License 2.0
1 stars 0 forks source link

Touchscreen Zoom #21

Open IanMayo opened 5 years ago

IanMayo commented 5 years ago

Feedback: this morning I had chance to load your map on one of the customer's large touch-screen panels.

The two-finger zoom operation panned the whole page, not just the map component. So, as the game designer zoomed in, the outer buttons disappeared.

Note: the zoom-on and zoom-out SVG buttons do just zoom in/out on the map component.

Maybe we need to learn lessons on this, and put focus onto the map before pinch-to-zoom.

BMPMS commented 5 years ago

Hi Ian,

Apologies if this caused embarrassment. I’m pretty sure that it wasn’t happening on my iPad but I may have missed it. I will test later. I suspect the map panning was overruled by the panning on the page overall and I will need to turn off pan/zoom on everything but the map. Which should be a line of code so no biggie.

P.S Hope it looked ok otherwise? Were they pleased?

On 19 Mar 2019, at 13:26, Ian Mayo notifications@github.com wrote:

Feedback: this morning I had chance to load your map on one of the customer's large touch-screen panels.

The two-finger zoom operation panned the whole page, not just the map component. So, as the game designer zoomed in, the outer buttons disappeared.

Note: the zoom-on and zoom-out SVG buttons do just zoom in/out on the map component.

Maybe we need to learn lessons on this, and put focus onto the map before pinch-to-zoom.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/serge-web/map/issues/21, or mute the thread https://github.com/notifications/unsubscribe-auth/ARwFYnfLtUrhQX3LzOktK-KxmehnTkBjks5vYOWVgaJpZM4b8IH6.

IanMayo commented 5 years ago

Hey, nothing to apologise for - it was the whole point of testing it on their IT.

There were only 3 of us in the room, but the room still went silent as Ed panned in, then zoomed the hex grid on the large wall mounted monitor.

Precisely the correct level of razzmatazz :-)

BMPMS commented 5 years ago

Afternoon to you Ian,

Hope you've had a good week? Just caught a moment to test the page on my mobile and the zooming panning is working as expected - mysterious..

Any thoughts on why their environment is different?

One thing that is wrong is the page doesn’t fit in the screen properly - possibly because I am using clientHeight/clientWidth? It doesn’t account for the scrollbar/footer space.

On 19 Mar 2019, at 13:39, Ian Mayo notifications@github.com wrote:

Hey, nothing to apologise for - it was the whole point of testing it on their IT.

There were only 3 of us in the room, but the room still went silent as Ed panned in, then zoomed the hex grid on the large wall mounted monitor.

Precisely the correct level of razzmatazz :-)

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/serge-web/map/issues/21#issuecomment-474374026, or mute the thread https://github.com/notifications/unsubscribe-auth/ARwFYpAMG6gl9I8T4d9jwFU38tfMgGVoks5vYOiIgaJpZM4b8IH6.

IanMayo commented 5 years ago

Hello @BMPMS , I'm mostly on Debrief, but I'm starting to see steps forward in the Game Designer implementation.

It was on the MS Windows touch-table that we encountered it. I haven't worked with them before. I can ask them the name of the specific model they're using, and maybe we can learn more about how it works.

I've a suspicion that the touch screen is just treated as another mouse. So, pinch just results in a mouse drag operation. Hmm, maybe not - since the mouse drag equivalent of the pinch operation would just zoom in.

The worst possible outcome would be me buying a MS Windows touch tablet for you to experiment on, but I'm sure neither of us want that :-)

BMPMS commented 5 years ago

I’ll have a browse on Stack Overflow…Might be an IE thing?

On 21 Mar 2019, at 16:10, Ian Mayo notifications@github.com wrote:

Hello @BMPMS https://github.com/BMPMS , I'm mostly on Debrief, but I'm starting to see steps forward in the Game Designer implementation.

It was on the MS Windows touch-table that we encountered it. I haven't worked with them before. I can ask them the name of the specific model they're using, and maybe we can learn more about how it works.

I've a suspicion that the touch screen is just treated as another mouse. So, pinch just results in a mouse drag operation. Hmm, maybe not - since the mouse drag equivalent of the pinch operation would just zoom in.

The worst possible outcome would be me buying a MS Windows touch tablet for you to experiment on, but I'm sure neither of us want that :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/serge-web/map/issues/21#issuecomment-475295998, or mute the thread https://github.com/notifications/unsubscribe-auth/ARwFYj7oz5f67VNVgUWSCXZofipf1EX0ks5vY68HgaJpZM4b8IH6.

IanMayo commented 5 years ago

It's almost certainly either IE or MS Windows related.

I've asked them for the model numbers for the wall mounted and rotatable touch screens. But, I know they're busy this week, so I've told them there's no rush for the answer.

IanMayo commented 5 years ago

I've just found out the model: C-Touch UHD Laser Sky

I've just had a play with the map on my ChromeOS Pixel Slate tablet - and had this behaviour: https://photos.app.goo.gl/EJiRPp8yDKXUkHSLA

(hopefully that link works).

As you should have seen - it's the whole page that zooms in (so we see the icons disappear at the bottom).

So, that's two operating systems where the issue happens.

BMPMS commented 5 years ago

Hmmm - the plot thickens. Great that we now have a test environment. Any chance there are any errors being thrown?

Not something for Friday afternoon but I’ll look at it with a fresh head early next week.

On 22 Mar 2019, at 12:55, Ian Mayo notifications@github.com wrote:

I've just found out the model: C-Touch UHD Laser Sky

I've just had a play with the map on my ChromeOS Pixel Slate tablet - and had this behaviour: https://photos.app.goo.gl/EJiRPp8yDKXUkHSLA https://photos.app.goo.gl/EJiRPp8yDKXUkHSLA (hopefully that link works).

As you should have seen - it's the whole page that zooms in (so we see the icons disappear at the bottom).

So, that's two operating systems where the issue happens.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/serge-web/map/issues/21#issuecomment-475610556, or mute the thread https://github.com/notifications/unsubscribe-auth/ARwFYny8-J-k6KGGfc9y4a2bCg42ULO9ks5vZNKqgaJpZM4b8IH6.

IanMayo commented 5 years ago

As ever, no rush :-)

IanMayo commented 5 years ago

I'm just recording this now, so I don't forget.

  1. I should test Pan on my tablet, to see if that works as expected - or if it tries to pan the whole page
  2. If, for some reason we ultimately can't support pinch-to-zoom on the target devices, a zoom slider would be a suitable alternate method. I know we already have the in/out buttons, but continuous zoom is so much more dynamic & interesting on those large screens (<- as discussed, this is one of the soft requirements of the venture).
IanMayo commented 5 years ago

Just done some Googling on the issue, to see what other people have experienced. Found these:

  1. https://github.com/openstreetmap/iD/issues/5492
  2. https://stackoverflow.com/questions/53231736/touch-handling-completely-broken-on-chrome-version-70
  3. https://stackoverflow.com/questions/22999829/disable-chrome-pinch-zoom-for-use-in-kiosk
  4. https://stackoverflow.com/questions/44456764/how-to-simulate-pinch-zoom-in-google-chrome
  5. https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
IanMayo commented 5 years ago

Hey, the fix worked on the big screen!

The screen is 3840 by 2160. It does look really, really great. One item of feedback - I'll post it in a new issue (no rush).