Decorative Label Tclet

written 13 December 1997 being revised May 2006
Google site search

ContentsIntroductionBasicIntermediateAdvancedFuturePolicyInfrastructure
You need the Tcl Plugin to read this page. If this spot  is not green (v2) or cyan (v3)you may want to download the latest Tcl Plugin.
The first rule page showed you how to create rules and flags out of the Tk frame widget. The frame widget is very simple. To extend the range of rules you can have on your page I will introduce the Tk label widget. This is also a very simple widget, but it can also be used to build up complex patterns just as the frame widget can. The label widget has a border, just like the frame widget and so it can be used to produce all the same designs that the frame widget was used to produce. However it is much more efficient to use the frame widget if that is all that is required. The extra feature that the label widget has is an "inside" that you can put a line of text into, set to a colour, or put a .gif into. This last facility is the most important for our purpose of designing rulers that are more original and individual.

So, this page will concern itself with just this one widget and its graphic facilities.

1   The [label] command        

Like the frame command, the label command is so simple that programmers spend little time learning about it. Indeed it would not be all that interesting were it not for the photo images that can be placed in the label's rectangular centre. The "photo image" is a complex object with a complex set of commands available to manipulate it. Most of this page is not so much concerned with the label as with the images inside the label.

An obvious use of the label widget is to tile an area with a small gif file. Safe-Tcl does not allow this so we must wait until Safe-Tcl is extended to allow this. But there are plenty of other applications: like horizontal bars with textures or graduated colour.

Here is an example which paints color into the labels image space:

["plugin tcl" width 500 height 6 src 'http://members.tripod.com/~yheke/paint.tcl' program ' paint b1 500 6 255 192 0 192 0 192 label .f1 -image b1 -bd 0 pack .f1 ' ]

Here is a graded colour painter which generates the code for these rulers for you. I have also created the tclet "paint" which contains a procedure "paint" which is used in these scripts. The "program=" option is then used to say what you want to use the procedure for. And here are some more examples:-

["plugin tcl" width 600 height 42 src 'http://members.tripod.com/~yheke/paint.tcl' program ' paint b1 100 42 0 0 0 0 0 96 label .f1 -image b1 -bd 0 paint b3 100 42 0 0 0 0 96 151 label .f3 -image b3 -bd 0 paint b5 100 42 0 88 0 0 151 166 label .f5 -image b5 -bd 0 paint b7 100 42 88 91 0 0 166 83 label .f7 -image b7 -bd 0 paint b9 100 42 91 96 0 0 83 0 label .f9 -image b9 -bd 0 paint b11 100 42 96 0 0 0 0 0 label .f11 -image b11 -bd 0 pack .f1 .f3 .f5 .f7 .f9 .f11 -side left ' ]

In the example above, the generated code has been edited to exclude the frames that linked the labels together. This gives an even smoother effect. You could use the above Tclet as a pro forma and put in whatever colour changes you liked. They dont have to join up smoothly.

["plugin tcl" width 478 height 40 src 'http://members.tripod.com/~yheke/paint.tcl' program ' frame .f0 -width 20 -height 40 -bd 0 -bg #eef05b paint b1 70 40 100 40 100 210 180 0 label .f1 -image b1 -bd 0 frame .f2 -width 22 -height 40 -bd 0 -bg #d1004f paint b3 70 40 40 107 210 50 0 255 label .f3 -image b3 -bd 0 frame .f4 -width 22 -height 40 -bd 0 -bg #6bffff paint b5 70 40 107 255 50 160 255 50 label .f5 -image b5 -bd 0 frame .f6 -width 22 -height 40 -bd 0 -bg #00ffc1 paint b7 70 40 255 160 160 0 50 0 label .f7 -image b7 -bd 0 frame .f8 -width 22 -height 40 -bd 0 -bg #877aff paint b9 70 40 160 100 0 100 0 180 label .f9 -image b9 -bd 0 frame .f10 -width 20 -height 40 -bd 0 -bg #eef05b pack .f0 .f1 .f2 .f3 .f4 .f5 .f6 .f7 .f8 .f9 .f10 -side left ' ]

As well as shading you can also use dithering. The following examples use a constant color and a reduced palette to create a textured pattern. A wide variety of textureas can be created from garrish to subtle. Some great mazes get generated.

   Sandstone

   Linen

   Satin

Tcl does not provide for the output of gif images yet. If it did I could take a snapshot of what I see on my screen and put it next to the tclet so you could compare the results. At the moment (December 97) these textures are have not been shown to be stable over various platforms. The dithering routine is part of Tk, so there is a good chance that they are. The textures also depend on the pallette allocations. If these are left at default there is also a good chance that the textures will be stable. I would be interested in feedback on this.

Here is a painter like the simple frame painter but for label images and I have included some color codes for some textures which you can check against.

The <embed> tag allows users to add their own options to the tag, and Tclets are able to pick these options up out of the embed_args array. The code above needs to be changed only slightly to make it usable for different ruler sizes and colour combinations. For instance the <embed> tag for these graded colour rulers might be:

<embed src='graded.tcl' width='600' height='6' startcolor='red' endcolor='grey' >

while the following <embed> tag will give something different:

<embed src='graded.tcl' width='400' height='20' startcolor='yellow' endcolor='blue' >

Just the one file "texture.tcl" will give you a wide range of varieties of ruler and you need only store this one file in your directory. In fact you dont even need to store texture.tcl, you can invoke the URL from the Tcl Library.

People viewing your page only have to download this one little file to get all the different graded rulers you may want to use on your pages and their cache takes care of the repeat requests so the number of requests over the web is also reduced!

This means you can fill your pages with textures and know that together they are going to impact your system less than a single .gif file would! This is a huge saving.

In addition you can assemble labels together in html frames to get interesting patterns.

So far I have shown examples of textures and shading in labels. Another version of the same idea is a label in which just one color is painted according to a formula.

If you are not into algebra and geometry you will find the idea of formulae rather daunting. Don't woory! I have written some pages which have lots of examples which you can just flog. To see more (much more) go to this page.

Text can be placed in a label and some "text" is graphic by nature, but this is a pretty poor solution to a problem of more general graphic display. However if you have some text that you want to display in a very pretty box, then there are some options shown on the next page.

©2000 - 2006 WEBSCOOL This page last updated 22 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.