MooTools Multitouch Event Class for Android and iOS

Multitouch and Mobile Devices..#

There are several tutorials and demos about multitouch usage on mobile devices on the web, but they cause some platform dependend problems: e.g. on Android 3.1 multitouch events are limited on a single dom element and touchmove/touchend cannot correctly added to DOM-Elements. So here is the platform independent way with desktop browser fallback!
This simple Demo shows the multitouch capability of your mobile device within the webbrowser – just touch on the screen and move your fingers ;)

MooTools Event Class#

You know, i love MooTools – the (imao) best avaible javascript framework. Therefore i’ve written a very small, lightweight class for the usage of multitouch, which is successfully tested on the following devices:

• Thinkpad Tablet Android 3.1
• Apple iPad2 iOS 5
• Apple iPhone4G iOS 5
• Sony Xperia ARC Android 2.3

The class provides the ability to add touch events on several elements. Also multitouch on different DOM-Elements is supported by observing the complete DOM-Document, instead of a single element. You can also configuring the FPS, per default all movement events are handled with 50FPS – this will singificant increase the performance in comparison to add single events on each element.

Events#

Currently the following events are implemented:

• touchuistart
• touchuimove
• touchuistop

Usage#

It is very important, that you did not create an instance of the A3non.UI.TouchManager class – a single instance will be automatically created by including the javascript file into your webpage! By adding the touchuistart event to an element, it will be registered to the TouchManager observer!

JS Example – Display finger positions#

[js]
window.addEvent(‘domready’, function(){
// list of html div markers
var fingerMarkers = new Hash();

document.id(‘uiarea’).addEvent(‘touchuistart’, function(x, y, id){
// create new marker
var marker = new Element(‘div’,{
text: id
});

// set initial marker position
marker.setStyles({
‘top’: y-25,
‘left’: x-25
});

// add marker to container
document.id(‘uiarea’).grab(marker);

// store marker for updates
fingerMarkers.set(id, marker);
});
document.id(‘uiarea’).addEvent(‘touchuimove’, function(x, y, id){
// set marker position
fingerMarkers.get(id).setStyles({
‘top’: y-25,
‘left’: x-25
});
});
document.id(‘uiarea’).addEvent(‘touchuistop’, function(id){
// remove element
fingerMarkers.get(id).dispose();

// remove marker from list
fingerMarkers.erase(id);
});

});
[/js]

Demo Page-Setup#

[codegroup]
[html]
<div id="uiarea"></div>
[/html]

[css]
/* control area */
#uiarea{
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
#uiarea div{
position: absolute;
width: 50px;
height: 50px;
border: solid 1px #000000;
background-color: #900;
line-height: 50px;
font-size: 35px;
font-family: Verdana, Geneva, sans-serif;
color: #ffffff;
text-align: center;
}
[/css]
[/codegroup]

Download#

If you wanna use the TouchManager class, please feel totally free to use it in context of the MIT Style X11 License: Download A3non.UI.TouchManager 0.1.

Future prospects#

• geasture tracking zoom
• geasture tracking rotate
• support for desktop touchscreen platforms

References#

HTML5 Rocks – Developing Multitouch
MooTools Docs
Back To The Code – JavaScript Touch and Gesture Events

Attached Files#

• TouchUI.js