How to send Touch Events through the Web-Browser [UMG] Widget in UE 5.1?

Community Community & Industry Discussion
,
1

Hey folks,

I want to send Touch Events instead of Mouse Events through the Web Browser Plugin? How can I solve this? Im also activated the “Use Mouse For Touch” setting in the editor preferences.

image
image1840×993 30.4 KB

2

If this is a custom plugin you have purchased or found online, please provide more detail on the plugin and where you downloaded it as well as which version you are using.

I suggest speaking to the plugin creator first and foremost as they should be able to support you as you are using their product.

3

Hi EliasWick,

thanks for your reply. Im using just the standard Web Browser Plugin which is provided by UE [Web Browser | Unreal Engine Documentation].

4

You can call javascript functions so all you need to do is create some event injectors and call them from blueprints.

_touches = [];
_inputDeviceCapabilities = new InputDeviceCapabilities({firesTouchEvents:true});

function updateTouch(touch){
  for(var i=0; i<_touches.length; i++) {
    var object = _touches[i];
    if(touch.identifier == object.identifier) {
      _touches[i] = touch;
      return;
    }
  }
  _touches.push(touch);
}
function removeTouch(touch) {
  for(var i=0; i<_touches.length; i++) {
    var object = _touches[i];
    if(touch.identifier == object.identifier) {
      _touches.splice(i);
       break;
    }
  }
}

function sendTouch(eventName,touch, element){
  var touchEvent = new TouchEvent(eventName, {
      cancelable: true,
      bubbles: true,
      touches: _touches,
      targetTouches: _touches,
      changedTouches: [touch],
      shiftKey: false,
      isTrusted: true,
      sourceCapabilities: _inputDeviceCapabilities,
      srcElement: element,
      target: element,
      view: window
    });
  element.dispatchEvent(touchEvent);
}

function _injectTouchStart(id,x,y) {
  var element = document.elementFromPoint(x, y);
  if(element==null) return;

  var touch = new Touch({
      identifier: id,
      target: element,
      clientX: x,
      clientY: y,
      screenX: x,
      screenY: y,
      pageX:x  + window.pageXOffset,
      pageY:y + window.pageYOffset,
    });

  //updateTouch(touch);
  sendTouch("touchstart", touch, element);
}

function _injectTouchMove(id,x,y) {
  var element = document.elementFromPoint(x, y);
  if(element==null) return;

  var touch = new Touch({
      identifier: id,
      target: element,
      clientX: x,
      clientY: y,
      screenX: x,
      screenY: y,
      pageX:x  + window.pageXOffset,
      pageY:y + window.pageYOffset,
    });

  updateTouch(touch);
  sendTouch("touchmove", touch, element);
}

function _injectTouchEnd(id,x,y) {
  var element = document.elementFromPoint(x, y);
  if(element==null) return;

  var touch = new Touch({
      identifier: id,
      target: element,
      clientX: x,
      clientY: y,
      screenX: x,
      screenY: y,
      pageX:x  + window.pageXOffset,
      pageY:y + window.pageYOffset,
    });

  //removeTouch(touch);
  sendTouch("touchend", touch, element);
}