Example 2: 
a transparent image
This page demonstrates how VisibleGif can be used to produce a simple image of a red icon on a transparent background. For more information on transparent images click here for Design Paper 4 - GIF format.
Step 1 - Decide on the image design, shape and characteristics
The first step is to decide on the image width and height. In this case the width is 22 pixels and the height is 17 pixels.
The next step is to decide on shape and colours. Here the image is a simple red shape on a transparent background. The colour black is selected as the transparent colour. Only two colours black and red are needed.
Finally all the other tags need to be included.
The "<data-rows>" part of the image takes the most time to create. The character ! represents the first colour in the table which is "transparent" black (000000). The character " represents the second character in the table which is red (FF0000). VisibleGif has defined a mapping between particular characters and the index (offset) in the colour table. 17 rows of 22 characters needs to be created.
Step 2 - Create the XML tagged file
A text editor program such as MS Notepad can be used to create the XML tagged file. It is usually easier to cut, paste and modify an existing file.
The file contains four tag blocks
<?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>
|
This tag file is assumed to be saved as "exam02.xml".
Step 3 - Run VisibleGif to create the GIF image file
A command file needs to be run. This command file reads the XML file called "exam02.xml" and creates the GIF file called "exam02.gif". The command file which is best run in a command window (MS DOS window) is as follows:
rem exam02.cmd VG - Example 02 - Create GIF from XML rem Set the variables for the program and the run folder set exelib=h:\vg\bin\vg set runlib=h:\vg\exam\exam02 set license=######## rem Change directory to the correct disk drive and run folder h: cd %runlib% rem Execute vg and send run report to exam02.txt %exelib% exam02.xml exam02.gif %license% >exam02.txt |
After the command file is run successfully the GIF image is created. It can be viewed using web browser software. This provides assurance that the image appears as expected. The run report a copy of which follows should be checked.
I001 Run report for VisibleGif
I002 Start time is Tue Feb 29 21:02:56 GMT 2000
I004 Parameters
1: exam02.xml
2: exam02.gif
3: license: ##################
I010 File exists and will be read :
( exam02.xml )
I012 File will be created :
( exam02.gif )
I015 Report file is being used :
( system )
I006 Conversion of a XML file to a GIF file
I007 List of processed blocks (tags)
<header>
<signature>
<version>
<screen-width>
<screen-height>
<global-color-present>
<color-resolution>
<colors-sorted-by-importance>
<global-color-size>
<background-color-index>
<pixel-aspect-ratio>
</header>
<global-color-table>
<red> <green> <blue>
<red> <green> <blue>
</global-color-table>
<graphic>
<blocksize>
<disposal-method>
<user-input>
<transparent-color-present>
<delay-time>
<transparent-color-index>
</graphic>
<image>
<left>
<top>
<width>
<height>
<local-color-present>
<interlaced>
<colors-sorted-by-importance>
<local-color-size>
<lzw-minimum-code-size>
<data-rows>
<row count="0" >
<row count="1" >
<row count="2" >
<row count="3" >
<row count="4" >
<row count="5" >
<row count="6" >
<row count="7" >
<row count="8" >
<row count="9" >
<row count="10" >
<row count="11" >
<row count="12" >
<row count="13" >
<row count="14" >
<row count="15" >
<row count="16" >
</data-rows>
</image>
I000 Processing completed normally
I003 End time is Tue Feb 29 21:02:59 GMT 2000
I001 Run report for VisibleGif
|
Step 4 - Run VisibleGif to double check the created GIF image
It is always a good idea to use the created GIF image as input to VisibleGif to produce a new XML tagged file. The resultant tagged file is listed below. It contains additional information.
<?xml version="1.0"?>
<gif>
<start-time>Tue Feb 29 21:03:03 GMT 2000</start-time>
<file>exam02.gif</file>
<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>
<edit>!</edit>
<index>1</index> <red>FF</red> <green>00</green> <blue>00</blue>
<edit>"</edit>
</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-packed>
<blocksize>29</blocksize>
<bytes>848FA9CBED0FA39CB4DA4B83DE5CB70E065FC88DA4C79C9B79B224E614</bytes>
<blocksize>0</blocksize>
<bytes></bytes>
</data-packed>
<data-codes>
<code size="3" >4</code> <code size="3" >0</code>
<code size="3" >6</code> <code size="3" >7</code>
<code size="4" >8</code> <code size="4" >9</code>
<code size="4" >10</code> <code size="4" >11</code>
<code size="4" >12</code> <code size="4" >13</code>
<code size="4" >14</code> <code size="4" >15</code>
<code size="5" >16</code> <code size="5" >17</code>
<code size="5" >18</code> <code size="5" >19</code>
<code size="5" >20</code> <code size="5" >21</code>
<code size="5" >22</code> <code size="5" >23</code>
<code size="5" >20</code> <code size="5" >1</code>
<code size="5" >26</code> <code size="5" >27</code>
<code size="5" >28</code> <code size="5" >26</code>
<code size="5" >13</code> <code size="5" >29</code>
<code size="6" >32</code> <code size="6" >1</code>
<code size="6" >31</code> <code size="6" >33</code>
<code size="6" >28</code> <code size="6" >35</code>
<code size="6" >36</code> <code size="6" >30</code>
<code size="6" >12</code> <code size="6" >39</code>
<code size="6" >27</code> <code size="6" >38</code>
<code size="6" >39</code> <code size="6" >44</code>
<code size="6" >36</code> <code size="6" >24</code>
<code size="6" >14</code> <code size="6" >5</code>
</data-codes>
<used-colors>
<cin>0</cin> <ced>!</ced> <rgb>000000</rgb> <nin>0</nin> <ned>!</ned>
<count>290</count>
<cin>1</cin> <ced>"</ced> <rgb>FF0000</rgb> <nin>1</nin> <ned>"</ned>
<count>84</count>
</used-colors>
<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>
<end-time>Tue Feb 29 21:03:04 GMT 2000</end-time>
</gif>
|
The new XML file can be used to produce a new GIF image. This is left as an exercise to the reader.