BioChrome Image Col[ou]ri[sz]er

admin/biochrome.shtml

    [% META title       = 'BioChrome Image Col[ou]ri[sz]er'
            author      = 'Andy Wardley'
            description = 'Generates web user interface images in our colours of choice'
    -%]
    [% 
       imgdir  = "$rootdir/images/ui";
       biodir  = "$imgdir/biochrome";
       magnify = 8;
    
       # read all the files in the images/biochrome directory
       USE Directory(biodir);
       images = [ ];
       images.push(file.name) FOREACH file IN Directory.files;
    
       # prepare our colours for BioChrome
       cols = [ ];
       CALL cols.push(site.col.${name}.replace('^#', ''))
         FOREACH name IN ['body' 'middle' 'border'];
    
       bccols = cols.join('_');
       debug_msg("BioChrome colour string: $bccols");
    
    -%]
    
    <p>
      This page uses the <span class="perlmod">Image::BioChrome</span>
      module (via a Template Toolkit plugin) to generate the images 
      required to render the web site user interface in our current
      colours of choice.
    </p>
    
    <p>
      It does this using a set of source images that have been specially
      prepared for use with BioChrome.  These images use the red, green 
      and blue primary colours (or <i>channels</i> in image processing 
      lingo) and look pretty garish in their raw form.
    </p>
    
    <div class="border">
     <h3 class="caption">BioChrome Source Images</h3>
    
     <p>
    [% FOREACH image IN images; 
         USE Image("$imgdir/$image") 
    -%]
      <img src="[% site.url.images %]/ui/biochrome/[% image %]" class="border" 
           alt="BioChrome source image [% image %]" title="BioChrome source image [% image %]"
           width="[% Image.width * magnify %]" height="[% Image.height * magnify %]" />
    [% END -%]
     </p>
    [% PROCESS magnified %]
    </div>
    
    <p>
      BioChrome re-colours the images by changing the values in the colour
      table.  We specify a background colour and up to three foreground
      colours which replace the original red, green and blue values in the
      image.  In other words, we can turn black, red, green and blue into
      orange, brown, red and white, or red, orange, green and blue.  Or
      indeed anything you like (although we highly recommend colour scheme
      involving the use of orange :-).
    </p>
    
    <p>
      In other words, BioChrome allows you to treat an image like a
      special kind of template with three 'variables' called <code>red</code>,
      <code>green</code> and <code>blue</code>.  You provide whatever 
      values you like for these 'variables' to indicate the colours that 
      you want in your output images and BioChrome does the rest.
    </p>
    
    <div class="border">
     <h3 class="caption">BioChrome Output Images</h3>
    
     <p>
    [% FOREACH image IN images;
         USE BioChrome("$biodir/$image");
         BioChrome.alphas(bccols);
         BioChrome.write_file("$imgdir/$image");
         USE Image("$imgdir/$image");
    -%]
      <img src="[% site.url.images %]/ui/[% image %]" class="border" 
           alt="BioChrome output image [% image %]" title="BioChrome output image [% image %]"
           width="[% Image.width * magnify %]" height="[% Image.height * magnify %]" />
    [% END -%]
     </p>
    
    [% PROCESS magnified %]
    </div>
    
    <p>
      The images are generated in their coloured form each time the source
      template for this page is processed.  Although we wouldn't normally
      recommend writing code inside templates that might better be suited
      to a stand-alone Perl script, there are a number of reasons why it
      makes good sense here.  
    </p>
    
    <p>
      First, it allows us to define the colours in our colour scheme in
      just one place (the lib/config/style configuration template in our
      case).  If we want to change a colour, we only need change it once
      in that one place.  Remember <b>DRY</b> - <b>D</b>on't <b>R</b>epeat
      <b>Y</b>ourself.
    </p>
    
    <p>
      The second benefit is that when we do change a colour and rebuild
      the web site to apply it, the images get automatically re-generated
      as part of that process.  There's no need to remember to run a
      separate script or, heaven forbid, fire up the Gimp to create or
      modify the images yourself.  It all just happens auto-magically!
    </p>
    
    <p>
      Of course this is all a moot point because we already have the perfect
      colour scheme in our favourite shade of orange...
    </p>
      
    
    [% BLOCK magnified %] 
     <p class="note">
      Images shown enlarged at x[% magnify %] magnification.
     </p>
    [%- END %]