UNIVERSITÀ DEGLI STUDI DI SIENA

Facoltà di Ingegneria

___________________

Corso di Laurea in

INGEGNERIA INFORMATICA

STUDIO E SVILUPPO DI

UN’APPLICAZIONE MOBILE CON

L’UTILIZZO DEL BROWSER LAYAR

Referente:

Prof. Marco Maggini

Elaborato di:

Davide Privitera

Anno accademico 2011/2012

Introduzione

Ai giorni d’oggi, l’avvento e il consolidamento dell’uso della tecnologia, ha portato degli

stravolgimenti notevoli sul nostro modo di vivere quotidiano, a tal punto che, oltre al mondo reale, è

possibile distinguere, con una linea sempre meno definitiva, una realtà virtuale composta da

elementi generati dai calcolatori.

Ciò che sta maggiormente contribuendo ad assottigliare la linea di demarcazione tra realtà effettiva

e realtà virtuale, prende il nome di Realtà Aumentata.

Grazie ad essa, infatti, è possibile unire entrambe le realtà, sovrapponendo a ciò vediamo con i

nostri occhi degli elementi virtuali elaborati da un software.

Questa tesi si propone di descrivere brevemente le caratteristiche di questa tecnologia e

implementare un progetto che ne faccia uso. La prima parte del lavoro è dedicata alla descrizione

della Realtà Aumentata e di quali sono le diverse tecnologie che ci permettono di implementarla; si

passa poi ad una descrizione degli strumenti che abbiamo a disposizione per poter sviluppare

applicazioni che ne facciano uso ed infine si descrive ciò che abbiamo voluto sviluppare e di come

si è svolto il processo di sviluppo del software per il Consorzio operativo della banca M.P.S.; in

particolar modo andremo a creare un livello per il noto browser Layar, tramite il quale sarà

possibile visualizzare informazioni storiche e pubblicitarie sulle filiali M.P.S. presenti sul territorio

senese.

Realtà Aumentata

La Realtà Aumentata (o AR, dall’inglese Augmented Reality) è una combinazione di una scena

reale vista dall’osservatore e di una scena virtuale generata dal computer che ‘aumenta’ la scena

iniziale con informazione aggiuntiva [1]. Lo scopo finale, è quello di creare un sistema nel quale

l’utente non sappia cogliere la differenza tra il mondo reale e la versione ‘aumentata’ dello stesso,

in quanto entrambe le realtà coesistono nella maniera più armoniosa possibile.

Il termine “Realtà Aumentata” venne coniato agli inizi degli anni 90, quando i due ricercatori Tom

Caudell e David Minzell, al lavoro su un prototipo che rimpiazzasse gli strumenti di bordo di un

aereo, svilupparono un congegno indossabile sul viso dei piloti in grado di visualizzare velocemente

la rotta e tutte le informazioni correlate ai decolli e agli atterraggi [2].

Di lì a pochi anni, lo sviluppo di questa tecnologia fu un crescendo e portò alla creazione di diverse

realtà, come ad esempio ARToolKit, la prima applicazione di realtà aumentata che, usando il Video

Tracking, permetteva di posizionare una camera virtuale nella stessa posizione del punto di vista

dell’osservatore e aggiungere informazioni in sovraimpressione [3]; o ancora ARQuake, una

versione del videogioco Quake basata sempre sulla Realtà Aumentata [4].

Nel 2008 è stato lanciato Wikitude, un software che consente di visualizzare sul proprio cellulare le

informazioni pubblicate da altri utenti su Wikipedia e riferite al sito turistico in cui si trovano [5].

Nel 2009 ARToolKit è stato integrato con Flash, portando la realtà aumentata su browser in modo

da poterla sperimentare, oltre che nei moderni smartphone, anche nel web.

Nel corso dell'ultimo ventennio, sono state introdotte diverse definizioni di Realtà Aumentata. In

generale, possiamo dire che esistono due correnti di pensiero: quella dei ricercatori che definiscono

la Realtà Aumentata come un ramo della Realtà Virtuale e quelli che sostengono il contrario.[6][7]

Si parla di realtà virtuale (VR) in riferimento a tutte quelle tecniche che permettono di indurre

esperienze sensoriali di luoghi e oggetti, reali o immaginari, che vengono simulati per mezzo di

tecnologie informatiche, dunque in definitiva si parla di una realtà totalmente simulata.

Lo scopo della Realtà Aumentata, invece, non è quello di sostituire il mondo reale, ma di

estenderlo. L’aggettivo Augmented, sta a definire proprio l’aumento del livello di conoscenza

offerto all’utente sulla realtà circostante [8], in quanto il soggetto riesce a percepire e riconoscere

l’ambiente in cui si trova (Fig. 1a), senza provare disorientamento, come avviene invece nel caso

della VR (Fig. 1b). Uno degli svantaggi della VR è che richiede strumenti hardware capaci di

gestire pesanti modelli 3D e che può generare la sensazione di irreale da parte dell’utente, essendo

basata sulla creazione di ambienti puramente sintetici.

(Fig. 1a) (Fig. 1b)

Recentemente è stato evidenziato attraverso un grafico, che la separazione tra mondo reale e

virtuale non è così netta, ma esiste una zona intermedia chiamata Mixed Reality (Fig. 2).

(Fig. 2)

Si tratta del grafico chiamato Reality-Virtuality Continuum [9][10], dove è possibile osservare come

mondo reale (Real Environment) e mondo totalmente virtuale (Virtual Environment) siano ai due

estremi del Continuum; in mezzo a questi due però vi sono alcune variazioni, ovvero L’Augmented

Reality (AR), che si trova nella parte sinistra della MR, in quanto in essa il mondo reale è

predominante rispetto a ciò che viene aggiunto artificialmente e l’Augmented Virtuality (AV,

Virtualità Aumentata), che si trova più vicina alla VR, e caratterizza quei sistemi che, fatta

eccezione per qualche immagine presa dalla realtà, sono in prevalenza virtuali.

Con la nascita della Realtà Aumentata, stanno gradualmente andando a diminuire le applicazioni di

Realtà Virtuale e di Virtualità Aumentata, dal momento che si rileva sempre più conveniente usare

le informazioni digitali per arricchire il nostro mondo piuttosto che sostituirlo completamente da

ambienti sintetici.

Oltre all’utilizzo in settori tecnici, l’AR viene anche sfruttata in applicazioni alla portata di tutti.

Grazie a questa tecnologia possiamo, ad esempio, sfruttare il nostro smartphone per ottenere, in

tempo reale, informazioni sul luogo e sugli edifici che ci stanno davanti, semplicemente puntando la

videocamera integrata, o, ancora, ottenere indicazioni applicate alla strada che vediamo davanti, per

raggiungere un luogo specificato. Quest’ultimo esempio di combinazione tra realtà virtuale e reale,

offre agli utenti delle informazioni molto più esaustive e facili da interpretare rispetto a un

qualunque navigatore satellitare, perché permette loro di muoversi nell’ambiente reale e

visualizzare le informazioni sullo stesso livello, senza dover consultare una cartina virtuale su un

altro dispositivo [11].

Creazione di un sistema di AR Come abbiamo già detto, la Realtà Aumentata permette di aggiungere elementi a quella che

altrimenti sarebbe pura e semplice realtà visibile con i nostri occhi; È possibile visualizzare poi

questo contenuto virtuale aggiuntivo attraverso un dispositivo Mobile, come un telefonino di ultima

generazione (Iphone o telefono Android), oppure attraverso la webcam di un computer o degli

occhiali specifici. Gli oggetti virtuali che vediamo in sovraimpressione sono interattivi, ovvero

possono eseguire movimenti e animazioni in risposta alle azioni umane.

Tutto ciò è possibile grazie ad un software che elabora le immagini del mondo reale e, fissando dei

