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.







Linkedin
Flickr
Anobii
Youtube
Lastfm