Custom widgets

 

One of our first uses of the Slate was to build a custom slider widget, shown in figure 8. (It looks much better in real life when you have several lined up together.) This slider widget mimics the sliders used in audio control equipment in appearance, but mimics the Tk scale widget in behavior. Four interactors are used to produce the desired user interaction.

  
Figure 8: A custom slider widget

Figure 9 shows code for a simplified version of this widget. The four sections of this code:

1. Create the four items show in the diagram: two text labels and two pseudo-3D rectangles.
2. Create and bind a Bounder interactor, which moves the slider bar up and down and keeps it within the desired limits.
3. Create and cascade a Stepper interactor, which quantizes movement to multiples of 0.5 (in this example).
4. Define a procedure that is called whenever the bar is moved. The procedure calculates the value represented by the bar, and updates the numeric text item.

In the real Slider widget, there are two other interactors that i) step the slider towards the mouse if the left button is clicked on the background, and ii) cause the bar to jump to the position of a button-2 click and then follow the cursor.

All told, constructing this widget was relatively easy, and we didn't have to write a single event binding.

 

 

    # Create the display elements
    set value [$slate create text 50 20 -text 0 -anchor s -fill blue]
    set trough [$slate create Frame 48 23 52 143 -color darkgrey \
            -borderwidth 2 -relief sunken]
    set bar [$slate create Frame 40 132 60 142 \
            -color darkseagreen -borderwidth 3]
    set label [$slate create text 50 150 -text "Fred" \
                    -anchor n -justify center]

    # The bounder moves the bar along the trough
    set bounder [$slate interactor Bounder \
            -dragcommand "updateWidget $slate $bar $value" \
            -constrain y -bounds {0 24 0 142}]
    $bounder bind $bar -button 1

    # The stepper quantizes movement to increments of 0.5
    set stepper [$slate interactor Stepper -stepsize [expr 108.0/22]]
    $bounder cascade $stepper

    proc updateWidget {slate bar value args} {
        set position [expr [lindex [$slate coords $bar] 1] + 5]
        set x [expr (137.0-$position)/108.0 * 10.0]
        $slate itemconfigure $value -text [format %.1f $x]
    }

Figure 9: A simple example of a custom widget