Schermi Multi-Touch: storia e introduzione allo sviluppo web

A basso livello, l’hardware ci espone un array di punti di contatto, ciascuno dei quali dotato di proprie coordinate, livello di pressione, ecc… Per semplificarci le cose, il sistema operativo applica dei filtri su questi punti di contatto, per eliminare le “oscillazioni ad alta frequenza”, cioè quelle vibrazioni dovute all’incertezza del sensore a livello elettronico. Dopo il passaggio di filtro, la situazione dei punti di tocco viene analizzata con un algoritmo che si occupa di “enumerare” questi punti. Per fare ciò viene confrontata la situazione attuale con quella dell’istante di tempo precedente (immaginate questi calcoli eseguiti in loop), e vengono confrontate le coordinate ed il numero dei punti di contatto.

Basandosi su una stima della distanza massima percorribile nel lasso di tempo tra due frames consecutivi (tipicamente un touchscreen di fascia consumer si aggiorna dalle 50 alle 100 volte al secondo), l’algoritmo capisce se un punto di contatto si è mosso in quell’arco di tempo, e quindi nell’enumerazione riporta lo stesso codice ID del frame precedente.

Grazie a questo lavoro preliminare di filtraggio e tracking dei punti di contatto, il sistema è in grado di capire quando un tocco inizia, trasla e termina, e può quindi offrire delle API di più alto livello per gestire gli eventi dell’interfaccia in modo molto semplice. Internet Explorer 10 ci espone questo livello di astrazione con le API MSPointer*.

In realtà, esiste un livello ancora più elevato di astrazione che consente, analizzando opportunamente i punti di contatto, di riconoscere ed estrapolare le note gestures di pinch, scroll, rotazione, ecc…
Le API di più alto livello, che si occupano di rilevare e gestire opportunamente le gesture, sono le MSGesture* di cui abbiamo parlato in un precedente articolo.

Agganciare il proprio codice a questi eventi è semplice come scrivere queste poche righe in Javascript:

Il sistema genera eventi di Down, Up e Move separatamente per ogni punto di tocco (uno per ogni dito), per cui non è complicato gestire un’interfaccia multi-touch, oppure trasformare un sito classico in uno adatto ad essere usato con le dita. Un esempio di codice (completo), ci illustra alcuni possibili usi dell’API MSPointer e di MSGesture: http://code.msdn.microsoft.com/ie/Pointers-and-Gestures-ae95918f.

Queste API, inoltre, sono state proposte da Microsoft per l’integrazione tra gli standard del W3C, pertanto è solo questione di tempo prima che vengano standardizzate su tutti i browser. In attesa che lo standard venga ratificato e adottato da tutti, è possibile applicare degli accorgimenti per gestire correttamente tutti i browser, come ben spiegato in questo articolo di approfondimento. Dopo questa introduzione sulle basi tecniche, strettamente a carico dello sviluppatore, parleremo nei prossimi articoli di aspetti di più alto livello, relativi alla progettazione e ottimizzazione di interfacce multitouch da un punto di vista del design e della User Experience.