GWT Support for Touch Event

[Velusamy Velu]

I'm implementing an online drawing tool using GWT & HTML5. I have handled mouse events successfully and I'm venturing in to handling touch events to cover devices that only fire touch events. I have tried  com.google.gwt.event.dom.client.Touch*Events. 

I do notice TouchStart, TouchMove, & TouchEnd events being fired. However, when these events utilized (start drawing, continue drawing, finish drawing; for e.g., a line) handling events become inconsistent. TouchStart is always handled well but the other two, TouchMove and TouchEnd aren't handled consistently. Given below is a segment of code.

drawingPaper.sinkEvents(Event.TOUCHEVENTS);

// Handle touch start
drawingPaper.addHandler(new TouchStartHandler() {

  @Override

  public void onTouchStart(TouchStartEvent event) {

    startingPoint = PointerEventHelper.getUsableLocation(event, ...);
    // no device specific code in the method below

    handlePointerDownActionImpl(); /* Consistently getting called */

  }

}, TouchStartEvent.getType());

// Handle touch move

drawingPaper.addHandler(new TouchMoveHandler() {

  @Override

  public void onTouchMove(TouchMoveEvent event) {

    currentLocation = PointerEventHelper.getUsableLocation(event, ...);
    // no device specific code in the method below

    handlePointerMoveActionImpl(); /* Call to this is inconsistent */

  }

}, TouchMoveEvent.getType());

I'm using browsers like Chrome, Firefox, Duck Duck Go, Bravo, Opera, and Opera Mini on my Pixel 2 and Samsung Galaxy Tab A.

Any suggestions would be very much appreciated.

[Jens]

Touch devices usually emulate classic click / mouse move events as well, so if you have handlers for both they might interfere each other and breaking code assumptions.

Other than that, GWT does not do any real magic when it comes to events. Touch events are handled the same as click events or other browser events.

Maybe you should log all events using an event preview handler to figure out why your code does not work as expected.

-- J.

[Velusamy Velu]

Jens:

I appreciate your feedback. "Touch devices usually emulate classic click / mouse move events as well" - I understood that but the touch move is not translated into a mouse move with the button down. That's the only reason I ventured into supporting touch events.

"so if you have handlers for both they might interfere each other and breaking code assumptions." - Yes, I'm aware of that. To solve it I have separate handlers which extract the position of the click/touch & current position when moving. Doing anything with those coordinates is a whole different task and handled by different methods.

"Maybe you should log all events using an event preview handler to figure out why your code does not work as expected." I did all these without any success and coming to this forum only as a last resort for help.

--v

[Jens]

"Maybe you should log all events using an event preview handler to figure out why your code does not work as expected." I did all these without any success and coming to this forum only as a last resort for help.

So you are saying the browser fires a touchend event but the GWT event handler isn't called as a result?

The issue with help requests in the form of "something does not happen in my app" is that we don't have the app :) So technically it is easier for you to debug your app to figure out why the handler isn't called. If the browser did not generate a touchend event then you already have you answer. Or maybe you have called event.preventDefault() somewhere which causes some events not to fire. 

Maybe you can make a minimal example project that mimics your application code and shows the problem you have.

-- J.

[Jens]

So you are saying the browser fires a touchend event but the GWT event handler isn't called as a result?

or touchmove

[Craig Mitchell]

I found this as well.  I think browser implementation of these old single touch events isn't great.  I switched to using the multi touch versions.  Something like this:

private HashMap<Integer, Touch> touches;

private void handleScreenTouches(JsArray<Touch> newTouches, boolean touchDown) {

  // Update the touch collection

  for (int i=0; i<newTouches.length(); i++) {

    Touch touch = newTouches.get(i);

    if (touch != null) {

      if (touchDown) {

        touches.put(touch.getIdentifier(), touch);

      }

      else {

        touches.remove(touch.getIdentifier());

      }

    }

  }

  // Look through the remaining touches
  for (Touch touch : touches.values()) {
    ...
  }

}

drawingPaper.addDomHandler(event -> {
    handleScreenTouches(event.getChangedTouches(), true);
}, TouchStartEvent.getType()));


drawingPaper.addDomHandler(event -> {
    handleScreenTouches(event.getChangedTouches(), true);
}, TouchMoveEvent.getType()));


drawingPaper.addDomHandler(event -> {
    handleScreenTouches(event.getChangedTouches(), false);
}, TouchEndEvent.getType()));

[Velusamy Velu]

Craig:

I appreciate your suggestion. Behind the scene I'm handling multiple touches, though only one touch is being considered. The difference between your approach and mine is drawingPaper.addDomHandler and drawingPaper.addHandler. I will give it a try and let you know.

Thank You

--v

[Velusamy Velu]

Craig:

Tried your suggestion, apparently drawingPaper.addDomHandler and drawingPaper.addHandler are behaving identically. The first touch (equivalent to mouse button down), the first "touch move" (mouse move) and touch end (mouse button up) are working as expected. The subsequent touches and touch moves are unpredictable. It appears that once a touch event is handled (touch down or touch move or touch end) there appears to be a requirement to do a "cleanup". Though it's not clear what it is supposed to be. Any ideas? Please let me know.

Thank You

-Velu

[Craig Mitchell]

Ah, sorry, yes. I was remembering.

Maybe try calling preventDefault and/or stopPropagation on the event.

On my app, all the events come through perfectly.  I do however, only have a Canvas on the page.  No other HTML elements to mess with the events.

[Velusamy Velu]

Craig:

This seems to be an unyielding beast, at least for me.

I have added event.preventDefault() and event.stopPropagation() and tried. The major difference between your app and my app is the use of canvas vs SVG. I'm using SVG.

I do see TouchStart, TouchMove, & TouchEnd but inconsistently.

I'm stopping this effort for now and revisit later.

Thanks for your suggestions.

[Velusamy Velu]

Jens:

Earlier you said "Touch devices usually emulate classic click / mouse move events as well". I have seen the mouse event handlers handling TouchStart consistently, as you said. But the same is not true for TouchMove. I have code that has been working as expected in handling mouse events. But the same set of code work only for the TouchStart.

event.preventDefault() & event.stopPropagation() didn't make any difference.

I see the value in creating a sample project to isolate the error. Thanks for your suggestion, we will work on that.

--Velu