[RESOLVED] GD question

NoBullMan

Hi,
I have a form that allows the user to configure some properties of an item. One of the properties is the color scheme. At the end I wanted to present them with a summary of their configuration and wanted to show their selected colors as small colored squares.
I am using php to create the resulting summary page and was wondering if you could tell me how to use GD to create a, say 20x20, square that shows the color.
The reason I want to use GD to create a square "image" is because I want the summary page to be printable. If I use <table> with the selected color as background, it shows on the screen but not when you print the page, since by default background printing is disabled on browsers.

TIA.

obsidian

what format are you allowing them to choose the color in? are they presenting the HEX value, or are they actually providing you with an RGB value?

basically, here's how i'd handle the individual squares: have a file called image.php that will generate your colors based on the query string. for each square you need, pass it an r, g, b value. then, you could call that file as an <img> for each of your colors in that given color scheme. for instance:

// here is your image.php file
$r = isset($_GET['r']) ? $_GET['r'] : 255;
$g = isset($_GET['g']) ? $_GET['g'] : 255;
$b = isset($_GET['b']) ? $_GET['b'] : 255;

$img = imagecreate(20, 20);

$background = imagecolorallocate($img, $r, $g, $b);

header ("content-type: image/png");
imagepng ($img);
imagedestroy ($img);

notice that if no arguments are passed, it doesn't die, it simply defaults to white. then, if i wanted to show a full Red, Blue, and Green box as options, i'd do the following on a page:

<table>
<tr>
<td><img src='image.php?r=255&g=0&b=0' /></td>
<td><img src='image.php?r=0&g=255&b=0' /></td>
<td><img src='image.php?r=0&g=0&b=255' /></td>
</tr>
</table>

notice that you could easily populate the query string via PHP as well.

hope this helps

NoBullMan

Thansk for the reply.
I allow them to pick a color (the actual color) and then pass the hex value to the php file (I pass #FF0000 for red).

obsidian

NoBullMan wrote:
Thansk for the reply.
I allow them to pick a color (the actual color) and then pass the hex value to the php file (I pass #FF0000 for red).

in that case, i'd simply modify your image.php file to this:

<?php
$r = isset($_GET['r']) ? $_GET['r'] : 255;
$g = isset($_GET['g']) ? $_GET['g'] : 255;
$b = isset($_GET['b']) ? $_GET['b'] : 255;

if (isset($_GET['hex'])) {
	$hex = $_GET['hex'];
	$r = hexdec(substr($hex, 0, 2));
	$g = hexdec(substr($hex, 2, 2));
	$b = hexdec(substr($hex, 4, 2));
}

$img = imagecreate(20, 20);

$background = imagecolorallocate($img, $r, $g, $b);

header ("content-type: image/png");
imagepng ($img);
imagedestroy ($img);
?>

now, you can either choose to pass in a query string such as "?r=0&g=0&b=0" for black, or you could pass in the hex value like this instead: "?hex=000000". so, you could have a red square by doing either of the following image tags:

<img src='image.php?r=255&g=0&b=0' />
<img src='image.php?hex=ff0000' />

as long as you strip the pound sign from the front, you should be good to go. i have tested this script and it works just fine for both rgb and hex colors.

NoBullMan

Thanks a lot Obsidian, your help is much appreciated.
The example uou gave works fine by itself. But I need to display this as part of a summary page that includes other text before and after the imge.

Button 1 ON Color <image crreated by GD> some more text after the image...
Button 1 OFF Color <image created by GD> some more text ...
....
....

but anything output before the image generates error "header already sent ..."

obsidian

that's where linking the page as the image source comes in handy. if you have your image.php ready and working, just do something like this to use it:

<!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>
</head>

<body>
<p>Button 1 ON Color <img src='image.php?hex=ff0000' /></p>
<p>Button 1 OFF Color <img src='image.php?hex=000000' /></p>
</body>
</html>

when you call the script through a src of an image, you can call it throughout your page, and you'll be good to go.

NoBullMan

Thanks a lot obsidian.