Downloaded 14 times
![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);](https://image.slidesharecdn.com/touchyfeelywiththeweb-release-120522235542-phpapp01/85/Getting-Touchy-Feely-with-the-Web-15-320.jpg)
![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);](https://image.slidesharecdn.com/touchyfeelywiththeweb-release-120522235542-phpapp01/85/Getting-Touchy-Feely-with-the-Web-18-320.jpg)
![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; }
}](https://image.slidesharecdn.com/touchyfeelywiththeweb-release-120522235542-phpapp01/85/Getting-Touchy-Feely-with-the-Web-22-320.jpg)
![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 + ")";
}
}](https://image.slidesharecdn.com/touchyfeelywiththeweb-release-120522235542-phpapp01/85/Getting-Touchy-Feely-with-the-Web-23-320.jpg)
Uploaded byAndrew Fisher
Getting Touchy Feely with the Web
The document covers the mechanics and applications of the touch event API, highlighting various touch events such as touchstart, touchmove, and touchend. It provides insights into detecting single and multi-touch gestures and includes examples and demos for pinch zoom, drag and drop, and other touch features. Additionally, it references resources and specifications related to touch events in web development.
More Related Content
Similar to Getting Touchy Feely with the Web
Getting Touchy Feely with the Web
- 1. Getting Touchy Feely withthe Web WDC Melbourne 23 May, 2012 @ajfisher
- 2. slideshare.net/andrewjfisher github.com/ajfisher/wdc Image (CC) flickr - zzpza
- 3. 1. Mechanics ofthe API 2. Using the components 3. Applications
- 4. Mechanics of theAPI Image (CC) flickr – grunge textures
- 5.
- 6.
- 7. TouchEvent Object TouchList touches TouchListtargetTouches TouchList changedTouches boolean altKey, metaKey, ctrlKey, shiftKey EventTarget relatedTarget
- 8. TouchEvent Object touches All touches targetTouches Touchesrelated 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 Android2.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 islikely to change
- 13. Making things touchable Image(CC) flickr – Mary Scheirer
- 14. Detecting a singletouch
- 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.
- 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 Demoat 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 athttp://ajfisher.me with a mobile device
- 30. Flickr- demo Demo athttp://flickr.com/photos/kaisphotos/lightbox
- 31. Resources W3C spec dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html HTML RocksTouch 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 withthe Web WDC Melbourne 23 May, 2012 @ajfisher github.com/ajfisher slideshare.net/andrewjfisher
Editor's Notes
- #2 Hi, my name’s Andrew Fisher and my background is as an interaction developer and today we’re going to get touchy feely with the web for the next 15 minutes. I’m conscious that touch is a pretty big subject
- #3 However with a group of developers who are used to learning stuff fast with steep learning curves I’m sure you’re all be able to walk away with the tools and techniques you need to build beautiful expressive touch interfaces for web applications. So let’s get startedImage: http://www.flickr.com/photos/zzpza/3269784239/sizes/o/in/photostream/
- #4 Today we’re going to cover off these three areas. The mechanics of the API, how we use each of the components individually and then looking at bringing it together in an application at the end.
- #5 The Touch API is still pretty rough around the edges as the technology is still developing and the use cases for the web are being understood. So the areas I’m going to cover are the API as it stands today (down), the considerations we need to have if we want to use it in our applications and what future considerations do we need to have to deal with legacy as the API will change.http://www.flickr.com/photos/grungetextures/4224085160/in/photostream
- #6 The spec defines 6 new events for us to be able to play around with. If you want the really gory details then you can get the latest spec here.
- #7 Unfortunately not all of the spec has been implemented or is likely to be for reasons I’ll get onto in a moment. So today we’re just going to focus on the top three – touch start, end and move.
- #8 Luckily for us all of these work in the same way. The bit we’re going to focus on are these three TouchLists which are just arrays of Touch Objects however there is some subtlety to how they work together.
- #9 Touches is a global and it provides every touch object in contact with the surface at the time.TargetTouches are just the touches that are in relation to the object that this event handler was bound to however there is some consistent weirdness with nested objects as the event will be bound to the lowest level object it can find under the touch even if the event handler is bound to it’s parent.Changed touches is a subset which provides the touch object that caused the event to fire.
- #10 So what does a touch object look like – again we have a stack of properties defined by the spec.
- #11 But not everything has been implemented. So what we’re left with is largely positional information as well as an identifier which gives us an id back to the touch object so we know which one we’re talking about. even with this very simple object we can do some pretty interesting things with it.So now we know what the API does, under what conditions can we use it in our applications?
- #12 Well touch support itself is pretty wide these days with good support for the common mobile browsers. MultiTouch is well supported by iOS devices but less so by Android though we’ll see a big shift as a lot of Gingerbread devices get upgraded to ICS in the next 6 months so plenty of opportunity for building using the touch api.I mentioned earlier that the API is likely to change.
- #13 Well the technology itself is encumbered and is under legal review. It takes a while for this stuff to happen and as it is we’re left with a relatively stable API to play with. It will be a while before we need to consider these changes although we should but my advice is not to get hung up on it.So now we understand the mechanics of the API, the support we have for it and that we do need to think about maintenance for the future of our code let’s see how we can start using it.
- #14 Let’s use the Touch API in practice – I’m going to build this up starting with Single Touch, Multi Touch and then Gestures and we’ll look at some example code and demos to illustrate it.Image: http://www.flickr.com/photos/maryscheirer/4906553164/
- #15 Starting with single touch which is the most basic touch interaction we can create. I’ve set up a basic html page which simply has a canvas element dropped onto it. As such all my event handlers will be bound to that.
- #16 We have the three event handlers bound to the canvas and all I’m doing in each case is just allocating the touch object to a one of the points I’ve defined and then we simply plot the points on the canvas. Let’s take a look at a Demo of this now
- #17 This does as you’d expect I touch and a point goes down, it then tracks my finger and then leaves a point behind when my touch ends. Pretty simple.
- #18 Multi touch is a little more complex as there’s multiple touches in play at different time but it works largely the same way. I’m going to use the same canvas object with the same event handlers bound to it.
- #19 In this instance I need to keep track of multiple start and end points which I just push onto and remove from an Array. In my move I’m using the entire list of targettouches on this element to draw them. The draw works the same way except it just iterates over a list rather than a single point. So let’s look at the demo of this
- #20 The single Touch works the same as before but now I can add multiple touches onto the screen as many as I like and take them off again.
- #21 When we start using multiple touches there are some behaviours implicit in the browser and the OS for example zooming or two finger scrolling. As such don’t forget to use prevent Default and Stop Propagation to stop those default behaviours. Only instance I’ve see where this doesn’t work is the multitasking gestures on an iPAD
- #22 We can’t talk multi-touch without talking gesture. There’s no current API for gesture though Apple have attempted an implementation in Mobile safari showing scale and rotation but it doesn’t work with more than 2 touches. The key with gesture however is that it’s both cultural and contextual. As such I’m not sure an API can accommodate that beyond the mechanisms we already have within Touch already.For the moment for compatibility you’re going to have to implement for your own gestures anyway based on what’s correct for your context. As such I’m going to show you how to implement the basics of your own gesture so you can see the way we go about doing it. The code for this is a little longer so I’ll break up each handler onto it’s own slide.Image: http://www.flickr.com/photos/marcwathieu/4074440716/sizes/l/in/photostream/
- #23 Here’s our start which waits until we have two touches on screen at once and when it does measures the distance between them as the base distance.
- #24 Our move then just keeps tracking the positions and determining if they are getting closer or further away and routes the scaling factor to a CSS scale transformation.
- #25 Our end does some clean up like maintaining state between pinches and looking for boundary conditions for too much or too little zoom and cleans up accordingly.
- #26 This is it in action then – very simple and you can take this a lot further with origin transforms between the touch points etc but this gives you the basics of how you implement a gesture.Now we know how to detect single and multiple touches and work with them to be able to build up gestures let’s look at some applications of this.
- #27 I’m going to run through a couple of quick examples to highlight some applications of this for your interface that go beyond the seemingly ubiquitous canvas finger painting application.Image: http://www.flickr.com/photos/48873600@N08/5139924820/sizes/l/in/photostream/
- #28 This first shows the ability to do drag and drop with elements. So you could imagine building an interface that you could rearrange quite happily in this way. Or drag something to a save pile for review later.
- #29 The NY Times site works much like most copy heavy sites do with a swipe to advance the page. However they’ve introduced a vertical swipe as well which activates the story menu if you want it. Making it quite efficient
- #30 And finally OnSwipe which is a plugin to WordPress has an interesting feature where if you want to dismiss an overlay you can just scrunch it up and it disappears.
- #31 The next one is the way flickrlightboxes on a touch device, taking you full screen, giving you swipe and then being able to zoom in and pan around. Whilst this looks very simple in expression there’s a lot of hidden depth as you need to track all of your transformations along with the action you’re taking on the one image as there are multiple gestures in play at any time.These are some good examples of how touch can be used to create much more interesting interactions that are quite efficient for touch devices and particularly start to use their multitouch capabilities to enhance the application.
- #32 We’ve covered a lot in a very small amount of time, the mechanics of the API itself, how we use each of the components to build up interfaces and we’ve looked at some examples of some applications of things you can do with it.I’ve got some resources here for you, besides the background stuff of the first three there’s all my demos on my github that you can play around with and see working – they’ve been designed to be cross platform as well which some of the others aren’t. Maxine has all of these so she’ll send around today so you have things to play with. And I’ll have my presso up on slideshare pretty shortly which has all my notes and links in it too.
- #33 Unfortunately we don’t have any time for questions right now but I’m around today and tomorrow so please feel free to come and grab me and ask away if you have one and I’ll be more than happy to chat about touchy stuff.Thanks very much for listening and I hope you’ll all go from here and start to build beautiful, expressive touch interfaces for your web applications.