[SOLVED] How to get touch coordinates on a UI element?

Help & Support
1

Hi,

I’m trying to trigger a touch event when a player touches on a UI Element. For that purpose I use the following code.

UIElement.prototype.initialize = function() {

    this.entity.element.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
};

UIElement.prototype.onTouchStart = function(event){
     
    var touch = event.changedTouches[0];
    touch.screenX; // Screen coordinate
    touch.x; // undefined.
};

What I need is to find out is the coordinates of touch relative to that UI Element. However as the event is type of Touch and not pc.Touch, I just can’t get it.

Is there a smart way of doing this, without calculating it from screen coordinates?

2

I had the same issue and at the end I found this solution:

var p = pc.getTouchTargetCoords(event.changedTouches[0]);

It returns the same coordinates of the mouse click event.

2 Likes
3

Unfortunately the event.changedTouches[0].target is the application-canvas, not the UIElement. Hence I get exactly the touch.clientX and touch.clientY, when I do the conversion.

Independent of which element I attach the script to, target is always the application-canvas. I wonder what I am doing wrong.

4

Did you set useInput at true on the element?
Probably yes since you are getting the events…

5

Yes I have. I created a example project with the problem: https://playcanvas.com/editor/scene/594784

The “RightPlane” element has the script attached to it. However it seems like coordinates are relative to the “UserInterface” screen and not “RightPlane” element.

I implemented a work-around by calculating the coordinate using the element’s position relative to the screen. However I’m looking if there is a more elegant solution

Rotation.prototype.initialize = function() {
    
    var element = this.entity.element;
    
    this.elementX = element.screenCorners[0].x;
    
    element.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    element.on(pc.EVENT_TOUCHMOVE, this.onTouchStart, this);
    element.on(pc.EVENT_TOUCHEND, this.reset, this);
    element.on(pc.EVENT_TOUCHCANCEL, this.reset, this);
};

Rotation.prototype.onTouchStart = function(event){
    
    var touchX = event.changedTouches[0].clientX - this.elementX;
};
6

The Element touch events (or any other input events) do not return Element component coordinates. If you want to get the Element that was touched simply get it from event.element.

7

I have the reference to the Element already.

What I was looking for is, to get the local coordinates of touch relative to the Element initiated the touch. I can do it by using coordinates of the Element component and calculate it from the screen coordinates of the Touch (such as the example above). But I was looking if there is a more elegant solution :slight_smile:

8

I see - there is no built-in function to do that but you should be able to do it by using the Element’s canvasCorners property which contains the 4 corners of the element in canvas space.

9

so what is pc.getTouchTargetCoords for?

The documentation states:

This function takes a browser Touch object and returns the co-ordinates of the touch relative to the target element.

Is not this what Seyit is asking for? But for some reasons is not working because:

10

The target in that case refers to HTML elements. The Element components do not exist in HTML they are just regular meshes rendered in WebGL so that function doesn’t apply.

11

Thanks, sometimes it’s hard to understand in the events when we are dealing with PlayCanvas object and when with Dom.

12

Easiest way to check that is to inspect the page using the browser developer tools.

13

Thanks for all the answers.