<html>
<head>
<title>
BioChrome Examples
</title>
</head>
<body bgcolor="#ffffff">
<img src="images/BioChrome.gif">
<p>
<font size='-1'>
This document shoud give you some insight into what BioChrome is and how it came about. It should also serve as an example of the sort applications to which BioChrome is suited. Finally as this document is generated using the Template Toolkit using the BioChrome plugin the source of this document will give you some insight into the use of the Template plugin.
</font>
</p>
<p>
<font size='-1'>
How did BioChrome come about?
</font>
</p>
<p>
<font size='-1'>
The initial idea came from Andy Wardleys work on Template Toolkit. Part of the Template toolkit includes a library called splash which includes colored widgets. Andy generated these widgets from black and white gif files by changing the color palette. I thought that I could extend the idea and change multi colors on the fly. The first version of BioChrome was a prototype apache handler which would regenerate graphics on the fly into any requested color. Having used this handler for a while a design emerged for BioChrome which extended it's use outside of Apache. I also had a brainwave around the same time. Frequently when creating buttons and interface widgets I use alpha channels to create the graphics. I figured that I could use the red, green and blue channels to simulate three alpha channels. This means that I can create graphics with four colors which can include antialiasing. Anyway enough of this what does it all mean?
</font>
</p>
<p>
<font size='-1'>
So what does BioChrome do?
</font>
</p>
<p>
<font size='-1'>
BioChrome takes an image file (currently only gif files) and changes the palette that is stored in it to change the displayed colours. It does this by either replacing colors in the color palette (color mode) or using alpha channels where every color in the palette is changed (alpha mode).
</font>
</p>
<p>
<font size='-1'>
</font>
</p>
<h1>Examples</h1>
<p>
<font size='-1'>
Lets look at some specific examples.
</font>
</p>
<img src="images/HelloButton.gif">
<p>
<font size='-1'>
The image above was generated by BioChrome. We started with an image that looks like this...........
</font>
</p>
<img src="images/HelloButton1.gif">
<p>
<font size='-1'>
When we use alpha channels we start by setting the background color. We told BioChrome to make the background color <font color="#9e9eff">#9e9eff</font>. Which makes an image like this one.
</font>
</p>
<img src="images/HelloButton2.gif">
<p>
<font size='-1'>
Next any red in the graphic is replaced with the next color which in this case is <font color="#000000">#000000</font>. So far the image looks like this.
</font>
</p>
<img src="images/HelloButton3.gif">
<p>
<font size='-1'>
Then any green in the image is replaced by the next color this time white.
</font>
</p>
<img src="images/HelloButton4.gif">
<p>
<font size='-1'>
Finally we replace any blue in the image with our final color, black.
</font>
</p>
<img src="images/HelloButton5.gif">
<p>
<font size='-1'>
</font>
</p>
<p>
<font size='-1'>
The Image::BioChrome module also includes a plugin for the Template Toolkit which allows us to produce graphics from within a Template. This document is an example of this and the following template code should give you an idea of what is possible.
</font>
</p>
<pre>
[% USE bc = BioChrome("$image_src/button.gif");
colors = ['00' '33' '66' '99' 'CC' 'FF']
%]
<table border="0">
[% FOREACH row IN colors %]
<tr>
[%- FOREACH col IN colors;
hexcol = "${row}00${col}";
bc.alphas("ffffff_${hexcol}_ffffff_000000");
bc.write_file("$image_dest/button${hexcol}.gif")
-%]
<td>
<img src="[% images %]/button${hexcol}.gif" />
</td>
[% END %]
</tr>
[% END %]
</table>
</pre>
<p>
<font size='-1'>
And this code produces the following output
</font>
</p>
<table border="0">
<tr> <td>
<img src="images/button000000.gif" />
</td>
<td>
<img src="images/button000033.gif" />
</td>
<td>
<img src="images/button000066.gif" />
</td>
<td>
<img src="images/button000099.gif" />
</td>
<td>
<img src="images/button0000CC.gif" />
</td>
<td>
<img src="images/button0000FF.gif" />
</td>
</tr>
<tr> <td>
<img src="images/button330000.gif" />
</td>
<td>
<img src="images/button330033.gif" />
</td>
<td>
<img src="images/button330066.gif" />
</td>
<td>
<img src="images/button330099.gif" />
</td>
<td>
<img src="images/button3300CC.gif" />
</td>
<td>
<img src="images/button3300FF.gif" />
</td>
</tr>
<tr> <td>
<img src="images/button660000.gif" />
</td>
<td>
<img src="images/button660033.gif" />
</td>
<td>
<img src="images/button660066.gif" />
</td>
<td>
<img src="images/button660099.gif" />
</td>
<td>
<img src="images/button6600CC.gif" />
</td>
<td>
<img src="images/button6600FF.gif" />
</td>
</tr>
<tr> <td>
<img src="images/button990000.gif" />
</td>
<td>
<img src="images/button990033.gif" />
</td>
<td>
<img src="images/button990066.gif" />
</td>
<td>
<img src="images/button990099.gif" />
</td>
<td>
<img src="images/button9900CC.gif" />
</td>
<td>
<img src="images/button9900FF.gif" />
</td>
</tr>
<tr> <td>
<img src="images/buttonCC0000.gif" />
</td>
<td>
<img src="images/buttonCC0033.gif" />
</td>
<td>
<img src="images/buttonCC0066.gif" />
</td>
<td>
<img src="images/buttonCC0099.gif" />
</td>
<td>
<img src="images/buttonCC00CC.gif" />
</td>
<td>
<img src="images/buttonCC00FF.gif" />
</td>
</tr>
<tr> <td>
<img src="images/buttonFF0000.gif" />
</td>
<td>
<img src="images/buttonFF0033.gif" />
</td>
<td>
<img src="images/buttonFF0066.gif" />
</td>
<td>
<img src="images/buttonFF0099.gif" />
</td>
<td>
<img src="images/buttonFF00CC.gif" />
</td>
<td>
<img src="images/buttonFF00FF.gif" />
</td>
</tr>
</table>
</body>
</html>