Example 5: Replicating Images

This page demonstrates how VisibleGif can be used to replicate a simple image and to change the colour of each replication. VisibleGif can ensure that all replications are identical except in this example for the colour that has been changed. First a template is created. The template is replicated and each copy edited to amend the colour. The copies are used to create the new images.

Colour associations

It is a common requirement to take an agreed image ( ) and to replicate it applying different colours to each replication. In some web sites colour is used to assist site navigation.

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

Corporate web sites are beginning to standardise on the following colour associations.

		green	for environment and community.
		yellow	for business to home customer.
		blue	for business to business.
		red	for corporate and financial information.

Step 1 - Create the XML Template

The first step is to create the XML template that will be used in all the images. This can be created from scratch.

A better approach is to use a specialist image editor software package to create the initial design and to save as a GIF image. The colour depth should be reduced as much as possible. VisibleGif can be used to create the XML version from the original GIF image.

A command file which reads a GIF file called "original.gif" and creates an XML file called "original.xml" is as follows. Parameters " -c -p -uc -nc "are used to suppress the generation of the <data-packed>, <data-codes>, <used-colors> and <new-colors> tag blocks.


rem   exam05a.cmd   VG - Example 05a - Create XML from GIF

rem   Set the variables for the folder names
set exelib=h:\vg\bin\vg
set runlib=h:\vg\exam\exam05
set license=########

rem   Change directory to the correct disk drive and folder
h:
cd %runlib%

rem   Execute vg and send run report to exam05a.txt
%exelib% original.gif original.xml " -c -p -uc -nc " %license% >exam05a.txt

The XML version in "original.xml" can be edited to produce the file listed below. The file is renamed to "red.xml".

The second entry (index 1) in the global colour table is "red" (FF0000). It is this entry that needs to be changed to allow images in different colours to be produced.


<?xml version="1.0"?>
<gif>

  <header>
    <signature>GIF</signature>
    <version>89a</version>
    <screen-width>22</screen-width>
    <screen-height>17</screen-height>
    <global-color-present>true</global-color-present>
    <color-resolution>1</color-resolution>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <global-color-size>2</global-color-size>
    <background-color-index>0</background-color-index>
    <pixel-aspect-ratio>0</pixel-aspect-ratio>
  </header>

  <global-color-table>
    <index>0</index>  <red>00</red>  <green>00</green>  <blue>00</blue>
    <index>1</index>  <red>FF</red>  <green>00</green>  <blue>00</blue>
   </global-color-table>

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>0 No disposal specified</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>0</delay-time>
    <transparent-color-index>0</transparent-color-index>
  </graphic>

  <image>
    <left>0</left> 
    <top>0</top>
    <width>22</width>
    <height>17</height>
    <local-color-present>false</local-color-present>
    <interlaced>false</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>0</local-color-size>

    <lzw-minimum-code-size>2</lzw-minimum-code-size>

    <data-rows>
      <row count="0"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="1"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="2"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="3"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="4"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="5"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="6"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="7"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="8"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="9"   >!!!!!!!!""""""""""""!!</row>
      <row count="10"  >!!!!!!!""""""""""""!!!</row>
      <row count="11"  >!!!!!!""""""""""""!!!!</row>
      <row count="12"  >!!!!!""""""""""""!!!!!</row>
      <row count="13"  >!!!!""""""""""""!!!!!!</row>
      <row count="14"  >!!!""""""""""""!!!!!!!</row>
      <row count="15"  >!!""""""""""""!!!!!!!!</row>
      <row count="16"  >!!!!!!!!!!!!!!!!!!!!!!</row>
    </data-rows>

  </image>

</gif>

Step 2 - Copy the XML Template

The XML file "red.xml" is copied fifteen times and renamed to the 15 other desired colours. Each file is edited and the "Index 1" entry in the global colour table changed to the desired colour.

There are many text file "search and replace" programs that can speed up the process of copying and editing text files. For designers with programming skills in programs like "sed" and "awk" or programming languages like "perl" the effort to make extensive changes becomes negligible.

Step 3 - Create the images

A command file needs to be set up as below. The command file is executed. The images are created.


rem   exam05b.cmd   VG - Example 5b - Create images

rem   Set the variables for the folder names
set exelib=h:\vg\bin\vg
set runlib=h:\vg\exam\exam05
set license=########

rem   Change directory to the correct disk drive and folder
h:
cd %runlib%

rem   Execute vg 

%exelib% aqua.xml    aqua.gif    %license%  >aqua.txt
%exelib% black.xml   black.gif   %license%  >black.txt
%exelib% blue.xml    blue.gif    %license%  >blue.txt
%exelib% fuchsia.xml fuchsia.gif %license%  >fuchsia.txt
%exelib% gray.xml    gray.gif    %license%  >gray.txt
%exelib% green.xml   green.gif   %license%  >green.txt
%exelib% lime.xml    lime.gif    %license%  >lime.txt
%exelib% maroon.xml  maroon.gif  %license%  >maroon.txt
%exelib% navy.xml    navy.gif    %license%  >navy.txt
%exelib% olive.xml   olive.gif   %license%  >olive.txt
%exelib% purple.xml  purple.gif  %license%  >purple.txt
%exelib% red.xml     red.gif     %license%  >red.txt
%exelib% silver.xml  silver.gif  %license%  >silver.txt
%exelib% teal.xml    teal.gif    %license%  >teal.txt
%exelib% white.xml   white.gif   %license%  >white.txt
%exelib% yellow.xml  yellow.gif  %license%  >yellow.txt

The resultant images are shown at the top of this page.

Automation

In automating the process of image generation the first step is to split the XML file into its five component parts.

Header block

The following is saved as file "x1head.xml".


