Introduction
Les appareils mobiles tels que les smartphones et les tablettes ont généralement un système capacitif un écran tactile pour capturer les interactions effectuées avec les doigts de l'utilisateur. En tant que le Web pour mobile évolue pour permettre des applications de plus en plus sophistiquées, le Web les développeurs ont besoin d'un moyen de gérer ces événements. Par exemple, presque toutes les jeu rapide nécessite que le joueur appuie sur plusieurs boutons en même temps, ce qui, dans le contexte d'un écran tactile implique le multipoint.
Apple a lancé son API Touch Events dans iOS 2.0. Android a rattrapé cette activité de facto standard et combler le fossé. Récemment, un groupe de travail W3C a réuni pour travailler sur ces spécifications des événements tactiles.
Dans cet article, nous allons nous intéresser à l'API des événements tactiles fournie par iOS et d'appareils Android, ainsi que de Chrome pour ordinateur de bureau sur du matériel prenant en charge la technologie tactile, et explorez les types d'applications que vous pouvez créer, les bonnes pratiques et les techniques utiles qui facilitent le développement applications tactiles.
Événements tactiles
Trois événements tactiles de base sont décrits dans la spécification et implémentés largement sur les appareils mobiles:
- touchstart: un doigt est placé sur un élément DOM.
- touchmove: un doigt est déplacé le long d'un élément DOM.
- touchend: un doigt est retiré d'un élément DOM.
Chaque événement tactile comprend trois listes de gestes:
- touches: liste de tous les doigts actuellement affichés à l'écran.
- targetTouches: liste de doigts sur l'élément DOM actuel.
- changedTouches: liste de doigts impliqués dans la session en cours . Par exemple, dans un événement de toucher, il s'agit du doigt qui a été retiré.
Ces listes se composent d'objets contenant des informations tactiles:
- Identifiant: numéro identifiant de manière unique le doigt actif dans la session tactile.
- target: élément DOM qui était la cible de l'action.
- Coordonnées du client/de la page/de l'écran: l'endroit où l'action s'est produite à l'écran
- radiusordonnées et rotationAngle: décrivez l'ellipse qui se rapproche de la forme d'un doigt.
Applications tactiles
Les commandes touchstart, touchmove et Les événements touchend offrent un ensemble de fonctionnalités suffisamment complet pratiquement tout type d'interaction tactile, y compris toutes les interactions gestes à plusieurs doigts comme pincer zoom, rotation, etc.
Cet extrait vous permet de faire glisser un élément DOM à l'aide d'un seul doigt. toucher:
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
// If there's exactly one finger inside this element
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// Place element where the finger is
obj.style.left = touch.pageX + 'px';
obj.style.top = touch.pageY + 'px';
}
}, false);
Voici un exemple qui affiche toutes les pressions actuelles sur l'écran. Il est utile de connaître pour évaluer la réactivité de l'appareil.
// Setup canvas and expose context via 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);
Démonstrations
Un certain nombre de démonstrations d'interaction multipoint intéressantes sont déjà en cours, comme dans cette démonstration de dessins sur toile. par Paul Ireland et d'autres.
Enfin, Browser Ninja, un technicien Il s'agit d'un clone de Fruit Ninja utilisant des transformations et des transitions CSS3, ainsi que canevas:
Bonnes pratiques
Empêcher le zoom
Les paramètres par défaut ne fonctionnent pas très bien pour l’écran tactile multipoint, car vos balayages et les gestes sont souvent associés au comportement du navigateur, comme le défilement et zoomez.
Pour désactiver le zoom, configurez votre fenêtre d'affichage de sorte qu'elle ne soit pas évolutive par l'utilisateur à l'aide de la balise Meta suivante:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no>
Pour savoir comment définir votre fenêtre d'affichage, consultez cet article sur le format HTML5 pour mobile.
Empêcher le défilement
Certains appareils mobiles proposent des comportements par défaut pour Touchmove, comme l'effet de défilement hors limites d'iOS, qui entraîne un retour en arrière que le défilement dépasse les limites du contenu. Cela prête à confusion dans de nombreuses applications multitouch et peuvent être facilement désactivées:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
Améliorer le rendu
Si vous écrivez une application multipoint qui implique des tâches complexes, les gestes à plusieurs doigts, faites attention à la façon dont vous réagissez aux événements tactiles, car vous en gérer autant à la fois. Prenons l'exemple de la section précédente, dessine toutes les touches sur l'écran. Vous pouvez dessiner dès qu'un contact entrée:
canvas.addEventListener('touchmove', function(event) {
renderTouches(event.touches);
}, false);
Mais cette technique n'adapte pas le nombre de doigts à l'écran. Au lieu de cela, vous pourriez suivre tous les doigts et effectuer un rendu en boucle pour aller loin de meilleures performances:
var touches = []
canvas.addEventListener('touchmove', function(event) {
touches = event.touches;
}, false);
// Setup a 60fps timer
timer = setInterval(function() {
renderTouches(touches);
}, 15);
Utiliser targetTouches et changedTouches
Rappelez-vous que event.touches est un tableau de TOUS les doigts en contact avec l'écran, pas seulement ceux situés sur les cible. Il peut être bien plus utile d'utiliser event.targetTouches ou event.changedTouches à la place.
Enfin, comme vous développez pour mobile, vous devez connaître les bonnes pratiques générales pour mobile, qui sont abordées dans l'article d'Eric Bidelman, ainsi que dans ce document du W3C.
Vérifier si l'appareil est compatible
Malheureusement, le niveau d'exhaustivité des implémentations d'événements tactiles est très variable. qualité. J'ai écrit un script de diagnostic qui affiche des informations de base sur l'API tactile. y compris les événements pris en charge, et le déclenchement du touchmove la résolution de problèmes. J'ai testé Android 2.3.3 sur du matériel Nexus One et Nexus S, Android 3.0.1 sur Xoom et iOS 4.2 sur iPad et iPhone.
En résumé, tous les navigateurs testés sont compatibles avec touchstart, touchend et touchmove.
La spécification indique trois événements tactiles supplémentaires, mais n'inclut aucun navigateur testé. les accompagner:
- touchenter: un doigt en mouvement entre dans un élément DOM.
- touchleave: un doigt en mouvement quitte un élément DOM.
- touchcancel: une pression est interrompue (spécifique à l'implémentation).
Dans chaque liste tactile, les navigateurs testés fournissent également le touches, targetTouches et changedTouches. Toutefois, aucun navigateur testé sont compatibles avec radiusX, radiusY ou rotationAngle, qui spécifient la forme du doigt sur l'écran.
Lors d'un mouvement tactile, les événements se déclenchent environ 60 fois par seconde sur l'ensemble des appareils testés.
Android 2.3.3 (Nexus)
Le navigateur Android Gingerbread (testé sur Nexus One et Nexus S) comporte n'est pas compatible avec l'écran tactile multipoint. Il s'agit d'un problème connu.
Android 3.0.1 (Xoom)
Le navigateur de Xoom offre une prise en charge de base de l'écran tactile multipoint, mais ne fonctionne que sur un seul élément DOM. Le navigateur ne répond pas correctement à deux appuis simultanés sur différents éléments DOM En d'autres termes, les éléments suivants réagit à deux pressions simultanées:
obj1.addEventListener('touchmove', function(event) {
for (var i = 0; i < event.targetTouches; i++) {
var touch = event.targetTouches[i];
console.log('touched ' + touch.identifier);
}
}, false);
En revanche, les éléments suivants ne fonctionneront pas:
var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
obj.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
console.log('touched ' + event.targetTouches[0].identifier);
}
}, false);
}
iOS 4.x (iPad, iPhone)
Les appareils iOS sont entièrement compatibles avec l'interaction multipoint, et sont capables d'en suivre un bon nombre et offrent une expérience tactile très réactive dans le navigateur.
Outils pour les développeurs
Dans le développement pour mobile, il est souvent plus facile de commencer le prototypage sur ordinateur de bureau puis nous nous pencherons sur les aspects spécifiques aux appareils mobiles que vous comptez proposer. Le multipoint est l’une de ces fonctionnalités qu’il est difficile de tester sur le PC, car la plupart des PC n'ont pas d'entrée tactile.
La nécessité d'effectuer des tests sur mobile peut allonger le cycle de développement, car chaque la modification que vous apportez doit être envoyée sur un serveur, puis chargée sur le appareil. Une fois qu'il est en cours d'exécution, vous ne pouvez rien faire pour déboguer car les tablettes et les smartphones sont dépourvus d'outils destinés aux développeurs Web.
Une solution à ce problème consiste à simuler des événements tactiles dans votre environnement de développement. machine. Pour les gestes tactiles, les événements tactiles peuvent être simulés à partir de la souris. événements. Les événements tactiles multipoints peuvent être simulés si vous avez un appareil tactile sur votre ordinateur, comme un Apple MacBook moderne.
Événements à contact unique
Si vous souhaitez simuler des événements tactiles sur votre bureau, Chrome propose une émulation d'événements tactiles à partir des outils pour les développeurs. Ouvrez les outils pour les développeurs, sélectionnez l'icône Paramètres (en forme de roue dentée), puis "Remplacements" ou "Émulation", puis activez l'option "Émuler les événements tactiles".
Pour les autres navigateurs, vous pouvez essayer Phantom Limmb, qui simule des événements tactiles sur les pages et donne également une main géante pour démarrer.
Le module Touchable Plug-in jQuery qui unifie les événements tactiles et de souris sur plusieurs plates-formes.
Événements tactiles multipoints
Pour permettre à votre application Web multipoint de fonctionner dans votre navigateur sur votre le pavé tactile multipoint (tel qu'un Apple MacBook ou un MagicPad), j'ai créé le polyfill MagicTouch.js. Il capture les événements tactiles de votre pavé tactile et les transforme en la compatibilité avec les événements tactiles standards.
- Téléchargez et installez le plug-in NPAPI npTuioClient dans ~/Library/Internet Plug-Ins/.
- Téléchargez l'application TongSeng TUIO pour Mac MagicPad et commencez le serveur.
- Téléchargez MagicTouch.js, une bibliothèque JavaScript pour simuler des événements tactiles compatibles avec les spécifications en fonction des rappels npTuioClient.
- Incluez le script magictouch.js et le plug-in npTuioClient dans votre application comme suit:
<head>
...
<script src="/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>
Vous devrez peut-être activer le plug-in.
Une démonstration en direct avec magictouch.js est disponible à l'adresse paulirish.com/demo/multi:
Je n'ai testé cette approche qu'avec Chrome 10, mais elle devrait fonctionner les navigateurs récents avec seulement quelques ajustements mineurs.
Si votre ordinateur n'est pas doté de la saisie multipoint, vous pouvez simuler une commande tactile événements utilisant d'autres outils de suivi TUIO, tels que reacTIVision. Pour Pour en savoir plus, consultez la page du projet TUIO.
Notez que vos gestes peuvent être identiques aux gestes à plusieurs doigts au niveau du système d'exploitation. Sous OS X, vous pouvez configurer des événements à l'échelle du système en accédant au pavé tactile le volet des préférences dans les préférences système.
Les fonctionnalités tactiles étant de plus en plus prises en charge sur les navigateurs mobiles, J'ai hâte de voir de nouvelles applications Web API.