Getting Started

Documentation

Glish

Learn More

Programming

Contact Us

Version 1.9 Build 1556

News	FAQ
Search	Home

Canvas

The canvas widget is the most complicated widget discussed in this chapter. It implements a generalized drawing surface. This means that from Glish the user can draw on the canvas and later interact with the objects drawn on the screen. Here is a reasonably simple example that draws a stop sign on the canvas and then sets it up so that it is draggable by the user:

    f := frame()
    cf := frame(f,side='left',borderwidth=0)
    c := canvas(cf)
    vsb := scrollbar(cf)

    bf := frame(f,side='right',borderwidth=0,expand='x')
    pad := frame(bf,expand='none',width=23,height=23,relief='groove')
    hsb := scrollbar(bf,orient='horizontal')

    whenever vsb->scroll, hsb->scroll do
        c->view($value)
    whenever c->yscroll do
        vsb->view($value)
    whenever c->xscroll do
        hsb->view($value)
    poly := c->poly(20,-40,40,-20,40,20,20,40,-20,40,-40,
                    20,-40,-20,-20,-40,fill='red',tag='stop')
    edge := c->line(20,-40,40,-20,40,20,20,40,-20,40,-40,20,-40,-20,
                    -20,-40,20,-40,fill='white',width='5',tag='stop')
    word := c->text(0,0,text='STOP',fill='white',tag='stop')
    c->move("all",50,50)
    c->bind('stop','<Button-1>','snag')
    c->bind('stop','<B1-Motion>','drag')
    whenever c->snag do
        state := $value.cpoint
    whenever c->drag do
        {
        tmp := c->move($value.tag, $value.cpoint - state)
        state := $value.cpoint
        }

Two frames are first constructed to contain the scrollbars, as in previous examples, and then the canvas widget and the scrollbars are created in these frames (Table 11.18 lists all of the creation parameters for canvas). Then canvas drawing operations are used to draw the sign.

Table 11.18: Canvas Construction Parameters

Parameter	Default	Values	Description
parent		widget	parent
width	200	dimension	width of canvas
height	150	dimension	height of canvas
region	[0,0,1000,400]	integer	integer array specifies the underlying drawing region
relief	'sunken'	'flat' 'ridge' 'raised' 'sunken' 'groove'	edge relief
borderwidth	2	dimension	border width
background	'lightgrey'	X color	background color
fill	'both'	'x' 'y' 'both' 'none'	how to expand when resized
hlcolor	''	X color	highlight color with focus
hlbackground	''	X color	highlight color without focus
hlthickness	[]	dimension	hightlight border thickness

All drawing operations return an identifier. In this example, three things are drawn onto the canvas; a red polygon, poly, a white border for the polygon, edge, and a text message, word. The identifier returned by these operations can later be used for other operations on the item. Also note that each item is tagged with an additional name, stop. This is done with the tag parameter. After that, the entire collection of items drawn can be referred to as stop. The move event simply moves items on the canvas. In this case, all of the items drawn are shifted from the top left corner of the drawing surface. This is necessary because the items were drawn about the origin, and the underlying drawing surface only goes from [0,0] to [1000,400], the default range. The drawing surface could just as easily start at [-1000,-400].

The two bind events bind mouse events to Glish events. The first says that whenever button one is pressed when the cursor is over the stop items generate a snag event. The second says whenever button one is moved (after first being pressed) when the cursor is over the stop items generate a drag event. Any X event on the canvas can be bound to a Glish event in this manner. The two whenever statements operate on these events. The first stores the canvas position of the cursor in state when the snag event is generated. The second requests that the item the drag event is generated for, $value.tag i.e. stop, be moved by the difference of the previous and current mouse positions. It then updates the state for the next time. This looks like the dialog shown in Figure 11.12, after the stop sign has been dragged a bit. Table 11.19 describes the events that can be sent to a canvas. The mouse events which can be bound to Glish events in the canvas correspond to the standard X events.

Figure 11.12: Canvas

Table 11.19: Canvas Events

Event	I/O	Values	Description
addtag	$\rightarrow$	<N> <O>	add tag <N> to items tagged with <O>
arc	$\Leftrightarrow$	integer	draw arc
background	$\rightarrow$	X color	change background color
bind	$\rightarrow$	<T> <X> <G>	associate Xevent <X>, in tagged item <T> with Glish event <G>; <T> is optional
borderwidth	$\rightarrow$	dimension	change border width
canvasx	$\Leftrightarrow$	integer	convert from window coordintates to canvas coordinates
canvasy	$\Leftrightarrow$	integer	convert from window coordintates to canvas coordinates
delete	$\rightarrow$	string	delete items with specified tag
deltag	$\rightarrow$	string	delete the tag
foreground	$\rightarrow$	X color	change foreground color
frame	$\Leftrightarrow$	integer	create a frame widget at the specified location
height	$\rightarrow$	integer	height in lines
hlbackground	$\rightarrow$	X color	highlight color without focus
hlcolor	$\rightarrow$	X color	highlight color with focus
hlthickness	$\rightarrow$	dimension	hightlight border thickness
line	$\Leftrightarrow$	integer	draw line
move	$\rightarrow$	string/integer	move tagged items specified offset
oval	$\Leftrightarrow$	integer	draw oval
poly	$\Leftrightarrow$	integer	draw polygon
rectangle	$\Leftrightarrow$	integer	draw rectangle
relief	$\rightarrow$	'flat' 'ridge' 'raised' 'sunken' 'groove'	change border relief
region	$\rightarrow$	4 integers	set the dimension of the canvas region
tagabove	$\rightarrow$	<N> <O>	add tag <N> to item above <O> in display list
tagbelow	$\rightarrow$	<N> <O>	add tag <N> to item above <O> in display list
text	$\Leftrightarrow$	string	draw text
view	$\rightarrow$	record	scrollbar update event
width	$\rightarrow$	integer	width in character units
xscroll	$\leftarrow$	double	information for horizontal scrollbar update
yscroll	$\leftarrow$	double	information for vertical scrollbar update