[HTML 5] Creare un'immagine dinamica per selezionare i posti in un cinema cliccando

[Dani88]

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?

[DanieleC88]

Secondo me ti converrebbe fare il tutto con degli elementi separati, come in una tabella. Ogni "cella" rappresenterebbe un posto ed avrebbe l'uno o l'altro colore. Puoi anche usare delle immagini, in modo da far apparire bene il tutto.

Se proprio vuoi usare un <canvas>, allora devi disegnarlo a mano ed implementare un gestore per l'evento onmousedown (usa attachEvent su Internet Explorer ed addEventListener sugli altri!) e in base alle coordinate del click, poi, puoi scegliere cosa fare (prenotare il posto o altro).

ciao

EDIT: questo potrebbe tornarti utile se vuoi percorrere la seconda strada: https://developer.mozilla.org/en/HTML/Canvas

[MaxArt]

Originariamente inviato da Dani88

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?

No, rischi di complicarti le cose. E poi manca ancora il supporto di IE.

La sala del cinema come la rappresenti? Con una tabella rettangolare? Con una disposizione ad arco?
Io direi di provare col vetusto (dall'HTML 3.0 se non erro) ma efficente tag <map> ed i suoi figli <area>.

[DanieleC88]

Originariamente inviato da MaxArt

E poi manca ancora il supporto di IE.

Vero, ma lo si può aggirare: http://excanvas.sourceforge.net/
In attesa che Microsoft muova il culo...

[nico159]

Originariamente inviato da Dani88

Avrei bisogno di creare un'immagine dinamica che riproduca la disposizione dei posti in una sala di un cinema e che permetta all'utente cliccando su un posto di sceglierlo.
Tale posto dovrebbe quindi cambiare colore al click e inoltre i posti già pieni dovrebbero anch'essi apparire di un colore diverso.
Avevo pensato ad html 5 viste le sue capacità, voi cosa mi consigliate?

Va benissimo, puoi usare framework come http://raphaeljs.com che utilizza canavas su tutti i browser, a parte IE dove viene usato VML

Guarda anche la controparte per i grafici, http://g.raphaeljs.com sopratutto questo esempio http://g.raphaeljs.com/dotchart.html

In attesa che Microsoft muova il culo...

IE9

[MaxArt]

Originariamente inviato da DanieleC88

Vero, ma lo si può aggirare: http://excanvas.sourceforge.net/
In attesa che Microsoft muova il culo...

Lo muoverà con l'uscita di IE9, per ora nulla da fare.
C'è anche Chrome Frame per IE se si vogliono vedere i <canvas>.
Ma non toglie ancora che i semplici disegni vettoriali che si creano con lineTo, fillRect ed altre menate non sono facilmente trattabili. Ad esempio, come fai per gli eventi?

Originariamente inviato da nico159

Va benissimo, puoi usare framework come http://raphaeljs.com che utilizza canavas su tutti i browser, a parte IE dove viene usato VML

Guarda anche la controparte per i grafici, http://g.raphaeljs.com sopratutto questo esempio http://g.raphaeljs.com/dotchart.html

Quello non è <canvas>, è un SVG generato dinamicamente.

[nico159]

Quello non è <canvas>, è un SVG generato dinamicamente.

Sì hai ragione, scusate

[fero86]

Originariamente inviato da MaxArt

La sala del cinema come la rappresenti? Con una tabella rettangolare? Con una disposizione ad arco?

che?! tu hai mai visto un cinema coi posti disposti ad arco?

[DanieleC88]

Originariamente inviato da MaxArt

Ad esempio, come fai per gli eventi?

Mi ci sto scontrando ultimamente. Ti farò sapere.

[MaxArt]

Originariamente inviato da nico159

Sì hai ragione, scusate

Il che non vuol dire che non sia una buona idea, intendiamoci: sono tecnologie (SVG e VML) implementate in almeno il 98% dei browser su Internet.
Il VML poi ha anche la gestione degli eventi classica dell'HTML, mentre non ti so dire per i SVG. Di contro devono andare in modalità speciale, ma comunque non credo gliene importi.

Originariamente inviato da fero86

che?! tu hai mai visto un cinema coi posti disposti ad arco?

Sì, se sono particolarmente capienti. O quantomeno non hanno la classica disposizione rettangolare, ma i posti laterali sono leggermente angolati verso il centro.

Originariamente inviato da DanieleC88

Mi ci sto scontrando ultimamente. Ti farò sapere.

Bravo!
Per me invece basta una comune funzione javascript:

Codice PHP:

function isInside(point, plist) {
    var lc=0, i=0, p, op=plist[plist.length-1];
    for (; i<plist.length; i++, op=p) {
        p=plist[i];
        if ((p.y>=point.y && op.y<point.y) || (p.y<point.y && op.y>=point.y))
            if ((p.x>=point.x && op.x>point.x) || (p.x>point.x && op.x>=point.x)
                    || p.x+(point.y-p.y)*(op.x-p.x)/(op.y-p.y)>=point.x) lc++;
    }
    return lc%2===1;
} 


Questa prende un punto (oggetto con membri numerici x e y) e restituisce vero se è all'interno del poligono delimitato dall'array di punti plist (i punti devono essere in senso orario o antiorario, ovviamente non a casaccio).

[Dani88]

mhmmm dunque non ho capito molto la logica con cui dovrei farlo. Cioè io devo partire con un'img di base e costruirgli sopra una "griglia nascosta" che mi permetta di capire dove si clicca? Oppure devo proprio generare tutta l'img via codice?

[MaxArt]

Originariamente inviato da Dani88

mhmmm dunque non ho capito molto la logica con cui dovrei farlo. Cioè io devo partire con un'img di base e costruirgli sopra una "griglia nascosta" che mi permetta di capire dove si clicca? Oppure devo proprio generare tutta l'img via codice?

Generarla via codice puoi farlo, ma non sarà mai al 100% fedele. In questo caso puoi usare la funzione che ho scritto.
Se invece usi un'immagine fissa è meglio l'opzione della "griglia invisibile".

[Dani88]

dunque ho fatto una prova veloce:

<html>  
<head>  
	<title>Canvas tutorial</title>  
	<script type="text/javascript">  
    function draw(){  
    	var seatDimension=30;
    	var startX=20;
    	var startY=30;
    	var column=0;
    	var row=0;
      var canvas = document.getElementById('prova');  
      if (canvas.getContext){  
	   var ctx = canvas.getContext('2d');  
	   // drawing code here
	   	while(column<400+startY){
	   		while(row<200+startX){
		         ctx.fillStyle = "rgb(200,0,0)";  
   	      	ctx.fillRect (column+startY,row+startX, seatDimension, seatDimension);
   	      	row+=seatDimension+10;
   	      }
   	      row=0;
   	     	column+=seatDimension+10;  
   		}
		} 
		else {  
   	// canvas-unsupported code here  
 		} 
	}  
	</script>  
	<style type="text/css">  
		canvas { border: 1px solid black;}  
	</style>  
</head>  
<body onload="draw();">  
	<canvas id="prova" width="600" height="600"></canvas>  
</body>  
</html>

ho usato quindi un canvas per disegnare dei quadrati di 30x30 distanziati di 10px.
Ma con la roba che disegno su canvas posso poi interagire?
O si tratta solo di disegno puro senza altre possibilità di interazione?

[DanieleC88]

Originariamente inviato da DanieleC88

Se proprio vuoi usare un <canvas>, allora devi disegnarlo a mano ed implementare un gestore per l'evento onmousedown (usa attachEvent su Internet Explorer ed addEventListener sugli altri!) e in base alle coordinate del click, poi, puoi scegliere cosa fare (prenotare il posto o altro).

.

[MaxArt]

Originariamente inviato da Dani88

ho usato quindi un canvas per disegnare dei quadrati di 30x30 distanziati di 10px.

Io spero tanto che questo sia solo un abbozzo di quello che vuoi fare, perché per fare cose del genere usare <canvas> è eccessivo ed inutilmente complicato.

[Dani88]

Originariamente inviato da MaxArt

Io spero tanto che questo sia solo un abbozzo di quello che vuoi fare, perché per fare cose del genere usare <canvas> è eccessivo ed inutilmente complicato.

Si si ovviamente non voglio fare i posti con i quadratini avevo in mente una cosa del tipo:


Stavo rivalutando anche quanto suggerito da DanieleC88 di usare elementi separati. Potrei usare l'immagine di una poltrona singola (con colori diversi) replicata a seconda delle necessità.
A quel punto dovrebbe essere forse più semplice gestire gli eventi di click?

[DanieleC88]

Eh be' sì. A quel punto è solo un lavoro meccanico, ma è mooooolto più semplice. IMHO.

[Dani88]

ho buttato giù una prova veloce col metodo da te consigliato:

<style type="text/css">
table#disposizione_posti{
	cursor:pointer;
	border-collapse: separate;
	border-spacing:10px;
	}
	td {
		width:30px;
		height:30px;
		text-align:center;
		}
