FE 'tkGooie' Utilities
'IMAGEtools' group
'wheeeDiagram'
(FE = Freedom Environment)
The FE 'wheeeDiagram' 'tkGooie' interface.
It allows for rectangles, ovals, diamonds, text,
straight and curved lines, arrowheads, images.
FE 'tkGooie' Utilities'IMAGEtools' group'wheeeDiagram'(FE = Freedom Environment) |
The FE 'wheeeDiagram' 'tkGooie' interface. It allows for rectangles, ovals, diamonds, text, straight and curved lines, arrowheads, images. |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
FE 'tkGooies' 'IMAGEtools' Page >
This 'wheeeDiagram' tkGooie utility Page
|
INTRODUCTION to 'wheeeDiagram' This page presents a diagramming 'end-user utility' that was inspired by a Tk script on wiki.tcl.tk at the web page titled 'A little drawing tool', written by Richard Suchenwirth, 2004 Mar. On that page, Suchenwirth wrote: "As I needed to produce a dataflow drawing, and did not want to bother with commercial drawing tools, I just hacked up the following thingy. ... You can draw rectangles, ovals, and lines and place text at any canvas position ... depending on the mode selected with the radiobuttons on top. In 'move' mode, you can obviously move items around, until they look right. Right-click on an item (in any mode) to delete it. ... Many more bells and whistles (selection of font family/style/size, line width, colors etc.) are conceivable, but the following code just did what I wanted, so here it is"
NOTE: After a few days of work and borrowing heavily from a couple of similar object-placement-on-canvas scripts that I had written in 2012 and 'published' on the wiki.tcl.tk. site on pages --- with the titles
and
I arrived at the following Tk GUI. |
A diagram made up of straight lines, arrowheads,
small circles (circular ovals), and text.
|
In this image, you can see the three buttons for color-setting, across the top of the GUI --- 'Fill', 'Outline/Line/Text', and 'Background'. Under that row of buttons, you can see the 'Add:' radiobuttons, which indicate the 7 types of objects you can place on the canvas with this 'wheeeDiagram' utility:
Depending on the radiobutton selected, the frame/line just above the canvas changes, to present some options that are suited to the object chosen. For example, when the 'RECTANGLE' object is chosen, the 'obj-opts' frame is 'refreshed' with an appropriate set of option widgets, such as:
Similar options are presented for the 'OVAL' and 'DIAMOND' objects. When the 'LINE' or 'CURVE' object is chosen, the 'obj-opts' frame is 'refreshed' with option widgets, such as:
And when the 'TEXT' or 'IMAGE' object is chosen, an entry field is presented in the 'obj-opts' frame. The 'IMAGE' options include a 'Browse...' button to bring up the Tk file-selector utility to aid in providing a complete filename. Most operations on the canvas are accomplished with MB 1, 2, or 3 --- where MB = mouse-button. Once you put an object on the canvas, it is easy to move an object (with MB2) --- and easy to delete an object (with MB3). The 'Help' button shows the following text. It describes how easy it is to add/move/delete objects. |
********** HELP for the WheeeDiagram Utility *****************
Basically, this utility
- ADDS objects with MB1 (mouse button 1),
- MOVES objects with MB2
- DELETES objects with MB3.
That may be all you need to know.
You can tell from the radiobuttons on the GUI that:
You can draw rectangles, ovals, diamonds, lines, and curves
on the canvas (via mouse actions) --- and you can place text
and images on the canvas (via entry fields). Use the 'Add:'
radiobuttons to determine which objects to add.
ADDING objects is done with MB1 (Mouse Button 1), for most
objects. Choose an object type with the 'Add:' radiobuttons.
Then press MB1 to establish a starting point.
Drag MB1 to 'fill out' the object --- rectangle, oval,
diamond, line, or curve. Release MB1 to finish off an object
and see the object count incremented.
After an object is added, you can MOVE it with MB2: Press
MB2 down when the mouse cursor is over an object. Keep
pressing MB2 and move the mouse to drag the object where
it is needed. Release MB2 to end the move.
Once an object is added, you can DELETE it with MB3: Press
MB3 down when the mouse cursor is over the object. Release
MB3 to delete the object. Object count is decremented.
---
Currently text-lines and images are placed at the top-left
corner of the canvas --- after pressing the Enter key when
'in' the text or image-filename entry field. Alternatively,
MB3-click on the entry field to place the object on the
canvas.
You can drag text and images to where you want them.
(A future release may use MB1 to place text and images
--- like the other objects.)
Currently text is added a line at a time. Drag the lines
into place --- one line under another. (In a future release,
multi-line text entry may be 'enhanced'. The initial purpose
of this utility was to make geometric drawings with short
text entries of one or two characters, for the most part.)
|
The following image shows all the object types on one canvas. |
A diagram showing filled and unfilled rectangles,
filled and unfilled ovals, filled and unfilled diamonds,
straight lines, arrowheads, curved lines, text, and an image.
|
In this particular case, I put the image on the canvas last. The image was covering some of the objects on the canvas. I used a 'LowerImages' button (beside the 'Browse...' button of the image-opts) to allow the text and curve on the canvas to appear on top of the image. --- Some uses of wheeeDiagram This Tk GUI script was intended to facilitate the creation of 'diagrams' --- such as
DESCRIPTION OF THE CODE I provide the code for this 'wheeeDiagram' Tk-GUI script below. 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.
3) Define keyboard and mouse/touchpad/touch-sensitive-screen 'event'
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 recently 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 labels and buttons and scales stay fixed in size and relative-location as the window is re-sized --- while the 'canvas' expands/contracts as 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. --- In addition, you might want to 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. 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. Two 'external' Tk scripts Note that the color buttons call on a color-selector-GUI script to set the 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 the freedonenv.com site. Furthermore, there is a 'Font' button beside the entry field that appears when the 'Text' object is chosen. That 'Font' button calls on a font-selector-GUI script to set a font (family-size-weight-slant). You can make that font-selector script by cutting-and-pasting the code from the page that offers YAFSG - Yet Another Font Selector GUI on the freedomenv.com site. Some features in the code That said, here's the code --- with plenty of comments 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. --- One interesting feature of this GUI is the way the GUI changes when an object-radiobutton is clicked --- the widgets in the 'obj-opts' frame change. This 'dynamic' change of the GUI is accomplished by use of the 'pack forget' command. The code for making the change in the GUI is seen in the proc 'setup_opts-binds_for_objadd'. 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 the most amazing things that come out of people's noses. The CODE Here is a link to CODE for the script 'wheeeDiagram.tk'. IMAGE CAPTURE When I want to put a 'wheeeDiagram' image into an image file, here is the sequence of steps that I follow.
Some Next Steps With any canvas-drawing utility like this, there are always many enhancements that can be added. I mentioned a few in the Help text above. Even given the current, 'first-version' state of 'wheeDiagram', hopefully, you can see, from the images above, that there is a wealth of diagram/drawing types that you can make by using this rather simple 'wheeeDiagram' Tk script --- 'simple' compared to commercial diagramming software like the old 'Visio' software and various Adobe products. Simple and free --- what's not to like? After the experience I gained with making 'rubber-banding' images of rectangles, ovals, diamonds, and lines as they are stretched into final size, I now have the coding experience to go back and make some enhancements to [A 'Sketch On' GUI ... for drawing on an image or colored background] --- some enhancements that I mentioned at the bottom of that page as items on my things-to-do list. But first, I have some 3D projects and plotting projects to attend to. In closing, I want to point out that I use the name 'wheeeDiagram' for this utility, rather than a first-person name like 'iDiagram', because .... Apple, there is no 'i' in 'team'. |
|
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. >
|