Event touch start and end on the smarthone?

Hi, @ryantrem
I have found old code for touch event on android mobile:

const deviceSourceManager = new DeviceSourceManager(engine);
deviceSourceManager.onAfterDeviceConnectedObservable.add(deviceEventData => {
  if (deviceEventData.deviceType === DeviceType.Touch) {
    const deviceSource = deviceSourceManager.getDeviceSource(deviceEventData.deviceType, deviceEventData.deviceSlot)!;
    deviceSource.onInputChangedObservable.add(inputEventData => {
      if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.currentState === 1) {
        // process touch down event
      } else if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.currentState === 0) {
        // process touch up event
      } else if (inputEventData.inputIndex === PointerInput.Horizontal || inputEventData.inputIndex === PointerInput.Vertical) {
        // process touch move event
      }
    });
  }

New code is slightly different:

      const deviceSourceManager = new DeviceSourceManager(engine);
       const handlePointerInput = (event: IMouseEvent) => {
         if (event.inputIndex === PointerInput.Move && event.movementX) {
           rootNode.rotate(Vector3.Down(), event.movementX * 0.005);
        };
      };

The question: what is the event for touch start and end now? PointerInput.LeftClick ??

You can use pointer events from that (and I do hope I understood the question correctly!)
pointer down and pointer up are your touch start and touch end, and they have their own pointerId per finger if you want to support multitouch

const deviceSourceManager = new DeviceSourceManager(engine);
       const handlePointerInput = (event: IMouseEvent) => {
         if (event.inputIndex === PointerInput.Move && event.movementX) {
           // process touch move event
        } else if (inputEventData.inputIndex === PointerInput.LeftClick && event.???) {
        // process touch down event
      } else if (inputEventData.inputIndex === PointerInput.LeftClick && event. ???) {
        // process touch up event
      };

I need new variable instead of these: event.currentState === 0
Combination for “touch down” does not work:

inputEventData.inputIndex === PointerInput.LeftClick && event.movementX === 0

I am not 100% sure where this code is from, so I can’t comment on it specifically, but pointer down and up should work just fine for touch events.

pinging @PolygonalSun which must have a better insight into the device source manager :slight_smile:

1 Like

I traced this down early this year for picking on XR, Simulated pointer stuff does end up as pointer events, but only as long as the application layer has a listener. Pretty sure touch is simulated.

Touch events are using native pointer events, not simulated by us in any way. Pointer events - Web APIs | MDN

XR is simulating pointer event to stay conform with the rest of the framework :slight_smile:

1 Like

I believe you’d replace:

if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.currentState === 1) {
  // process touch down event
} else if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.currentState === 0) {
  // process touch up event
} 

with:

if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.type === 'pointerdown') {
  // process touch down event
} else if (inputEventData.inputIndex === PointerInput.LeftClick && inputEventData.type === 'pointerup') {
  // process touch up event
} 

@PolygonalSun can confirm.

Also, is this in the context of Babylon React Native, or only in the browser?

If you’re working with the IMouseEvent directly, you could use “pointerdown” and “pointerup” for the type to determine up and down. You could also make use of a modified form of the code that you linked in the original post:

    const deviceSourceManager = new BABYLON.DeviceSourceManager(engine);
    deviceSourceManager.onDeviceConnectedObservable.add(deviceEventData => {
        if (deviceEventData.deviceType === BABYLON.DeviceType.Mouse) {
            deviceEventData.onInputChangedObservable.add(inputEventData => {
                if (inputEventData.inputIndex === BABYLON.PointerInput.LeftClick && deviceEventData.getInput(inputEventData.inputIndex) === 1 ) {
                    // process touch down event
                } else if (inputEventData.inputIndex === BABYLON.PointerInput.LeftClick && deviceEventData.getInput(inputEventData.inputIndex) === 0) {
                    // process touch up event
                } else if (inputEventData.inputIndex === BABYLON.PointerInput.Move) {
                    // process touch move event
                }
            });
        }
    });

cool, it works. Thank you very much.
But one question:

const handlePointerInput = (deviceEventData: DeviceSource , inputEventData: IMouseEvent)

Is that right deviceEventData is of Type “DeviceSource” ?

Actually, it’s just the deviceType and slot so the example I put is slightly incorrect. This would be the correct version:

const deviceSourceManager = new BABYLON.DeviceSourceManager(engine);
    deviceSourceManager.onDeviceConnectedObservable.add(deviceEventData => {
        const deviceSource = deviceSourceManager.getDeviceSource(deviceEventData.deviceType, deviceEventData.deviceSlot);
        if (deviceEventData.deviceType === BABYLON.DeviceType.Mouse) {
            deviceSource.onInputChangedObservable.add(inputEventData => {
                if (inputEventData.inputIndex === BABYLON.PointerInput.LeftClick && deviceSource.getInput(inputEventData.inputIndex) === 1 ) {
                    // process touch down event
                } else if (inputEventData.inputIndex === BABYLON.PointerInput.LeftClick && deviceSource.getInput(inputEventData.inputIndex) === 0) {
                    // process touch up event
                } else if (inputEventData.inputIndex === BABYLON.PointerInput.Move) {
                    // process touch move event
                }
            });
        }
    });

Sorry about that

thaks, super :slight_smile: