Building Better Applications with BLT George A. Howlett - PowerPoint PPT Presentation

Building Better Applications with BLT George A. Howlett Silicon Metrics Corporation Austin, Texas 1

What is BLT? Set of widgets and new commands. ● Extends the Tcl interpreter, no patching required. Features: ● Graph, stripchart, barchart widgets. ● Table geometry manager ● Treeview widget. ● Tabbed notebook widget. ● Drag-and-drop facility. ● Container widget. ● Busy command. ● Bgexec command. …things I need for my Tcl/Tk applications. …things I need for my Tcl/Tk applications. ● ● Platforms: ● Unix ● Windows 95/98/NT ● Macintosh OSX soon. 2

Building better applications with BLT How to plot data with the graph widget. Zooming and scrolling. Printing. Annotating graphs. Build your own zooming graph. Customizing the graph: ● Axes, legend, grid, crosshairs. Interactive graphs. Data handling. Advanced features. Managing graphs with tabnotebooks. 3

Using the canvas widget Graph drawn on the canvas using Tcl code. Example in Tk widget demo. Problems: ● Lots of Tcl code, lots of details to handle. No code for resizing. ● Slow, scales badly with large data sets. ● Zooming broken. 4

Graph widget package require BLT blt::graph .g -title ”My Graph” pack .g .g element element create line1 create line1 - -symbol triangle symbol triangle \ \ .g -xdata {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } xdata {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } \ \ - -ydata {2.61825e+01 5.04696e+01 7.28517e+01 … } ydata {2.61825e+01 5.04696e+01 7.28517e+01 … } - Symbol types element operation . Create graph widget and add data elements with element . ● X-Y coordinates are lists of numbers. ● Configuration options control element’s appearance. -symbol symbol - Symbol displayed at each data point. -xdata xdata - Real numbers representing X-coordinates. -ydata - ydata Real numbers representing Y-coordinates. 5

Elements Elements are a graph component . Legend ● Represents a set of data. order reflects ● Symbols are the data points. depth. ● Usually drawn as a single trace. Each element has entry in legend. Z-ordering ● First elements created sit on top of later. Axes auto-scale ● Data determines range of axes. .g element create line2 line2 - -symbol circle symbol circle - -fill red fill red \ \ .g element create -xdata xdata {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } \ \ - -ydata ydata { {- -1.14471e+01 2.09373e+01 2.84608e+01 … } 1.14471e+01 2.09373e+01 2.84608e+01 … } - .g element create .g element create line3 line3 - -symbol square symbol square - -fill green fill green \ \ - -xdata {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } xdata {0.2 0.4 0.6 0.8 1.0 1.2 1.4 1.6 1.8 … } \ \ - -ydata {4.07008e+01 7.95658e+01 1.16585e+02 … } ydata {4.07008e+01 7.95658e+01 1.16585e+02 … } 6

Zooming axis component controls range of points displayed. Graph’s axis .g axis configure x - .g axis configure x -min 1.0 min 1.0 - -max 3.0 max 3.0 .g axis configure y - .g axis configure y -max 100.0 max 100.0 - -max 300.0 max 300.0 3.0, 300.0 3.0, 300.0 3.0, 300.0 3.0, 300.0 1.0, 100.0 1.0, 100.0 1.0, 100.0 1.0, 100.0 Graph is automatically redrawn displaying the selected range. ● Set - -min min and - -max max to the empty string to restore auto-scaling. .g axis configure x .g axis configure x - -min {} min {} - -max {} max {} .g axis configure y - -max {} max {} - -max {} max {} .g axis configure y 7

Scrolling To scroll, add or subtract same amount from both min and max. .g axis configure x – –min [ min [expr expr 1.0 + $delta] 1.0 + $delta] \ \ .g axis configure x -max [ - max [expr expr 3.0 + $delta] 3.0 + $delta] Scroll Region Viewport - min min and - - max max values. Viewport defined by the current axis - Viewport Scroll region defined by the range of data. Scroll region 8

Scrolling (cont’d) Can attach a scrollbar to any axis. scrollbar .hs - scrollbar .hs -command { command { .g axis view x .g axis view x } } - -orient horizontal orient horizontal scrollbar .vs -command { .g axis view y } -orient vertical .g axis configure x - -scrollcommand scrollcommand { .hs set } { .hs set } .g axis configure x .g axis configure y - -scrollcommand scrollcommand { .vs set } { .vs set } .g axis configure y Like attaching scrollbar to any Tk widget . What if viewport and default scroll region overlap? Scroll region overridden by - -scrollmin scrollmin and - -scrollmax scrollmax options . 9

Customizing elements Lots and lots of element - -symbol circle symbol circle - -fill yellow fill yellow -outline red - outline red options. Most don’t need to be set. -pixels 8 - pixels 8 - -linewidth linewidth 0 0 -dashes dot - dashes dot 10

Customizing elements (cont’d) - -label “My Label” label “My Label” – –smooth step smooth step - -showvalues showvalues y y - -areapattern areapattern solid solid -areapattern - areapattern @ @hobbes hobbes. .xbm xbm -areatile - areatile $image $image 11

Error bars Both X and Y error bars can be displayed for elements. ● Element configurations options take list of values: -xhigh xhigh , - -xlow xlow , - -yhigh yhigh , - -ylow ylow - High/low sample for each data point. -xerror xerror , - -yerror yerror - Defines delta for symmetric error range. .g element create s&p500 .g element create s&p500 - -symbol cross symbol cross – –fill yellow fill yellow \ \ -outline red outline red – –linewidth linewidth 0 0 – –errorbarwidth errorbarwidth 2 2 - -x { 1 2 3 4 5 8 9 10 11 12 15 16 17 18 19 22 23 … } x { 1 2 3 4 5 8 9 10 11 12 15 16 17 18 19 22 23 … } \ \ - -y { 989.82 968.65 948.09 953.99 989.03 976.98 … } y { 989.82 968.65 948.09 953.99 989.03 976.98 … } \ \ - -yhigh yhigh { 994.46 968.65 954.30 989.07 993.56 979.63 … } { 994.46 968.65 954.30 989.07 993.56 979.63 … } \ \ - -ylow ylow { 967.43 945.54 934.87 953.99 972.91 951.71 … } { 967.43 945.54 934.87 953.99 972.91 951.71 … } - 12

Customizing axes axis configure configure operation. Assorted options set appearance using axis Changes made on Y-axis only. -loose yes loose yes -descending yes descending yes -rotate 90 rotate 90 -title ”Y Axis” title ”Y Axis” - - - - -ticklength - ticklength - -5 5 - -hide yes hide yes -logscale yes - logscale yes - -showticks no showticks no 13

Customizing axes (cont’d) Tick positions and labels also controlled by axis configuration options. Tick - -stepsize 50.0 stepsize 50.0 - -subdivisions 5 subdivisions 5 - -majorticks {150 325} majorticks {150 325} -minorticks {.1 .5} - minorticks {.1 .5} Labels customized by specifying callback proc. proc FormatTick { widget x } { proc FormatTick { widget x } { if { $x != 0.0 } { return if { $x != 0.0 } { return \ \$$x } $$x } return $x return $x } } .g axis configure y \ \ .g axis configure y -command FormatTick command FormatTick - Don’t modify graph within callback proc. 14

Printing graphs postscript component generates encapsulated PostScript. Graph’s postscript .g postscript configure - -landscape yes landscape yes - -maxpect maxpect yes yes .g postscript configure .g postscript output myFile myFile. .ps ps .g postscript output ● File name optional. PostScript returned as the result of output operation. Other options control graph, border, and paper size. -center yes center yes -landscape yes landscape yes -maxpect maxpect yes yes -decorations no decorations no - - - - 15

Printing under Windows Scenario #1: You have a PostScript printer printer command sends raw EPS to a PostScript printer. BLT printer set output [.g postscript output] set output [.g postscript output] set pid pid [ [blt blt::printer open {QMS ::printer open {QMS ColorScript ColorScript 100 v49.4}] 100 v49.4}] set blt::printer write blt ::printer write $ $pid pid $output $output blt::printer close blt ::printer close $ $pid pid getattr operation. Query printer settings with getattr ● Written to array variable. Adjust printer settings with setattr setattr operation. blt::printer ::printer getattr getattr $ $pid pid myArray myArray blt set myArray myArray( (PaperSize PaperSize) ) Letter Letter set set myArray myArray(Orientation) (Orientation) Landscape Landscape set blt blt::printer ::printer setattr setattr $ $pid pid myArray myArray blt::printer write $pid $output blt::printer close $pid 16

Printing to non-PS printers Scenario #2: You have a non-PostScript printer. Graph has two Windows-specific print operations. print1 print1 ● Writes bitmap image to printer. ● Usually works regardless of printer capabilities. ● Poorer quality. Jagged lines and fonts. set pid [blt::printer open {QMS ColorScript 100 v49.4}] .g print1 print1 $pid .g blt::printer close $pid print2 print2 ● Draws directly to print device. ● Doesn’t print correctly on PostScript printers (print raw PS instead). set pid [blt::printer open {QMS ColorScript 100 v49.4}] .g print2 print2 $pid .g blt::printer close $pid 17