Getting Touchy Feely with the Web

Getting Touchy Feelywith the WebWDC Melbourne 23 May, 2012@ajfisher

slideshare.net/andrewjfisher github.com/ajfisher/wdcImage (CC) flickr - zzpza

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

Mechanics of the APIImage (CC) flickr – grunge textures

Touch Event APItouchstarttouchendtouchmovetouchcanceltouchentertouchleavehttp://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

TouchEvent ObjectTouchList touchesTouchList targetTouchesTouchList changedTouchesboolean altKey, metaKey, ctrlKey, shiftKeyEventTarget relatedTarget

TouchEvent ObjecttouchesAll touchestargetTouchesTouches related to DOM object with bound event.Watch out for nestingchangedTouchesTouches that caused this event to fire

Touch ObjectidentifiertargetpageX, pageYclientX, clientYscreenX, screenYradiusX, radiusYforcerotationAngle

SupportTouch Android 2.1+ / iOS 3+ / Opera Mobile / Firefox MobileMulti touch iOS 3+ Android 3+ (targetTouches only) Android 4+ (all) Opera Mobile & Firefox Mobile (depends on OS)

Touch API is likely to change

Making things touchableImage (CC) flickr – Mary Scheirer

Detecting a single touch

canvas.addEventListener("touchstart", (function(evt) { Single Touch 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 - demoDemo at http://ajfisher.me/wdc/singletouch.html

Detecting multi touchesImage (CC) flickr – Jason White

canvas.addEventListener("touchstart", (function(evt) { Multi touch 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 - demoDemo at http://ajfisher.me/wdc/multitouch.html

Consider default behavioursevent.preventDefault()event.stopPropagation()

Understanding gestureImage (CC) flickr – Marc Wathieu

Pinch Zoom - touchstartimgzoom.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 - touchmoveimgzoom.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 - touchendimgzoom.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- demoDemo at http://ajfisher.me/wdc/pinchzoom.html

Applications of touchImage (CC) flickr – Jamie Buscemi

Drag and drop- demoDemo at http://quirksmode.org/m/tests/drag2.html

NY Times Skimmer- demoDemo at http://nytimes.com/skimmer/#/World

OnSwipe- demoDemo at http://ajfisher.me with a mobile device

Flickr- demoDemo at http://flickr.com/photos/kaisphotos/lightbox

ResourcesW3C specdvcs.w3.org/hg/webevents/raw-file/tip/touchevents.htmlHTML Rocks Touchhtml5rocks.com/en/mobile/touch/Big list of touch stuffgithub.com/bebraw/jswiki/wiki/TouchMy demo codegithub.com/ajfisher/wdcTouch patent issuesblog.jquery.com/2012/04/10/getting-touchy-about-patents/w3.org/2012/01/touch-pag-charter

Getting Touchy Feelywith the WebWDC Melbourne 23 May, 2012@ajfishergithub.com/ajfisherslideshare.net/andrewjfisher

http://lanyrd.com	18
http://bitly.com	1
http://www.linkedin.com	1

Getting Touchy Feely with the Web

by Andrew Fisher

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 20

Statistics

Getting Touchy Feely with the Web Webinar Transcript