FE 'tkGooie' Utilities

'IMAGEtools' group

using fonts
and images

(FE = Freedom Environment)

The FE Title-Block-making 'tkGooie'

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEtools' Page >

This 'Make Title Block' (with fonts, images) Page


In October 2013, I made a Tk GUI for doing sketches/drawings/paintings --- using an image file as a guide, if necessary. I posted that code at wiki.tcl.tk on a page (number 37120) with the title A 'Sketch On' GUI ... for drawing on an image or colored background.

That Tk script got me 'over-the-hump' in learning how to put objects (in that case, lines and points/dots/dashes) onto a canvas --- and to move them around and delete them --- with really simple 'mouse gestures'.

I then got to thinking about how it would be nice to have a 'drawing' utility that put lines of text on a canvas --- with or without images to enhance the text.

Some of the applications that I had in mind were

  • a title block at the top of a web page

  • a decorative (or message-conveying) image in the body of a web page

  • a decorative (or message-conveying) image to be attached to an email sent to someone

  • an image to convey a design for a T-shirt

  • an image to be used as a title in a movie or slideshow presentation

  • an image to make a greeting/birthday/whatever card

  • etc. etc. etc. (I'm sure you/I will think of more)

I would want to have the option of choosing lots of fonts and lots of colors for the text --- and lots of colors for the background (the canvas).

I realized that I could use the 'Sketch On' Tk script as a starting point, so I went into heavy coding and testing mode for a couple of days and came up with the following GUI.

The GUI actually has a blank canvas when it is first started up. This image demonstrates that one can load a combination of text and multiple images onto the canvas.

The two images are from GIF files. And the image on the right demonstrates that you can use transparent GIF files. The transparency IS recognized.

The 'Help' button of the GUI shows text like the following, which indicates how one can ADD, MOVE, DELETE objects (text-lines or images) on the canvas.

This utility puts 2 types of objects on the canvas:

             text-lines   and/or    images

You put text-lines and images on the canvas the same way:

   - press the Return/Enter key with the text cursor in the
     entry field for a text string or the entry field for
     an image filename (after there is an entry in the
     field, of course)
   - click MB3 (mouse button 3) on the entry field for a
     text string or the entry field for an image filename.

The text-line or image will be placed on the canvas in the upper
left corner of the canvas.  You can DRAG the object where you
want it by pressing MB1 on the object and dragging it
elsewhere on the canvas.

To DELETE an object (text-line or image) from the canvas,
press-and-release MB3 (mouse button 3) on the canvas-object
to be deleted.

You can click and release MB3 on the filename in the entry field,
to (re)LOAD the image from the image file to the canvas. If the
image covers up your text-lines, click on the 'RaiseLines' button
to reveal the text again.

You can use a screen/image capture utility (such as
'gnome-screenshot' on Linux) to capture your 'title block'.

You can 'crop' the image and process it with 'blur' or 'bevel'
or 'gamma correct' or whatever with an image editor (such as
'mtpaint' on Linux).

And you can print the image with an image view-print utility
(such as 'eog' = 'Eye of Gnome' on Linux).

How to change colors is not mentioned in this help, but it should be fairly obvious that those capabilities are available (and how to make the color changes) from the presence of the 'Next Line Color' and 'Background Color' buttons on the GUI.

Those 2 color buttons call on a color-selector-GUI script to set those colors. You can make that color-selector script by cutting-and-pasting the code from the page offering 'a non-obfuscated color selector GUI', on the freedomenv.com site.

Furthermore, the 'Font' button calls on a font-selector-GUI script. You can make that font-selector script by cutting-and-pasting the code from the page offering 'YAFSG - Yet Another Font Selector GUI'. In fact, the code presented below offers a good example of how one can code the call to, and use the output from, that font-selector script.

There are comments at the top of the 'TitleBlock' code below, in a section titled 'USING THE GENERATED IMAGE', that describe how one could make use of images produced by this GUI.


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).

  1a) Define ALL frames and sub-frames.
  1b) Pack   ALL frames and sub-frames.

  2) Define & pack all widgets in the frames.

  3) Define keyboard or mouse action BINDINGS, if needed.

  4) Define PROCS, if needed.

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

This 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).

Experimenting with the GUI code

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

I think I have found a good setting of the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets of this GUI. In particular ...

The 'canvas' widget expands/contracts appropriately when the window size is changed --- and button and label widgets stay fixed in size and relative-location as the window size is changed.

If anyone wants to change the way the GUI configures itself as the main window size is changed, they can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets --- to get the widget behavior that they want.


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.

Features of the code

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

Essentially all of the code involved in manipulating the objects (text-lines and images) on the canvas are in the procs named 'add_text_line', 'add_image', 'object_delete', and 'object_move'.

And the code that demonstrates how to call on the font-selector utility is in the proc 'set_font'.

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 --- especially in the 'delete' and 'move' procs, the code might not look very friendly.

Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads and iPods --- to watch videos of skateboarders breaking and crushing various parts of their anatomy (Schadenfreude).


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


Here is an image that shows that you can put many, many text lines on the image --- with many, many different fonts. And the font on the upper left shows that you can drag a text-line partway off the canvas.

And here is an image that shows that you can combine an image with colored text.

And here is an image that shows how one might want to crop the image from a screen capture --- say, to take it to a screen-printer to have T-shirts made.

If one wanted to print this image, to save on ink, one could make the image with a white background instead of black. Then capture the GUI window with a screen/window capture utility (such as 'gnome-screenshot' on Linux) and, if necessary, crop the image with an image-editor (such as 'mtpaint' on Linux). And, finally, read the cropped image file into an image-file viewer-printer (such as 'eog' = 'Eye of Gnome' on Linux --- or a web browser) to print the image.


In summary, I think Tcler's (and their kids) can have some fun times with this 'Title Block' utility.

But it is not just a 'toy'. It can be used as a 'productivity' tool. And, fortunately for many of us, it doesn't take a lot of skill to make some images that can be used either at work and at home.

Like the 'SketchOn' Tk script, this is a Tk utility that is both simple-to-use and free-to-use. Simple and free. What's not to like? And if there IS something to not like --- the source is available if you want to make changes.

Bottom of this page for
using fonts and images

--- a utility in the FE 'tkGooies' system,
in the 'IMAGEtools' 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 2012 --- and posted 2012 Oct 30 at http://wiki.tcl.tk/37228.

This FE web page was created 2014 May 07 ---
as a backup and alternative to the wiki.tcl.tk page.

Page was changed 2015 Oct 05.
(Small changes.)

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

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

The code here MAY become more 'up-to-date' than the code posted on the Tcler's Wiki ---
wiki.tcl-lang.org --- formerly wiki.tcl.tk.