Used PlayCanvas for weekend hackathon, a few questions regarding UI, jQuery and mobile touch

Work in progress
1

Hi there,

Myself and another dev decided to use PlayCanvas at the weekend for a hackathon, mainly as a way to learn PlayCanvas.

One of the big issues we ran into on the 2nd / last day was UI. We were able to pull in an external website using a jQuery load into a div ( the jQuery code was pasted into a script, and the script loading order was set ).

We ran into two issues…

  1. On mobile, touch no longer worked for rotating the object, when the UI was overlaid.

  2. We couldn’t get the buttons working from the HTML that JQuery loaded into the div.

While the hackathon is over, I’d be keen to see if there is something simple that we missed in order to resolve the two issues above.

Here’s the link to the published version. Note that none of the buttons are set to interactive. If you try this with a mouse, you’ll be able to rotate the model, but on mobile you wont ( see 1 - when the UI is removed, you can rotate it OK on mobile )

http://playcanv.as/p/PHk2kubY

The project is called Hackathon ( it’s a public project ), I’m not sure what link is required to share the project here so that it can be forked and tweaked.

If anyone can help I’d be very grateful.

Best regards…
Mal

1 Like
2

Hi @Mal_Duffin, nice little hackathon project.
So the problem is that you have two full-screen <div> elements, overlapping everything. They very likely intercept touch events. Touch events are most likely are subscribed to a <canvas> element, so it ends up not getting any events.
Easiest fix in this situation, is to set TouchDevice to subscribe to window, for that just add this line before your touch events:
app.touch = new pc.input.TouchDevice(window);

You can use html and css asset types as well. Here is an example of live-reloading ui code: https://playcanvas.com/project/354600/overview/htmlcss--live-updates