FE 'tkGooie' Utilities

'Flat' group

Make a

using 6 'miniscale' widgets
for RGB color selection

(FE = Freedom Environment)

FE 'tkGooie' interface for a
maker of color-gradient (2 color)
using 6 'miniscale' widgets for
specifying 2 RGB colors (6 numbers)
and 2 radiobuttons for
specifying gradient direction
(x or y)

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

tkGooie Page

Tcl-Tk Code for a GUI to
'Make a Color-Gradient RECTANGLE
(using 6 'miniscale' widgets
for RGB color selection)'

on wiki.tcl.tk (the Tcler's Wiki)

On pages titled

I presented code that can be used to make small or large rectangular image files (like GIF or PNG files) that contain a color gradient, given 2 colors.

Those GUI's are based on a 'DrawGradient' proc in the wiki.tck.tk page titled 'Drawing Gradients on a Canvas'. That proc uses 'create line' commands on a 'canvas' widget to generate the color gradients --- using either horizontal or vertical lines.

As I pointed out on the 'A color-gradient-button-maker GUI with 6 spinboxes' page, the user cannot change the RGB color values, for re-drawing of the color-gradient, as quickly as I would like --- when using either the entry-widget method or the 6-spinboxes method to provide for changing the 6 RGB values for the 2 colors.

As I pointed out that page, I should be able to experiment with color parameter changes much more rapidly if I use 6 'scale' widgets, instead of 6 'spinbox' widgets --- and I made a 6-scales GUI, as seen on the 'A color-gradient-button-maker GUI with 6 scale widgets' page.

The main drawback is that the GUI has to be quite a bit larger, to accomodate 6 'scale' widgets, instead of 6 'spinbox' widgets.

Well after getting some experience with making a 'minilistbox' widget for the GUI on the 'A two-color rounded-POLYGON-maker GUI (equilateral and not so equilateral)' page, I figured I should be able to make a 'miniscale' widget that takes less space than the typical 'scale' widget.

Here is an image of the resulting 6-miniscales GUI.

The 6-miniscales GUI takes less screen space than the 6-scales GUI. (See an image of the 6-scales GUI on the 'A color-gradient-button-maker GUI with 6 scale widgets' page.)

I have used some space on this GUI with a label that explains how to use the Ctrl and Shift keys to speed up the change of the numbers in the 'miniscale' widgets.

But I could add a 'ToggleHelp' button to the GUI (beside the Exit button).

Clicking on the 'ToggleHelp' button would show/hide a scrollable-text-frame to show the info on using the 'miniscale' widget.

I present the code for the 6-miniscale GUI below. But first ...

Speed-of-gradient-drawing considerations:

Since the 'DrawGradient' proc takes about half a second to redraw the color-gradient in the canvas, I probably would get a rather 'jumpy' re-drawing of the color-gradient canvas if I tried 'binding' the redraw to ANY small change in one of the 6 RGB values, as a 'miniscale' widget is used to change an RGB value.

Like with the 6-spinbox implementation, I realized that if I triggered the re-draw on a mouse-button RELEASE, I could get a pretty pleasing color change on the GUI --- while allowing me to quickly change any of the 6 RGB color values.

Speed of changing color-specifications:

Unlike the 6-spinbox implementation, I can rapidly make BIG changes in any of the 6 RGB colors --- by using the Ctrl and Shift keys with mouse-button-1 on the 'miniscale' '+' and '-' button widgets.

This seems much more satisfying than watching a 'spinbox' widget relatively slowly roll numbers from one color setting to a quite different setting.

Furthermore, using the Shift key with mouse-button-1 pressed on the plus or minus buttons of the 'miniscale' widget is faster than changing an entry in a 'spinbox' with the keyboard.

So now I can experiment quickly with redrawing the color gradient by mouse-button press-and-hold and mouse-button release (rather than keying numbers in an entry field).

The change-any-color-component-and-redraw operation can be done within a second or two, even for a big color change in any of the 6 RGB values.

Furthermore, the 6-'miniscales' take less space on the GUI than 6 'scale' widgets.

Structure of the code :

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 frames and sub-frames.

  2) Define all widgets in the frames, frame by frame.
     When the widgets for a frame are defined, pack them in the 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 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.

To make the 'miniscale' widget to be used in step (2), I essentially inserted a new step:

  1c) Define any procs to be used in making widgets.

You will find a 'miniscale' proc in that section (area) of the code.

Experimenting with the code for the GUI :

Like with the 'entry widget' version and the '6-spinboxes' version and the '6-scales' version of this utility, I have put the four main 'pack' parameters --- '-side', '-anchor', '-fill', '-expand' --- on the 'pack' command for the various frames and widgets.

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

Furthermore, you can experiment with different font families, font weights, widget geometry (padding, borderwidth), widget and frame relief (raised, flat, ...).

Tailor the GUI to your liking.

And if you want to see what will happen if you try letting the color-gradient-canvas be redrawn as any of the 'miniscale' widgets is rapidly changing the numbers in its variable, you can enhance the 'miniscale' proc to take a proc as an argument --- so that a redraw proc can be passed to each call to the 'miniscale' proc (which defines each 'miniscale' widget).

Note that there are <ButtonPress-1> bindings within the 'miniscale' proc (for the '+' and '-' buttons) --- and there are <ButtonRelease-1> bindings in the BINDINGS section of this code, for those same buttons. Note the difference:

The <ButtonPress-1> bindings increment/decrement the numbers (more or less rapidly). The <ButtonRelease-1> bindings call on the 'DrawGradient' proc.

The Tcl-Tk CODE

Here is a link to CODE for the Tk script

In Conclusion :

Like I said at the bottom of the page A color-gradient-button-maker GUI (using an 'entry' widget) :

    Make one enhancement to a Tk script and it leads to other enhancements or completely new scripts. It never ends.

But, hopefully, this ends (at least for a few months --- or weeks?) my attempts to make a better color-gradient-maker GUI.

Thanks to Richard Suchenwirth for his 'spinner' widget demo on the 'spinbox' page at wiki.tcl.tk.

That example led me to make a similar 'minilistbox' widget --- and then to making this 'miniscale' widget --- using widgets ('label' and 'button') that have existed since Tcl-Tk 7.x.

Hence the 'miniscale' widget should work for people with old versions of the 'wish' interpreter.

2012nov19 UPDATE :

I have been going through some of my old Tcl-Tk scripts making a few changes based on experiences gained over the past few months.

Changes to this script:

  • Added braces to 9 'expr' statements.
    (This is to reduce the draw time some.
    It might be feasible to use a '-command'-like option on the 'miniscale' widgets, instead of the button1-release bindings --- for immediate redraws as the numbers on a miniscale widget change.)

  • Provided more consistent indenting of the code.
    (Removed some whitespace from the front of many lines.)

  • Touched up the comments to match the final code.

  • Added a text-array for text in labels,buttons,etc. ---
    to facilitate 'internationalization' of the GUI.

  • Improved calculation of 'minsize' of window.

  • Moved canvas from top of GUI to bottom.

I replaced the code above with the tested script containing these changes.

Bottom of this page for
presenting Tcl-Tk code for a GUI to
Make a Color-Gradient RECTANGLE
(with 6 'miniscale' widgets)

--- a utility in the FE 'tkGooies' system,
in the 'IMAGEcreatorsFlat' 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 Sep 06 at http://wiki.tcl.tk/36922 in a page titled "A color-gradient-button-maker GUI with 6 'miniscale' widgets".

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 Mar 03.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)

Page was changed 2019 Jun 14.
(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.