FE 'tkGooie' Utilities

Flat group

Make a

using an
'entry' widget
for 7 parameters

(FE = Freedom Environment)

FE 'tkGooie' interface for a
maker of shaded (two-color)
using 7 parameters
entered in an
'entry' widget
for 2 RGB colors (6 parms)
and gradient direction
(x or y).

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

'make_colorGradientRECTANGLE_ entryField7parms'
tkGooie Page

Tcl-Tk Code for a GUI to
'Make a Color-Gradient RECTANGLE
(using an 'entry' widget for 7 parameters)'

DATE: 2012aug04

In 2012, I tried out the code at the wiki.tck.tk page titled 'Drawing Gradients on a Canvas' and was surprised at how fast it fills large rectangular canvas areas with a color gradient.

Here is an image (reduced from original size) from one of the two very similar Tk scripts on that page.

Apparently the trick to get the 'quick draw' is to use 'create line' --- i.e. make horizontal or vertical lines, rather than placing a colored pixel at each x,y location.

This drawing-gradients demo ties in with my wish to make nice backgrounds for buttons in application or utility 'toolchests', as indicated at my request to "Implement '-anchor' (something similar) for compound text on image" at the 'Tk 9.0 WishList' page.

You can see from the GUI image above that the Tk scripts on the page 'Drawing Gradients on a Canvas' make a nice 'demo script' but they are definitely not an 'end-user utility' --- unless you expect 'end-users' to edit Tk scripts to change the colors.

Furthermore, I just need to capture one such background at a time. It is not typical that I would want both a horizontal gradient and a vertical gradient at the same time.

Besides, the 2nd image takes a lot of room on the canvas that I might want for the 1st image.

So ...

I have enhanced the code at 'Drawing Gradients on a Canvas' to provide a GUI with an entry widget to enter 7 parameters of the form 'x/y r1 g1 b1 r2 g2 b2' --- along with a 'Draw' button --- to draw the specified gradient into the canvas widget.

Like in the original demo scripts, you can adjust the size of the color-gradient image by changing the size of the window --- including maximizing the size of the window to screen size.

Here is a sample image:

Note: I changed the draw-gradient proc at 'Drawing Gradients on a Canvas' to use RGB values (in decimal form), rather than color names --- so that a much wider range of color choices is available.

Now I can quickly make color-gradient 'button-image files' by doing screen/window captures of this GUI --- with a screenshot utility, like 'gnome-screenshot' on Linux.

Below is the code for this 'gradient-button-maker' GUI. It includes plenty of comments to explain the GUI.

One thing to note is that I have put the four main pack parameters --- '-side', '-anchor', '-fill', '-expand' --- on the pack command for the various frames and widgets.

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

Alternatively, Tcler's can activate the commented statement

wm resizeable . 0 0

to make the canvas a fixed size and avoid any confusion that might be caused by allowing the window to be resized.

The Tcl-Tk CODE

Here is a link to CODE for the Tk script

Now I have a tool to make nice color-gradient buttons for my Freedom Environment toolchests (at www.freedomenv.com) --- in future releases.

I may try using some of the ideas in the wiki.tcl.tk 'Functional imaging' page (thanks, Suchenwirth, for your many contributions) to make more complex color gradients than simple x-direction or y-direction gradients.

But it will take a careful weeding out of the many functions presented there, to find functions that provide nice backgrounds for toolchest buttons (nice subtle gradients that do not distract from the text on the 'toolchest drawer' buttons).

For now, I can use the ImageMagick commands 'convert' and 'composite' (as in the 'IMAGEtools' scripts of the 'feNautilusScripts' subsystem of the Freedom Environment software) to combine x and y gradient buttons (and other buttons) to make some additional types of gradient buttons.

2012aug13 UPDATE:
After using this GUI based on an 'entry' widget, I have found that it might be easier/faster to enter the 6 RGB values via a 'spinbox' or a 'scale' widget.

So I have added a couple of new pages on wiki.tcl.tk titled 'A color-gradient-button-maker GUI with 6 spinboxes' and 'A color-gradient-button-maker GUI with 6 scale widgets'.

Make one enhancement to a Tk script and it leads to other enhancements or ideas for completely new scripts.

It never ends. Darn you, Ousterhout, for starting all this. :-)

2012nov18 UPDATE :

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.

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

  • Added 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 with
Tcl-Tk Code for a GUI to
Make a Color-Gradient RECTANGLE
(with an 'entry' widget for 7 parameters)

--- 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 04 at page http://wiki.tcl.tk/36749 titled 'A color-gradient-button-maker GUI'.

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

This page was changed slightly 2015 Oct 07.
(Small changes.)

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