punti geometrici nello spazio, aggancia la realtà virtuale che andrà ad aumentare quella reale. A

questo proposito, ricopre un ruolo fondamentale per il corretto funzionamento di queste

applicazioni, la fase di monitoraggio e localizzazione della posizione.

In linea generale, le applicazione di tipo AR vengono sviluppate in quattro diverse fasi: Tracking,

Registrazione, Visualizzazione e Rendering [12].

Il Tracking permette di tracciare la posizione dell’osservatore rispetto alla scena, la Registrazione,

poi, permette di sovrapporre al modello reale quello artificiale.

La Visualizzazione, si occupa di individuare il dispositivo con il quale l’utente vuole vedere la

Realtà Aumentata, ad esempio, nel nostro caso, tramite un IPhone.

Il Rendering, infine, sovrappone concretamente le due realtà, cercando di prediligere due fattori che

sono: la qualità dell’immagine e la velocità di aggiornamento.

Una volta fatto questo, il passo successivo è l’interattività dell’applicazione che dipende nettamente

dal dispositivo che utilizziamo e che ci consente di interagire attivamente con la scena che ci viene

presentata.

Fase di Tracking Esistono diverse tecniche di Tracking, le più conosciute si basano sui Marker o sulla combinazione

tra GPS e bussola. La prima viene maggiormente utilizzata per piattaforme Desktop Computer, si

tratta di marcatori stampati in bianco e nero che, una volta posizionati nel sito di interesse, vengono

individuati facilmente da uno specifico software che a sua volta genererà la realtà virtuale partendo

proprio dai marcatori stessi (Fig. 3).

(Fig. 3)

Come si evince dall’immagine, le coordinate del mondo virtuale vengono generate prendendo come

centro il marcatore e generando gli assi cartesiani di conseguenza.

Uno dei maggiori vantaggi di questa soluzione sta nel fatto che se il marker viene spostato, tutto

l’oggetto virtuale si sposta di conseguenza, senza dover modificare nient’altro, inoltre questa

soluzione è molto precisa, rispetto alle altre tecniche.

Questo tipo di approccio ha avuto successo grazie ai costi contenuti, alla velocità con la quale si

riesce ad avere un sistema di tracking tridimensionale e infine grazie all’implementazione di questo

metodo in librerie software gratuite, le ARToolkit [3].

La seconda tecnica di Tracking, che prevede l’utilizzo del GPS e della bussola integrata nel nostro

dispositivo è una soluzione applicata maggiormente nel campo delle piattaforme Mobile [13].

In questo caso, il software ha dei punti di interesse memorizzati in un database e, una volta che

l’utente si trova nei pressi di questi punti, il software genera in sovraimpressione le informazioni

specifiche.

I problemi di questa soluzione sono legati alla scarsa precisione dovuta al GPS (± 10 metri) e alla

possibile mancanza di copertura del servizio in alcune zone. Inoltre, se l’ambiente reale cambia,

dovranno essere prese in considerazione delle eventuali modifiche anche nelle informazioni virtuali

ad esso collegate.

Fase di Registrazione La fase di Registrazione è una delle più complesse ed elaborate in quanto, come è già stato detto, si

occupa di rendere gli oggetti digitali perfettamente integrati nell’ambiente circostante, tenendo di

conto di quelle che sono le effettive distanze della scena reale e calcolandone le giuste proporzioni.

Questo tipo di problema, prende forma soprattutto quando si tratta di applicazioni che devono

essere molto precise, vedi ad esempio software dedicati ad operazioni chirurgiche. In questi casi, è

essenziale avere un’ottima sovrapposizione delle immagini sia quando ciò che si guarda è fermo e

sia quando è in movimento. A questo proposito, la fase di Registrazione è normalmente affetta da

errori [14], che possiamo suddividere generalmente in due tipologie:

• Statici: come si evince dalla parola stessa, sono errori che si presentano quando l’immagine

che stiamo puntando è ferma. Possono essere causati da difetti delle lenti, errori di

allineamento nella fase di tracking o errori di mapping dell’ambiente reale circostante.

• Dinamici: avvengono quando l’utente o l’ambiente si muovono producendo un

disallineamento temporaneo tra il sistema virtuale e quello reale. Questo tipo di errori è

chiaramente indipendente dalla registrazione statica. E’ possibile infatti avere un sistema che

abbia un’ottima registrazione statica ma una pessima registrazione dinamica e che quindi

produce effetti poco realistici quando il sistema subisce delle variazioni.

Per cercare di ridurre questo tipo di errore si può intervenire su diversi fattori, in particolare

il system lag, ovvero ridurre il più possibile il ritardo tra l’acquisizione delle immagini e la

proiezione degli oggetti, oppure ridurre il ritardo di rendering o ancora meglio cercare di

predire la posizione futura dell’oggetto che si sta muovendo.

Fase di Visualizzazione Riguardo al processo di Visualizzazione, possiamo prendere in considerazione tre metodologie

differenti: Monitor based, Optical see through e Video see through [15], le ultime due, come

vedremo, si basano sull’utilizzo di visori HMD (Head Mounted Display) e dunque garantiscono un

risultato molto realistico.

• Monitor based: è la tecnica più semplice e consiste nel visualizzare su di un monitor

la scena vista dalla webcam sovrapposta alla scena virtuale generata dal calcolatore

che può essere un PC, un laptop, o gli smartphone di ultima generazione. Questo tipo

di approccio presenta dei limiti funzionali, primo fra tutti le basse prestazioni

grafiche e quindi la lentezza ad elaborare velocemente le immagini. Altro limite, non

indifferente, è dovuto al fatto che se l’utente si muove deve spostare anche il monitor

da cui osserva la scena. (Fig. 4a)

• Optical see through: è una tecnica che fa apparire in sovraimpressione su degli

specchi traslucidi informazioni, grafici e scritte. (Fig. 4b)

• Video see through: in questo caso si utilizzano due telecamere, una per ciascun

occhio, che acquisiscono le immagini e le inviano all’occhio dell’utente mediante

due display. Attraverso queste tecnica è possibile realizzare effettivi visivi molto più

realistici e complicati. (Fig. 4c)

I primi due metodi hanno un notevole svantaggio nel ritardo di proiezione dell’immagine sul

monitor ma hanno il vantaggio che la fase di registrazione è semplificata; nel metodo ottico, invece,

quest’ultima deve essere acquisita utilizzando dei sensori montati sui visori che ne complicano

notevolmente la struttura.

(Fig. 4a) (Fig. 4b) (Fig. 4c)

Stato dell’arte – Layar Col passare del tempo, sono stati sviluppati molti strumenti che ci permettono di creare facilmente

applicazioni per smartphone che fanno largo uso della realtà aumentata.

Uno di questi, con il quale svilupperemo il nostro progetto, è Layar, un browser che ci mette a

disposizione la parte di interfaccia quasi preconfezionata [16].

Sviluppato dalla SPRXmobile, è uno dei browser più diffusi dall’alto dei suoi 3 milioni di utenti e

una comunità di sviluppatori molto attiva in Rete. Inizialmente disponibile solo per Android, col

tempo sono state sviluppate anche librerie per IPhone, che nonostante un primo ritiro dall’Apple

Store per alcuni bug, oggi risulta molto affidabile.

Layar offre una serie di livelli che possiamo scegliere dai menù Popular e Featured o ancora dai

risultati di una ricerca locale per parole chiave o da un database. Una volta scelto questo filtro

(layer), il browser ci permette di inquadrare l’ambiente a noi circostante e ci offre informazioni su

di esso in base al layer tematico scelto; dunque, ad esempio, potremo avere informazioni su negozi,

ristoranti sfruttando servizi come Wikipedia o Google local search;

Oltre alle opzioni visibili a seconda dei livelli scelti, esiste una scelta costante data dal pulsante

Take me there, grazie al quale è possibile accedere direttamente a Google Maps, e ricevere

