Lecture Topics in HCI, by Saul Greenberg
Back to:	Windowing Systems and Toolkits

Examples of Widgets You Can Use or Build

A Progress Indicator

wish progress-gauge.tcl

This simple progress indicator shows how you can build and activate a progress gauge using a canvas

# Create a simple progress gauge set, initially set to 0%
proc gaugeCreate {win {color "gray"} } {
    frame $win
    canvas $win.display \
        -borderwidth 0 \
        -background white \
        -highlightthickness 0 \
        -width 200 \
        -height 20

   pack $win.display -expand yes
   $win.display create rectangle 0 0 0 20 \
        -outline "" \
        -fill $color  \
        -tags bar
   $win.display create text 100 10 \
        -anchor c \
        -font {-size 14} \
        -text "0%" \
        -tags value 
   return $win
}

# Given a gauge, set it to a certain percentage
proc gaugeValue {win val} {
puts "$win $val"
update
    if {$val < 0 || $val > 100} {
        error "bad value \"$val\": should be 0-100"
    }
    set msg [format "%3.0f%%" $val]
    $win.display itemconfigure value -text $msg

    set w [expr 0.01 * $val * [winfo width $win.display]]
    set h [winfo height $win.display]
    $win.display coords bar 0 0 $w $h
}

# Lets test it. 
# This routine calls itself every 100ms until 100% is reached
proc gaugeIncrement {win value} {
    if {$value <= 100} {
        gaugeValue $win $value
        after 100 "gaugeIncrement $win [incr value]"
    }
}

pack [gaugeCreate .gauge]
gaugeIncrement .gauge 1

A Clickable Image Map

proc annotate {c l x y annotation info} {
set item [$c create rectangle \
    [expr $x-10] [expr $y-10] [expr $x+10] [expr $y+10] \
-fill white -stipple gray12]
$c bind $item <Enter> [list $l configure -text $annotation]
$c bind $item <Leave> [list $l configure -text ""]
$c bind $item <1> [list tk_dialog .dialog Information \
    $info "" 0 "Ok" ]
}

canvas .c -width 400 -height 200
pack .c -side top

image create photo myPicture -file map.gif
set map [.c create image 0 0 -anchor nw -image myPicture -tags pic]

.c bind $map <Motion> [list .l configure -text "%x %y" ]

label .l
pack .l -side top

annotate .c .l 20 60 "Olympic Oval" "Where we go skating"
annotate .c .l 80 70 "Physical Education Building" "Where we sweat"
annotate .c .l 291 68 "Math Sciences Building" "Where we live"
annotate .c .l 310 88 "Science Theatres" "Big classes. Yuk"
annotate .c .l 357 94 "Bio Sciences" "Never even seen it"
annotate .c .l 275 15 "Earth Sciences" "Go through it on the way to lunch"
annotate .c .l 170 118 "Library" "Lots of Books"

A Tree Widget

This simple tree widget is one you can use and/or inspect to see how it was done. You can fine the code that defines this widget as well as an example of how to use it in tree.tcl