|
Welcome to Beginner Programming
|
| Course content | Enter chat room | Send email
to mailing list |
Check calendar |
In this lesson we are going to learn some fun stuff. Not that the previous lesson wasn't fun ... but loops can be a bit dry.
We are going to learn about images. Tk is very good at manipulating images. You can place images in buttons. You can draw images on the canvas widget.
Images are stored in the computer in a bunch of different formats. The core Tk system which you downloaded from the Scriptics website back in lesson 1 contains support for some of the common formats. The one we will focus on is the GIF format ... this is commonly used for clipart images seen on webpages throughout the Internet. There are extensions to Tk that can be downloaded to greatly expand the graphic formats supported by Tk. For our purposes the GIF format will be sufficient.
Some of you may have clipart in the form of ".gif" files on your computers.
If you do feel free to substitute any of those files in this lesson.
For everyone else the three ".gif" files should have arrived as an email
attachment at the beginning of the week for lesson 6.
Step 1: the first part |
The first thing we need to do is move those three ".gif" files into
your pilot folder. The files that were emailed to you are:
| apple.gif |  |
| grapes.gif |  |
| chilli.gif |  |
If you are having trouble finding where your email program has stored
those files use your file finder to locate them. Once
you have located them on your hard disc copy them into the beginner
folder.
Step 2: the second part |
As you have done for the last few lessons now, open your text editor
and type the following program in and save it in your beginner folder
as lesson6.tcl.
#========================================
# FILE: lesson6.tcl
#
# AUTHOR:
#
# REVISIONS:
#
#========================================
#========================================
# showImage - entry point
#========================================
proc showImage { myimage } {
global f_a
#
# remove the previous image and text
#
$f_a.c delete imagetag
$f_a.c delete texttag
#
# display the new image and text
#
$f_a.c create image 50 50 -image $myimage -tag imagetag
$f_a.c create text 80 50 -text $myimage -tag texttag
} ;# end showImage
#========================================
# main - entry point
#========================================
destroy .myArea
#
# setup top level window size, position and title
#
wm geometry . 200x250+10+10
wm title . "lesson6"
#
# setup all the frames
#
set f [ frame .myArea -borderwidth 5 -background blue ]
set f_a [ frame $f.animateFrame -background lightBlue ]
set f_b [ frame $f.buttons -background blue ]
set f_b2 [ frame $f.buttons2 ]
puts stdout "lesson6 starting"
#
# initialize some variables
#
set x_it 0
#
# initialize some images
#
image create photo apple -file apple.gif
image create photo grapes -file grapes.gif
image create photo chilli -file chilli.gif
#
# set up our animation canvas
#
canvas $f_a.c -height 100 -width 150 -background lightBlue
pack $f_a.c -side top
#
# set up our buttons
#
button $f_b.apple -image apple \
-command { showImage "apple" }
button $f_b.grapes -image grapes \
-command { showImage "grapes" }
button $f_b.chilli -image chilli \
-command { showImage "chilli" }
pack $f_b.apple $f_b.grapes $f_b.chilli -side left
button $f_b2.quit -text "quit" -command { set x_it 1 }
pack $f_b2.quit
#
# arrange the animation frame and button frames
# in main frame
#
place $f_a -x 10 -y 10
place $f_b -x 30 -y 150
place $f_b2 -x 70 -y 200
#
# make the whole thing visible
#
pack $f -side top -expand true -fill both
#
# pause here until we hit quit button
#
vwait x_it
#
# disable the buttons
#
$f_b.apple config -state disabled
$f_b.grapes config -state disabled
$f_b.chilli config -state disabled
$f_b2.quit config -state disabled
#
# clear the canvas
#
$f_a.c delete imagetag
$f_a.c delete texttag
puts stdout "lesson6 done"
|
Step 3: the explanation of source code |
The first thing you may have noticed is that we have created a comment
block at the beginning of this code:
#======================================== # FILE: lesson6.tcl # # AUTHOR: # # REVISIONS: # #======================================== |
This is a good habit to get into as a programmer. You should at least have these three fields in your comment block. Go ahead and fill in your name as the author.
The most important section in a real piece of code would be the REVISIONS. Under this heading you would be expected to describe briefly any changes you made to this piece of code once you had gotten it running for the first time. On real software development projects your source code may be viewed and modified by lots of different programmers throughout its useful life. It is important to document any changes you have made to help other programmers who may come along later.
If we skip our attention down to the main part of the code we notice a couple of new statements beginning with the command "wm". Those of you running on a Linux platform might recognize that "wm" is short for window manager. Tcl/Tk was first developed on a UNIX platform (UNIX is an older much more expensive version of Linux). Many of us will be doing these lessons on a Windows or a Macintosh platform. On these systems the windowing interface is "built in". The term window manager loses its meaning in that case. The designers of Tcl/Tk elected to keep with the name in any event.
For our purposes the "wm" command allows us to control the wish window. We can specify its size. We can specify where we want it to appear on the desktop. We can specify which title is to appear at the top of the window.
The first of the "wm" commands concerns the location and size of our
window:
| wm geometry . 200x250+10+10 |
Recall that in our first Tk lesson we mentioned that the window in Tk is known simply as "." (dot). The explanation lies once again in Tk's UNIX roots. Suffice to say that the "." immediately after the word geometry in the command is name of the Tk window.
The next argument consists of a set of 4 numbers joined by a "x" and a couple of "+". The first pair of numbers represents the width x height of the window in units of pixels. ie. our window is to be 200 pixels wide and 250 pixels high. The next pair of numbers represents the position of the window as measured in pixels from the left of the desktop screen and the top of the desktop screen. ie. our window will be 10 pixels in from the left and 10 pixels down from the top of the desktop screen.
The second "wm" statement is somewhat obvious:
| wm title . "lesson6" |
It will add the title "lesson6" to the top of our wish window when the program starts running.
Continuing down though the statements in the main part of lesson6 the
next new statement we encounter is:
| image create photo apple -file apple.gif |
This statement is the first step in preparing an image for use in a
Tcl/Tk program. The command is "image". The
next two arguments tell the wish interpreter that we are "creating" a "photo"
type image. The 3rd argument is the name we are going
to give to our new image ... in this case we are going to call it "apple".
The final 2 arguments indicate the name of the ".gif" file we are using
to create our image.
 |
NOTE:
It is important to recognize that the act of creating the image in Tk does not mean that the image is placed and visible. It just means that the image has been converted into an internal Tk format. |
The next new statement we encounter is:
| button $f_b.apple -image apple \
-command { showImage "apple" } |
The only difference we observe here from our previous button statements is that the "-text" argument has been replaced with the "-image" argument.
This is one of the very powerful things about the Tcl/Tk language. With a simple change to our source code we are able to create a button that contains a graphic as opposed to words.
In every other way, however, the button statement functions exactly as before.
We can see that when the button is pressed the "showImage" procedure will be invoked with the word "apple" supplied as an argument. We will discuss the showImage procedure shortly.
Notice that we have used the vwait statement first introduced in the
previous lesson to pause our main program at that point.
| vwait x_it |
The quit button will kick the vwait statement out and the code will procede to disable all the buttons and then clear the canvas.
The only procedure we encounter in lesson6 is called showImage.
#========================================
# showImage - entry point
#========================================
proc showImage { myimage } {
global f_a
#
# remove the previous image and text
#
$f_a.c delete imagetag
$f_a.c delete texttag
#
# display the new image and text
#
$f_a.c create image 50 50 -image $myimage -tag imagetag
$f_a.c create text 80 50 -text $myimage -tag texttag
} ;# end showImage
|
The first thing to note about showImage is that it accepts a single argument. In our case we have named that argument "myimage".
This argument contains the name of the image we wish to show. In our little example it will be one of "apple", "grapes" or "chilli".
These are supplied on the "-command" argument attached to each of the buttons except the "quit" button.
The first new statement we encounter in this procedure is:
| $f_a.c delete imagetag |
As we saw in our previous example $f_a.c refers to the canvas widget itself.
As we saw before it is convenient to attach tags to each of the things we place on the canvas widget. That way we can use this tag to identify this object when we want to alter it in any way. In this instance what we are asking the wish interpreter to do is to delete the object called imagetag.
The next two new statements are probably the more interesting of this
whole procedure.
| $f_a.c create image 50 50
-image $myimage -tag imagetag
$f_a.c create text 80 50 -text $myimage -tag texttag |
This is where we are using a variation of the canvas "create" statements that we have used in the previous lessons.
Here what we are doing is placing two different types of objects on the canvas: one an image object and the other a text object.
The pair of numbers that represent the 3rd and 4th arguments of these
statements are the offsets in pixels from the left and top of the canvas
respectively. In other words the text object will be placed
80 pixels in from the left and 50 pixels down from the top of the canvas
edge.
Step 3: the fun part |
Go ahead and run your program now. You should see a window come up with 3 fruit buttons across the bottom. When you press the fruit buttons the image and name of the fruit should appear on the canvas.
Summary |
You have been introduced to Tcl/Tk image manipulations in this lesson. Let's review:
End of Lesson 6.