paolo@bimodesign.com | +34 608 61 64 10

Framework

        

Creazione immagine auto-rigenerante

Nel seguente esempio vi illustro come poter generare una barra delle fascie orarie, in maniera che questa si rigeneri ogni qualvolta l'utente inserisca un intervallo orario.
Partendo da una barra che abbia come intervallo di default 00:00 - 23:59 creo il corrisponde array con l'orario di inizio, di fine, la dimensione in pixel e il colore di base, che nel mio caso e' #FFF000. Il colore e' quindi il colore di base del singolo div.
A questo punto, ogni qualvolta l'usuario inserisca un valore/intervallo rigenero sia l'array che contiene gli intervalli e con questi i colori da associare ad ognuno, usando la seguente funzione

function changeBrightness ($sHex, $iAdjust ){
	$iRed   = hexdec( $sHex[0] . $sHex[1] );
	$iGreen = hexdec( $sHex[2] . $sHex[3] );
	$iBlue  = hexdec( $sHex[4] . $sHex[5] );

	$iGreen =$iGreen-$iAdjust;
	$iRed   =$iRed-$iAdjust;

	return str_pad( dechex( $iRed ), 2, '0', 0 )
	     . str_pad( dechex( $iGreen ), 2, '0', 0 )
	     . str_pad( dechex( $iBlue ), 2, '0', 0 );
}
sia l'immagine finale, attraverso la chiamata ad ajax alla stessa pagina d'origine, cambiando opportunamente le dimensioni di ogni singolo div/fascia.

Dove sHex e' l'array dei colori di base (RGB) e iAdjust e' il valore per generare il gradiente, partendo dal colore di base.

E questa la parte di codice da cui la richiamo:


// Parametri impostati allo startup
// Ho scelto il giallo. Ma potete chiaramente impostare il valore che volete
// Per il range di "aggiustamento" fate delle prove

$sBaseColor        ='FFF000';
$iAdjustColorRange = 35;

Ciclo sull'array
	$iAdjustColor=0;

	$sColor=changeBrightness($sBaseColor,$iAdjustColor);
	$iAdjustColor=$iAdjustColor+$iAdjustColorRange;

	Assegno il nuovo colore all'array
	(nota: eliminare un orario prevede ricostruire da capo l'array :)

Fine ciclo

Questo un esempio grafico, adattabile sia in dimensione che nei colori.
link immagine
Buon divertimento.