FE 'tkGooie' Utilities
IMAGEcreators
|
FE 'tkGooie' interface for a maker of a large, color-shaded OVAL --- with color1 gradiated from a user-selected point to color2 at the outer edge of the oval |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEcreatorsFlat' Page >
This 'draw_colorGradientOVAL_ tween2colors_ fromSelectedPoint' Page
|
INTRODUCTION to In late 2012, I made several alternate Tk GUI's for drawing color gradients across a Tk canvas --- like this one --- using the Tk canvas 'create line' command. Those GUI's used either vertical or horizontal lines of a color gradiating between two user-selectable colors. This kind of Tk canvas GUI is useful for making BIBB's --- buttons, icons, backgrounds, and bullets. In particular, I was interested in having a utility to make nice looking backgrounds for Tk buttons or 'toolchests'. I had it on my 'to-do' list for many months in 2012 to make a similar utility (or two or three) that allowed for using 'curvalicious' lines for making the color-gradient image. I decided recently to try making such a utility --- using 'create oval', instead of 'create line' --- to make a family of (large) color-gradiating ovals, instead of a family of color-gradiating straight lines. And I wanted to give the user the ability to quickly choose the 'center point' for the family of ovals. And, of course, I wanted to give the user the ability to choose the colors (from a palette of 16-million-plus colors). And, since we are dealing with ovals, I needed to provide a means of choosing the shape of the ovals, so I put a 'scale' widget on the GUI --- by which the user can choose an 'aspect ratio' for the ovals. After several iterations of minor changes to the widgets on the GUI (and the procs being used), I ended up with the GUI seen in the following image. |
|
This an image of the GUI as it first pops up --- showing that the two gradient colors are defaulted to white and blue --- and that the 'aspect ratio' of the ovals is initialized to 2.0. The sequence of ovals is intended to yield a nicely color shaded image, with a highlight in ANY portion of the image. EXTENT OF THE OVALS and DRAW TIMES: The ovals are drawn until they just about fill the canvas, but one or more corners of the canvas is typically left at the background color, which is defaulted to black. One reason for not drawing enough ovals to fill all the corners is to assure that we are not drawing more ovals than necessary. Another reason is to help indicate whether the ovals are being drawn with the aspect ratio that was specified. You can use the 'BackgroundColor' button to set the background to the same color as the 'OuterColor' button. This will generally fill in the entire canvas nicely with 'smooth' coloring --- as seen in an example image below. The typical draw time for these shaded-oval images in a window of maximum size on a netbook computer (about 1024x600 pixels), with an Intel Atom N450 CPU, is about 2/10 of a second. Since the highest end Intel CPU's are about 10 times faster than the Atom processor, the images may be completely drawn in far less than 0.1 of a second on a high-end desktop or laptop computer. CHANGING GRADIENT COLOR(s) and CENTER POINT: After choosing a color via either the 'CenterColor' or the 'OuterColor' button (OR after a button1-release event on the canvas, to change the 'center point'), this script will automatically do a redraw. Below is an image to show a redraw after clicking on the upper left corner of the canvas: |
|
And here is an image to show a redraw after using the 'BackgroundColor' button to change the canvas background from black to the same color as the color showing in the 'OuterColor' button: |
|
USES OF THE 'DRAW' BUTTON: The 'scale' widget on the GUI can be used to set the 'aspect ratio' to be used to redraw the ovals. After setting a new aspect ratio, the user can click on the 'Draw' button to cause a redraw. An aspect ratio of 1.0 causes the ovals to be circular. The canvas can be re-sized by re-sizing the window. The 'Draw' button can be used after a window re-size, to cause a re-draw that fills the new canvas size. CAPTURING THE GENERATED IMAGE: A screen/window capture utility (like 'gnome-screenshot' on Linux) can be used to capture the GUI image in a PNG or GIF file, say. If necessary, an image editor (like 'mtpaint' on Linux) can be used to crop the window capture image. The image could also be down-sized --- say to make a 'bullet' image file or an icon image file. That is how I captured (and re-sized) the images shown above. USES FOR THE IMAGES: The resulting color-gradient-ovals image can be used for
Text or images or drawings could be superimposed on the color-gradient image by using one of this author's other Tk GUI utilities, such as
The 'Help' button on the GUI provides pretty complete and detailed help for using the GUI --- mostly the information of the paragraphs above. DESCRIPTION OF THE CODE Below, I provide the Tk script code for this 'color-gradient-ovals' utility. 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,
text-array-for-labels-etc).
1a) Define ALL frames (and sub-frames, if any).
1b) Pack ALL frames and sub-frames.
2) Define & pack all widgets in the frames, frame by frame.
Within each frame, define ALL the widgets.
Then pack the widgets.
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 Tk coding structure is discussed in more detail on the page A Canonical Structure for Tk Code --- and variations. This structure makes it easy for me to find code sections --- while generating and testing a Tk script, and when looking for code snippets to include in other scripts (code re-use). I call your attention to step-zero. One new thing that I have started doing in 2013 is using a text-array for text in labels, buttons, and other widgets in the GUI. This can make it easier for people to internationalize my scripts. I will be using a text-array like this in most of my scripts in the future. Experimenting with the GUI As in all my scripts that use the 'pack' geometry manager (which is all of my 100-plus scripts, so far), I provide the four main pack parameters --- '-side', '-anchor', '-fill', '-expand' --- on all of the 'pack' commands for the frames and widgets. That helps me when I am initially testing the behavior of a GUI (the various widgets within it) as I resize the main window. I think that I have used a nice choice of the 'pack' parameters. The label and button and scale widgets stay fixed in size and relative-location as the window is re-sized --- while the canvas area expands/contracts appropriately if the window is re-sized. You can experiment with the '-side', '-anchor', '-fill', and '-expand' parameters on the 'pack' commands for the various frames and widgets --- to get the widget behavior that you want. ---
Additional GUI experimentation: For example, you could change '-weight' from 'bold' to 'normal' --- or '-slant' from 'roman' to 'italic'. Or change font families. 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 other widgets. Feel free to experiment with those 'appearance' parameters as well. --- Note that the 3 'Color' buttons call on a color-selector-GUI script to set the color-gradient and background 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. Some features of the code There are plenty of comments in the code, to describe what most of the code-sections are doing. You can look at the top of the PROCS section of the code to see a list of the procs used in this script, along with brief descriptions of how they are called and what they do. The main proc is the 'ReDraw' proc which is used to draw the sequence of oval curves on the canvas using
A proc that may be of some interest is 'update_color_labels'. It is called by the 3 set-color-and-redraw procs
to update the background and foreground colors on the 3 buttons, as well as to update the text on the 3 color buttons to show the current color in hex RGB color format. Comments in the Code It is my hope that the copious comments in the code will help Tcl-Tk coding 'newbies' get started in making GUI's like this. Without the comments, potential young Tcler's might be tempted to return to their iPhones and iPads and iPods --- to watch videos of posted by teenagers, whose parents would probably prefer that their child had not posted the video (which makes them --- the parents as well as the child --- look like a blemish on the human evolutionary chain). The Tcl-Tk CODE
Here is a link to CODE for the Tk script SOME POTENTIAL ENHANCEMENTS: This script uses Tk drawing commands (on the Tk canvas) of the form: |
.canvas create oval x1 y1 x2 y2 -outline <hexCOLOR> -width 3
|
The 'hexCOLOR' is interpolated from the 'CenterColor' and the 'OuterColor'. The width of 3 pixels is used to avoid occasional pixels not being covered by the ovals, resulting in pixels of the background color showing through the sequence of ovals that have been drawn on the canvas. You can try other widths, like 1 and 2, to see the effect. If you like that option, you could add another widget to the GUI to allow for setting the line-width of the ovals. As for myself, I plan to make a few more GUI's that use lines, other than horizontal or vertical straight-lines, to make color gradient images --- using, for example
Someday. IN CONCLUSION As I have said on several other code-donation pages on this wiki ... There's a lot to like about a utility that is 'free freedom' --- that is, no-cost and open-source so that you can modify/enhance/fix it without having to wait for someone else to do it for you (which may be never). A BIG THANK YOU to Ousterhout for starting Tcl-Tk, and a BIG THANK YOU to the Tcl-Tk developers and maintainers who have kept the simply MAH-velous 'wish' interpreter going. |
|
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. >The code was created in 2013 --- and posted 2013 Aug 14 at http://wiki.tcl.tk/38466. Page history:
This FE web page was created 2014 May 07 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |