Inline images in Perl/TK applications.

Here you see a screenshot of an Perl/TK application, which isn´t quite like other Perl/TK applications. The difference between this and almost all the other TK applications you may be using, is that this application has all the nice images included in line. Wow .. this is neat stuff, but how is it done?

Sit back, and i’ll tell ya. :-)

Well .. first of all, you need to organise all the .gif images, that the application need, in a directory structure that makes sense. It could look something like this:

images/logos
images/buttons
...

When the images has been organized, you need to create a script, that will convert the imagedata to plain text. This script is called generate.pl, and must be located just outside the images directory. Here is the code for the generate.pl script:

use GD;
use MIME::Base64;
foreach (<images/*>) {
   my $type = (split/\//, $_)[1];
   foreach (<$_/*.gif>) {
      my $name = (split /\./,((split/\//, $_)[2]))[0];
      print "Adding imagedata to datafile: $type/$name ($_).\n";
      open (GIF, $_);
      my $imagedata = encode_base64((newFromGif GD::Image(GIF))->gif);
      close GIF;
      $data .= "\n<" . $type . "/" . $name . ">\n" . $imagedata;
   }
}
open (DATA, ">graphicsdata.txt");
print DATA $data;
close DATA;

When the script has been executed, you will have a text file named graphicsdata.txt, while contains all the images as clear text. It should look like this:

<Category/Imagename>
R0lGODlhTAASAOcAAAAAADdrGThrGzlrGztsHj9wI09sP0x7MXBwcHNzc3R0dHh4eHl5eX5+fk1y
p1Z7sFZ7sVd8sVh9slh9s1h+s1l/tDeUN1OMKFePLUKhO12GRluBfFapUGCJSGaOT2+TWlqAtWiO
xGqQxmuRx2uSyG2TyW2Uym6Vy2+WzG+XzXCXzXCYznGZz3Kb0XOb0XSc0nWe1Heg1oOfdIGrYYWh ...

So far so good. Using the generated imagedata, it´s time for creating a script that holds the imagedata within the script:

use Tk;

my $ImageData = <<ENDOFGRAPHICS;
R0lGODdhIAAgAMYAAC08TTdGVj9NXEBOXUBOXkJPX0JQX0NQYERRYERSYUVTYkZTYkdUY0dVY0tY
ZkxZZ01aaE5baVBcalBca1FebFNfbVNgbVVhb1djcFhkcVllcltmdFxndVxodV1odl1pdl9qd2Fs
eWJtemNue2RvfGVwfWdyf2hzf2lzgGp0gGx3gm54hG55hXF7h3J8iHN9iXaAi3eAi3iCjaCnr6Ws
s6qxuK2zura7wcLHzMPIzcXJzsbLz8fL0MjM0cnN0srO083R1c7S1s/S1s/T19DT19HU2NLV2dPW
2tPX29TX29TY29XY3NXZ3NbZ3dba3dfa3tjb3tjb39nc39rd4Nve4dzf4gAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwA
AAAAIAAgAAAH/oBVgoOEhYaHiImKi4yNhzcjkZKTkjODPyiUkU2ENACfoKGfKlOCPw2ioEidqaIr
pVU+DK0AD1KstAAssD4LtBBBhZ60u4K9tBFDhsOpLbA9CsjKy63Ogj0JtBJEgk+3g8ygLs/ZrRPc
VU8hq+CiL1SCOwi0FEWCTiEA7ILh7/EH9OxVcQLi074qzGDAq7IDYKsKRu4VNIhLoSAdBmhZiFil
yYdQBz3FWKijAK0LRwQ18SAqpAySJluhFLSkQ6qDQxbmIEALA7slG1odHJRjQE92SoIKNVSUlgYl
gpRoyDUUhwBaGZLQnEqVEI+rtBwEqyIlRS59uHI9ACJIyomuRu3O1horxQStkHI/PRDStsTSuHmT
CYrityWhGnlBRUAHZYThQYgTf9omCIoIkIRsBNjMubPnzRy0piPBWbSj06hTqz7NJBAAOw==
ENDOFGRAPHICS

$MW = MainWindow->new(-title => "Inline image demo");

$WIDGETS{'Image'} = $MW->Label(
   -image => $MW->Photo("Image", -data => $ImageData))->grid(
      -row    => 1,
      -column => 1,
      -padx => 100,
      -pady => 100);

$MW->resizable(0, 0);
MainLoop;

Voilá. That´s all that is to it. :-)