Added Touch Events to mojo.html5.js

Monkey Targets Forums/HTML5/Added Touch Events to mojo.html5.js

Indiepath(Posted 2011) [#1]
Version29 does not have proper touch events so I've added them - Your HTML5 apps will now respond correctly to single touch events. It would be simple to add gestures (multi touch events) but they would need interfacing back into the main monkey codebase.

Starting at line 120 of mojo.html5.js I added the following code :




Indiepath(Posted 2011) [#2]
There seems to be an issue with the event handling whereas touchmove appears to be sending touchstart and touchend events!! Will investigate further :)

Edit: ignore that previous comment - I had a moment!


Beaker(Posted 2011) [#3]
Nice one.

Does this stop the unwanted scrolling on touch devices?

I posted this somewhere before:
Is it possible to add something like the code below to the HTML5 target so that it will work much nicer on touch devices? It converts touches to mouse events and stops the default scrolling behaviour.
             canvas["ontouchmove"] = function(ev){  
                 var touch = ev.touches[0],  
                 // simulating a mousemove event           
                 simulatedEvent = document.createEvent("MouseEvent");  
                 simulatedEvent.initMouseEvent("mousemove", true, true, window, 1,  
                               touch.screenX, touch.screenY,  
                               touch.clientX, touch.clientY, false,  
                               false, false, false, 0, null);  
                 // dispatching the simulated event              
                 touch.target.dispatchEvent(simulatedEvent);  
                 // we don't want to have the default iphone scrolling behaviour ontouchmove  
                 ev.preventDefault();  
             };



Indiepath(Posted 2011) [#4]
Yes it stops the propogation of default events - try it and see :)


Indiepath(Posted 2011) [#5]
Found the interface point for multiple touch events - will update here soon.


Indiepath(Posted 2011) [#6]
Ok - Multiple touch events are working and can be accessed using simple code :
/* Because you have 32 fingers right? */
For Local i=0 Until 32
	If TouchDown( i ) Print "touching "+i+":"+TouchX(i)+":"+TouchY(i)
Next


The Touch events will also simulate mouse events - this is much faster than relying on onmousemove etc....

The following changes were made to mojo.html5.js..

In GameMain function


gxtkInput function:


And added the following prototypes to gxtkInput class


And finally changed these prototypes:



matt(Posted 2011) [#7]
Nice work. Would you be up for using github to manage changes as we go forward?

It's just an idea at the moment, nothing is confirmed.


Indiepath(Posted 2011) [#8]
@ Matt, yes, no problem. I'm a bit of a subversion fan but I do use GIT when needed by clients ;)


Beaker(Posted 2011) [#9]
Cool. Works really well. Tested on iPhone and on Android G1 (with Gingerbread), both fine. Multitouch doesn't work correctly on G1, it does pinch-zoom instead, but no harm done.


Indiepath(Posted 2011) [#10]
Perhaps g1 interprets a gesture. I noticed a bug with some objects left on screen, I'm positive it's a small issue.


marksibly(Posted 2011) [#11]
Hi,

Indiepath, can you email me (or activate your email address in your profile?).


Indiepath(Posted 2011) [#12]
Improved the touch code - it now tracks touches via the unique event identifier.




Difference(Posted 2011) [#13]
Is this going to be added officially or will we have to hack it in?

It seems like something that could be very usefull for testing multitouch apps if it works in Safari on ipad an iPhone.


xzess(Posted 2011) [#14]
i can't get it to work when i add this, and replace theApp with app, scrolling stopped but no touch working on iphone and if i test it in chrome on pc, the mouse coordinates are now wrong

any help on this?
mark can you add this to 1.40 ?

i really want touch in safari working :)


Beaker(Posted 2011) [#15]
Any chance this could be added to mojo officially? (and tilt if possible). Cheers.


Difference(Posted 2011) [#16]
Bumb'n, because I'm trying to hack this in again in v 48.

Any chance of an official update?


Difference(Posted 2011) [#17]
I didn't get Indiepaths version working at first try, so I added the code below in mojo.html5.js , - just below the canvas.onmousemove function.

It worked well enough for a little test, but your milage may vary.

I then realized that it's important that the ev.preventDefault(); is made optional, because if you put a GameCanvas in a mobile html page, it's important that you can scroll out of it/away from it if needed.

Therefore I think we should leave the ev.preventDefault(); stuff as a function in the surrounding html.
( as explained here: http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications )