firepages
01-22-2006, 07:49 AM
Hi, playing with a new system for my CMS, in administration of the site I want to tart-up the display presented for editing... e.g. currently a CMS selection page might look like..
Services
.....Service1
.....Service2
.........S2 Sub1
.........S2 Sub2
.....Service3
etc, ok thats fine but with only a few tens of records it gets a bit mind-blurry to look at (and in some cases there are several hundred records).
So I want to colouris|ze the results so say Services background is dark grey, Service1 & 2 are a little lighter (or darker) & S2 Sub1 & 2 a little darker or lighter still, I am doing this dynamically so all I really need is a formula/example.
I know its technically a simple bit of math but if anyone else has already got a routine (any language will do) it would be much appreciated... I would also like to be able to create an `opposite` or the colour so I can ensure that the text is always readable on the generated background color.
<edit>
I know I could (and do elsewhere) use a tree menu for displaying this which is easier on the eye but I do need sometimes to display a complete tree or trees which is where this would come in handy.
</edit>
mlseim
01-22-2006, 02:02 PM
Is the dynamic page created by PHP or Perl?
firepages
01-22-2006, 02:16 PM
Hi, PHP but PERL code is good (assuming its not some funky perl-monks stuff ;))
Can you post the html output from your scripts? From how I read your post, this sounds more ike a simple CSS issue because you want to alter the presentation.
POst your html and I'l see if I can help. You might ask a mod to move this to CSS so that more people can see it.
Bazz
NancyJ
01-22-2006, 04:01 PM
Finding an inverted colour is easy for each RGB value subtract it from 255 (FF). However, an inverse colour is no guarentee that the colour will be readable - the closer the colour gets to 50% grey the closer its inverse becomes to it.
A better way would be to get the brightness of the colour then add or subtract 0.5 (add 0.5 for < 0.5 brightness, subtract for > 0.5)
For other colour maths, generally the best way to get a nice colour match - within the same hue is to go up in steps of 3, eg 0,3,6,9,C,F.
firepages
01-22-2006, 04:03 PM
Hi Baz it is simple CSS in one respect in that I am altering the style of the HTML
It is however not quite that straightforward as the depth (and therefore the number of different colour schemes required) is unknown.
I may need just 2 styles , I may need 20 , it all depends on the database I am querying.
So whether I generate the styles or add them inline I still need to produce them (and more importantly the different colours) dynamically.
firepages
01-22-2006, 04:07 PM
Finding an inverted colour is easy for each RGB value subtract it from 255 (FF). However, an inverse colour is no guarentee that the colour will be readable - the closer the colour gets to 50% grey the closer its inverse becomes to it.
yes that occurred In my first tests , grey on grey ~
A better way would be to get the brightness of the colour then add or subtract 0.5 (add 0.5 for < 0.5 brightness, subtract for > 0.5)
Ok, but how do I do that ? what makes a colour darker or brighter in RGB values ?
mlseim
01-22-2006, 04:09 PM
When you query your database, you're using a PHP script ... is that correct?
I'm assuming you already have the script and it outputs your data, but the
colors are all the same? Or does the PHP script not yet exist?
I'm confused on this. If the script is not yet written to query your database
and output your dynamic page, you might have the cart ahead of the horse.
If your script IS written and operating, but you need to change colors,
then we would need to see part of the script.
NancyJ
01-22-2006, 04:28 PM
Higher numbers in RGB are lighter, lower numbers are darker.
http://www.filtermeister.com/wiki/index.php?page=rgb2hsl
is a script to convert rgb to HSL
Lightness is basically the (min RGB + Max RGB )/550
firepages
01-22-2006, 04:33 PM
yes the script exists , its part of my framework so its not like its realistic to post the whole thing here... I just wanted an idea of the math behind it is all..
<?php
while ($r = $mptt->traverse()){
if($r1['bw']>2){
$crgt = count($rgt);
if ($crgt>0){
while ($rgt[($crgt-1)] < $r[$this->rgt]) {
array_pop($rgt);
}
}
}
$SEL = $r['c_id'] == $sel ? 'selected="SELECTED" ':'' ;
$rets .= '<option style="here" '.$SEL.'value="'.$r['c_id'].'">'.str_repeat(' »»',$crgt).' '.$r['c_title'].'</option>';
$right[] = $r[$this->rgt];
}
?>
so above $crgt is the depth of the current tree element so thats the value I could use to perform the arithmetic on the idea is therefore to create a different colour scheme whenever $crgt changes
<option style="color:$textcol;background-color:$backcol;" ... etc
dumpfi
01-22-2006, 06:35 PM
Here is my contribution. The "readable opposite" color calculated by this script still lacks a bit readability in some cases and it's only partly tested, but I hope it helps.<?php
class Color
{
const
DEC = 0,
HEX = 1,
LIGHT = 0,
DIM = 2,
ABSOLUTE = 0,
PERCENTAGE = 4,
REFER_TO_MAXIMUM = 0,
REFER_TO_CURRENT = 8;
static public
$HEX_VALUES = array(
0, 1, 2, 3,
4, 5, 6, 7,
8, 9, 'A' => 10, 'B' => 11,
'C' => 12, 'D' => 13, 'E' => 14, 'F' => 15
),
$DEC_VALUES = array(
0, 1, 2, 3,
4, 5, 6, 7,
8, 9, 'A', 'B',
'C', 'D', 'E', 'F'
);
protected
$color = array(
'r' => 0,
'g' => 0,
'b' => 0
);
public function __construct()
{
$args = func_get_args();
call_user_func_array(array($this, 'setColor'), $args);
}
public function setColor($rgb, $mode = self::HEX)
{
if(array_keys($rgb) != array('r', 'g', 'b'))
{
throw new Exception('only "r", "g" or "b" permitted as array keys');
}
foreach($rgb as $cType => $cValue)
{
if($mode & self::HEX)
{
$cValue = self::hexToDec($cValue);
}
$this->color[$cType] = $cValue;
}
}
public function __get($propertyName)
{
if($propertyName == 'color')
{
return $this->color;
}
if(!isset($this->color[$propertyName]))
{
throw new Exception('use of undefined virtual property "'.$propertyName.'"');
}
return $this->color[$propertyName];
}
public function __set($propertyName, $propertyValue)
{
if($propertyName == 'color')
{
$this->setColor($propertyValue, self::DEC);
return;
}
if(!isset($this->color[$propertyName]))
{
throw new Exception('use of undefined virtual property "'.$propertyName.'"');
}
$this->color[$propertyName] = $propertyValue;
}
static public function hexToDec($hex)
{
$dec = 0;
for($i = strlen($hex) - 1, $j = 0; $i >= 0; --$i, $j += 4)
{
$dec += self::$HEX_VALUES[$hex{$i}]<<$j;
}
return $dec;
}
static public function decToHex($dec)
{
$hex = '';
while($dec != 0)
{
$hex .= self::$DEC_VALUES[$dec % 16];
$dec>>=4;
}
return strrev($hex);
}
public function add($rgb, $mode)
{
$this->color = self::calculateColor($this->color, $rgb, $mode);
}
public static function calculateColor($rgbStart, $rgbAdd, $mode)
{
if(array_intersect(array_keys($rgbStart), array_keys($rgbAdd)) != array('r', 'g', 'b'))
{
throw new Exception('only "r", "g" or "b" permitted as array keys');
}
if($mode & self::PERCENTAGE)
{
foreach($rgbAdd as $cType => $cValue)
{
$percentageOf = ($mode & self::REFER_TO_CURRENT) ? $rgbStart[$cType] / 100 : 2.55;
$rgbAdd[$cType] = $percentageOf * $cValue;
}
}
foreach($rgbAdd as $cType => $cValue)
{
if($mode & self::DIM)
{
$cValue *= -1;
}
$rgbStart[$cType] += $cValue;
}
return $rgbStart;
}
public function oppositeColor()
{
$this->color = self::calculateOpposite($this->color, self::DEC);
}
public static function calculateOpposite($rgb, $mode)
{
if(array_keys($rgb) != array('r', 'g', 'b'))
{
throw new Exception('only "r", "g" or "b" permitted as array keys');
}
foreach($rgb as $cType => $cValue)
{
if($mode & self::HEX)
{
$cValue = self::hexToDec($cValue);
}
$rgb[$cType] = 255 - $cValue;
}
return $rgb;
}
public function readableOppositeColor($mode)
{
return self::calculateReadableOpposite($this->color, $mode | self::DEC);
}
public static function calculateReadableOpposite($rgb, $mode)
{
$rgb = self::calculateOpposite($rgb, $mode);
foreach($rgb as $cType => $cValue)
{
if($cValue > 98 && $cValue < 158)
{
$rgb[$cType] = ($cValue - 128 < 0) ? 98 : 158;
}
}
return $rgb;
}
public function __toString()
{
return self::colorToString($this->color, self::DEC);
}
public static function colorToString($rgb, $mode)
{
if(array_keys($rgb) != array('r', 'g', 'b'))
{
throw new Exception('only "r", "g" or "b" permitted as array keys');
}
foreach($rgb as $cType => $cValue)
{
if($mode & self::HEX)
{
break;
}
if($cValue < 0)
{
$cValue = 0;
}
elseif($cValue > 255)
{
$cValue = 255;
}
$rgb[$cType] = self::fillHex(self::decToHex((int) $cValue));
}
return $rgb['r'].$rgb['g'].$rgb['b'];
}
protected static function fillHex($hex)
{
return str_pad($hex, 2, '0', STR_PAD_LEFT);
}
}
$menus = array(
'Services' => array(
'Service1' => array(),
'Service2' => array(
'S2 Sub1' => array(
'S2 Sub1.1' => array(),
'S2 Sub1.2' => array(
'S2 Sub1.2.1' => array(),
'S2 Sub1.2.2' => array(
'S2 Sub1.2.2.1' => array(),
'S2 Sub1.2.2.2' => array()
)
)
),
'S2 Sub2' => array()
),
'Service 3' => array()
)
);
function showMenus($menus, $color)
{
$bColor = Color::calculateColor(
$color,
array(
'r' => 10,
'g' => 10,
'b' => 10
),
Color::DEC | Color::PERCENTAGE
);
$textColor = Color::colorToString(Color::calculateReadableOpposite($bColor, Color::DEC), Color::DEC);
$backgroundColor = Color::colorToString($bColor, Color::DEC);
foreach($menus as $subMenu => $subMenus)
{
echo '<div style="color:#',$textColor,';background-color:#',$backgroundColor,';">',$subMenu;
showMenus($subMenus, $bColor);
echo '</div>';
}
}
?>
<html>
<head>
<title>Submenus</title>
<style type="text/css">
div
{
padding:0.5em;
margin:0.5em;
}
</style>
</head>
<body>
<?php
showMenus(
$menus,
array(
'r' => '9A',
'g' => '9A',
'b' => '00'
)
);
?>
</body>
</html>dumpfi
firepages
01-22-2006, 08:50 PM
hey dude thats a funky looking result :D
cool stuff ... I am going to have to convert to php4 ..hope I dont have to mess with those bitwise operators ;) but from a quick look it looks convertable
cheers dude !
NancyJ
01-22-2006, 09:58 PM
what version of php is that? I tried it with the latest version of phpdev and it wouldnt run.
Parse error: parse error, unexpected T_CONST, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in c:\phpdev5\www\test.php on line 4
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.