Un color picker in PHP
Articolo scritto da Max Bossi
La scorsa settimana abbiamo pubblicato un articolo dedicato alla creazione di un semplice color picker in ASP. A distanza di pochi giorni torniamo nuovamente sull'argomento rispondendo alle numerose richieste pervenuteci concernenti la creazione di una identica applicazione ma in PHP.
Creare una semplice traduzione, tuttavia, era compito un po' troppo noioso e quindi permettetemi di accontentarvi offrendovi uno script identico nel risultato ma differente nella struttura e nella logica.
(L'articolo continua più sotto...)
Ma non dilunghiamoci nelle chiacchiere e passiamo subito al codice che, per chiarezza espositiva, vi presenterò diviso in due blocchi. Ecco il primo:
<?
// Creo la variabile $z e la valorizzo come zero
$z = 0;
// Creo tre cicli corrispondenti ai tre colori primari.
// Si tratta di 3 cicli concatenati da 6 (6*6*6 = 216)
for ($red = 0; $red <= 15; $red = $red + 3)
{
for ($green = 0; $green <= 15; $green = $green + 3)
{
for ($blue = 0; $blue <= 15; $blue = $blue + 3)
{
// Creo 3 variabili corrispondenti ai colori rosso, verde e blu
// Uso dechex per trasformare il valore da decimale a esadecimale
$red_value = dechex($red) . dechex($red);
$green_value = dechex($green) . dechex($green);
$blue_value = dechex($blue) . dechex($blue);
// Costruisco il colore esadecimale
$hexcolor[$z] = $red_value . $green_value . $blue_value;
// Incremento la variabile $z
$z++;
}
}
}
In sostanza abbiamo creato (attraverso l'iterazione di tre distinti cicli) una array contenente i 216 web-safe color.Ora vediamo come costruire l'output:
// Riporto $z a zero
$z = 0;
// Creo la tabella
echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
// Creo un ciclo per creare 12 righe...
for ($x=1; $x<=12; $x++)
{
echo "<tr>";
// ...e uno per 18 celle (12*18 = 216)
for ($y=1; $y<=18; $y++)
{
// Creo la cella col colore corrispondente
echo "<td style=\"cursor: pointer;\" width=\"10\" height=\"10\"
bgcolor=\"" . $hexcolor[$z] . "\" OnClick=\"location.href='color.php?color=" . $hexcolor[$z] . "'\"></td>";
// Incremento la variabile $z
$z++;
}
echo"</tr>";
}
echo "</table>";
// Controllo se la querystring "color" è valorizzata o meno
if ($_GET['color']) $textcolor = $_GET['color'];
else $textcolor = "000000";
?>
<p style="font-family: verdana, arial; font-size: 16px; font-weight: bold; color: #<? echo $textcolor; ?>">
Questo testo si colorerà della tonalità selezionata!</p><input type="text" value="#<? echo $textcolor; ?>">
In questo secondo blocco di codice abbiamo semplicemente creato una tabella espositiva composta da 12 righe da 18 celle ciascuna (216 celle per 216 colori) associando a ciascuna cella (mediante l'evento OnClick) la possibilità di interagire col browser mostrando il codice esadecimale della tonalità cliccata.
