Scripts

Websafe kleurenkiezer Class

Door Joeri -05-06-2007 00:00 -5.665 views

ik was met een script bezig voor buttons aan te maken met GD-Library, nu was het probleem dat GD met R, G, B kleuren werkt en in css de HEX kleurstandaard word gebruikt. De class omvat 2 kleurenkiezers, 1 in een Select Dropdown vorm en 1 met radio select. In de kleurenkiezers worden enkel de websafe kleuren weergegeven. Al kan je de functies hex_to_rgb() en rgb_to_hex() ook gebruiken voor andere kleuren. Opmerkingen en voorstellen voor uitbreiding steeds welkom, ik heb wel speciaal geen javascript gebruikt vandaar de keuze van de kleurenkiezers. Hopelijk heb je er wat aan.

Download alle bestanden als ZIP

websafe-kleurenkiezer-class

class.color_function.php:

[code]
<?
/************************************************************************************
*																					*	
*   GEBRUIK VAN DE CLASS:															*
*    																				*
*	voor een kleurenkiezer:															*
*  		$colorpicker = new color_function("waarde", "titel");						*
*																					*
*   	$colorpicker->print_select();												*
*			zal een selectbox voor kleurenselectie weergeven						*
*		$colorpicker->print_radio();												*
*			zal lijst met radio buttons voor kleurenselectie weergeven				*
*																					*
*																					*
*	voor omzetting RGB->HEX | HEX -> RGB											*
*  		$var = new color_function("waarde");										*
*    	$array->rgb_to_hex();														*
*			zal een array teruggeven met 3 waardes zijnde R, G en B					*
*    	$var->hex_to_rgb();															*
*			zal een variabele teruggeven met de hexadecimale waarde in uppercase.	*
*																					*
*************************************************************************************/

class color_function{
    var $value;
    var $title;
	
    function color_function($value = "", $title = "select color..."){
        $this->value = $value;
        $this->title = $title;
    }


    function print_radio(){
        $hex_websafe = array("00", 33, 66, 99, "CC", "FF");
		echo $this->title . '<br />';
        echo '<table>';
		foreach ($hex_websafe as $rHex) {
			$textcolor = "#FFFFFF";
			foreach ($hex_websafe as $gHex) {
				if ($gHex == 99) $textcolor = "#000000";
				foreach ($hex_websafe as $bHex) {
					$color = $rHex.$gHex.$bHex;
					echo '<td style="background-color:#' . $color . '; color: ' . $textcolor . '">';
            		echo '<input type="radio" name="' . $this->value . '" value="' . $color . '" />&nbsp;#' . $color;
					echo '</td>';
				}
				echo '</tr>';
			}
        }
		echo '</table>';
		echo '<br />';
    }
    function print_select(){
		$hex_websafe = array("00", 33, 66, 99, "CC", "FF");
        echo '<select name="' . $this->value . '">';
		echo '<option value="">' . $this->title . '</option>';
		foreach ($hex_websafe as $rHex) {
			$textcolor = "#FFFFFF";
			foreach ($hex_websafe as $gHex) {
				if ($gHex == 99) $textcolor = "#000000";
				foreach ($hex_websafe as $bHex) {
					$color = $rHex.$gHex.$bHex;
					echo '<option value="' . $color . '" style="background-color:#' . $color . '; color: ' . $textcolor . '">#' . $color . '</option>';
				}
			}
		}
		echo '</select>';
	}
	function hex_to_rgb(){
		$arr_Alf_to_Num = array("A" => 10, "B" => 11, "C" => 12, "D" => 13, "E" => 14, "F" => 15);
		
		$color_arr = str_split($this->value, 1);
		for ($i = 0; $i <= 5; $i = $i+2) {
			$va = $color_arr[$i];
			$vb = $color_arr[$i+1];
			if (! is_numeric($va)) {
				$va = $arr_Alf_to_Num[$va];
			}
			if (! is_numeric($vb)) {
				$vb = $arr_Alf_to_Num[$vb];
			}
			$arr_RGB[$i] = ($va * 16) + $vb;
			
		}
		return array_values($arr_RGB);
	}
	function rgb_to_hex(){
		$color_arr = explode(',', $this->value);
		for ($i = 0; $i <= 2; $i++) {
			$arr_HEX[$i] = dechex($color_arr[$i]);
			if ($arr_HEX[$i] == "0") $arr_HEX[$i] = "00";
		}
		return strtoupper(implode($arr_HEX));
	}
}
?>
[/code]


voorbeeld van gebruik zoals het online voorbeeld:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<?php
error_reporting(E_ALL);
include('class.color_function.php');
?>
</head>

<body>
<form action="test.php" method="post">
	<h2>Kleurenkiezer met Radio:</h2>
	<div style="height: 375px; width: 610px; overflow: auto;">
		<?php
		$kleur_radio = new color_function("bgcolor", "Selecteer Achtergrondkleur"); 
		$kleur_radio->print_radio();
		?>
	</div>
	<br />
	<h2>Kleurenkiezer met Dropdown Select:</h2>
	<?php
	$kleur_select = new color_function("bgcolor"); 
	$kleur_select->print_select();
	?>
	<input type="submit" name="submit" value="Submit" />
</form>



<?php
if ($_SERVER['REQUEST_METHOD'] == "POST") {
	$rgb = new color_function($_POST['bgcolor']);
	list($r, $g, $b) = $rgb->hex_to_rgb();
	
	$hex = new color_function($r . ',' . $g .',' .$b);
	$hex = $hex->rgb_to_hex();
	
	echo "De gekozen kleur in HEX: #" . $hex . "<br />";
	echo "De gekozen kleur in RGB: " . $r . ", " . $g . ", " .$b;
}
?> 
</body>
</html>
[/code]