FE 'tkGooie' Utilities
IMAGEcreators
|
FE 'tkGooie' interface for a maker of Color-Gradient DISKS with an off-center high-light --- with choice of 3 colors for fill, high-light, and background |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEcreatorsFlat' Page >
This
'make_colorGradientDISK'
tkGooie Page
|
INTRODUCTION to I am interested in making nice images for 'toolchest' and 'drawer' backgrounds, as I have indicated on pages about and
These two pages were originally published in 2012 on pages titled and at wiki.tcl.tk/36780 and wiki.tcl.tk/36749. In doing some searches on wiki.tcl.tk with keywords including 'canvas', I ran across the page titled 'Gradient Spheres', by Keith Vetter. I assembled the code from that page and ran it --- yielding the GUI shown in the following image. |
|
It struck me that I might find some use for such images in the future --- for unusual 'bullet' images and icon backgrounds --- for use in Tk GUI's or in web pages. But there is obviously little control on the GUI --- just a 'Random Colors' button. GOALS for an enhanced GUI Color control: I will probably not need 6 spheres at a time --- one sphere/disc will usually be sufficient. But I would like to be able to control the colors. There are 3 involved here --- the color of the 'sphere', the color of the light for the simulated lighting highlight, and the background (canvas) color. By the way, Vetter draws the 'sphere' with a sequence of non-concentric circles. Their centers migrate across the interior of the disc. The word 'gradient' comes into play because he draws the circles with colors that gradiate from a given 'disk' color to a given 'lighting' color. Location of 'hi-lite' control: Vetter imagined the lighting being applied at a location within a bounding box whose 2 dimensions go from -1 to +1. He assigned a fixed lighting location of -0.4,-0.4. I noted that it would not be hard to allow that location to be changed. But we do not really need fine-grained control on the location of the 'hi-lite'. It would be enough to locate it via the points of the compass --- nw, n, ne, e, se, s, sw, w, and center. Radius control: Furthermore, on looking at his code it became clear that it would be easy to make the radius of the disk controllable by a 'scale' widget on the GUI. Aspect control (circle/ellipse) :
One more thing: See the wiki.tcl.tk page titled "A two-color rounded-POLYGON-maker GUI (equilateral and not so equilateral)". I figured that I should be able to put a circle (rather than ellipse) checkbox on the GUI. SCREENSHOT of the enhanced GUI Having those goals in mind, I ended up with a GUI that looks like the following. |
|
Note that I have supplied 3 buttons on the GUI with which to set the 2 gradient colors and the 'background' (canvas) color. Those 3 buttons call on a color-selector-GUI script to set those colors. You can make that color-selector script by cutting-and-pasting the code from the page that offers a non-obfuscated color selector GUI on this site. 'minilistbox' widget I used a 'minilistbox' widget to provide the choice of compass points, for location of the lighting high-light. I have used that 'minilistbox' widget in the script posted at the wiki.tcl.tk page titled "A two-color rounded-POLYGON-maker GUI (equilateral and not so equilateral)". As I mentioned on that page, I got the technique for making a new widget from existing, built-in Tk widgets from the 'spinner' widget of Richard Suchenwirth that he presented on the wiki.tcl.tk page titled "spinbox". As he described it, the 'spinner' is "a concoction of a 1-line high listbox with two tiny buttons, to approximate the effects of a spinbox.". My 'minlistbox' widget is more like a 3-line listbox, and I needed to enhance Suchenwirth's demo code with font variables and width variables and other parameters. As I mentioned on the page titled "A two-color rounded-POLYGON-maker GUI (equilateral and not so equilateral)", I may extract the 'minilistbox' code someday and put it in a simpler demo script, like Suchenwirth did with his 'spinner' proc. For now, people who want to use this 'minilistbox' --- or make a similar widget --- can extract the proc and the calling code from this much larger script. DESCRIPTION OF THE CODE Below is the code that produced this GUI. There are comments above the sample code, in a section titled 'USING THE GENERATED IMAGE', that describe how one could capture and make use of images produced by this GUI. I used 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).
1b) Pack ALL the frames.
2) Define & pack all widgets in the frames.
3) Define keyboard or mouse 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. To make the 'minilistbox' widget to be used in section-2 of the code, I essentially inserted a new step: |
1c) Define any procs to be used in making widgets.
|
Experimenting with the GUI As in all my scripts that use the 'pack' geometry manager (which is all of my scripts, so far), I provide the four main 'pack' parameters --- '-side', '-anchor', '-fill', and '-expand' --- on all the 'pack' commands for the frames and widgets. I think I have found a good setting of the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets. In particular ... The 'canvas' widget expands/contracts appropriately when the window size is changed --- and button and label widgets stay fixed in size and relative-location as the window size is changed. If anyone wants to change the way the GUI configures itself as the main window size is changed, they can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various widgets --- to get the widget behavior that they want. ---
Additional GUI experimentation: 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. Some features of the code There are plenty of comments in the code, to describe what most of the code-sections are doing. I have used Vetter's 'GradientSphere' and 'Gradient' procs with essentially no change. I have provided a 'ReDraw' proc that calls 'GradientSphere' after setting up the lighting-location parameter (in the -1 to +1 square) from the user-specified compass point. Comments in the Code The copious comments might help Tcl-Tk coding 'newbies' get started in making GUI's like this. Without the comments, the code might look too cryptic, and potential young Tcler's might be tempted to return to Twitter on their iPads. The Tcl-Tk CODE Here is a link to CODE for the script 'make_gradient_disk_given2colors_onColorBkgnd.tk'. Another screenshot Here is an image that shows how one can get a 'squashed' 'sphere' by un-checking the 'Circle (not ellipse)' checkbox. |
|
It appears that one could make some interesting 'bullet' and icon-background images with this utility. To quote Vetter, from his 'Gradient Spheres' page: "For a game I'm writing, I needed sphere-shaped playing pieces. I grabbed some images off the web but I had trouble when I made the background transparent --- the edges just looked horrible. So I decided to create my own. It draws a series of shrinking circles, each slightly offset from the previous and with colors from a gradient. The result looks (sort of) like a sphere with an offset light source." I too have had problems finding sphere-like images which are usable after their solid-color background is made transparent --- because the edge of the 'sphere' turns out to be a blend of an original (unwanted) background color and the spherical image color(s). With the Tk script on this page, I have more control over how the boundary of the disk and the background is made --- in particular, control over their colors. IN CONCLUSION Now I have ANOTHER tool with which to make some images (bullets or icon backgrounds or whatever) for use in decorating Tk GUI's --- and decorating web pages. Thanks to Keith Vetter (KPV) for his many contributions to the wiki.tcl.tk site. In particular, his 'GradientSphere' and 'Gradient' procs allowed me to spend most of my time on coding and testing the GUI features and relatively little time on the mathematical implementation. |
|
Bottom of this page with
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 Sep 06 at http://wiki.tcl.tk/36920.
This FE web page was created 2014 May 15 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |