FE 'tkGooie' Utilities
'IMAGEcreatorsFlat' group
Draw POLYGONS with
ROUNDED-corners
(2 colors ---
fore-and-back-ground)
(FE = Freedom Environment)
FE 'tkGooie' Utilities'IMAGEcreatorsFlat' group
Draw POLYGONS with
|
|
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEcreatorsFlat' Page >
This 'draw_POLYGONSwithROUNDEDcorners_ 2colors' tkGooie Page
|
INTRODUCTION to I am interested in making nice images for 'toolchest' and 'drawer' backgrounds, as I have indicated on pages about These two pages were originally published in 2012 on pages titled
at wiki.tcl.tk/36780 and wiki.tcl.tk/36749. After making an enhanced rounded-rectangle-maker Tk script, I decided to follow up on the wiki.tcl.tk page titled "Drawing rounded polygons", by Keith Vetter. The Tk script on that page is a generalization of the concept of putting rounded corners on rectangles. Vetter took some routines contributed by R. Suchenwirth, for making regular polygons and a 5-pointed star, and made a Tk script that draws the polygons with rounded corners. It occurred to me that some solid-colored polygons like squares and pentagons and octagons could be used to make backgrounds for icons. And I may soon tire of using rounded rectangles for wide buttons. Perhaps I could use 'flattened' pentagons for wide buttons. In any case, I decided to take Vetter's script and provide some enhancements --- such as adding the option to specify 2 colors --- one for the interior of the polygon and one for the exterior (which can be done by specifying a color for the canvas). Also, I noticed that on Vetter's GUI, he had radiobuttons for N-sided polygons where N goes from 3 to 10. But in the case of N=4, he had an option for either a square or a rectangle. It turns out that the square does not turn out to be square --- except for one precise window size. It turns out that if you choose square, you ordinarily get a 'fat' rectangle. And if you choose rectangle, you get a thin, wide rectangle. Well, it occurred to me that for all of the polygons, from 3 to 10, the user should have the option to specify that an EQUILATERAL polygon should be drawn. This could be asked for by a checkbutton on the GUI. And if the checkbutton were not checked, the drawing routine would simply draw the polygon in an aspect ratio determined by the current aspect ratio of the canvas. Some other enhancements occurred to me (especially after getting into the coding and testing of the new script), but adding the color and equilateral options was enough to get me started on making a Tk script for an enhanced 'rounded-polygon' making GUI. The GUI (screenshots) I came up with a script that produces a GUI which behaves very nicely as the window is resized. Here is an image of the GUI showing how it can be used to make a pentagon-shaped background for an icon. Note that the 'equilateral' checkbutton is checked. |
|
With Vetter's script, the rounded polygon was always drawn with a dotted outline (and light gray area) showing the portion of the polygon corners/points that were being trimmed off. I decided to make the dotted outline (and light gray area) an option by adding a 'Show vertices' checkbutton to the GUI. Here is an image of the GUI showing how it displays the sharp-corners of a polygon. Note that the 'Show vertices' checkbutton is checked. |
|
Note that I have supplied 2 buttons on the GUI with which to set the 'inside' and 'outside' colors for the rounded polygon. Those two buttons call on a color-selector-GUI script to set those two 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. (A set of 6 spinboxes or 6 scales could be put on this GUI to set the RGB values of the 2 colors --- but those widgets take a lot of space on the GUI. And using two entry widgets is rather clutzy and does not facilitate quick changes of the colors. So I decided to use the 'external' color-selector Tk-script.) A 'minilistbox' widget In place of all the radiobuttons of Vetter's GUI, to specify the type of polygon to draw, I decided to use a 'spinbox' --- to conserve space on the GUI and to allow for adding many more N-gons in the future --- or special shapes, like the 5-pointed-star. However, I did not want to use the 'spinbox' because I wanted even those users who have an old version of the 'wish' interpreter --- an old, pre-spinbox 8.x version --- or even an old 7.x version --- to be able to run this rounded-polygon utility. In researching the spinbox, I ran across the page titled "spinbox" at wiki.tcl.tk --- and I saw the little example of a 'spinner' widget, by Richard Suchenwirth, which he said was "a concoction of a 1-line high listbox with two tiny buttons, to approximate the effects of a spinbox.". After experimenting with his demo code and enhancing it somewhat (with font variables and width variables and other parameters), I was ready to build a 'minilistbox' widget-making proc into this rounded-polygon utility. You can see the code for that proc in the code for the entire rounded-polygon-making Tk script, below. And you can see how the proc is used in this non-trivial use-case. (I may extract the 'minilistbox' code and put it in a simpler demo script, like Suchenwirth did with his 'spinner' proc --- someday. 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.) Capturing the image The features of this GUI are detailed in comments in the Tk script code for this (below). There is a 'USING THE GENERATED IMAGE' section in the comments near the top of the code below that describe how a captured-cropped image from this GUI could be used to make
In any case, various types of rounded-polygon image files could be made from images generated by this utility --- SOLIDcolor-NONtransparent, SOLIDcolor-SEMItransparent, NONsolidColor-NONtransparent, and NONsolidColor-SEMItransparent. And those images could be processed in many different ways (such as blur, to 'feather' edges --- or apply a rounded-bevel, to get a 3D effect --- for example, by using the ImageMagick 'convert' utility). The images could be used to make buttons/drawers/icons/bullets/etc for 'toolchests' and other types of GUI's. DESCRIPTION OF THE CODE As in all my other Tk scripts, I use a 'canonical' structuring of the code: |
0) Set general window parms (win-name,win-position,win-size-control,
win-color-scheme,fonts, widget-geometry-parms,etc.).
1a) Define ALL frames (and sub-frames).
1b) Pack ALL the frames.
2) Define all widgets in the frames. Pack them.
3) Define keyboard or mouse action BINDINGS, if needed.
4) Define PROCS, if needed.
5) Additional GUI INITIALIZATION (with 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 (code re-use). --- In this particular script, I had to insert a new step in these steps, which have served me so well for about 10 years, in making about a hundred different Tk scripts. To make the 'minilistbox' widget to be used in step (2), 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. One thing I did that some people might find disconcerting is that I have allowed the 'scale' widget (for 'dynamically' changing the radius of the corners of the polygons) to expand/contract in the x-direction as the window x-size is changed. (If this causes problems, you may wish to fix the size of the 'scale' widget.) 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: You could change the fonts used for the various GUI widgets. For example, you could change '-weight' from 'bold' to 'normal' --- or '-slant' from 'roman' to 'italic'. Or change font families. Furthermore, there are variables used to set geometry parameters of widgets --- parameters such as border-widths and padding. And you could change the '-relief' values for frames and widgets. Feel free to experiment with those 'appearance' parameters as well. The Tcl-Tk CODE Here is a link to CODE for the script 'makePolygons_withRoundedCorners_2solidColors.tk'. CREDITS I want to thank Keith Vetter and Richard Suchenwirth for their mathematical-geometrical procs which allowed me to concentrate on making the various features of this GUI. I used Vetter's 'RoundPoly' and '_RoundPoly2' procs without a single change. I believe the 'MakeStar' proc is Vetter's enhancement of an original star-making proc by Suchenwirth. I have not changed that proc, and as a result, choosing different 'Rotation angles' in that 'minilistbox' of the GUI does not have any effect on the star. I leave it as an exercise for the reader to put some angle-code in the 'MakeStar' proc. (Actually, the rotation feature is just a convenience for rapidly rotating the image. One could always capture the image in a file and read the file into an image editor like 'mtpaint', to rotate the image.) I made a couple of minor changes to Suchenwirth's 'rp' (regular polygon) proc to allow for the 'Rotation angle' option to work. The proc that I made the most changes to was Vetter's 'doit' proc --- which I renamed to 'ReDraw'. Thanks so much, 'RS' (Suchenwirth) and 'KPV' (Vetter). You guys are awesome. CONCLUSION Now I have a way to make rounded-polygon 'masks' to use with the 'IMAGEtools' utilities in my 'feNautilusScripts' system --- to make rounded polygons to use as background images in the 'drawers' and 'toolchests' of my 'feAppMenus' and 'feHandyTools' systems --- of the 'Freedom Environment' family of systems, at www.freedomenv.com. I can now make equilateral rounded-polygons, such as pentagons and heptagons, and reduce their size, to make unusual-shaped 'bullets' for items on the toolchests. --- As I mentioned at the bottom of the page titled "Experiments in making embellished GUI's" at wiki.tcl.tk, perhaps we (or I) can start a gallery page showing some particularly well-embellished toolchests/GUI's. Perhaps a gallery page of particularly nice buttons and backgrounds and icons can be used by Tcler's for backgrounds/embellishments in their GUI's. Someday I may start such a page on this FE (Freedom Environment) web site. |
|
Bottom of this page for
presenting Tcl-Tk code for a GUI to
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 16 at http://wiki.tcl.tk/36813.
This FE web page was created 2014 May 15 ---
as a backup and alternative to the wiki.tcl.tk page.
NOTE: |