Development of multi-touch browsers

In this article, I will thoroughly study the touch event APIs provided by IOS and Android devices, explore which types of applications can be built, and provide some best practices, some useful technologies that make the development of touch-enabled applications easier are also discussed. Development of multi-touch browsers

 

Preface

Mobile devices such as smartphones and tablets usually have a capacitive touch screen to capture the interaction between users' fingers. With the development of mobile networks, it can support more and more complex applications. Web developers need a way to handle these events. For example, almost all fast-paced games require a player to press multiple buttons at a time, which means multi-touch in the case of a touch screen.

Apple introduced the touch event API in IOS 2.0. Android is catching up with this fact standard and narrowing the gap. A recent W3C Working Group is working together to develop this touch event specification.

In this article, I will thoroughly study the touch event APIs provided by IOS and Android devices, explore which types of applications can be built, and provide some best practices, some useful technologies that make the development of touch-enabled applications easier are also discussed.

Touch event

Three basic touch events listed in the specification that are widely implemented across mobile devices:

1.Touchstart: Place your finger on a DOM element.
2.Touchmove: Drag a DOM element with your finger.
3.Touchend: Removes the finger from a DOM element.

Each touch event contains three touch lists:

1.Touches: A list of all fingers currently on the screen.
2.Targettouches: A list of fingers on the current Dom element.
3.Changedtouches: A list of fingers involved in the current event.

For example, in a touchend event, the finger is removed.

These lists consist of objects that contain Touch Information:

1.Identifier: A value that uniquely identifies the current finger in a touch session.
2.Target: Dom element, which is the target of an action.
3.Customer/page/screen Coordinate: The position where the action occurs on the screen.
4.Radius coordinate and rotationangle: Draw an elliptical shape that is about the shape of your fingers.

Touch-able applications

Touchstart, touchmove, and touchend events provide a rich set of functions to support almost any type of touch-based interaction-including common multi-touch gestures, for example, pinch and zoom, rotation wait.

The following sectionCodeLet you drag a DOM element around with a single-finger touch:

VaR OBJ = Document. getelementbyid ('id ');
OBJ. addeventlistener ('touchmove ', function (event ){
// If there is only one finger in the position of this element
If (event.tar gettouches. Length = 1 ){
VaR touch = event.tar gettouches [0];
// Place the element in the position of the finger
OBJ. style. Left = touch. pagex + 'px ';
OBJ. style. Top = touch. Pagey + 'px ';
}
}, False );

The following is an example. This example shows all the contacts on the screen. It is used to feel the responsiveness of the device.

// Set the canvas and expose the context using the CTX variable
Canvas. addeventlistener ('touchmove ', function (event ){
For (VAR I = 0; I <event. Touches. length; I ++ ){
VaR touch = event. Touches [I];
CTX. beginpath ();
CTX. ARC (touch. pagex, touch. Pagey, 20, 0, 2 * Math. Pi, true );
CTX. Fill ();
CTX. Stroke ();
}
}, False );

Demo

There are many interesting multi-touch demos everywhere, such as this canvas-based painting demonstration by Paul Irish and others.

Browser ninja, A technical demonstration,Is a Fruit Ninja clone that uses CSS 3 conversion, transition, and canvas.

Best practices

Disable Scaling

The default multi-touch setting is not particularly useful, because your slide and gesture are often associated with browser behavior, such as scrolling and scaling.

To disable the scaling function, use the following meta tag to set your view area (viewport), so that it is not scalable for users:

Content = "width = device-width, initial-scale = 1.0, user-scalable = No">

Let's take a look at this article about mobile HTML 5.ArticleFor more information about view area settings.

Block scrolling

Some mobile devices have default touchmove behaviors. For example, the classic IOS overscroll effect triggers a view rebound when the scrolling exceeds the content limit. This method can cause chaos in many multi-touch applications, but it is easy to disable it.

Document. Body. addeventlistener ('touchmove ', function (event ){
Event. preventdefault ();
}, False );

Careful Rendering

If the multi-touch application you are writing involves complex multi-finger gestures, consider how to respond to touch events with caution, because so many things need to be handled at a time. Consider the example of drawing all contacts on the screen in the previous section. You can draw them immediately when there is a touch input:

