FE 'tkGooie' Utilities

'TkGAMEdevAids' group

A utility to make
BASE64 data from
a Tk 'photo'
IMAGE file

(GIF, PNG, PPM, PGM input)

(FE = Freedom Environment)

The 'tkGooie' interface for this 'GAMEdev'
utility to make BASE64 hex-data
from an image file
---
with the BASE64 data
displayed in a text-editor GUI.

This utility can read a
GIF or PNG or P*M image file.

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

Game Dev (development) Aids MENU page >

This
'MakteBASE64data_ fromTkPhotoIMAGEfile'
tkGooie Page

INTRODUCTION to a
'Make BASE64 data from a Tk Photo IMAGE file' utility

I have seen postings on the 'wiki.tcl.tk' site where someone is asking how to make 'base64' data --- to use in a Tk GUI script.

The usual reply is to use a 'base64' utility from 'tcllib'.

But I am running on Linux.

I already have a 'base64' command at my disposal --- and probably anyone running a Linux or BSD or other Unix-like system has the 'base64' command (or a suitable substitute) available to them.

    (Since the Apple Mac OS is based on a BSD OS, Mac users probably also have such a command available to them.)

The Tk 'image create photo -data' command --- which is often used to build image data, in-computer-memory, that will be put on a Tk 'canvas' widget --- will accept image data from several types of 'raster image' files :

  • GIF
  • PGM (Portable Gray Map)
  • PPM (Portable Pixel Map)
  • and, starting with Tk 8.6, PNG.

    (I guess I am making an assumption here.

    I have not tried PNG files, since I do not have Tcl-Tk 8.6 installed.

    I may, someday, verify whether the 'image create photo -data' command will accept PNG image data.)

Although I could go through a sequence of 'manual' manipulations in a command terminal window to capture 'base64' data from these types of image files, I decided I would much rather make a Tk 'wrapper' for the 'base64' command --- to make the process 'a walk in the park'.

I wanted to display a user-selected image file in a Tk 'canvas' widget on the GUI, before choosing to write out the BASE64 data to a text file.

For the GUI, I needed (or wanted) several features:

  • an entry field for filename, along with a 'Browse...' button --- to use to fetch a filename via the 'tk_getOpenFile' utility.

  • a canvas on which to display the image --- as a 'preview'.

  • a button to use to generate the 'base64' data from the image file.

  • a label on the GUI in which to display the dimensions of the image file.

  • a 'Help' button on the GUI, by which to provide information on the extent of the capabilities of this utility.

I set about making such a GUI, and after several iterations, I ended up with the GUI seen in the following image.

This teapot image is from one of the PPM files in a Tk demo directory ---

/usr/share/doc/tk8.5/examples/images/

on my Linux installation.

Below is an example with a PGM file from another demo directory:

But PPM and PGM files are hard to find these days.

My original intention for this utility was to make base64 data from GIF files.

    (And, if I ever install Tcl-Tk 8.6, verify that it works with PNG files as input.)

Below is an example with a GIF file that I made from an image from Vetter's page 'Rotated Text Font' at wiki.tcl.tk.

I chose this image because it suggests that one could make base64 data from GIF files of rotated alphanumeric characters.

    One could use such rotated characters in various ways --- for example, to label the y-axis in an y-versus-x data plot.

When the GUI first pops up, the canvas area is empty.

After you choose a file (such as the gimp-ball GIF file seen in the following image), the image is displayed on the canvas.

Clicking on the 'GenBASE64data' button results in a popup of the base64 data in a text-file editor (or text-file browser, like the FE 'xpg' file browser with the Show-All-Match-Lines capability) --- depending on what the user chooses to use in the 'wrapper' script for the 'base64' command.

The code for that 'wrapper' shell script is provided below.

You can choose from several commented examples there --- or provide your own favorite --- as a program to display the text file of BASE64 data.

In the image above, the SciTE text editor is being used.


The 'Help' button on the GUI provides pretty complete and detailed help for using the GUI --- including some of the information in the paragraphs above.


DESCRIPTION of the CODE

Below, I provide the Tk script code for this 'BASE64 data generator' utility.

I follow my usual 'canonical' structure for Tk code for this Tk script:



  0) Set general window & widget parms (win-name, win-position,
     win-color-scheme, fonts, widget-geometry-parms, win-size-control,
     text-array-for-labels-etc).

  1a) Define ALL frames (and sub-frames, if any).
  1b) Pack   ALL frames and sub-frames.

  2) Define & pack all widgets in the frames, frame by frame.
              Within each frame, define ALL the widgets.
              Then pack the widgets.

  3) Define keyboard and mouse/touchpad/touch-sensitive-screen action
     BINDINGS, if needed.

  4) Define PROCS, if needed.

  5) Additional GUI initialization (typically with one or more of
     the procs), if needed.


This Tk coding structure is discussed in more detail on the page 'A Canonical Structure for Tk Code --- and variations'.

