[%- 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

# Examples

$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 #$bg. 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 #000000. 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

    [% INSERT lozenge | html %]

$p_start And this code produces the following output $p_end [% PROCESS lozenge %]