automaticamente le informazioni per raggiungere il sito desiderato.

I diversi livelli tematici o Layers sono scaricabili dalla rete sia gratuitamente che a pagamento.

Librerie per Applicazioni Stand Alone Per poter funzionare, un browser ha bisogno di far riferimento ad alcune librerie, necessarie per

creare un’applicazione di AR.

Tra le più importanti, ricordiamo essenzialmente le già menzionate librerie ARToolKit, che

permettono di calcolare in tempo reale la posizione e l’orientamento di una videocamera rispetto a

dei markers [3].

Tali librerie per PC sono state poi modificate, risolvendo principalmente problemi legati alla

gestione della memoria, per consentirne un uso anche su PocketPC. La prima versione fu sviluppata

da Dr. Hirokazu Kato dell'Università di Osaka (Giappone), e poi sono state supportate dal HIT Lab

dell'università di Washington e dal HIT Lab NZ dell'università di Canterbury, Nuova Zelanda. La

diffusione di queste librerie è stata agevolata dalla codifica di versioni per sistemi operativi quali

Linux, MacOS e Windows complete di codice sorgente.

Al sistema di riferimento associato al marker planare viene associato un oggetto virtuale, realizzato

in precedenza ed importato nell’applicazione. Lo sfondo del flusso video, coincide con quello

acquisito dalla telecamera ed è congruente con la percezione visiva dell’osservatore. Gli oggetti

virtuali da inserire nella scena, sono visualizzati utilizzando l’ambiente grafico della libreria

OpenGl (libreria che rappresenta lo standard industriale per lo sviluppo di applicazioni grafiche che

necessitano di alte prestazioni in termini di qualità e capacità di rendering).

Le prerogative delle ARToolKit sono la semplicità e la flessibilità d'impiego. Tecnicamente

risolvono il problema del Tracking dell'osservatore utilizzando algoritmi di calcolo propri della

Computer Vision e calcolando, in real time, la posizione reciproca tra marker e camera elaborando i

fotogrammi di un flusso video.

Gli algoritmi di calcolo implementati nelle ARToolKit sono:

- La calibrazione della camera;

- L’elaborazione ed estrazione, dalle immagini digitali, delle geometrie fiduciali;

- La stima della posizione;

- La sovrapposizione di oggetti virtuali ai fotogrammi digitali

Il progetto Analisi del problema L’utilizzo della Realtà Aumentata permette, come abbiamo visto, di ampliare sostanzialmente le

potenzialità dei nostri dispositivi quali computer e smartphone.

Nella nostra analisi, abbiamo pensato di sviluppare un’applicazione che, usando questa tecnologia,

ci permettesse di ottenere informazioni sulle filiali M.P.S. dislocate sul territorio.

In particolare, essendo che quest’ultime talvolta sono situate in edifici di valenza storica, si è voluto

dare la possibilità agli utenti di ottenere informazioni, oltre che sulla singola filiale, anche sul luogo

dove essa è posta.

Il software in questione, deve dare la possibilità all’utente di visualizzare, tramite la videocamera

integrata nei dispositivi, le filiali M.P.S. presenti nelle immediate vicinanze, insieme alle relative

informazioni di ciascuna, come ad esempio: contatti telefonici, email e informazioni anagrafiche.

Deve essere possibile definire il range di distanza oltre il quale non vogliamo più rilevare le filiali

intorno a noi e se una di queste si trova in un edificio storico, vogliamo poter visualizzare

informazioni specifiche a riguardo.

Sviluppare un’applicazione di questo genere partendo da zero, diventa un lavoro molto oneroso ma

fortunatamente, come abbiamo potuto vedere nei capitolo precedenti, abbiamo a disposizione

diversi strumenti che ci semplificano ampiamente il tutto.

A questo proposito, per poter raggiungere l’obiettivo prefissatoci, useremo il browser Layar, che ci

da la possibilità di creare in maniera quasi totalmente immediata un applicativo di questo genere.

Layar, infatti, ci permette di generare dei livelli (layer), che possiamo personalizzare su diversi

piani. Una volta creato un livello, dovremo semplicemente specificare quali sono i nostri punti di

interesse, chiamati POI (Points Of Interest), avvalendoci dell’uso di un database, inserire le

informazioni da visualizzare una volta che l’utente si trova nei pressi di questi punti e

personalizzare, infine, la parte grafica della nostra applicazione.

Requisiti Per cominciare a sviluppare un livello in Layar, innanzitutto abbiamo bisogno di un server che

ospiti il database contenente le informazioni, i POI da visualizzare ed i file PHP per

l’interfacciamento tra il livello e il database; a questo proposito sfruttiamo il servizio di spazio web

gratuito offerto da Altervista.

Una volta effettuata la registrazione, Altervista ci offre spazio web gratuito, supporto al linguaggio

PHP5 e un database MySQL5 interfacciato con PhpMyadmin.

Raggiungiamo il sito di Altervista all’indirizzo www.altervista.org e inseriamo nell’apposito box di

testo il nome del sito che vorremmo pubblicare, nel nostro caso layarM.P.S. (Fig. 5).

(Fig. 5)

Una volta fatto ciò, clicchiamo sul tasto Prosegui.

Nella pagina successiva ci vengono richiesti alcuni dati anagrafici, compiliamo il modulo e

clicchiamo sul tasto Prosegui in basso a destra (Fig. 6).

(Fig. 6)

A questo punto, lo staff di Altervista ci invierà una email di conferma, contenente anche le

credenziali di accesso, che ci permetteranno di attivare il nostro sito internet ed accedere al pannello

di controllo (Fig.7).

(Fig. 7)

Il sito che ospita i file per il corretto funzionamento del nostro livello è raggiungibile all’indirizzo

http://layarM.P.S..altervista.org.

Il passo successivo, è quello di registrarsi come sviluppatori nel sito ufficiale di Layar all’indirizzo

www.layar.com, in questo modo avremo accesso a tutte le risorse offerteci da Layar per la

creazione di un nostro livello personalizzato.

Andiamo dunque sul sito e clicchiamo sul link in alto a destra denominato Create account.

Nella pagina successiva, inseriamo i nostri dati con i quali vorremo accedere a Layar (Fig. 8).

(Fig. 8)

Una volta cliccato sul pulsante Create account, riceveremo una email di conferma e potremo così

accedere al nostro account Layar.

Prima di procedere con la vera e propria creazione del livello, dobbiamo impostare il nostro account

in modalità sviluppatore; per far ciò raggiungiamo la pagina www.layar.com/developer, e premiamo

sul pulsante Become a developer now.

A questo punto il nostro account è pronto e dovremmo avere una pagina simile a quella in figura 9.

(Fig. 9)

Creazione del livello Per iniziare la creazione del livello, clicchiamo sul pulsante in alto a destra denominato My layers,

clicchiamo, quindi, su create new layer (Fig. 10).

(Fig. 10)

In questo modo avremo accesso al form di creazione del nostro livello (Fig. 11)

(Fig. 11)

Questo form è usato per definire e creare uno strato sul server pubblico di Layar. Tutti i campi ad

esso correlati sono obbligatori. Salvo il nome del livello che non può essere rinominato, gli altri

campi possono essere modificati anche in seconda istanza.

La tabella seguente fornisce spiegazioni dettagliate per ciascun campo:

Campi Richiesto/Default Definizione Tooltips

Layer name

Obbligatorio (non può essere rinominato)

Il nome del layer. E’ la chiave che viene utilizzata per il recupero di informazioni all’interno del livello

Il nome deve esser scritto in caratteri alfanumerici minuscoli, iniziando con un carattere e deve essere unico; non può essere editato una volta che il livello è stato creato NOTA: Il layername apparirà nell’URL del livello nella sezione “Layers”.

Title Obbligatorio

