Your first Tcl/Tk application

Now that you know a little bit about Tcl and Tk it is time to make something. First let's exit our blt_wish with control D. We will attempt to create a simple color viewer looking something like this. The colors may not match yours depending on your color setup

Now I may not have told you about all the widgets, but now you will learn enough to create this application. Open up your favorite editor and create a file called 'colorsel.tk'

One thing you will need is a scale in fact we need three. A scale is a slider with an associated value. It has a label which can be changed, and a range which can be selected, as well as a length. You can have your slider either horizontal or vertical. The scale can also have an associated command (like a callback) that is run whenever the scale is used.


scale .redscale -label Red -from 0 -to 255 -length 7c -orient horizontal -command newColor
scale .greenscale -label Green -from 0 -to 255 -length 7c -orient horizontal -command newColor

You will need another scale for bluescale, hopefully you can do this yourself. Next we need some entry boxes. Since these boxes are associated together we will put them inside a frame. A frame is just a container that other widgets can go in.


frame .entryframe

Entry boxes can have many arguments, but for this we only want to make the box size small using it's width command.


entry .entryframe.redentry -width 7
entry .entryframe.greenentry -width 7

Notice, that the entry's we have created are inside the frame we previously created. Also notice the blueentry is left up to you! Now we would also like our set button so we can manually set colors. This button should have a some text on it, as well as a command to execute when you push it.


button .entryframe.setbutton -text set -command setColor

Lastly, we need something to display our pretty colors with. The canvas is a great widget for drawing things on. It has arguments for width and height Use values of 7c and 1.5c. The canvas should not be in the entryframe, but it should be at the same level as the scales (hopefully you can figure out how to make this one by yourself, call it colorwin).

Time to pack! We have all our widgets made, now we just have to arrange them properly. We will do this in order, from top down. And to make sure they get in that order, we will use a flag to pack things from the top


pack .redscale .greenscale .bluescale -side top
pack .entryframe
pack .colorwin -side bottom

Whoops, we need to pack those entries and pesky button. These are arranged from left to right so we have:


pack .entryframe.redentry .entryframe.greenentry .entryframe.blueentry .entryframe.setbutton -side left

Now we need to apply our Tcl skills to write our callback functions. Every widget that has a associated value, also has a set and get function. We will utilize this to get the values we need.


proc newColor value {
   set color [format #%02x%02x%02x [.redscale get] [.greenscale get] [.bluescale get]]
   .colorwin config -background $color
}

So here we are setting the variable color to be the hex representation of the values of the scales (the format command does the hex conversion for us). Then we are using the config command to the canvas to set it's background color to the value we got from the scales.


proc setColor {} {
   .redscale set [.entryframe.redentry get]
   .greenscale set [.entryframe.greenentry get]
   .bluescale set [.entryframe.blueentry get]
}

And here we have just set each of the scales to the same values that are in the entries.

Well that is it. If you have followed the tutorial you will have a text file with all of the appropriate commands for the colorselection application. To run this, save your file and just type in the directory you saved the file


blt_wish -f colorsel.tk

If everything goes well, you will have a funny application on your screen You can slide the sliders and change the colors, or put values in the entries and press the set button. If you weren't able to get your script to work here's mine It does have the sizes, as well a menu bar on the top. To quit your application just control-c the blt_wish (my version has a nice quit feature though)

Well, that was too hard! Isn't there an easier way to do this?