<?xml version="1.0"?>
<gif>

  <header>
    <signature>GIF</signature>
    <version>89a</version>
    <screen-width>22</screen-width>
    <screen-height>17</screen-height>
    <global-color-present>true</global-color-present>
    <color-resolution>1</color-resolution>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <global-color-size>2</global-color-size>
    <background-color-index>0</background-color-index>
    <pixel-aspect-ratio>0</pixel-aspect-ratio>
  </header>

Global Colour Table block

A file needs to be created for each colour. The 16 files for the 16 colours have file names with the form "x2????.xml" where ???? is replaced by each colour. The following which is the "red" file is saved as file "x2red.xml".


  <global-color-table>
    <index>0</index>  <red>00</red>  <green>00</green>  <blue>00</blue>
    <index>1</index>  <red>FF</red>  <green>00</green>  <blue>00</blue>
   </global-color-table>

Graphic block

The following is saved as file "x3graph.xml".

  <graphic>
    <blocksize>4</blocksize>
    <disposal-method>0 No disposal specified</disposal-method>
    <user-input>false</user-input>
    <transparent-color-present>true</transparent-color-present>
    <delay-time>0</delay-time>
    <transparent-color-index>0</transparent-color-index>
  </graphic>

Image block

The following is saved as file "x4image.xml".


  <image>
    <left>0</left> 
    <top>0</top>
    <width>22</width>
    <height>17</height>
    <local-color-present>false</local-color-present>
    <interlaced>false</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>0</local-color-size>

    <lzw-minimum-code-size>2</lzw-minimum-code-size>

    <data-rows>
      <row count="0"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="1"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="2"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="3"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="4"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="5"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="6"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="7"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="8"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="9"   >!!!!!!!!""""""""""""!!</row>
      <row count="10"  >!!!!!!!""""""""""""!!!</row>
      <row count="11"  >!!!!!!""""""""""""!!!!</row>
      <row count="12"  >!!!!!""""""""""""!!!!!</row>
      <row count="13"  >!!!!""""""""""""!!!!!!</row>
      <row count="14"  >!!!""""""""""""!!!!!!!</row>
      <row count="15"  >!!""""""""""""!!!!!!!!</row>
      <row count="16"  >!!!!!!!!!!!!!!!!!!!!!!</row>
    </data-rows>

  </image>

Comments and trailer block

The following is saved as file "x5tail.xml". In this case as the image is so small a copyright notice is not inserted.


</gif>

Job command file

This "job" command file executes a "procedure" command file a number of times once for each colour.


rem   exam05c.cmd   VG - Example 05c - Batch replicate images 

rem   Set the variables for the folder names
set runlib=h:\vg\exam\exam05

rem   Change directory to the correct disk drive and folder
h:
cd %runlib%

rem   Execute vg 

call exam05cx aqua
call exam05cx black
call exam05cx blue
call exam05cx fuchsia
call exam05cx gray
call exam05cx green
call exam05cx lime
call exam05cx maroon
call exam05cx navy
call exam05cx olive
call exam05cx purple
call exam05cx red
call exam05cx silver
call exam05cx teal
call exam05cx white
call exam05cx yellow

Procedure command file

This "procedure" command file is passed a colour as its single parameter. It appends all the component elements of XML together using the "copy" command and creates a standard XML file. This XML file is passed to VisibleGif in the normal way.


rem   exam05cx.cmd   VG - Example 05cx - Batch replicate images procedure

rem   Set the colour to that passed to the procedure
set icol=%1

rem   Set the variables for the folder names
set exelib=h:\vg\bin\vg
set runlib=h:\vg\exam\exam05
set license=########

rem   Change directory to the correct disk drive and folder
h:
cd %runlib%

rem    Create the XML tagged file from its components
copy x1head.xml + x2%icol%.xml + x3graphic.xml + x4image.xml + x5tail.xml
  %icol%.xml 

rem   Execute vg
%exelib%  %icol%.xml  %icol%.gif  %license%  >%icol%.txt

It is good practise to write the created XML file to a "temp" folder. This prevents the temptation of directly editing the generated XML file.

Common reusable elements

The advantages of using XML is in building up libraries of reusable elements.

As an example if it was required to create a set of similar icons to those above. The requirement is for the icons to fall to the left instead of the right. The only effort is to create a new version of "x4image.xml". The job can be rerun accessing the new "x4image.xml". The images are created automatically within a few seconds. This approach provides great flexibility to web designers when they are deciding how to pitch their offerings in response to web site briefs.


  <image>
    <left>0</left> 
    <top>0</top>
    <width>22</width>
    <height>17</height>
    <local-color-present>false</local-color-present>
    <interlaced>false</interlaced>
    <colors-sorted-by-importance>false</colors-sorted-by-importance>
    <local-color-size>0</local-color-size>

    <lzw-minimum-code-size>2</lzw-minimum-code-size>

    <data-rows>
      <row count="0"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="1"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="2"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="3"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="4"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="5"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="6"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="7"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="8"   >!!!!!!!!!!!!!!!!!!!!!!</row>
      <row count="15"  >!!""""""""""""!!!!!!!!</row>
      <row count="14"  >!!!""""""""""""!!!!!!!</row>
      <row count="13"  >!!!!""""""""""""!!!!!!</row>
      <row count="12"  >!!!!!""""""""""""!!!!!</row>
      <row count="11"  >!!!!!!""""""""""""!!!!</row>
      <row count="10"  >!!!!!!!""""""""""""!!!</row>
      <row count="9"   >!!!!!!!!""""""""""""!!</row>
      <row count="16"  >!!!!!!!!!!!!!!!!!!!!!!</row>
    </data-rows>

  </image>

The original row counts have been left to illustrate how easy it is to produce mirror images. The row count is not used in processing by VisibleGif.

WhyWaitForever