[%- META
        title = 'BioChrome Examples'
-%]
[% bg = '9e9eff' %]
[% INCLUDE image 
        file = 'BioChrome.gif'
        alpha = 'ffffff_0000ff_666666'
%]
$p_start
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.
$p_end
$p_start
How did BioChrome come about?
$p_end
$p_start
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?
$p_end
$p_start
So what does BioChrome do?
$p_end
$p_start
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).
$p_end
$p_start
$p_end
<h1>Examples</h1>
$p_start
Lets look at some specific examples.
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        outfile = 'HelloButton.gif'
        alpha = "${bg}_000000_ffffff_000000"
%]
$p_start
The image above was generated by BioChrome.  We started with an image that looks like this...........
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        outfile = 'HelloButton1.gif'
%]
$p_start
When we use alpha channels we start by setting the background color.  We told BioChrome to make the background color <font color="#$bg">#$bg</font>.  Which makes an image like this one.
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        alpha = "${bg}_${bg}"
        outfile = 'HelloButton2.gif'
%]
$p_start
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.
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        alpha = "${bg}_000000"
        outfile = 'HelloButton3.gif'
%]
$p_start
Then any green in the image is replaced by the next color this time white.
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        alpha = "${bg}_000000_ffffff"
        outfile = 'HelloButton4.gif'
%]
$p_start
Finally we replace any blue in the image with our final color, black.
$p_end
[% INCLUDE image 
        file = 'HelloButton.gif'
        alpha = "${bg}_000000_ffffff_000000"
        outfile = 'HelloButton5.gif'
%]
$p_start
$p_end
$p_start
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.
$p_end
<pre>
[% INSERT lozenge | html %]
</pre>
$p_start
And this code produces the following output
$p_end
[% PROCESS lozenge %]