</style>

<script>
var counter=0;
var posti=new Array();
function mouseOut(e){
		//e.style.backgroundColor="green";
}

function selectSeat(e){
	if(document.getElementById(e).alt=="empty"){
		document.getElementById(e).alt="full"
		document.getElementById(e).src="full.gif";
		//alert(e);
		posti[e]=1;
		counter++;
	}
	else{
		document.getElementById(e).alt="empty"
		document.getElementById(e).src="empty.gif";
		posti[e]="";
		counter--;
	}
}

function showData(){
	var postiFinali=new Array();
	var a=0;
	for(i=0;i<posti.length;i++){
		if(posti[i]==1){
			postiFinali[a]=i+1;
			a++;
		}
	}			
	alert("Posti totali: "+counter+" i cui numeri sono:"+postiFinali.toString());
}

</script>
<?php
$index=0;
echo"<table id='disposizione_posti'><tr>
";
while($index<50){
	if($index%11==0 && $index!=0){
		echo"</tr><tr>";
	}
	else{
		echo "<td><img id='$index' onclick='selectSeat($index)' alt='empty' src='empty.gif' width='20px'>".($index+1)."</img></td>
		";
	}
	$index++;
}
echo"
	</table>
	<input type=button value='CLICCA QUI' onclick='showData()'></input>
";
?>

Il risultato è forse sufficiente per quello che mi serve...
Volevo sapere è possibile far comparire i numeri SOPRA le immagini dei posti? Per sopra intendo proprio dentro l'img..
Un'altra cosa, ora il controllo per vedere se un posto l'ho già selezionato io e volessi deselezionarlo lo faccio sull'attributo alt dell'immagine...mi sembra un po sporca come cosa però...avete da suggerirmi idee migliori?

[DanieleC88]

Potresti cambiare immagine a seconda della class a cui appartengono, e fare il controllo su quella.

[Dani88]

però ho un problemino...se ipotizziamo la sala del cinema non sia così squadrata ma abbia posti messi in maniera diversa, con corridoi, ecc... com faccio a gestirlo??
Sarebbe comodissimo poterla speficiare tipo in pixel la posizione...con un div che contiene le immagini e dando la posizione relativa ci riesco secondo te?