Il tasto che sarà mostrato nel banner sulla destra e il titolo del livello mostrato nella lista degli strati sul telefono.

Massimo 18 caratteri.

Publisher name Obbligatorio

Il nome dell’autore del livello, viene mostrato nelle liste della Layer Gallery.

Di default lo sviluppatore del livello è anche colui che lo pubblica. A questo proposito questo campo sarà riempito con il nome dello sviluppatore.

Layer type Obbligatorio

Il tipo del livello determina come il client dovrà mostrare I POI.

• Generic 2D: Usa questo valore se

vuoi usare le icone default o se hai caricato delle icone personalizzate per rappresentare I POI.

• 2D and 3D objects in 3D space: Se vuoi usare immagini 2D o modelli 3D nello spazio 3D.

API endpoint

URL Obbligatorio

L’URL del tuo servizio web dove Layar può recuperare le informazioni sui POI. NOTA sono supportate solo le porte 80 (http) e 443 (https).

L’url dovrebbe essere scritto nella forma http://example.com/path/to/service

Short descripti

on Obbligatorio

Una brave descrizione del livello, mostrata nelle lista dei livelli presente nel telefono.

Un breve sommario del tuo livello e dei contenuti che esso propone con un massimo di 60 caratteri, inclusi gli spazi.

Layar Vison Obbligatorio/Disabilitato

Abilitare questa opzione permette di creare un livello con Layar Vision.

Layar Vision è disponibile solo in Layar v6.0 (Android e iOS platforms)

Una volta compilato il campo con i relativi valori, clicchiamo su Create Layer; in particolare i

valori che abbiamo inserito sono i seguenti:

• Layer Name: filialiM.P.S.;

• Title: Filiali M.P.S. Siena;

• Short description: Visualizza le filiali M.P.S. presenti a Siena e info varie;

• Publisher name: Davide Privitera;

• API endpoint URL: http://layarM.P.S..altervista.org/LayerM.P.S./layerM.P.S..php; che è

l’indirizzo del sorgente PHP che gestisce l’interfacciamento tra Layar e il database. Lo

presenteremo in dettaglio nei prossimi paragrafi.

a questo punto il livello comparirà nella nostra pagina personale (Fig. 12), nella sezione My Layers,

raggiungibile dal pulsante blu presente in alto a destra.

(Fig. 12)

Cliccando sul pulsante Edit, potremo effettuare ulteriori personalizzazioni allo strato che abbiamo

appena creato.

La sezione che ci verrà mostrata sarà simile a quella in figura 13.

(Fig.13)

In questa sezione, abbiamo vari tabs. Nella tabella sottostante sono mostrati i valori importanti che

abbiamo modificato per il corretto funzionamento del livello. Il resto può essere lasciato ai valori di

default già preimpostati.

Tab Campi Personalizzazioni

Listing & Indexing

Icon Qui dobbiamo caricare un’icona per il nostro livello. Category Selezioniamo Local information. Detail description

Qui abbiamo inserito una breve descrizione del livello da noi creato e successivamente una descrizione più dettagliata.

Minimum API version Selezioniamo la versione 4.0.

Look & feel Banner Icon Carichiamo un banner da 120 x 52.

Coverage Countries Scegliamo gli stati che il livello dovrà coprire, nel nostro caso scegliamo Italy. Bounding Boxes

Poichè i nostri punti di interesse sono relative alla città di Siena, tramite questa opzione possiamo specificare a Layar la regione di funzionamento dello strato.

Preparazione del Database Passiamo ora a creare il database che memorizzerà i POI e le informazioni da mostrare per ciascun punto di interesse.

A questo proposito, usiamo il servizio offerto da Altervista, che ho precedentemente presentato.

La struttura del database che andremo a creare è composta da quattro tabelle:

• POI: contiene le informazioni su ciascun punto di interesse (Fig.14a); • POIAction: contiene le azioni che ciascun POI dovrà poter eseguire una volta che è stato

selezionato (Fig.14b); • LayerAction; • Layer;

(Fig. 14a) (Fig. 14b)

Le tabelle sono costruite in modo da restituire in output dati formattati secondo lo standard definito da JSON di cui Layar ne fa largo uso.

JSON è l’acronimo di JavaScript Object Notation ed è un formato adatto ad immagazzinare varie tipologie di informazioni, e quindi a scambiare queste informazioni tra applicazioni client/server. Uno dei suoi punti di forza è la facilità di scrittura e di analisi dei dati; questo agevola notevolmente gli sviluppatori che ne fanno uso [17]. Per prima cosa effettuiamo il login sul sito di Altervista, e dal menù AlterSito raggiungiamo la voce Database (Fig. 15).

(Fig. 15)

Per generare più velocemente le nostre tabelle, abbiamo fatto uso del codice SQL che si può direttamente inserire in PhpMyAdmin; accediamo dunque a PhpMyAdmin cliccando sul link in basso a sinistra visibile nella precedente immagine. A questo punto, una volta effettuato il login con le stesse credenziali di accesso dell’account Altervista, ci ritroveremo nel menù principale di PhpMyAdmin (Fig.16).

(Fig. 16)

Cliccando sul nome del database posto in alto a sinistra, che nel nostro caso è my_layarM.P.S., potremo accedere al menù per la creazione delle tabelle che andranno a popolare il nostro DB. Selezioniamo il tab SQL, otterremo un box di testo come quello in figura 17.

(Fig. 17)

Tramite questo strumento possiamo eseguire in maniera automatica qualsiasi azione, come ad esempio, generare nuove tabelle, popolarle con valori, selezionare determinati risultati etc, etc.

Il codice per generare le nostre quattro tabelle è il seguente:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

--

-- Struttura per la tabella ‘Layer’

--

