Processing.js: creare una piantina per la prenotazione di posti in HTML5

Una delle potenzialità più interessanti di HTML5 è l’introduzione dell’elemento Canvas, il quale permette di effettuare un rendering dinamico di immagini tramite un linguaggio di scripting.
Per sfruttarlo al massimo, sono nate numerose librerie Javascript che ne semplificano l’utilizzo, tra cui Processing.js

Processing.js è un progetto imparentato con il più popolare linguaggio di programmazione visuale Processing.
Questa libreria permette di scrivere codice in linguaggio Processing e visualizzare il risultato su una pagina web: la magia avviene trasformando il sorgente in codice Javascript.

In seguito ad un progetto su cui ho lavorato recentemente, ho pensato di sviluppare una demo più vicina alla realtà rispetto agli esempi che si possono trovare sul sito ufficiale.

Utilizzando questa tecnologia, ho creato la piantina di un teatro, sulla quale è possibile selezionare i posti per effettuare la prenotazione di uno spettacolo.

Demo

La demo è consultabile a questa pagina
Il progetto è stato testato con Mozilla Firefox 7+ e Google Chrome 15+

Download

Il pacchetto completo è scaricabile QUI

Utilizzo

Brevemente descrivo la funzione di ogni file:

  • teatro.pde => è file più importante, scritto in Processing, con il quale viene disegnata la piantina del teatro e gestita l’interazione con l’utente
  • index.php => definisce le due funzioni principali per caricare la disponibilità iniziale delle poltrone e confermare quelle che vengono selezionate dall’utente
  • 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 potrebbe farlo da un database
  • teatro.csv => il file CSV contenente i dati sulla struttura della sala del teatro
    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

Risorse

http://processingjs.org
http://processing.org
http://javascript.html.it/guide/lezione/5207/creare-un-progetto-processingjs

4 pensieri su “Processing.js: creare una piantina per la prenotazione di posti in HTML5

  1. Scusa ho scaricato l’esempio completo, ma su pc non mi carica i posti, ma solo il canvas ed alcuni testi, cosè che non va?
    Grazie
    Luigi

  2. Ma come si può modificare la piantina del teatro.
    Ho provato ad aggiungere righe alla platea ma sparisce la galleria (anche distanziandola dalla platea…).
    un’altra cosa.
    cambiare stato da prenotato (giallo) a venduto (rosso), si ottiene solo modificando il file CSV?

    Grazie per l’aiuto

    Grazie

Lascia un commento

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