FE 'tkGooie' Utilities

IMAGEcreators
'Flat' group

Draw a RECTANGLE
with ROUNDED corners

(2 colors ---
fore-and-back-ground)

(FE = Freedom Environment)

FE 'tkGooie' interface for a
maker of RECTANGLES WITH
ROUNDED CORNERS
---
using 2 colors
---
foreground
and
background.

FE Home Page > FE Downloads Page >

FE 'tkGooies' Description Page >

FE 'tkGooies' 'IMAGEcreatorsFlat' Page >

This
'draw_RECTANGLEwithROUNDEDcorners_2colors'
tkGooie Page

INTRODUCTION to
Code for a Tcl-Tk GUI to
'Draw RECTANGLE-with-ROUNDED-corners
(in 2 colors, foreground-and-background)'

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

  • "Experiments in making embellished GUI's"

and
  • "A color-gradient-button-maker GUI"

at wiki.tcl.tk/36780 and wiki.tcl.tk/36749.


As you can see by images on those 'embellished' pages, I used rectangular button backgrounds and toolchest backgrounds --- rectangles with sharp corners.

But nowadays, on smart-phones, 'pad books', GPS devices (as well as netbook, laptop, and desktop computers), we find that buttons and icons with rounded corners seem to give us a warm, fuzzy feeling.

So I did a little searching on wiki.tcl.tk and found the page titled "Drawing rounded rectangles", where an apparently anonymous donor kicked off a 'rounded rectangle' --- and, more generally, 'rounded polygon' --- 'coding thread'.

The original 'roundRect' proc on that page used a polygon approximation method to make the rounded corners.

Those results were improved upon by someone with the initials 'GNJ' (= who?), who made a 'roundRect2' proc that uses 'create oval' and 'create rectangle' on a canvas to make the rounded rectangles.

The 4 'create oval' statements that he uses gives pretty good quality rounded corners.

The demo code that uses those two procs results in a fixed size rectangle on a fixed size canvas.

If you change the window size, the canvas and rectangle stay the same size.

---

GOALS for the GUI (and screenshot)

I wanted to make a 'production-quality' utility, based on the 'roundRect2' proc, with which I could make rounded rectangles of a variety of sizes --- and with a choice of interior and exterior colors.

I came up with a script that produces a GUI which behaves very nicely as the window is resized.

Below is an image of the GUI showing how it can be used to make long buttons with rounded corners.

Note that I have supplied 2 buttons on the GUI with which to set the 'inside' and 'outside' colors for the rounded rectangle.

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 the 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 an 'external' color-selector Tk-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

  • a SEMI-TRANSPARENT, SOLID-COLOR rectangle with TRANSPARENT CORNERS

OR

  • a SEMI-TRANSPARENT, NON-SOLID-COLOR rectangle (with optional TRANSPARENT CORNERS) --- by using the captured image as a 'mask'

There is also a note in the comments that points out:

For a variety of toolchests, the toolchests (at least ones in my FE software systems) will generally require a DIFFERENT (max-)WIDTH button/drawer FOR EACH TOOLCHEST.

In that case, the various types of rounded rectangle files indicated above (solid-NONtransparent, solid-SEMItransparent, NONsolid-NONtransparent, NONsolid-SEMItransparent) could be STRETCHED-OUT (by any one of several means) to make images of the required width for each toolchest.


DESCRIPTION OF THE CODE

As in all my other Tk scripts, I use a 'canonical' structuring of the Tk script code:



   0) Set general window parms (win-name,win-position,win-size-control,
                  win-color-scheme,fonts, widget-geometry-parms,etc.).
   
   1) Define ALL frames (and sub-frames).  Pack them.
   
   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).


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 to expand/contract in the x-direction as the window x-size is changed.

    (If that causes problems, you can set the size of the 'scale' widget to a constant.)

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


Features of the code

I probably should point a couple of changes that I made to the 'roundRect2' proc to make the 'DrawRoundRect' proc of this Tk script.

Namely:

  • I changed the setting of X,Y (the location of the upper left corner of the rectangle) and the setting of W,H (the width and height of the rectangle) to be based on the current size of the canvas.

  • I fixed some offset calculations for the ovals and rectangles to fix a rectangle-slightly-off-center problem.


The Tcl-Tk CODE

Here is a link to CODE for the Tk script
'makeRectangle_withRoundedCorners_solidColors.tk.txt'.


CONCLUSION

Now I have a way to make rounded-button 'masks' to use with the 'IMAGEtools' utilities in my 'feNautilusScripts' system --- to make rounded rectangles to use as background images in the 'drawers' and 'toolchests' of my 'feAppMenus' and 'feHandyTools' systems --- my FE (Freedom Environment) systems, at www.freedomenv.com.

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 that can be used by Tcler's for backgrounds/embellishments in their GUI's would be useful.

Someday I may start such a gallery on this FE (Freedom Environment) web site.

Bottom of this page for
presenting Tcl-Tk code for a GUI to
Draw RECTANGLE-with-ROUNDED-corners
(2 colors, foreground and background)

--- 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 15 at http://wiki.tcl.tk/36799.

This FE web page was created 2014 May 07 --- as a backup and alternative to the wiki.tcl.tk page.

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

Page was changed 2016 Oct 05.
(Added a few links.)

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


NOTE:
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.