CREATE TABLE IF NOT EXISTS `Layer` (

`layer` varchar(255) NOT NULL,

`refreshInterval` int(10) DEFAULT '300',

`refreshDistance` int(10) DEFAULT '100',

`fullRefresh` tinyint(1) DEFAULT '1',

`showMessage` varchar(255) DEFAULT NULL,

`id` int(11) NOT NULL AUTO_INCREMENT,

`biwStyle` enum('classic','collapsed') DEFAULT 'classic',

PRIMARY KEY (`id`),

UNIQUE KEY `layer` (`layer`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

-- --------------------------------------------------------

--

-- Struttura per la tabella ‘POI’

--

CREATE TABLE IF NOT EXISTS `POI` (

`id` varchar(255) NOT NULL,

`footnote` varchar(150) DEFAULT NULL,

`title` varchar(150) NOT NULL,

`lat` decimal(13,10) NOT NULL,

`lon` decimal(13,10) NOT NULL,

`imageURL` varchar(255) DEFAULT NULL,

`description` varchar(150) DEFAULT NULL,

`biwStyle` enum('classic','collapsed') DEFAULT 'classic',

`alt` int(10) DEFAULT NULL,

`doNotIndex` tinyint(1) DEFAULT '0',

`showSmallBiw` tinyint(1) DEFAULT '1',

`showBiwOnClick` tinyint(1) DEFAULT '1',

`poiType` enum('geo','vision') NOT NULL DEFAULT 'geo',

`layerID` int(11) NOT NULL,

PRIMARY KEY (`id`),

KEY `layerID` (`layerID`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- --------------------------------------------------------

--

-- Struttura per la tabella ‘LayerAction’

--

CREATE TABLE IF NOT EXISTS `LayerAction` (

`layerID` int(11) NOT NULL,

`label` varchar(30) NOT NULL,

`uri` varchar(255) NOT NULL,

`id` int(10) NOT NULL AUTO_INCREMENT,

`contentType` varchar(255) DEFAULT 'application/vnd.layar.internal',

`method` enum('GET','POST') DEFAULT 'GET',

`activityType` int(2) DEFAULT NULL,

`params` varchar(255) DEFAULT NULL,

`closeBiw` tinyint(1) DEFAULT '0',

`showActivity` tinyint(1) DEFAULT '1',

`activityMessage` varchar(255) DEFAULT NULL,

PRIMARY KEY (`id`),

KEY `layerID` (`layerID`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

-- --------------------------------------------------------

--

-- Struttura per la tabella `POIAction`

--

CREATE TABLE IF NOT EXISTS `POIAction` (

`poiID` varchar(255) NOT NULL,

`label` varchar(30) NOT NULL,

`uri` varchar(255) NOT NULL,

`autoTriggerRange` int(10) DEFAULT NULL,

`autoTriggerOnly` tinyint(1) DEFAULT '0',

`id` int(11) NOT NULL AUTO_INCREMENT,

`contentType` varchar(255) DEFAULT 'application/vnd.layar.internal',

`method` enum('GET','POST') DEFAULT 'GET',

`activityType` int(2) DEFAULT NULL,

`params` varchar(255) DEFAULT NULL,

`closeBiw` tinyint(1) DEFAULT '0',

`showActivity` tinyint(1) DEFAULT '1',

`activityMessage` varchar(255) DEFAULT NULL,

`autoTrigger` tinyint(1) NOT NULL DEFAULT '0',

PRIMARY KEY (`id`),

KEY `poiID` (`poiID`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

--

-- Vincoli per le tabelle

--

--

-- Vincoli per la tabella `POI`

--

ALTER TABLE `POI`

ADD CONSTRAINT `POI_ibfk_8` FOREIGN KEY (`layerID`) REFERENCES `Layer` (`id`);

--

-- Vincoli per la tabella `LayerAction`

--

ALTER TABLE `LayerAction`

ADD CONSTRAINT `LayerAction_ibfk_1` FOREIGN KEY (`layerID`) REFERENCES `Layer` (`id`);

--

-- Vincoli per la tabella `POIAction`

--

ALTER TABLE `POIAction`

ADD CONSTRAINT `POIAction_ibfk_1` FOREIGN KEY (`poiID`) REFERENCES `POI` (`id`);

Come si evince dal codice stesso, per ciascuna tabella vengono definiti i vari campi che la

compongono con i relativi attributi che specificano esattamente che tipi di dato ciascun campo potrà

memorizzare; nell’ultima parte del codice, invece, vengono impostate le chiavi primarie per

ciascuna tabella.

Per creare le tabelle, basta copiare e incollare il codice nel box di testo SQL e premere il pulsante

Esegui posto in basso a destra.

Una volta fatto ciò, dovremo iniziare a popolarle. Le tabelle Layer e LayerAction vanno riempite

con un solo campo standard, per far ciò eseguiamo, con la stessa modalità appena descritta, il

seguente codice:

--

-- Dumping data for table `Layer`

--

INSERT INTO `Layer` (`layer`,`refreshInterval`,`refreshDistance`,

`fullRefresh`,`showMessage`,`id`,`biwStyle`) VALUES

('layername', 300, 100, 1, NULL, 1, 'classic');

-- --------------------------------------------------------

--

-- Dumping data for table `LayerAction`

--

INSERT INTO `LayerAction` (`layerID`, `label`, `uri`, `id`, `contentType`,

`method`,`activityType`,`params`,`closeBiw`,`showActivity`,`activityMessage`) VALUES

(1,'layerlevelaction','http://layar.com',2,'application/vnd.layar.internal', 'GET', NULL,

NULL, 0, 1, NULL);

Ora possiamo iniziare a riempire le tabelle POI e POIAction. La prima raccoglie i punti di interesse

e per ciascuno memorizza:

• Un’id univoco con il quale poterci riferire ad un punto specifico;

• Un campo footnote, ovvero un valore che comparirà nella parte bassa del box di ciascun

POI, che nel nostro caso verrà riempito con la stringa “53100 - Siena”;

• Un campo title, che noi utilizzeremo per inserire la stringa “Banca M.P.S. Siena”;

• I valori del punto in latitudine e longitudine;

• Un campo dove poter specificare l’URL di un’immagine esplicativa che si vuole

visualizzare per ciascun punto;

• Un campo description, dove inseriremo la via della filiale che stiamo considerando;

• Altri campi riempiti con valori di default che servono per il corretto funzionamento di

Layar;

Come abbiamo fatto in precedenza, ecco di seguito il codice per riempire in automatico la tabella

POI, naturalmente il codice andrà ripetuto per tutti i punti che vogliamo inserire, per brevità ne

inserirò soltanto uno:

--

-- Dumping data for table `POI`

--

INSERT INTO `POI` (`id`, `footnote`, `title`, `lat`, `lon`, `imageURL`, `description`,

`biwStyle`, `alt`, `doNotIndex`, `showSmallBiw`, `showBiwOnClick`, `poiType`, `layerID`)

VALUES

('geo_1', '53100 - Siena', 'Banca M.P.S. Siena', ‘43.3218470000',

‘11.3305770000’,‘http://mw2.google.com/mw-

panoramio/photos/thumbnail/60194250.jpg’,‘Piazza Salimbeni, 3', 'classic', NULL, 0, 1, 1,

'geo', 1);

Per poterci calcolare le coordinate GPS di un punto abbiamo usato GoogleMaps, in particolare, una

volta raggiunto il punto descritto dalla via “Piazza Salimbeni 3 Siena” è bastato cliccare col tasto

destro e successivamente scegliere la voce Che cosa c’è qui?, (Fig. 18).

(Fig. 18)

Passiamo infine a riempire la tabella POIAction; questa è composta da:

• Un campo POIid dove dovremo specificare l’id della tabella POI al quale ci si vuole

riferire;

• Un campo label dove inserire l’etichetta dei pulsanti che compariranno per ciascuno dei

nostri POI e che ci permetteranno di effettuare alcune azioni come: chiamare la filiale

specifica, inviare un’email e ottenere informazioni storiche;

• Un campo uri dove è possibile specificare il tipo di azione da compiere, in particolare le

azioni che useremo saranno:

o mailto: permette di inviare un’email;

o tel: permette di effettuare una telefonata al numero specificato;

o URL: carica la pagina specificata;

• Altri campi di default;

Ecco il codice da inserire per un POI di esempio:

--

-- Dumping data for table `POIAction`

--

INSERT INTO `POIAction` (`poiID`, `label`, `uri`, `autoTriggerRange`, `autoTriggerOnly`,

`id`, `contentType`, `method`, `activityType`, `params`, `closeBiw`, `showActivity`,

`activityMessage`, `autoTrigger`) VALUES

-- Con questo codice generiamo un pulsante, per il POI avente id geo_1,che

-- ci permette di accedere ad una pagina online contenente informazioni

-- storiche sulla sede M.P.S.

('geo_1', 'Info storiche', 'http://www.M.P.S..it/NR/rdonlyres/D4DBE015-40A3-4306-B0B5-

3505B8267412/4002/LaBanca_testo_esterni_PIAZZASALIMBENI.pdf', NULL, 0, 1,

'application/vnd.layar.internal', 'GET', 1,

'lat,lon,alt,lang,countrycode,localCountryCode,version', 0, 1, NULL, 0),

-- Questo valore inserisce una tupla che genera un pulsante utile ad

-- effettuare una telefonata alla filiale scelta

('geo_1', 'Chiama', 'tel: 0577294111 ', NULL, 0, 2, 'application/vnd.layar.internal', 'POST', 4, NULL, 0, 0, NULL, 0),

-- Con questa tupla, infine, creiamo un pulsante che ci permette

-- di inviare una mail al servizio informazioni della banca M.P.S.

('geo_1', 'Email', 'mailto:info@banca.M.P.S..it', NULL, 0, 3,

'application/vnd.layar.internal', 'GET', 5, NULL, 0, 1, 'Send an email to Layar', 0),

Configurazione del servizio Web Ora che abbiamo costruito il nostro database, è tempo di implementare un servizio Web per recuperare le informazioni sui POI e restituirle alla piattaforma Layar. Le informazioni, come abbiamo precedentemente detto, devono essere formattate secondo lo standard JSON. Se la versione di PHP che il nostro Web Server utilizza è la 5.2 o superiore, JSON è supportato in modo nativo. Nel nostro caso, Altervista, utilizza la versione 5.2 ma per evitare incompatibilità con alcuni parametri PHP che andremo ad utilizzare nei codici sorgenti dobbiamo attivare comunque una versione superiore.

Per far ciò, una volta raggiunto il sito di Altervista ed effettuato il login, raggiungiamo la pagina di gestione file dal menù Altersito, Gestione File;

Clicchiamo ora sul tasto dell’ingranaggio posto in alto a sinistra, (Fig. 19)

(Fig. 19)

A questo punto selezioniamo la versione 5.3 o superiore di PHP, come in figura 20.

(Fig. 20)

Ora, iniziamo con la stesura del codice; innanzitutto torniamo alla sezione Gestione File e creiamo la cartella LayerM.P.S., come in figura 21.

(Fig. 21)

Al suo interno andiamo a inserire alcuni file PHP.

Il primo che scriveremo è il file config.inc.php, dove raccoglieremo le informazioni per permettere a Layar di accedere al nostro database; il sorgente è molto semplice, si tratta di alcune definizioni di variabili:

1. <?php 2. 3. define('DBHOST', 'localhost'); 4. define('DBDATA', 'my_layarM.P.S.'); 5. define('DBUSER', 'layarM.P.S.'); 6. define('DBPASS', '********'); //qui inseriamo la pwd di accesso al DB 7. 8. ?>

Il prossimo codice PHP, nominato layerM.P.S..php, rappresenta lo script principale ed è composto

da diverse funzioni che permettono a Layar di inviare e ricevere informazioni sui POI da

visualizzare a livello grafico.

In particolare i compiti da assolvere sono:

• Leggere la richiesta GetPOIs

Secondo le specifiche adottate da Layar, ogni qualvolta che il nostro livello sarà utilizzato, verrà

inviata al database una richiesta HTTP di tipo GET con parametri definiti. Un esempio di una

richiesta GetPOIs è la seguente:

http://custom.layar.nl/FirstTutorial_POI.php?lang=en&countryCode=NL&lon=4.887339&userId=6f85d06929d160a7c8a3c

c1ab4b54b87db99f74b&developerId=4441&developerHash=26ec094e19db2c4a82ebafa200ea2a5e87a7d671&version=

4.0&radius=2500&timestamp=1286357071952&lat=52.377544&layerName=layaroffice&accuracy=100

una volta ricevuta la richiesta, dobbiamo inserirne i parametri in un array. In particolare, nel nostro

caso i suddetti parametri di cui faremo uso sono:

o layerName – il nome del livello pubblicato sul sito di Layar.

o lat – la latitudine della posizione ove l’utente è situato.

o lon – la longitudine della posizione ove l’utente è situato.

o radius – l'intervallo di ricerca all'interno del quale i POI devono essere restituiti.

Per far ciò usiamo il comando $_GET, una variabile PHP globale che restituisce questi valori. I

parametri vengono poi salvati in un’array associativo chiamato $requestParams che ha come chiave

il nome del parametro e come valore il valore stesso. Ciò lo otteniamo chiamando la funzione

getRequestParams().

1. /* Inserisce i parametri dalla richiesta GetPOi all’array associativo chiamato 2. $requestParams */ 3. // Metto i nomi dei parametri richiesti dalla richiesta GetPOI in un array 4. chiamato $keys. 5. $keys = array( 'layerName', 'lat', 'lon', 'radius' ); 6. 7. // Inizializzo un array associative vuoto. 8. $requestParams = array(); 9. // Chiamo la funzione getRequestParams() 10. $requestParams = getRequestParams($keys);

La funzione getRequestParams() è definita di seguito:

1. // Inserisco i parametri necessari della richiesta getPOI e i relative valori in //un array associativo

2. // 3. // Argomenti: 4. // array ; Una serie di parametri necessari passati nella richiesta GetPOI 5. // 6. // Restituisce: 7. // array ; Un array associativo che contiene I parametri di richiesta e i loro 8. // valori. 9. function getRequestParams($keys) { 10. 11. $paramsArray = array(); 12. try {

13. // Recupera i valori dei parametri usando $_GET e li inserisco nell’array 14. // $value con il nome del parametro come chiave 15. foreach( $keys as $key ) { 16. if (isset($_GET[$key])) 17. $paramsArray[$key] = $_GET[$key]; 18. else 19. throw new Exception($key .' parameter is not passed in GetPOI request.'); 20. } 21. return $paramsArray; 22. } 23. catch(Exception $e) { 24. echo 'Message: ' .$e->getMessage(); 25. } 26. }//getRequestParams

• Connettersi al database MySQL

In questa parte dello script devo configurare la connessione al database MySQL che contiene le

tabelle. Nel mio caso ho utilizzato DOP, un’estensione del PHP per formalizzare la connessione al

database.

1. // Mi connetto al database MySQL predefinito. 2. $db = connectDb();

La funzione connectDb() è definita di seguito. Se è possibile connettersi al database, viene restituito

alla variabile $db un gestore di connessione, in caso contrario viene generata un’eccezione.

1. // Mi connetto al database, le informazioni per la connessione sono memorizzate // nel file config.inc.php.

2. function connectDb() { 3. try { 4. $dbconn = 'mysql:host=' . DBHOST . ';dbname=' . DBDATA ; 5. $db = new PDO($dbconn , DBUSER , DBPASS , array(PDO::MYSQL_ATTR_INIT_COMMAND 6. => 'SET NAMES utf8')); 7. // setta la modalità di errore in eccezione 8. $db->setAttribute(PDO::ATTR_ERRMODE , PDO::ERRMODE_EXCEPTION); 9. return $db; 10. }// try 11. catch(PDOException $e) { 12. error_log('message:' . $e->getMessage()); 13. }// catch 14. }// connectDb

• Interrogare il database per recuperare le azioni

Ciascun POI, come abbiamo visto nel paragrafo dedicato al popolamento delle tabelle, da la

possibilità di eseguire delle azioni come ad esempio: telefonare alla filiale selezionata, inviare una

mail ed altro.

Il nostro script, dunque, dovrà anche essere munito di una funzione dedicata al recupero di queste

informazioni. Tale funzione prende il nome di getPoiActions():

1. // Inserisco le azioni per ciascun POI in un array associativo. 2. // 3. // Argomenti: 4. // db ; Il gestore di collegamento al nostro database. 5. // poi ; l’array dei POI. 6. // 7. // Ritorna: 8. // array ; Un array associativo contenente le azioni per i POI, altrimenti 9. // restituisce un array vuoto. 10. // 11. function getPoiActions($db , $poi) { 12. // Definisce un array vuoto $actionArray. 13. $actionArray = array(); 14. 15. // Viene creata una nuova tabella chiamata "POIAction" per memorizzare le 16. // azioni, ciascuna azione ha un campo chiamato "poiID" che mostra l’id del POI 17. // a cui l’azione appartiene. 18. // La query SQL ritorna le azioni che hanno lo stesso PoiID dell’id di 19. // POI($poiID). 20. $sql_actions = $db->prepare(" 21. SELECT label, 22. uri, 23. autoTriggerRange, 24. autoTriggerOnly, 25. contentType, 26. activityType, 27. params 28. FROM POIAction 29. WHERE poiID = :id "); 30. 31. // Lega l’indicatore di parametro ":id" al valore del parametro specificato 32. // "$poiID. 33. $sql_actions->bindParam(':id', $poi['id'], PDO::PARAM_STR); 34. // Uso PDO::execute() per eseguire la query $sql_actions. 35. $sql_actions->execute(); 36. // Iteratore per l’array $actionArray. 37. $count = 0; 38. // Recupera tutte le azioni dei POI

39. $actions = $sql_actions->fetchAll(PDO::FETCH_ASSOC); 40. 41. /* Elabora il risultato $actions */ 42. // Se $actions non è vuoto. 43. if ($actions) { 44. // Inserisco ciascuna azione in $actionArray. 45. foreach ($actions as $action) { 46. // Assegno ciascuna azione all’array $actionArray. 47. $actionArray[$count] = $action; 48. // Inserisco 'params' in un array di stringhe 49. $actionArray[$count]['params'] = changetoArray($action['params'] , ','); 50. // Converto 'activityType' in Integer. 51. $actionArray[$count]['activityType'] = changetoInt($action['activityType']); 52. // Converto 'autoTriggerRange' in Integer. 53. $actionArray[$count]['autoTriggerRange']=changetoInt($action['autoTriggerRange']); 54. // Converto 'autoTriggerOnly' in Boolean. 55. $actionArray[$count]['autoTriggerOnly']=changetoBool($action['autoTriggerOnly']); 56. 57. $count++; 58. }// foreach 59. }//if 60. return $actionArray; 61. }//getPoiActions

• Interrogare il database per ottenere i POI

Una volta che siamo connessi al database, siamo in grado di recuperare le informazioni necessarie.

A questo proposito usiamo una funzione personalizzata chiamata getHotsposts() che ha due

compiti:

1. Creare una query SQL per ottenere le informazioni sui POI.

In particolare, è importante che:

o Solo i POI all’interno del range di ricerca specificato vengano restituiti. Una volta

che abbiamo la lista dei punti, devono essere ordinati secondo la distanza dall’utente.

Il calcolo della distanza (in metri) tra le due locazioni è basa sulla formula di

Haverine. Questa soluzione di calcolo non è scalabile nel caso di query su grandi

database.

o Per ciascun POI, ci limitiamo a restituire i parametri obbligatori e i parametri

opzionali che hanno un valore non di default.

Per ragioni di sicurezza e in particolare per prevenire generali attacchi di tipo SQL injection,

si usa una combinazione di PDO::prepare() e PDO::execute() per preparare ed eseguire la

query SQL [18][19].

2. Analizzare le informazioni recuperate sui POI.

Gestire le informazioni recuperate inserendole nell’array associativo $response[“hotspots”]

1. function getHotspots( $db, $value ) { 2. 3. /* Crea la query SQL per ricevere i POI aventi come valore “poiType” “geo” e 4. che hanno distanza rispetto all’utente all’interno del range di ricerca 5. specificato restituito dalla richiesta GetPOI. 6. 7. Una volta che i POI vengono restituiti si ordinano rispetto alla distanza. 8. 9. Uso PDO::prepare() per preparare la dichiarazione SQL. 10. ":lat1", ":lat2", ":long" e ":radius" sono gli indicatori di parametro con 11. i quali ci riferiamo ai valori, saranno sostituite quando la dichiarazione 12. verrà eseguita. 13. */ 14. $sql = $db->prepare( " 15. SELECT id, 16. imageURL, 17. title, 18. description, 19. footnote, 20. lat, 21. lon, 22. (((acos(sin((:lat1 * pi() / 180)) * sin((lat * pi() / 180)) + 23. cos((:lat2 * pi() / 180)) * cos((lat * pi() / 180)) * 24. cos((:long - lon) * pi() / 180)) 25. ) * 180 / pi() 26. )* 60 * 1.1515 * 1.609344 * 1000 27. ) as distance 28. FROM POI 29. WHERE poiType = "geo" 30. HAVING distance < :radius 31. ORDER BY distance ASC 32. LIMIT 0, 50 " ); 33. 34. // PDOStatement::bindParam() lega gli indicatori di parametro con gli 35. // effettivi valori. 36. $sql->bindParam( ':lat1', $value['lat'], PDO::PARAM_STR ); 37. $sql->bindParam( ':lat2', $value['lat'], PDO::PARAM_STR ); 38. $sql->bindParam( ':long', $value['lon'], PDO::PARAM_STR ); 39. $sql->bindParam( ':radius', $value['radius'], PDO::PARAM_INT );

40. // Use PDO::execute() esegue la dichiarazione $sql. 41. $sql->execute(); 42. // Iteratore per l’array di risposta. 43. $i = 0; 44. // Uso fetchAll per ricevere un array contenente tutte le rimanenti righe nel 45. // set di risultati 46. // Uso PDO::FETCH_ASSOC per andare a prendere in risultati delle query $sql e 47. // restituire ogni riga come un array indicizzato in base al nome della Colonna. 48. 49. $rawPois = $sql->fetchAll(PDO::FETCH_ASSOC); 50. 51. /* Elaboro il risultato di $rawPois */ 52. // se $rawPois non è vuoto 53. if ($rawPois) { 54. // Inserisco ciascuna informazione sui POI in $hotspots 55. foreach ( $rawPois as $rawPoi ) { 56. $poi = array(); 57. $poi['id'] = $rawPoi['id']; 58. $poi['imageURL'] = $rawPoi['imageURL']; 59. // ottiene le informazioni dell’oggetto anchor, notare che changetoFloat è 60. // una funzione personalizzata usata per convertire una stringa in float. 61. $poi['anchor']['geolocation']['lat'] = changetoFloat($rawPoi['lat']); 62. $poi['anchor']['geolocation']['lon'] = changetoFloat($rawPoi['lon']); 63. // ottiene le informazioni dell’oggetto text. 64. $poi['text']['title'] = $rawPoi['title']; 65. $poi['text']['description'] = $rawPoi['description']; 66. $poi['text']['footnote'] = $rawPoi['footnote']; 67. //Uso la funzione getPoiAction() per ritornare un array di azioni 68. // associate al POI corrente. 69. $poi['actions'] = getPoiActions($db, $rawPoi); 70. // Inserisco i POI nell’array $hotspots. 71. $hotspots[$i] = $poi; 72. $i++; 73. }//foreach 74. }//if 75. return $hotspots; 76. }//getHotspots

• Costruire la risposta JSON

Ora che abbiamo definito la funzione getHotspots(), possiamo farne uso per recuperare le

informazioni sui POI e costruire la risposta in formato JSON.

Le chiavi obbligatorie in una risposta JSON sono:

• Layer: stringa; Il nome del livello.

• Hospots: Array di POI; Una lista di informazioni sui POI restituita dal database, ottenuta

chiamando la funzione getHotspost().

• errorCode: Intero; 0 equivale ad assenza di errori. Si usa un codice di errore tra 20 e 29 per

lanciare un’eccezione con messaggio personalizzato che potrà essere visualizzato nel display

dell’utente finale.

• errorString: Stringa; Il messaggio di errore corrispondente, restituito indietro all’utente.

Ecco il codice per generare la risposta JSON:

1. /* Costruisce la risposta in un array associativo */ 2. 3. // Creo un array vuoto chiamato response. 4. $response = array(); 5. 6. // Assegno i valori corrispondenti alle chiavi di risposta obbligatorie JSON. 7. $response['layer'] = $requestParams['layerName']; 8. 9. // Uso getHotspots() per ottenere i POI rispettando il range di ricerca. 10. $response['hotspots'] = getHotspots( $db, $requestParams ); 11. 12. // se non ci sono POI, restituisce un messaggio di errore. 13. if ($response['hotspots']) { 14. $response['errorCode'] = 20; 15. $response['errorString'] = "Nessun POI trovato. Per favore regola il 16. range di ricerca."; 17. }//if 18. else { 19. $response['errorCode'] = 0; 20. $response['errorString'] = "ok"; 21. }//else

Infine andiamo a generare la risposta effettiva:

1. /* Tutti i dati sono in $response, stampati in formato JSON.*/ 2. 3. // Inserisco la rappresentazione JSON di $response in $jsonresponse. 4. $jsonresponse = json_encode( $response ); 5. 6. // Dichiaro il corretto content type nell’header della risposta HTTP. 7. header( "Content-type: application/json; charset=utf-8" ); 8. 9. // Stampo la risposta JSON. 10. echo $jsonresponse;

Nella trattazione ho tenuto di conto soltanto delle parti più importanti dello script la cui versione

completa è scaricabile all’indirizzo:

http://layarM.P.S..altervista.org/LayerM.P.S./sorgentilayarM.P.S..rar

Testare il livello Abbiamo due modi per testare il nostro livello:

• API test page: è disponibile sul sito di pubblicazione alla destra di ciascun livello,

raggiungibile con l’apposito pulsante Test (Fig. 11). Il test man può essere posizionato in un

qualsiasi punto noi vogliamo; se lo posizioniamo in un punto vicino ai POI dovremmo

poterli vedere nella mappa circostante. (Fig.22)

(Fig. 22)

• Via telefono: Layar, ovviamente ci da la possibilità di effettuare dei test anche usando il

nostro smartphone. Per far ciò, innanzitutto dobbiamo scaricare l’applicazione per Android

o per IPhone; una volta fatto, avviamola e premiamo sul tasto Settings posto in basso a

sinistra, come in figura 23.

(Fig. 23)

A questo punto, andiamo su Account e poi su Login whit Layar (Fig. 24a e 24b) ed

inseriamo le nostre credenziali.

(Fig. 24a) (Fig. 24b)

Se il login ha avuto successo, tornando alla schermata iniziale del programma dovremo

avere una nuova voce chiamata Test (Fig. 25)

(Fig. 25)

Selezionandola saremo in grado di usare il nostro livello.

(Fig. 26)

Prima di pubblicare il livello, affinchè divenga visibile a tutta la comunità di Layar è possibile

anche aggiungere alcuni utenti tester esterni nominandoli viewer; in questo modo, questi utenti pur

non conoscendo le nostre credenziali per poter effettuare l’accesso al nostro account, potranno

visualizzare e testare personalmente i livelli da noi creati.

Per far ciò, una volta effettuato l’accesso al sito di Layar, raggiungiamo la sezione My layers (Fig.

9) e clicchiamo sul pulsante Edit riferito al livello che vogliamo rendere disponibile ad altri utenti

(Fig. 10), raggiungiamo a questo punto la sezione Permission visibile in figura 12 così da accedere

alla pagina in figura 27.

(Fig. 27)

Cliccando sul pulsante Add viewer potremo specificare l’indirizzo email dell’utente tester che

vogliamo aggiungere tra i visualizzatori del livello, così da poterlo autorizzare. Pubblicare il livello Una volta che il livello è stato approvato, comparirà la nuova opzione Publish nella sezione My

layers del sito di pubblicazione (Fig. 28).

(Fig. 28)

Quindi, ora spetta a noi decidere quando si vuole renderlo pubblico. In questo modo possiamo

liberamente scegliere il momento di lancio del nostro strato. Naturalmente è

possibile modificare il livello anche dopo che è stato approvato, l’importante però è che queste

modifiche non apportino sostanziali cambiamenti allo scopo del nostro livello, in tal caso violeremo

i termini di utilizzo di Layar.

Per pubblicare il livello, dunque, facciamo clic sul pulsante Publish sul sito di pubblicazione. Per

accelerare i tempi di approvazione Layar ci chiederà alcune informazioni circa il funzionamento del

nostro strato. In particolare, ove possibile, conviene fornire le coordinate del punto dove si può

verificare che i POI vengano correttamente visualizzati e le credenziali di accesso del nostro

database, così da permettere allo staff di Layar di controllare i tipi di dati che utilizziamo (Fig. 29).

(Fig. 29)

Bibliografia

[1] Wikipedia Augmented Reality http://en.wikipedia.org/wiki/Augmented_reality.

[2] I vantaggi dell’Augmented Reality http://www.lithium.it/dream0013p1.asp.

[3] ARToolKit http://www.hitl.washington.edu/artoolkit/.

[4] ARQuake http://wearables.unisa.edu.au/projects/arquake/.

[5] Wikitude http://www.wikitude.org/.

[6] Pan Z., Cheok A.D., Yang H., Zhu J.,_, Shi J. (2006). Virtual reality and mixed reality for

virtual learning environments. Computers & Graphics 30.

[7] Barfield and Caudell. Fundamentals of Wearable Computers and Augmented Reality. Lawrence

Erlbaum Associates (2001).

[8] Vallino J. (1998), Interactive Augmented Reality

http://www.se.rit.edu/~jrv/publications/VallinoThesis.pdf.

[9] P. Milgram, H. Takemura et al. Augmented Reality: A Class of Displays on the Reality

Virutality Continuum. In Proceedings of SPIE: Telemanipulatorand Telepresence Technologies

2351 (1994).

[10] Milgram, P.; Kishino, F, 1994, A Taxonomy of Mixed Reality Visual Displays, IECE Trans.

On Information and Systems (Special Issue on Networked Reality.

[11] Giuseppe Piersantelli Colpo d’occhio sulla Realtà Aumentata

http://77.238.10.124/content/dam/telecomitalia/it/archivio/documenti/Innovazione/NotiziarioTe

cnico/2010/fd_numero02/02_AugmReal.pdf

[12] Davide Gattamelata (2009) La Realtà Aumentata a supporto dell’Ingegneria Virtuale.

[13] H. Kato and M. Billinghurst, Marker tracking and HMD Calibration for a video-based

augmented reality conferencing system. IEEE and ACM International Workshop on Augmented

Reality, October 1999.

[14] Azuma, R. and G. Bishop (1994), "Improving static and dynamic registration in an optical

see-through hmd," In Proceedings SIGGRAPH '94.

[15] Angero Luca, Sartori Marta (2003), Realtà Aumentata: Metodi e problematiche

http://www.angeroluca.net/publications/ar/index.htm.

[16] Layar http://www.layar.com/ http://layar.pbworks.com/First+Layar+Tutorial+-

+Create+a+simple+layerhttp://ge.ecomagination.com/smartgrid/#/augmented_reality.

[17] Nicola Gutierrez Vuoi utilizzare JSON ma non sai da dove iniziare?

http://www.yourinspirationweb.com/2010/03/12/vuoi-utilizzare-json-ma-non-sai-da-dove-

iniziare/

[18] Manuale PHP http://nl2.php.net/manual/en/pdo.prepare.php.

[19] Manuale PHP http://nl2.php.net/manual/en/pdostatement.execute.php.

Indice

STUDIO E SVILUPPO DI UN'APPLICAZIONE MOBILE CON L'UTILIZZO DEL BROWSER LAYAR

...................................................................................................................................................... 1 Introduzione ................................................................................................................................. 2 Realtà Aumentata ....................................................................................................................... 3

Creazione di un sistema AR....................................................................................................... 6

Fase di Tracking ...................................................................................................................... 6 Fase di Registrazione ............................................................................................................. 7

Fase di Visualizzazione .......................................................................................................... 7 Stato dell'arte - Layar ............................................................................................................ 10 Librerie per Applicazioni Stand Alone ................................................................................. 11

Il progetto ................................................................................................................................... 12 Analisi del problema .............................................................................................................. 12

Requisiti ................................................................................................................................. 13 Creazione del livello .............................................................................................................. 16

Preparazione del database .................................................................................................. 20 Configurazione del servizio web .......................................................................................... 29

Testare il livello ...................................................................................................................... 38 Pubblicare il livello ................................................................................................................. 42

Bibliografia ................................................................................................................................. 43

Indice .......................................................................................................................................... 45