To follow up on the last post – where we talked about adding a custom tool to provide better support for pinch gestures – today we’re going to talk about some other possibilities for supporting touch in the Forge viewer. Once again we’re using Autodesk.Viewing.ToolController & ToolInterface.
The Forge viewer uses Hammer.js internally to support touch, so that’s one good place to look for clues on how things work. (Groan – I’ve just realised why it’s called “Hammer”… “you CAN touch this!” :-)
I was looking into how to support both “touch-capable” (i.e. they also have mouse & keyboard input) and “touch-only” (your typical phone or tablet) devices. Going from how Hammer.js works – and some info on Stack Overflow – I ended up creating these two utility functions in TypeScript:
export function isTouchDevice(): boolean {
return 'ontouchstart' in window || !!navigator.maxTouchPoints;
}
export function isTouchOnlyDevice(): boolean {
let mobileRegEx = /mobile|tablet|ip(ad|hone|od)|android/i;
return isTouchDevice() && mobileRegEx.test(navigator.userAgent);
}
I’ve found when using the Forge viewer in Dasher 360 that sometimes you get both mouse and touch events for the same operation, but at other times it has decided only to send touch events. And this was when running the page on my phone, which was more than a little confusing. It wasn’t fully clear what logic – or sequence of operations – led to these two scenarios occurring.
Rather than using the above functions – which have come in handy for other things, such as showing larger sensor dots on touch-only devices – I decided to set a simple flag in the handleSingleClick() event and then look for it later in the handleSingleTap() event. (The first is a mouse event, the second a touch event.) This way I can perform the operation “on click”, set the flag, and then if I get “on tap” I can choose not to repeat it and then reset the flag. This way if only touch events come through I can perform the event each time as the flag hasn’t been set.
This approach seems to work fairly well for my needs. I also very much like the fact that I can return true from various event handlers to prevent stray clicks, taps and double-clicks/-taps from doing strange things – like selecting objects or zooming into an area – in the Forge viewer. This has done a lot for our user experience, in my opinion.
Here are a few screenshots of how Dasher 360 is currently looking on mobile (these changes are on staging, but will soon make it into the live site):
On a side note, the Autodesk.Viewing.ToolController/ToolInterface implementation is proving to be very handy indeed: I’m also using it to avoid adding mouse handlers directly on the document or canvas, as I was doing previously. This makes for a much more elegant implementation: if you haven’t already looked at this mechanism, I strongly recommend doing so.
