Durante le fasi di analisi e progettazione sono state prese in considerazione varie librerie Javascript che permettano di creare immagini di grafica vettoriale in maniera semplificata.
In particolare sono state analizzate le librerie: Rapha¨el, Easel Js, SVGWeb e Gury, descritte qui di seguito.
Rapha¨el:
Rapha¨el [11] `e una piccola, ma potente, libreria JavaScript creata da Dmitry Baranovskiy che permette di creare immagini di grafica vettoriale in modo semplice e veloce.
Rapha¨el utilizza le SVG W3C Recommendation ed il VML come base per la creazione degli oggetti grafici. In questo modo ogni oggetto, entrando a far parte del DOM, pu`o essere associato ad eventi e pu`o essere modificato.
Una delle caratteristiche pi`u interessanti `e la possibilit`a di far ruotare le immagini: ci`o permette notevoli effetti web senza l’utilizzo di Flash.
Al momento Rapha¨el supporta vari browser, tra cui Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+.
In particolare Raph¨el genera codice SVG per i browser che lo supportano e codice VML altrimenti.
Alcuni esempi di immagini realizzati con questa libreria sono visibili nella figura 3.2.
Figura 3.2: esempi di Rapha¨el
Easel Js:
Easel Js [12] `e una libreria JavaScript, realizzata da gskinner [13] e rilasciata con licenza MIT, che permette di creare elementi Canvas.
Tale libreria fornisce un elenco completo e gerarchico di visualizzazione, un modello di interazione con il core e le classi di supporto per lavorare facilmente con il Canvas.
Easel Js per`o `e ancora in versione alpha e quindi in fase di sviluppo; per questo motivo potrebbe subire sostanziali modifiche.
SVGWeb:
SVGWeb [14] `e una libreria JavaScript, realizzata con la partecipazione di Google, che permette di includere file SVG all’interno delle pagine HTML: solitamente viene prima realizzata un’immagine SVG con un software di disegno e poi viene caricata nel browser.
SVGWeb percepisce se il browser utilizzato supporta la tecnologia SVG e, se non viene supportata, renderizza l’immagine SVG in Flash: questo permette una completa compatibilit`a anche con i browser pi`u vecchi ma obbliga l’utente ad installare il plugin di Flash nel proprio browser.
Attualmente questa libreria `e in fase di sviluppo Beta e quindi non sono disponibili tutte le funzio-nalit`a.
Gury:
Gury [15] `e una libreria JavaScript, che permette di creare elementi Canvas di HTML5.
La libreria oltre a permettere la semplice creazione di elementi Canvas, permette di ridimensionare gli oggetti disegnati e aggiungere oggetti renderizzabili, assengnandogli delle animazioni. La sintassi di questa libreria `e simile a quella di jQuery, permette infatti di costruire oggetti e animazioni tramite concatenazioni di metodi.
La libreria `e ancora in versione alpha e, al momento, non supporta Internet Explorer.
Dopo l’analisi di queste librerie `e stato deciso di utilizzare Rapha¨el e di scartare le altre librerie per i seguenti motivi:
• Easel Js `e in versione alpha e quindi pu`o subire sostanziali modifiche;
• SVGWeb `e in versione beta e quindi pu`o subire modifiche;
• SVGWeb permette di includere immagini SVG gi`a create e tale funzionalit`a non risulta utile per la soluzione del problema;
• Gury `e in versione alpha e quindi pu`o subire sostanziali modifiche;
• Gury al momento non supporta Internet Explorer.
Oltre a queste, sono state analizzate altre librerie Javascript utili per l’implementazione delle fun-zionalit`a di zoom e pan.
Per prima `e stata analizzata RaphaelZPD [16], la quale `e un estensione della gi`a nota libreria Ra-pha¨el. Come spiegato Rapha¨el genera immagini SVG con i browser che supportano questa tecnologia, altrimenti genera immagini in formato VML. La libreria RaphaelZPD per`o funziona solo con gli ele-menti SVG e quindi non risulta essere compatibile con i browser pi`u vecchi che supportano solo VML.
Per cercare di avere una completa compatibilit`a con i browser sono state quindi cercate altre librerie che forniscano le funzionalit`a di zoom e pan anche per gli elementi VML. La ricerca per`o non ha dato ottimi risultati ed `e stata effettivamente presa in considerazione solo un’altra libreria, ovvero la libreria utilizzata da Google Maps.
Come Rapha¨el, anche Google Maps genera codice SVG con i browser che lo supportano e codice VML per quelli che non lo supportano.
La libreria per`o `e risultata molto complessa, difficile da analizzare e quindi impossibile da modificare secondo le esigenze con il poco tempo a disposizione.
Per questi motivi `e stato deciso di abbandonare l’idea di avere una libreria che implementi funzio-nalit`a di zoom e pan su elementi VML, ed `e stata presa in considerazione un’altra alternativa che consiste nell’avere una compatibilit`a con gli elementi SVG anche con i browser che non lo supportano nativamente. `E stato trovato, e provato, il plugin SVG Viewer fornito da Adobe [17] che permette di visualizzare in modo abbastanza corretto le componenti SVG e di fare effetti di zoom e pan sugli elementi creati.
Questo plugin per`o non permette di aprire direttamente un file con estensione SVG, ma risulta necessario importarlo in un file HTML con uno dei comandi
< embed src=’rect.svg’ width=’300’ height=’100’ type=’image/svg+xml’
pluginspage=’http://www.adobe.com/svg/viewer/install/’ / >
< iframe src=’rect.svg’ width=’300’ height=’100’ > </iframe>
descritti nel sito di W3C School [18].
Si `e notato per`o che non tutti questi comandi funzionano in modo corretto e inoltre `e necessario specificare nel comando stesso che si vuole utilizzare il plugin.
Altro problema si presenta con Rapha¨el, la quale nella sua forma nativa genererebbe in modo auto-matico codice VML. Forzare la libreria a generare codice SVG non `e una cosa semplice: bisognerebbe modificare la libreria stessa, ma risulta un lavoro troppo oneroso per il tempo a disposizione.
Per questi motivi `e stato deciso di non utilizzare il plugin di Adobe e visualizzare le immagini create con VML nei browser che non supportano SVG. Questa scelta comporta per`o una limitazione su alcuni browser, come Internet Explorer 8.0: le funzionalit`a di zoom e pan sull’organigramma non saranno disponibili.
Dopo aver scelto di utilizzare le librerie Rapha¨el e RaphaelZPD sono stati effettuati alcuni test per verificarne il corretto funzionamento. Da questi test `e risultato che RaphaelZPD non si comporta correttamente con alcuni browser: in Opera e Internet Explorer 9.0 non risultava disponibile la funzionalit`a di zoom (attivata con lo scorrimento della rotellina del mouse).
Analizzando la libreria stessa `e risultato che per i browser in questione non viene intercettato in modo corretto l’evento che farebbe attivare lo zoom. In particolare la libreria esegue il seguente controllo:
Questa porzione di codice assegna l’evento “mousewheel” ai browser con motore WebKit (Chrome e Safari) e l’evento “DOMMouseScroll” a tutti gli altri (Firefox, Internet Explorer e Opera). Facendo una ricerca in Internet `e risultato che solamente Firefox supporta l’evento “DOMMouseScroll”, mentre Internet Explorer e Opera, come Chrome e Safari, supportano l’evento “mousewheel”.
Date queste considerazioni `e stata modificata la libreria RaphaelZPD per aumentarne la compati-bilit`a. La porzione di codice descritta sopra `e quindi diventata:
// Chrome/Safari/Opera/IE
me.root.addEventListener(’mousewheel’, me.handleMouseWheel, false);
// Firefox
me.root.addEventListener(’DOMMouseScroll’, me.handleMouseWheel, false);
Togliendo il controllo sul tipo di browser che si sta utilizzando, viene associato ad ogni browser sia l’evento “mousewheel”, sia l’evento “DOMMouseScroll”: un evento associato ad un browser che non lo supporta non genera alcun errore ed in questo modo lo zoom funziona correttamente in tutti i browser.