Date post: | 09-May-2015 |
Category: |
Technology |
Upload: | andrew-fisher |
View: | 2,217 times |
Download: | 1 times |
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