Creare una piantina per la prenotazione di posti con Javascript e SVG

In seguito al mio precedente articolo di qualche tempo fa su come creare una piantina con la libreria Processing.js ho pensato di aggiornarmi sulle nuove tecnologie disponibili.
La mia attenzione è caduta sull’interazione tra Javascript e le immagini SVG.

Lo standard SVG (Scalable Vector Graphics) è una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Nello specifico si tratta di un linguaggio derivato dall’XML che si pone l’obiettivo di descrivere figure bidimensionali statiche e animate.

Per la parte Javascript ho scelto la libreria Snap.svg perché è completamente nuova, è stata progettata appositamente per sfruttare le potenzialità dei nuovi browser, inoltre è stata scritta dallo stesso autore della famosa libreria Raphaël.

La caratteristica che rende unica Snap è l’abilità di importare una immagine SVG già esistente, che può essere creata con un software come Illustrator, Inkscape o Sketch e poi animata con Snap. Si possono addirittura caricare via Ajax delle stringhe di SVG e manipolate prima del rendering.

Demo

La demo è consultabile a questa pagina

Download

Il pacchetto completo è disponibile su GitHub

Utilizzo

Di seguito il dettaglio sulla funzione di ogni file:

  • index.php ⇒ si tratta del cuore del sistema, definisce la logica di funzionamento, si occupa di caricare la disponibilità iniziale delle poltrone e gestire l’interazione con l’utente
  • theatre.svg ⇒ è l’immagine della piantina del teatro, scritto in SVG, per crearlo ho utilizzato il software open source Inkscape (ma può essere anche creato completamente a mano)
  • map.php ⇒ viene chiamato una sola volta, al momento del loading della pagina. Si occupa di caricare la struttura del teatro, con tutte le poltrone e le relative disponibilità. In questo esempio, per semplicità, carica i dati da un file CSV, ma più realisticamente dovrebbe leggere da un database
  • check.php ⇒ questo file viene chiamato ad ogni click sulle poltrone, dovrebbe contenere una procedura per controllare se il posto scelto è ancora disponibile e successivamente salvarlo in sessione per concludere l’ordine
  • theatre.csv ⇒ il file CSV contenente la struttura dati della sala del teatro (in un caso reale di utilizzo deve essere sostituito con un database)

Risorse


 


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.