Websafe kleurenkiezer Class
Auteur: JBke Ibrahim
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.
Voorbeeld van script waar ik het voor gebruik:
http://www.jb-web.net/scripts/php/GD
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.
Deze Class vooral om ineens op eenvoudige wijze de HEX naar RGB om te zetten, dat was de bedoeling om gemakkelijk met GD te kunnen samenwerken, komt er als een mooie array uit hex(FFFFFF)->rgb geeft array($r, $b, $g); en andersom rgb($r,$g,$b) met comma's voor GD ->hex geeft var FFFFFF;
Ik vond het handig dat je niet steeds voor je script zelf moet omzetten van HEX naar RGB en heb daar ineens een volledige kleurenkiezer rond gemaakt
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.
Code:
class.color_function.php:
<?
/************************************************************************************
* *
* 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 . '" /> #' . $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));
}
}
?>
<?
/************************************************************************************
* *
* 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 />' ; 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 . '" /> #' . $color ; }
}
}
}
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>' ; }
}
}
}
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 ] ;
$va = $arr_Alf_to_Num [ $va ] ;
}
$vb = $arr_Alf_to_Num [ $vb ] ;
}
$arr_RGB [ $i ] = ( $va * 16 ) + $vb ;
}
}
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" ;
}
}
}
?>
<!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>
<!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
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>
Download code (.txt)
Stemmen
Niet ingelogd.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
