FE 'tkGooie' Utilities
IMAGEcreators
|
FE 'tkGooie' interface for a maker of color-shaded (2 color) RECTANGULAR BUTTONS --- using 6 spin-boxes 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 >
This
'make_colorGradientRECTANGLE_ 6spinboxes'
tkGooie Page
|
INTRODUCTION to DATE: 2012aug14 On a page for A color-gradient-button-maker GUI (using an 'entry' widget for RGB color selection), 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. That GUI was based on a 'DrawGradient' proc in the wiki.tck.tk page titled 'Drawing Gradients on a Canvas' which uses 'create line' commands on a 'canvas' widget to generate the color gradients --- with either horizontal or vertical lines. I enhanced the code at the 'Drawing Gradients on a Canvas' page to provide a GUI with a Tk '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 on the GUI. I also posted the code for an RGB color selector GUI, in a page titled 'A non-obfuscated color selector GUI'. In that GUI, there are three 'scale' (slider-bar) widgets that correspond to RGB colors. When you use mouse-button-1 to slide any of the sliderbars, a color-swatch (a 'frame' widget) immediately starts changing color, corresponding to the position of the slider in the 'scale' widget. I realized that I could use a technique, like that in the color-selector GUI, to make the color-gradient-image (in a 'canvas' widget on the GUI), change immediately and smoothly as I used a mouse-button action --- rather than keying color value changes into an 'entry' widget and clicking on a 'Draw' button to update the color-gradient in the canvas. However, I also realized that the 'DrawGradient' proc takes about half a second to redraw the color-gradient in the canvas anytime one clicks on the 'Draw' button. So, if I used a mouse-button action to change the RGB colors (for two colors that determine the gradient) and if I connected the mouse action directly to ANY change of one of the 6 RGB values, I probably would get a rather 'jumpy' re-drawing of the color-gradient canvas as any one of the 6 RGB values rapidly changed from one value to another. But, I also 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 --- with the mouse instead of with the keyboard --- i.e. instead of changing values in an entry widget and then clicking a 'Draw' button (or pressing the Enter key). In other words, I could experiment quickly with redrawing the color gradient by using mouse-only --- instead of keyboard-and-mouse or keyboard-and-Enter-key. I thought of using 'scale' widgets --- like on the RGB color-selector GUI, but 6 instead of 3 --- in place of the 'entry' widget on the color-gradient-maker GUI. But that would take a lot of space on the GUI. So I decided to try 6 spinboxes instead. And here is an image of the resulting GUI. |
|
I present the code for making this GUI below. It turns out that this spinboxes-implementation is a LITTLE faster for experimenting with color changes than using an 'entry' widget. BUT it is rather slow to change a color by holding down a mouse-button on a Tk 'spinbox'. To make a BIG color change to one of the six RGB colors (for example, going from 100 to 200 in the 0-to-255 range), it is less frustrating to use the keyboard to enter the big change --- and then use the mouse on a spinbox button to do some 'fine-tuning'. So I found that, even though it was going to make the color-gradient-maker GUI a lot larger, I needed to try making a GUI using 6 'scale' widgets instead of 6 'spinbox' widgets. I present the code for the 'scale' implementation (along with a screenshot) on a separate 'A color-gradient-button-maker GUI with 6 scale widgets' page. DESCRIPTION OF THE CODE Below is the code for the '6 spinboxes' implementation of the color-gradient-button-maker GUI. Like with the 'entry widget' 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. 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. And if you want to see what will happen if you try letting the color-gradient-canvas be redrawn as the spinbox numbers rapidly rotate from one value to another, you can try activating the '-command' statements that appear as comment lines at each of the 6 'spinbox' definition statements in the code below. 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." Ousterhout set off a perpetual (Tclers-doing-coding) motion machine. 2012nov18 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:
Replaced the code above with the tested script containing these changes. |
|
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 Aug 14 at http://wiki.tcl.tk/36792 in a page titled 'A color-gradient-button-maker GUI with 6 spinboxes'.
This FE web page was created 2015 Mar 17 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |