FE 'tkGooie' Utilities

'TkGUIsEMBELLISHEDdemos' group

Make Embellished
Tk Widgets
(Version 2)

(demo Tk script)

(FE = Freedom Environment)

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'TkGUIsEMBELLISHEDdemos' Page >

This 'Make Embellished Tk-GUI Widgets' (version 2) demo Page

INTRODUCTION to a demo Tk script that
creates a Tk GUI with embellished widgets (version2)

In 2012 November, on a page titled "Experiments with flexible THEMES for Tk GUI's, using images and colors" at wiki.tcl.tk, I presented images and code for a demo Tk script that shows a way of creating 'themes' (composed of images and colors) for Tk GUI's.

I pointed out a couple of issues/looks that I would like to improve:

  • on the label to the left of the 'scale' widget

  • on radiobuttons and checkbuttons

Here is one of the demo images for reference.

More specifically:

For the label to the left of the 'scale' widget, I wanted to find a 'fill-y' technique of some sort --- to make the label (that is, its underlying image) expand in the y-direction --- in order to cover some of the plain-color area, above and below the label, with a shaded image that matches the 'theme'.

And for the radiobuttons and checkbuttons, it would be nice if we could get the image under the text to extend under the 'indicators' --- the 'radiobutton-circles' and the 'checkbutton-square'.


Well, after quite a bit of frustrating coding and testing and re-coding, I found a 'technique' for the former and a 'work-around' for the latter --- and here is an image showing the result.

You can compare this image with the one above.

Perhaps there are many who would not agree, but I think the 2nd image is a pretty good improvement over the first one.


The 'technique' - for the label to the left of the scale :

The 'trick' to getting the image to expand in the y-direction under the label for the scale was to double the height in the '-height' parameter for that image and, at the same time, use a '-zoom 2' parameter. That proved to be a pretty simple solution.


The 'workaround' for the radio/check-button 'indicators' :

Getting the image under the text on the radio/check-button to 'extend' under the 'indicators' proved to be a much thornier problem.

To make a long story relatively short, the '-compound center' option was the problem. It is the only way we have to put an image on the background of radio/check-buttons, BUT it always wants to CENTER the text on the image. There is no way to adjust the position of the text on the image.

So I was forced to a workaround: implement each radio/check-button as TWO widgets --- a radio/check-button and a label --- with appropriate padding in packing the widgets, and with use of the '-highlightthickenss 0' option to get them to fit together seamlessly.


I present the code for the 'demo_tkGUI_themes_ using_ imagesANDcolors_ VERSION2.tk' GUI-script below --- version 2 of a Tk 'themes' demo. Here is a link to Version 1 (my first attempt), on this FE web site.

The comments at the top of the script point out that this is a GUI to demonstrate the ability to provide 'themes' for a Tk GUI --- in a quite flexible, almost-anything-is-possible way --- using a combination of images and colors.

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, if any).
  1b) Pack   ALL framesand sub-frames.

  2) Define & pack all widgets in the frames, frame by frame.

  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 makes it easy for me to find code sections --- while generating and testing this script, and when looking for code snippets to include in other scripts (code re-use).

As I pointed out on the version 1 page, one new thing that I have added is the text-array-for-labels-etc item in section 0. This can make it easier for people to internationalize my scripts. I may 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.

I think I have found a pretty 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' and 'text' widgets expand/contract when the window size is changed --- while button and label widgets stay fixed in size and relative-location as the window size is changed.

But Tcler's can experiment with the 'pack' parameters, if they want to change the behavior of the GUI when window size is changed.


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.

Features of the code

There are plenty of comments in the code, to describe what most of the code-sections are doing.

The logic of the script gets rather 'interesting' as this is a GUI that is intended to change its own appearance. I have provided plenty of comments to help readers understand the structure and intent of various code sections. In particular, the comments are to help ME understand what I did, when I look at this in the future to get code-ideas for making enhanced Tk GUI's.

A major part of the code that is involved in setting a 'theme', according to the radiobuttons setting, is in the proc 'change_theme'.

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, the code might look quite unfriendly.

Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads and iPods --- to watch LFHV (Lapland's Funniest Home Videos).


Here is a link to CODE for the script
'demo_tkGUI_themes_ using_ imagesANDcolors_ VER2.tk'.

Cropping Button Images

I provided this discussion on the version 1 demo-Tk-theme-ing page, but it is worth repeating here, for your/my convenience.

To provide the image background for the label widgets and 3 types of button widgets, I use long buttons (more than 400 pixels wide and about 24 to 28 pixels high) --- and crop the 'base' images to a length suitable to hold the text on the widgets.

We use the '-image' and '-compound' options to put text-on-image on these 4 types of widgets. Unfortunately, only the '-compound center' option is available to put an image under the text. This option does not allow us to position the text on the image in any other location than the center. This proves to create some problems, which are briefly described in the introduction above.

'button' widget vs. its cousins ---
'label', 'radiobutton', 'checkbutton'

I found a rather surprising difference in the 'cropping' capability of the 'button' widget in comparison to its cousins --- the 'label', 'radiobutton', and 'checkbutton' widgets.

I could provide the long 400-plus-pixel image filename in the '-image' option of 'button' and simply crop the image by using the '-width' parameter of button.

However, for the label, radiobutton, and checkbutton widgets, the '-width' parameter would not perform the 'crop'. I had to use 'image create' to create new 'image structures', for each widget, to which I could apply a '-width' parameter --- to get an image to use in the '-image' option of the label/radiobutton/checkbutton widgets.

I suppose that the Tk developers did not notice this difference because they have probably used the '-compound center' (text-ON-image) option in a very small number of 'use-cases'.

Anyway, I am pleased to report that I was able to find a work-around.

Enhancements to improve the look

There is still one thing that stands out to me as an area where the GUI 'look' could be improved:

  • There seems to be no way to put an image-background behind the 'scale' widget (a TIP item for Tk 9.0?) --- for example, above the 'trough', where the scale numbers are displayed.


In regard to the lack of an image behind the 'scale' widget:

There is a possible work-around. One could make a scale-like widget from a frame widget containing a label widget and 2 button widgets (like Suchenwirth's 'spinner' widget that he published on the page titled "spinbox" at wiki.tcl.tk, or like my 'miniscale' widget that I published on the page titled "A color-gradient-button-maker GUI with 6 'miniscale' widgets" at wiki.tcl.tk). Then one could use the -image' option of the 'label' and 'button' widgets.

It's not ideal --- but at least, for those who find the 'scale-without-an-image-background' ugly, there is an opportunity to reduce the ugliness.

I may try that technique, in a version 3 of this script, to see if I can improve the look of the GUI in the area of the scale widget.


In summary, I think I have found a set of 'techniques' and 'work-arounds' that may allow me to contruct some pretty good-looking 'themed' Tk GUI's --- on Linux even, the software developers' step-child, it seems.

Bottom of this page for
Making Tk GUIs with
Embellished Tk Widgets (Version 2)
--- a demo Tk script in the FE 'tkGooies' system,
in the 'TkGUIsEMBELLISHEDdemos' 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 Nov 08 at http://wiki.tcl.tk/37257.

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

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

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

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