FE 'tkGooie' Utilities

'Flat' group

Make a

using 6 'scale' widgets
for RGB color selection

(FE = Freedom Environment)

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

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

'make_colorGradientRECTANGLE_ 6scales'
tkGooie Page

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

POSTED: 2012aug14

On the page A color-gradient-button-maker GUI (with an 'entry' widget) and the page A color-gradient-button-maker GUI with 6 spinboxes, 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 changing of the 6 RGB colors involved cannot be performed as quickly as I would like --- in using either the entry-widget method or the 6-spinboxes method to provide for changing the 6 RGB values for the 2 colors.

I should be able to experiment with color parameter changes much more rapidly if I use 6 'scale' widgets, instead of 6 'spinbox' widgets.

The main drawback is that the GUI will have to be larger, to accomodate 6 'scale' widgets, instead of 6 'spinbox' widgets.

Here is an image of a resulting 6-scales GUI.

The 6-scales GUI takes a LOT more screen space than the 6-spinbox GUI. (See an image of the 6-spinbox GUI on the A color-gradient-button-maker GUI with 6 spinboxes page.)

But the speed of changing a color to do a re-draw of the gradient is greatly improved.

There is a lot better 'feel' to the 6-scale GUI as one experiments with color changes.

I present the code for the 6-scale GUI below.

Draw speed:

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 change in one of the 6 RGB values, as a slider is moved with the mouse.

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.

However, if you want to see what will happen if you try letting the color-gradient-canvas be redrawn as the scale sliders are rapidly moved from one position to another, you can try activating the '-command' statements that appear as comment lines at each of the 6 'scale' definition statements in the code below.

Color change speed:

Unlike the 6-spinbox implementation, I can rapidly make BIG changes in any of the 6 RGB colors --- by quick drags of the mouse, rather than watching a spinbox relatively slowly roll from one color setting to a quite different setting.

And moving a slider is a lot faster than changing an entry in a spinbox with the keyboard.

So now I can experiment quickly with redrawing the color gradient by using mouse-only.

The color changes can be performed quickly even for a big color change in any of the 6 RGB values.

To do BIG color changes relatively rapidly with the entry-widget or 6-spinboxes implementation of the GUI, I needed to use the keyboard --- either keyboard-and-mouse or keyboard-and-Enter-key.

The 6-scales take a lot of space on the GUI, but I could use a 'scale' size parameter ('-width') to reduce the height of the horizontal scales somewhat.

(I leave that as an exercise for the reader.)


Below is the code for the '6 scales' implementation of the color-gradient-BACKGROUND-maker GUI.

Like with the 'entry widget' version and the '6-spinboxes' version, 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.

The Tcl-Tk CODE

Here is a link to CODE for the Tk script

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

    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) my attempts to make a better color-gradient-RECTANGLE-maker GUI.

2012nov19 UPDATE :

I was just going through some of my old scripts making a few changes based on experiences gained over the past few months.

Changes to this script:

  • Added braces to 9 'expr' statements.
    (Trying to reduce the draw time some.
    It might be feasible to use the '-command' option on the scale widgets, instead of the button1-release bindings.)

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

Replaced the code above with the tested script containing these changes.

Bottom of this page for
presenting Tcl-Tk code to
Make a Color-Gradient RECTANGLE
(with 6 'scale' RGB-color-selector 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 Aug 14 at http://wiki.tcl.tk/36793 in a page titled 'A color-gradient-button-maker GUI with 6 scale widgets'.

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

Page was changed 2015 Oct 07.

Page was changed 2019 Mar 02.
(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.