FE 'tkGooie' Utilities
'TkGUIs EMBELLISHED demos'
|
A 'demo' GUI interface that uses most of the Tk widget types --- 'button', 'label', 'scale', 'radiobutton', 'checkbutton', 'canvas', 'text'. |
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 In 2012 November, I devised a Tk script to experiment with making embellished Tk GUI's, using images and colors. I presented images and code for a demo Tk script that shows a way of creating 'themes' (composed of images and colors) for the various widgets on a Tk GUI. I pointed out a couple of issues/looks that I would like to improve:
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 putting an image 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. DESCRIPTION OF THE CODE I present the code for the 'demo_tkGUI_themes_ using_ imagesANDcolors_ VER2.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 VER2 script points 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,
text-array-for-labels-etc).
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. 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). The CODE 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 (label, button, radiobutton, checkbutton). 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 is too inflexible. I keeps us from aligning text to the left (or right) --- when it would improve the look of lines of text on the GUI.
CROPPING for 'button' widget vs. its cousins --- 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, and 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.
SOME POSSIBLE ENHANCEMENTS There is still one thing that stands out to me as an area where the GUI 'look' could be improved:
--- 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
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. CONCLUSION 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 --- even on Linux --- the software developers' step-child, it seems. |
|
Bottom of this page for
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.
< 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.
NOTE: |