Come molti sapranno al recente workshop UGIdotNET tenutosi a Predappio ha esordito il mio SurfRaf. Per chi vuole subito vederlo all’opera ecco i video girati da Corrado a Predappio e dal sottoscritto oggi:
Video 1: com’è fatto
Video 2: come funziona parte 1
Video 3: come funziona parte 2
Per chi fosse andato per un annetto in antartide :), Microsoft Surface è un dispositivo (equipaggiato con Vista) che permette di usare diverse applicazioni con le sole “gesture” ossia muovendo con le mani gli oggetti disposti sullo schermo.
Surface è venduto da Microsoft sotto forma di tavolo a circa 10K$ ed ha avuto successo in alcune catene di alberghi per applicazioni di concierge. Internamente mi è stato detto che ci sono 9 telecamere a infrarosso e diverse altre diavolerie che ne giustificano il prezzo.
Se volete vederlo all’opera dal vivo venite al Remix Italia Mercoledi 17 Giugno 2009.
Dopo l’esperienza e il successo di Surface, Microsoft ha deciso (come sempre) di creare un supporto device-independent e relativo SDK. Tutto ciò è disponibile in Windows 7 con API native e managed grazie a WPF 4.0. A quanto sembra la prossima versione di Surface userà questo supporto e sarà basata su questa nuova piattaforma.
Il multitouch è economico. Il primo dispositivo (monitor sensibile al multitouch) che viene visto da Windows 7 è stato presentato a PDC 2008. È HP SmartTouch che da vari siti internet si può comprare intorno ai 1000$. Questo è un dato significativo perché obbliga noi sviluppatori a ripensare completamente all’ergonomia delle nostre applicazioni. Non c’è dubbio che di questo se ne parlerà molto.
Il developer che vuole provare a farsi venire qualche idea costruendo un device multitouch a basso prezzo può fare come ha fatto il sottoscritto.
L’idea di per se non è nuova e come ho precisato in sessione il lavoro più duro è suddiviso in quattro parti:
- Il progetto NuiGroup (progetto Tbeta) che riconosce le immagini dalla webcam, elabora l’immagine con edge-detect e altri filtri estrapolando solo le ombre più nere (quelle dove appoggiamo le dita allo schemo traslucido). Le “ditate” indicano le coordinate di ogni “touch” e vengono trasmesse via socket. Da notare che questo progetto può sfruttare la GPU ma che nonostante questo sovraccarica una CPU in modo molto pesante.
- Il progetto MultiTouchVista che installa un driver per Windows 7 e una applicazione helper che riceve dal socket i touch e li passa al driver che emula un device “touch-enabled” di Windows.
- Windows 7 che normalizza gli input e li fornisce alle applicazioni che desiderano supportare questa feature.
- WPF 4.0 che mette a disposizione dello sviluppatore sugli UIElement una serie di eventi (nuovi per WPF 4.0) e una proprietà che permette di decidere le gesture che sono abilitate.
Do-it-yourself! Non si ottiene certamente lo stesso risultato (i touch saranno su uno schermo bianco e non sulle ‘vere’ immagini di uno schermo, e questo fa una bella differenza) e il consumo di CPU è notevole, ma è comunque un ottimo modo per provare la propria applicazione. Insomma per noi dev, funziona alla grande!
Per chi si vuole cimentare:
- Webcam. Preferibilmente 640x480 o più. Meglio se consente la regolazione manuale del focus e della luminosità. Le regolazioni automatiche possono cambiare la resa dell’immagine con sopra la mano.
- Scatola profonda. Il cono di ripresa delle webcam tipicamente è stretto per cui la scatola deve essere profonda. L’interno della scatola deve essere scuro. Mettendo la luce all’interno la webcam non potrebbe ‘vedere’ le ombre delle dita.
- Applicare la webcam in fondo alla scatola, centrandola e tenendola molto ferma. La Köllä a Käldö è vostra amica ;-)
- Plexiglass. Il Plexiglass bianco latte si trova nei fai-da-te e ce lo si può far ritagliare della misura giusta al banco del taglio del legno. Per arrotondare gli angoli ho usato il mio trapano da bricolage ma anche un seghetto manuale funziona allo scopo.
- Illuminazione. Le strisce di led si trovano nei negozi di elettronica. L’alimentazione di solito è a 12V per cui basta saldare qualche pezzo di filo e portarlo ad un jack di alimentazione fissato sulla scatola. Un qualsiasi alimentatore dovrebbe essere sufficiente visto che la corrente necessaria ad alimentare i led è veramente minima.
Per evitare che i fili passino davanti alla webcam dentro la scatola, basta fissarli con la colla alle pareti. Io ho preferito fissare alle pareti dei tubetti dentro cui passano i fili. - Per fissare le strisce di led ho preso un profilato di alluminio a “U”. Alcuni profilati hanno delle sezioni interne dentro cui la striscia di led può slittare dentro. Ammetto che ci vuole un po’ di fortuna ma con un minimo di manualità si può fare un lavoro che abbia un minimo di estetica.
- Infine installare tutto il software.
Ecco alcuni punti a cui fare molta attenzione:
- l’illuminazione è cruciale per la buona riuscita del device. Le ombre delle mani possono ingannare i filtri e risultare in coordinate imprecise
- L’illuminazione a led bianchi è efficace ma purtroppo i led hanno un cono di illuminazione molto stretto. Il cono stretto non permette una illuminazione diffusa. La soluzione è alta luminosità e controllo dell’angolo di incidenza.
Tra le tante ho provato a mettere uno schermo davanti ai led, ma la luminosità si abbatte troppo e creando un’ombra centrale decisamente controproducente. - Lo schermo in plexiglass bianco latte ha un’ottima resa. Basta sceglierlo piuttosto spesso per evitare che fletta durante i ‘touch’.
- Il driver del progetto MultiTouchVista è privo di firma digitale e su Windows 7 a 64 bit non è possibile installarlo. La soluzione è quella di firmare il driver con un certificato self-signed e di fare il boot di Windows 7 abilitando i certificati self-signed.
Se qualcuno arriva fino a qui e vuole due dritte su come fare, è sufficiente che posti un commento a questo post e mi farò vivo con ulteriori istruzioni.
Cosa manca ancora?
La parte più divertente :) cioè scrivere una applicazione multitouch enabled con Visual Studio 2010 e WPF 4.0. Beh per questo ci saranno altre occasioni per parlarne. Ad ogni modo, come ho mostrato in sessione, il sorgente della mia demo è realmente molto semplice.
Enjoy!