This structure makes it easy for me to find code sections --- while generating and testing a Tk script, and when looking for code snippets to include in other scripts (code re-use).

I call your attention to step-zero.

One new thing that I have started doing recently is using a text-array for text in labels, buttons, and other widgets in the GUI.

This can make it easier for people to internationalize my scripts.

I will be using a text-array like this in most of my scripts in the future.


Experimenting with the GUI

As in all my scripts that use the 'pack' geometry manager (which is all of my 100-plus scripts, so far), I provide the four main 'pack' parameters --- '-side', '-anchor', '-fill', '-expand' --- on all of the 'pack' commands for the frames and widgets.

That helps me when I am initially testing the behavior of a GUI (the various widgets within it) as I resize the main window.

I think that I have used a nice choice of the 'pack' parameters.

The label and button widgets stay fixed in size and relative-location as the window is re-sized --- the filename entry field x-expands whenever the window is x-expanded --- while the canvas area expands/contracts, both vertically and horizontally, whenever the window is re-sized.

You can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various frames and widgets --- to get the widget behavior that you want.


Additional experimentation:

You might want to change the fonts used for the various GUI widgets.

For example, you could change '-weight' from 'bold' to 'normal' --- or '-slant' from 'roman' to 'italic'.

Or change font families.

In fact, you may NEED to change the font families, because the families I used may not be available on your computer --- and the default font that the 'wish' interpreter chooses may not be very pleasing.

I use variables to set geometry parameters of widgets --- parameters such as border-widths and padding.

And I have included the '-relief' parameter on the definitions of frames and widgets.

Feel free to experiment with those 'appearance' parameters as well.


Some features in the code

That said, here's the code --- with plenty of comments to describe what most of the code-sections are doing.

You can look at the top of the PROCS section of the code to see a list of the procs used in this script, along with brief descriptions of how they are called and what they do.

The procs are :



   'get_img_filename' - called by the 'Browse...' button,
                        to get the filename of an image (GIF,PNG,PGM,PPM) file
                        and 
                        then place the image on the canvas.

   'put_img_on_canvas' - called by proc 'get_img_filename' (and perhaps
                         by some bindings), to place the image on the
                         canvas, for the current filename

  'gen_base64_data'   - called by the 'GenBASE64data' button,
                        to run the 'base64' command on the file and
                        show the text output in a popup GUI (a
                        text-file editor or text-file browser).

  'popup_msgVarWithScroll' - called by the 'Help' button,
                             to show text in variable $HELPtext.


Comments in the Code

It is my hope that the copious comments in the code will help Tcl-Tk coding 'newbies' get started in making GUI's like this.

Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads and iPods --- to watch videos of people sailing into the sides of cliffs, in trucks and on motorcycles and bicycles.


The Tk CODE

Here is a link to CODE for the Tk script
'make_BASE64data_fromTkPhotoIMAGEfile.tk'.


The shell script CODE

You can put the file containing the code of the following shell script in the same directory as the file containing the code of the Tk script above.

Here is a link to CODE for the shell script
'sho_base64_data_from_imgfile.sh'.


Desktop icon

I could make an icon on my desktop for this Tk script --- so that I can quickly choose a GIF (or whatever) image file and make base64 data from it.


SIMILAR UTILITIES :

I do not plan to do much Tcl-Tk programming for games --- because I have too many 'user-friendly useful utilities' (UUU's) that are on my 'to-do' list.

But I plan to make a few more utilities related to BASE64 data and/or 'photo' image files that might be useful to those Tcler's who ARE interested in making games.

A list of those utilities will be accumulating in a 'CGA' (Code for Game develpment Aids) section in my Tk 'to-do' list --- or in the 'CIP' (Code for Interactive image Processing) section in my Tk 'to-do' list.


IN CONCLUSION

As I have said on several other code-donation pages on this site ...

There's a lot to like about a utility that is 'free freedom' --- that is, no-cost and open-source so that you can modify/enhance/fix it without having to wait for someone else to do it for you (which may be never).

A BIG THANK YOU to Ousterhout for starting Tcl-Tk, and a BIG THANK YOU to the Tcl-Tk developers and maintainers who have kept the simply MAH-velous 'wish' interpreter going.

Bottom of this page for
a utility to
Make BASE64 data
from Tk 'photo' image files

(GIF, PGM, PPM, PNG)
--- a utility in the FE 'tkGooies' system,
in the 'GAMEmakingAids' group.

To return to a previously visited web page location, click on the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Top of Page, above. >

Page history:

The code was created in 2013 --- and posted 2013 Aug 21 at http://wiki.tcl.tk/38562 in a page titled 'Make BASE64 data from Tk 'photo' image files (GIF,PGM,PPM,PNG)'.

This FE web page was created 2015 Mar 17 --- as a backup and alternative to the wiki.tcl.tk page.

This page was changed 2015 Oct 07.
(Small changes.)

Page was changed 2019 Feb 27.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jun 22.
(Specified image widths in percents to size the images according to width of the browser window.)