Canvas. addeventlistener ('touchmove ', function (event ){
Rendertouches (event. Touches );
},

However, this technology does not need to expand as the number of fingers on the screen increases. Instead, it can track all the fingers and then render them in a loop, in this way, we can achieve better performance:

VaR touches = []
Canvas. addeventlistener ('touchmove ', function (event ){
Touches = event. Touches;
}, False );

// Set a timer of 60 frames per second
Timer = setinterval (function (){
Rendertouches (touches );
}, 15 );

Prompt: Setinterval is not suitable for animation, because it does not take into account the rendering loop of the browser. Modern desktop browsers provide the requestanimationframe function, which is a better choice based on performance and battery time. First, the browser provides support for this function, which is the preferred way to handle things.

Use targettouches and changedtouches

Remember that event. touches is an array of all the fingers that touch the screen, not just those on the target Dom element. You may find that using event.tar gettouches and event. changedtouches to replace event. touches is more useful.

Last, because you are developing for mobile devices, you should pay attention to the best practices of Mobile, which have been discussed in Eric bidelman's article and want to understand this W3C document.

Device Support

Unfortunately, the implementation of touch events varies greatly in terms of completeness and quality. I wrote a diagnostic script to display some basic information about the implementation of the touch API, including the supported events and the touchmove event triggering solution. I tested Android 2.3.3 on Nexus One and Nexus S hardware, Android 3.0.1 on xoom, and iOS 4.2 on iPad and iPhone.

In short, all tested browsers support touchstart, touchend, and touchmove events.

The specification provides three additional touch events, but the tested browsers do not support them:

1.Touchenter: Move your finger into a DOM element.
2.Toucheleave: Move your finger away from a DOM element.
3.Touchcancel: The touch is interrupted (Implementation Specification ).

The tested browser also provides touches, targettouches, and changedtouches lists within each touch list. However, the tested browser does not support the radiusx, radiusy, or rotationangle attributes that indicate the shape of the touch screen finger. During a touchmove, the event is triggered about 60 times in one second. This applies to all tested devices.

Android 2.3.3 (nexus)

Android Gingerbread browsers (tested on Nexus One and Nexus S) do not support multi-point touch, which is a known issue.

Android 3.0.1 (xoom)

The xoom browser has a basic support for multi-point touch, but it can only work on a single Dom element. The browser cannot correctly respond to the two touch points that occur on different DOM elements at the same time. In other words, the following code will respond to the two simultaneously touch points:

Obj1.addeventlistener ('touchmove ', function (event ){
For (VAR I = 0; I <event.tar gettouches; I ++ ){
VaR touch = event.tar gettouches [I];
Console. Log ('touched' + touch. identifier );
}
}, False );

But the following code does not:

VaR objs = [obj1, obj2];
For (VAR I = 0; I <objs. length; I ++ ){
VaR OBJ = objs [I];
OBJ. addeventlistener ('touchmove ', function (event ){
If (event.tar gettouches. Length = 1 ){
Console. Log ('touched' + event.tar gettouches [0]. identifier );
}
}, False );
}

IOS 4.x (IPAD, iPhone)

IOS devices fully support multi-touch, with the ability to track multiple fingers and provide a very sensitive touch experience in a browser.

Developer Tools

In mobile development, it is easier to design a prototype on the desktop, and then process the unique parts of the mobile device on the device to be supported. Multi-touch is one of the features that are difficult to test on a PC, because most PCs do not have touch input.

Tests that have to be performed on mobile devices may lengthen your development cycle, because every change you make requires code to be submitted to the server and then loaded to the device. Then, once the application is run, there will be no much debugging for the application, because tablet computers and smart phones lack the tools used by web developers.

A solution to this problem is to simulate trigger events on the development machine. For single-touch, touch events can be simulated based on mouse events. If you have a touch input device, such as the modern app MacBook, then multi-touch can also be simulated.

Single point of touch event

If you want to simulate a single touch event on the desktop, try phantom limbProgramSimulate touch events on the web page and provide a giant hand for guidance.

In addition, the jquery extension touchable unifies touch and mouse events across platforms.

Multi-touch events

To enable your multi-touch web application to work on your browser or multi-touch control panel (such as Apple MacBook or magicpad), I created this magictouch. the JS fill tool captures touch events from touchpad and converts them to standard compatible touch events.

1. Download The nptuioclient npapi plug-in and install it ~ /Library/Internet Plug-ins/directory.

2. Download The tongseng tuio application of the Mac magicpad and start the server.

3. Download magictouch. JS, a javascript Library, to simulate compatible touch events based on nptuioclient callback.

4. Add the magictouch. js script and nptuioclient plug-in to your application as follows:

<Head>
...
<SCRIPT src = "/path/to/magictouch. js" kesrc = "/path/to/magictouch. js"> </SCRIPT>
</Head>

<Body>
...
<Object ID = "tuio" type = "application/X-tuio" style = "width: 0px; Height: 0px;">
Touch input plugin failed to load!
</Object>
</Body>

I only tested this method on chrome 10, but it should be able to work on other modern browsers as long as it is slightly adjusted.

If your computer does not have multi-touch input, you can use another tuio tracker, such as reactivision, to simulate touch events. For more information, see the tuio project page.

Note that your gesture can be the same as the OS-level multi-touch gesture. On OS X, you can configure system-wide events by entering the trackpad preference settings page in system preferences.

As the multi-touch feature is gradually widely supported across mobile browsers, I am very happy to see that new Web applications make full use of this rich API.

From: http://select.yeeyan.org/view/213582/202991