Getting Touchy Feely with the WebWDC Melbourne 23 May, 2012

@ajfisher

slideshare.net/andrewjfishergithub.com/ajfisher/wdc

Image (CC) flickr - zzpza

1. Mechanics of the API2. Using the components3. Applications

Mechanics of the API

Image (CC) flickr – grunge textures

Touch Event API

touchstarttouchendtouchmovetouchcanceltouchentertouchleave

http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

Touch Event API

touchstarttouchendtouchmovetouchcanceltouchentertouchleave

http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

TouchEvent Object

TouchList touchesTouchList targetTouchesTouchList changedTouchesboolean altKey, metaKey, ctrlKey, shiftKeyEventTarget relatedTarget

TouchEvent Object

touchesAll touches

targetTouchesTouches related to DOM object with bound event. Watch out for nesting

changedTouchesTouches that caused this event to fire

Touch Object

identifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle

Touch Object

identifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle

Support

TouchAndroid 2.1+ / iOS 3+ / Opera Mobile / Firefox Mobile

Multi touchiOS 3+Android 3+ (targetTouches only)Android 4+ (all)Opera Mobile & Firefox Mobile (depends on OS)

Touch API is likely to change

Making things touchable

Image (CC) flickr – Mary Scheirer

Detecting a single touch

Single Touch

canvas.addEventListener("touchstart", (function(evt) { evt.preventDefault(); start_point = $.extend({}, evt.changedTouches[0]); end_point = null; draw_touches();}), false);canvas.addEventListener("touchend", (function(evt) { end_point = evt.changedTouches[0]; current_point = null; draw_touches();}), false);canvas.addEventListener("touchmove", (function(evt) { evt.preventDefault(); current_point = evt.targetTouches[0]; draw_touches();}), false);

Single touch - demo

Demo at http://ajfisher.me/wdc/singletouch.html

Detecting multi touches

Image (CC) flickr – Jason White

Multi touchcanvas.addEventListener("touchstart", (function(evt) { evt.preventDefault(); start_point.push($.extend({}, evt.changedTouches[0])); draw_multi_touches();}), false);canvas.addEventListener("touchend",(function(evt) { end_point.push($.extend({}, evt.changedTouches[0])); draw_multi_touches(); if (evt.targetTouches.length == 0) { start_point = new Array(); end_point = new Array(); }}), false);canvas.addEventListener("touchmove", (function(evt) { evt.preventDefault(); current_point = evt.targetTouches; draw_multi_touches(); }), false);

Multi touch - demo

Demo at http://ajfisher.me/wdc/multitouch.html

Consider default behaviours

event.preventDefault()event.stopPropagation()

Understanding gesture

Image (CC) flickr – Marc Wathieu

Pinch Zoom - touchstart

imgzoom.addEventListener("touchstart", check_zoom, false);function check_zoom(evt) { evt.preventDefault(); var tt = evt.targetTouches; if (tt.length >= 2) {

dist = distance(tt[0], tt[1]);scaling = true;

} else { scaling = false; }

}

Pinch Zoom - touchmove

imgzoom.addEventListener("touchmove", do_zoom, false);function do_zoom(evt) { evt.preventDefault(); var tt = evt.targetTouches; if (scaling) {

curr_scale = distance(tt[0], tt[1]) / dist * scale_factor;imgzoom.style.WebkitTransform =

"scale(" + curr_scale + ", " + curr_scale + ")"; }}

Pinch Zoom - touchend

imgzoom.addEventListener("touchend", end_zoom, false);function end_zoom(evt) { var tt = evt.targetTouches; if (tt.length < 2) { scaling = false; if (curr_scale < min_zoom) { scale_factor = min_zoom; } else { if (curr_scale > max_zoom) { scale_factor = max_zoom; } else { scale_factor = curr_scale; } } } imgzoom.style.WebkitTransform =

"scale(" + scale_factor + ", " + scale_factor + ")"; } else { scaling = true; }}

Pinch Zoom- demo

Demo at http://ajfisher.me/wdc/pinchzoom.html

Applications of touch

Image (CC) flickr – Jamie Buscemi

Drag and drop- demo

Demo at http://quirksmode.org/m/tests/drag2.html

NY Times Skimmer- demo

Demo at http://nytimes.com/skimmer/#/World

OnSwipe- demo

Demo at http://ajfisher.me with a mobile device

Flickr- demo

Demo at http://flickr.com/photos/kaisphotos/lightbox

Resources

W3C specdvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

HTML Rocks Touchhtml5rocks.com/en/mobile/touch/

Big list of touch stuffgithub.com/bebraw/jswiki/wiki/Touch

My demo codegithub.com/ajfisher/wdc

Touch patent issuesblog.jquery.com/2012/04/10/getting-touchy-about-patents/w3.org/2012/01/touch-pag-charter

Getting Touchy Feely with the WebWDC Melbourne 23 May, 2012

@ajfishergithub.com/ajfisherslideshare.net/andrewjfisher