Háptica en iOS

CSSLab: iPad

iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más me han interesados, corresponde a los eventos gestuales.

Este artículo abordará todos los eventos disponibles para iPad y que ocurren cuando el usuario interactúa con una página web en iOS. Aunque puedes visualizar los ejemplos con Safari 5 para escritorio o el mismo iPhone, la mejor interacción la puedes lograr desde un iPad mismo por la dimensión y calidad de su superficie táctil (o en su defecto con su simulador).

Eventos Multitouch

CSSLab - Eventos Multitouch

Puedes usar classes de eventos touch de tipo DOM en Javascript que ya están disponibles en iOS. Si quieres registrar estos eventos, el sistema envía objetos TouchEvent a aquellos elementos DOM mientras los dedos se mueven por sobre la superficie. Una secuencia multitouch comienza cuando un dedo toca por primera vez la superficie. La secuencia termina cuando el último de esos dedos se levanta de la misma superficie. Éstos eventos son similares a los usuales eventos de mouse, excepto que puedes tener toques simultáneos en la superficie en diferentes lugares de la misma. Un objeto de evento touch es utilizado para encapsular todos los toques que existen en un mismo momento en la pantalla. Cada dedo es representado por un objeto touch y las típicas propiedades que encuentras en un evento de mouse están en un evento touch, pero no el objeto mismo.

Cuatro son los principales eventos touch:

ontouchstart
ocurre cada vez que un dedo se posa sobre la pantalla.
ontouchmove
ocurre cuando un dedo que ya está en la pantalla se mueve sobre ella.
ontouchend
ocurre cada vez que un dedo sale de la pantalla.
ontouchcancel
el sistema puede cancelar los eventos en ciertas ocasiones, como por ej. cuando recibes un SMS mientras estás arrastrando un elemento.

Para registrarlos con Javascript:

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

Y si lo quieres implementar como una función:

function touchStart(event) {
   // tomemos las coordenadas del dedo cuando toca la pantalla
   var x = event.touches[0].pageX;
   var y = event.touches[0].pageY;
   alert('X = '+x+',Y = '+y);
}

Ver ejemplo 1

Un simple evento: arrastra un elemento cuando mueves el dedo:

function touchMove(event) {
   event.preventDefault();
   var touch = event.touches[0];
   var node = touch.target;
   node.style.position = "absolute";
   node.style.left = touch.pageX + "px";
   node.style.top = touch.pageY + "px";
}

Ver ejemplo 2


Detalle: por defecto, si arrastras un dedo sobre la pantalla es probable que la página comience a moverse (peor si ésta tiene scroll). Por suerte agregaron la función preventDefault() que hace que la página se quede quieta si lo necesitamos.

Las listas de eventos agrupan estos objetos, y contiene información para cada dedo que está tocando la pantalla. Además, contiene 2 otras listas: una que tiene información para los dedos que se originan del mismo elemento y otro que contiene sólo información para los dedos asociados al mismo evento. Estas listas están disponibles para cada evento touch, y son:

touches
una lista para cada dedo que está posado actualmente sobre la pantalla.
targetTouches
tal como touches, pero filtra sólo la información para los dedos que comienzan del mismo elemento.
changedTouches
lista la información para cada dedo involucrado en el mismo evento.

Las propiedades que contienen estas listas son:

clientX
coordenada X del toque relativa al viewport (pantalla visible).
clientY
coordenada Y del toque relativa al viewport.
screenX
coordenada X relativa a la pantalla.
screenY
coordenada Y relativa a la pantalla.
pageX
coordenada X relativa a la página completa (incluye offset del scroll).
pageY
coordenada Y relativa a la página completa.
target
elemento donde el evento touch fue originado.
indentifier
número identificados, único para cada evento touch.

Para entender mejor, veamos el siguiente caso:

  1. Cuando pongo un dedo en la pantalla, las 3 listas tendrán la misma información en sus propiedades, pero changedTouches fue el que originó el evento.

  2. Cuando pongo el segundo dedo, touches tendrá 2 items (uno para cada dedo); targetTouches tendrá 2 items sólo si el segundo dedo es posado en el mismo elemento del primero; changedTouches tendrá información relacionada al segundo dedo, porque fue lo que causó el evento.

  3. Si pongo 2 dedos exactamente al mismo tiempo, tendré 2 items en changedTouches: uno para cada dedo.

  4. Si muevo mis dedos, la única lista que cambiará es changedTouches y va a tener información relacionada a cada dedo que se vaya moviendo (al menos uno).

  5. Cuando levanto un dedo, será eliminado de touches y targetTouches y aparecerá en changedTouches ya que fue el que originó el evento.

  6. Si quito el último dedo se vaciarán touches y targetTouches, y changedTouches tendrá la información para ese ultimo dedo.

Eventos Gestuales

Eventos multitouch pueden ser combinados para crear eventos de gestos. Los objetos GestureEvent son enviados durante una secuencia multitouch y contienen información de dimensiones y rotaciones.

Para registrarlos en HTML:

<div
   ongesturestart="gestureStart(event);"
   ongesturechange="gestureChange(event);"
   ongestureend="gestureEnd(event);"
>

Y mediante Javascript:

element.addEventListener("gesturestart", gestureStart, false);
element.addEventListener("gesturechange", gestureChange, false);
element.addEventListener("gestureend", gestureEnd, false);

Comencemos con un ejemplo simple:

function gestureStart(event) {
   // tomamos el angulo y tamaño del elemento
   var angle = event.rotation;
   var scale = event.scale;
   alert('angulo: '+angle+', dimension: '+scale);
}

Ver Ejemplo 3

Ahora escalamos y rotamos un elemento:

function gestureChange(event) {
   event.preventDefault();
   event.target.style.width = (200 * event.scale) + "px";
   event.target.style.height = (200 * event.scale) + "px";
   event.target.style.webkitTransform = 'rotate(' + event.rotation + 'deg)';
}

Ver Ejemplo 4

Creo que esto es un buen comienzo para que te interese esta plataforma, la que implementa un tipo de interacción háptica poco usual y con un gran potencial comercial.

Links:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Iniciándose en el DOM (actualizado)

Este artículo fue actualizado. Document Object Model, o DOM, o Modelo en Objetos para representar Documentos es una modelo en que los scripts pueden acceder y modificar dinámicamente el contenido, la estructura o los estilos de documentos HTML. A través del manejo del DOM se permiten las actualizaciones en tiempo real de contenidos, envío de [...]

jQuery Plugin: simpleAccordion

Un nuevo plugin para jQuery sale a la luz. Nuevamente, iluminado por una necesidad en un proyecto web, qué mejor que hacer las cosas a mi manera y al mismo tiempo aportar al mundo con algo que quizás le será útil a alguien más. Un colega necesitaba hacer una sección de Preguntas Frecuentes (FAQ) y [...]

Definitivo: PNG’s transparentes en IE6

Finalmente dí con la solución final a mis problemas de soporte de transparencias de PNG para IE6. Este tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi anterior artículo sobre este mismo tema, la solución es real pero su implementación se torna complicada de adaptar en cualquier [...]

  1. Excelente artículo George, Saludos

    Rod
    29 / Julio / 2010

  2. Te la jugaste! Muy bueno el articulo!

    Seba
    29 / Julio / 2010

  3. Muy buen articulo… se agradecen los ejemplos!

    pablo
    15 / Octubre / 2010

  4. Thanks for those great Tutorials… Keep on… Me gusta…

    Michel
    14 / Enero / 2012

  1. [...] Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre ...
    Movimiento del browser al arrastrar en móviles ↝ CSSLab

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 14 veces