1.
Getting Touchy Feely
with the Web
WDC Melbourne 23 May, 2012
@ajfisher

2.
slideshare.net/andrewjfisher
github.com/ajfisher/wdc
Image (CC) flickr - zzpza

3.
1. Mechanics of the API
2. Using the components
3. Applications

4.
Mechanics of the API
Image (CC) flickr – grunge textures

5.
Touch Event API
touchstart
touchend
touchmove
touchcancel
touchenter
touchleave
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

6.
Touch Event API
touchstart
touchend
touchmove
touchcancel
touchenter
touchleave
http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html

7.
TouchEvent Object
TouchList touches
TouchList targetTouches
TouchList changedTouches
boolean altKey, metaKey, ctrlKey, shiftKey
EventTarget relatedTarget

8.
TouchEvent Object
touches
All touches
targetTouches
Touches related to DOM object with bound event.
Watch out for nesting
changedTouches
Touches that caused this event to fire

9.
Touch Object
identifier
target
pageX, pageY
clientX, clientY
screenX, screenY
radiusX, radiusY
force
rotationAngle

10.
Touch Object
identifier
target
pageX, pageY
clientX, clientY
screenX, screenY
radiusX, radiusY
force
rotationAngle

11.
Support
Touch
Android 2.1+ / iOS 3+ / Opera Mobile / Firefox Mobile
Multi touch
iOS 3+
Android 3+ (targetTouches only)
Android 4+ (all)
Opera Mobile & Firefox Mobile (depends on OS)

12.
Touch API is likely to change

13.
Making things touchable
Image (CC) flickr – Mary Scheirer

14.
Detecting a single touch

15.
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);

16.
Single touch - demo
Demo at http://ajfisher.me/wdc/singletouch.html

17.
Detecting multi touches
Image (CC) flickr – Jason White

18.
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);

19.
Multi touch - demo
Demo at http://ajfisher.me/wdc/multitouch.html

20.
Consider default behaviours
event.preventDefault()
event.stopPropagation()

21.
Understanding gesture
Image (CC) flickr – Marc Wathieu

22.
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; }
}

23.
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 + ")";
}
}

24.
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; }
}

25.
Pinch Zoom- demo
Demo at http://ajfisher.me/wdc/pinchzoom.html

26.
Applications of touch
Image (CC) flickr – Jamie Buscemi

27.
Drag and drop- demo
Demo at http://quirksmode.org/m/tests/drag2.html

28.
NY Times Skimmer- demo
Demo at http://nytimes.com/skimmer/#/World

29.
OnSwipe- demo
Demo at http://ajfisher.me with a mobile device

30.
Flickr- demo
Demo at http://flickr.com/photos/kaisphotos/lightbox

31.
Resources
W3C spec
dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
HTML Rocks Touch
html5rocks.com/en/mobile/touch/
Big list of touch stuff
github.com/bebraw/jswiki/wiki/Touch
My demo code
github.com/ajfisher/wdc
Touch patent issues
blog.jquery.com/2012/04/10/getting-touchy-about-patents/
w3.org/2012/01/touch-pag-charter

32.
Getting Touchy Feely
with the Web
WDC Melbourne 23 May, 2012
@ajfisher
github.com/ajfisher
slideshare.net/andrewjfisher