[% library = libs.splash section = 'colours' ; WRAPPER page %]

The splash/config file loads the html/rgb file which defines the 'rgb' hash. This is then aliased to splash.rgb.

The [% splash.bold %] library creates the user interface components by clever use of some very small graphics. Each background colour requires 4 GIF files, one for each corner. Each of these files is only 8x8 pixels in size and all but a few of the pixels are transparent. The following illustration shows how a button is built up.

[% INCLUDE big_button fg='marine' bg='white' %]

In this case, we are drawing a blue button on a white background. The table background defines the blue button colour, and the white graphics are put in each corner to match the background colour onto which the button is being drawn. We then clear the border and remove the padding and spacing between table cells...

[% INCLUDE big_button fg='marine' bg='white' pad=0 space=0 border=0 %]

And then shrink it down to the right size:

[% INCLUDE big_button fg='marine' bg='white' nofont=1 pad=0 space=0 border=0 size=8 %]

So you only need 4 images for each background colour that you plan to use. Then, for a particular background colour, you can specify any RGB triple to use as a foreground colour.

To save you the hassle of creating new graphics for each background colour, there's a simple Perl script distributed with the Template Toolkit which does it for you. The GIFs have colour maps with just one entry and each pixel is either transparent or set to that colour. The script simply takes an existing GIF, hacks the RGB value in the colour table (all of 3 bytes) and writes the new GIF out again. Instant colour change!

At installation time, this script is run to generate graphics for each of the pre-defined colours in the html/rgb template which gets loaded into 'splash.rgb'. Don't worry about your hard disk being filled with thousands of huge graphics - each GIF file is typically only 54 bytes. so they take up very little space and are exceptionally fast to transfer across a network.

Here's a selection of colours:

[% bgcols = [ 'white', 'lilac', 'grey50', 'marine' ] cellsize = 95 / bgcols.size; USE int = format('%d'); cellpc = int(cellsize) %]

[% FOREACH col = splash.rgb.keys; NEXT IF splash.rgb.${col}.keys; NEXT IF loop.count < 12; # select a bunch NEXT IF loop.count > 19; NEXT IF col.search('25'); # ignore very dark colours fg = col.search('mint|white|rose|aqua|sky|lilac|green\b|grey75') ? 'black' : 'white'; # use white for dark cols %]
[% FOREACH bgcol = bgcols; %] [% content = INCLUDE splash/text col=fg content=col %] [% INCLUDE splash/button content width='90%' %] [% END %]
[% END %]

[% BLOCK big_button; DEFAULT fg = 'white' bg = 'black'; space = space.defined ? space : 2; border = border.defined ? border : 2; pad = pad.defined ? pad : 4; %]

[% INCLUDE big_img img='tl' %] | [%- UNLESS nofont %][% END %]Hello World! [%- UNLESS nofont %][% END %] | [% INCLUDE big_img img='tr' %]
[% INCLUDE big_img img='bl' %] | [% INCLUDE big_img img='br' %]

[% END %] [% BLOCK big_img; DEFAULT bg='black' size=32 -%] [%- END %] [% col = '', bgcol = '' %] [% END %]