FE 'tkGooie' Utilities'TkGAMEdevAids' group
A utility to
|
The 'tkGooie' interface for this 'GAMEdev' utility --- to paste BASE64 hex-data (or XBM data) in a 'text' widget of the GUI --- and show the text-encoded image in a 'canvas' widget on the GUI. |
FE Home Page >
FE Downloads Page >
FE 'tkGooies' Description Page >
Game Dev (development) Aids MENU page >
This
'pasteBASE64orXBMdata_showIMAGE'
tkGooie Page
|
INTRODUCTION to a I see ' BASE64 photo' and ' XBM bitmap' image data in various Tk scripts on the 'wiki.tcl.tk' web site. Sometimes I would like to see what the images look like. But, often, I do not want to take the time to paste the entire script code into a text file and try to get the code running on my operating system (Liunx, Ubuntu 9.10). Because of my experience from about 2000 to 2013 with (scrollable) Tk 'text' widgets and (scrollable) Tk 'canvas' widgets, I realized that I could make a Tk GUI into which I could paste BASE64 or XBM code (into a text widget) and then cause the image to be displayed in a Tk 'canvas' widget of the GUI. I set about making such a GUI, and after several iterations, I ended up with the GUI seen in the following image. (At first I just handled BASE64 'photo' data. Then I realized I could use the same GUI for XBM 'bitmap' data.) |
|
Above is an example with 'base64' data. Below is an example with XBM bitmap data: |
|
That is a tiny, upward-pointing arrow in the pink canvas area. When the GUI first pops up, the text (green) and canvas (pink) areas are empty. For the first image, I navigated to the wiki.tcl.tk 'Crazy Eights' page (using my Seamonkey web browser running on old 2009-October Ubuntu, 'Karmic Koala'). Then I pasted the base64 code labelled '6h' (for 6 of hearts) into the text area of the GUI. A click on the 'ShoImg' button immediately showed the 6-of-hearts card image seen above. For the second image, I navigated to the wiki.tcl.tk '3D Hilbert Curve' page. Then I pasted the XBM 'bitmap' code for an up-arrow into the text area. A click on the 'ShoImg' button immediately showed the tiny black up-arrow seen above. Originally, I did not have a 'ClearBoth' button on the GUI. I would simply mouse-swipe all the text in the text widget and hit the Backspace or Delete key to remove the text. Later, I decided to add the 'ClearBoth' button to clear both the text and canvas widgets with a single click. Speaking of swiping-and-deleting text: When you have base64 text in the text window, you can delete chunks of base64 code at the bottom of the code. When you click on the 'ShoImg' button, you will get a partial image still shown in the text area. So, for example, for the 6-of-hearts above, you can remove a few lines of base64 code at a time, to slowly erase the 6-of-hearts card from the bottom to the top. CHANGING CANVAS BACKGROUND COLOR : Originally, I had the canvas background color set to black. When I first tested the XBM code (using the XBM code for a small black arrow), I could not see the arrow. I decided to make the background pink, because the black bitmaps, typical of a lot of Tk scripts on the 'wiki.tcl.tk' site, would then show up quite well. And it is unlikely that anyone will use pink for one of their bitmap or base64 images. Later, when I was adding the BASE64 and XBM radiobuttons and the 'ClearBoth' button, I decided I may as well make a 'CanvasBkgd' button, so that the user can choose any background color (from among 16-million-plus colors), to provide sufficient contrast to any image they might encounter. Note that the Canvas-Color button calls on a color-selector-GUI script to set the canvas background color. You can make that color-selector script by cutting-and-pastin the code from 'A non-obfuscated color selector GUI' page at the freedomenv.com site. CAPTURING THE GENERATED IMAGE : In most uses of this GUI, the user will probably just want to look at the image briefly. But in case the user might want to capture the image ... consider the following. 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 pixel-edited --- say, to slightly change the image captured in a GIF file. In 'mtpaint', one can go into an 800%-zoom mode to edit individual pixels easily. I captured the images shown above using 'gnome-screenshot' and 'mtpaint'. The 'Help' button on the GUI provides pretty complete and detailed help for using the GUI --- including some of the information in the paragraphs above. DESCRIPTION of the CODE Below, I provide the Tk script code for this 'BASE64/XBM-data image viewer' 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 recently (in 2013) is to use 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 radiobutton widgets stay fixed in size and relative-location as the window is re-sized --- while the text and canvas areas expand/contract in a reasonable way whenever 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 Experimention 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. Some features in the code (the main procs) The code has 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. The main proc is the 'sho_img' proc which is used to
The 'set_canvas_color' proc is used to
(Coloring the Canvas-Color button was a feature added later. See the image at the top of this page for an example.) 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 people burning their eyebrows off. The CODE
Here is a link to CODE for the Tk script ONE MORE EXAMPLE : I navigated to the 'Tk Robots2' page of Keith Vetter at wiki.tcl.tk, and pasted in the base64 data for 'M4' --- a little man (avatar). Here he is, in the image below. |
|
I do not plan to do much Tcl-Tk programming for games --- because I have too many 'user-friendly useful utilities' (UUU's) that are on my 'to-do' list. But I plan to make a few more utilities related to BASE64 and XBM (and PGM and PPM and GIF) data that might be useful to those Tcler's who ARE interested in making games. A list of those utilities will be accumulating in a 'CGA' (Code for GAMEdevAids) section of my 'to-do' list --- or in the 'CIP' (Code for Interactive image Processing) section of my 'to-do' list. IN CONCLUSION This utility was fun to write --- and I think I will find it useful in the future. 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
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 2013 --- and posted 2013 Aug 16 at http://wiki.tcl.tk/38471 in a page titled 'Paste BASE64 or XBM image data - then SHOW IMAGE'.
This FE web page was created 2015 Mar 17 ---
as a backup and alternative to the wiki.tcl.tk page.
|