TAO Fayan_Canvas design by tcltk_Final report

FINAL REPORT FOR CANVAS DESIGN BY TCL/TK

FAYAN TAO (1509853F-II20-0019)

Contents

1. Summary of changes 42. Drawing canvas 42.1. Function Specifications 42.2. Move 42.3. Draw free and draw line 52.4. Draw rectangles, circles, ovals, points and polygons 52.5. Change thickness of pen 62.6. Choose new colors 62.7. Show pointer’s position and canvas’s size 62.8. Clear and delete 62.9. Save and Save as 82.10. Help 83. Graphics functions 83.1. Function Specifications 83.2. Function expression 93.3. Basic functions and their combination 93.4. Zoom 103.5. With and without grids 103.6. text, oval, rectangle, polygon, line 113.7. Functions Testing 124. Class diagrams and key codes specification 134.1. For Drawing canvas 144.2. For graphics canvas 155. System requirement 206. Future Works 207. Acknowledgement 21References 21

1

2 FAYAN TAO (1509853F-II20-0019)

Statement

My inspirations about designing canvas mainly comes form reference [2]1 and [3].Compared to that mini drawing canvas in [2], I re-arrange the canvas’s layout in the first

drawing canvas, and add more drawing icons in it. besides, I add functions in menu ”File”and ”Help”.

For the second graphics canvas, I mainly refer to reference [2] and [3]. I combine functionsof both of them such as displaying geometrical graphs, drawing items in canvas and moveit, displaying outline color of items. And I design the new function-displaying graphs bothwith and without grids and zoom it with and without grids as well. Additional, I re-designthe whole GUI and make it looks better.

1Note: If you click this web site link I provide in the reference part, it will go to another link, becausethe sign ”]” typed by LaTex can not be recognized by web site. So please type the link by yourself if youwould like to get the right web site. Sorry for that.

FINAL REPORT FOR CANVAS DESIGN BY TCL/TK 3

Figure 1. GUI of Drawing canvas

Figure 2. GUI of Graphics canvas

Abstract. This report introduces two canvas, one is called drawing canvas, another isnamed graphics canvas. Both of them have some same functions such as moving items incanvas and drawing lines, rectangles, ovals and polygons. Meanwhile, each one has its ownspecial features. For drawing canvas, it is mainly for drawing freely with colorful pallets.While for graphics canvas, that is mainly designed to display geometrical graphs with andwithout grids in coordinate system and zoom it. Other items such as rectangles, circles andtexts can be insect as well.

This report gives a specific functions explanation and shows class diagrams with tcl/tkkey codes of each canvas.Keywords: tcl/tk, canvas, drawing, geometrical graphs

4 FAYAN TAO (1509853F-II20-0019)

Figure 3. Before moving Figure 4. After moving

1. Summary of changes

Compared to midterm works, I implement several specific functions of canvas in this finalproject. Specifically, I design two canvas by tcl/tk. One is mainly for drawing figures,whichis named drawing canvas; another is for plotting geometrical graphics and other items, thatis called graphics canvas. The GUI of each one is shown by figure 1 and figure 2, respectively.I will give detailed explanations on them one by one in the next sections.

2. Drawing canvas

2.1. Function Specifications. For drawing canvas, I mainly design following functions.All of functions are easy to operate.

1: Move.2: Draw free.3: Draw line.4: Draw rectangle.5: Draw circle/ oval/ point.6: Draw Polygon.7: Change thickness of a pen.8: Choose a new color for pen.9: Choose a new color to fill a Rectangle and a circle.10: Choose a new color for filling the canvas’s background.11: Clear whole canvas.12: Delete parts of a figure.13: Save/Save as figure as gif, jepg and png formats.14: Link to web sites for further information about tcl/tk.

2.2. Move. To move a objects in canvas, users should click the button move (the magicwand icon) –the first button in the left hand side of canvas firstly, then move the figure bydrag and drop, which can be shown by figure 3 and figure 4.


Figure 5. Draw freely and draw lines

2.3. Draw free and draw line. The second and third button in the left side column isused to draw freely and draw lines, respectively. Click the left mouse button and keep itpressed can draw or write anything users want on canvas. Similarly, keep the left mousebutton pressed can draw the line. These two functions are demonstrated by figure 5.

2.4. Draw rectangles, circles, ovals, points and polygons. The icon about rectangle,circle and polygon in the left side column allows users to draw rectangles, circles, ovals,points and polygons. As long as users keep the left mouse button pressed can them drawthose related shapes with different sizes. There is a point should be noticed that if user wantto draw points, they just need to choose the icon circle, then click canvas at ant positionthey want. Please look at figure 2.4 for a reference.

Figure 6. Draw rectangles, circles, ovals, points and polygons

6 FAYAN TAO (1509853F-II20-0019)

Figure 7. Change thickness of pen

Figure 8. choose color for pen/rectangles/cicles/background

2.5. Change thickness of pen. The spinbox in the left side is used to change the thicknessof pen. I set the thickness value from 1 to 50, the larger the value is, the thicker the pen is.So users can also fill a specific part in canvas by choosing the thicker pen. Figure 7 showsdifferent sizes of pen I choose to draw on canvas.

2.6. Choose new colors. There are three pallets I set at the bottom of canvas, the firstone is for choosing a new color for pen, the second one is for filling the rectangles and circleswith a new color, the last one pallet aims to change canvas’s background colors. Figure 8gives an example of choosing new colors for pen, rectangles, circles and background.

2.7. Show pointer’s position and canvas’s size. As figure 9 shows, at the bottom ofcanvas, there are three text areas showing the ”help texts” button, pixel position that pointerpoints and canvas’s size, respectively.

2.8. Clear and delete. If users want to delete parts of figures, they only need to pointto the related part and press the mouse right key, that is as figure 10 and figure 11 show.Additional, the clear submenu in the File menu allows users to clear the whole canvas,which is revealed by figure 12 and figure 13.


Figure 9. show pointer’s position and canvas’s size

Figure 10. Before ”delete” Figure 11. After ”delete”

Figure 12. Before ”clear” Figure 13. After ”clear”

8 FAYAN TAO (1509853F-II20-0019)

Figure 14. ”Save” and ”Save as”

Figure 15. Link to web sites

2.9. Save and Save as. The submenu save and save as of File menu allow users to savefigures in the format of gif, jpge and png. The save GUI is shown by figure 14.

2.10. Help. The menu Help provides several web links about tcl/tk,canvas and downloadactivetcl so that users can get related online resources. The figure 15 gives an example.

3. Graphics functions

3.1. Function Specifications. For the graphics canvas, the main functions are describedas follows.


Figure 16. An example of function expression

1: Two expressions for functions with tcl/tk style and users’s input. For example,x3 ⇔ x3, so that users can input the power of x like x3 to represent xn;

2: Basic functions and their combination: I set several basic functions in this system,e.g. sinx, cosx, tanx,

√x, logx, |x|, round(x), xn, ax + b . . ., users can input all of it

or their combination to get the related graphs.3: Graphs’ color change;4: Zoom in and zoom out for geometrical graphs;5: Axis and pixel position;6: With and without grids in coordinate;7: Insect text in canvas and move it;8: Draw rectangles, ovals, polygons and lines and move them;9: ”clear” and ”exit”.

3.2. Function expression. When users input a function in the entry widget, a relatedtcl/tk function expression will be shown as well at the top of this canvas. In order to make itconvenient for users to input the format of xn, they only need to input xn accordingly. Theycan omit the parens round function arguments, dollar and multiplication signs. For example,cos(x3) can be simplified as cosx3. But for the trigonometric function such as cos(nx), theparens round function arguments should be added.

Additional, users can hit 〈space〉 and 〈Return〉 in the entry widget to displays the func-tion’s graph with and without grids, respectively. Figure 16 shows an example.

3.3. Basic functions and their combination. In order to display a wide range of geo-metrical graphics, I set some basic functions firstly, as the following listing code shows. ThenI use regular expression ”{([a−z])+(x[0−9]?)}{\1(\2)}””””{([0−9])([a−z])}{\1∗\2}” to

10 FAYAN TAO (1509853F-II20-0019)

Figure 17. 5x3 + sin(x2) +logx− cos(3x)

Figure 18. int(9x)%3 +rand()− x5

allow users to input a series mathematical functions in entry widget, which can combine withthose basic functions shown, like 5x3 +sin(x2)+ logx−cos(3x) and int(9x)%3+rand()−x5.Figure 17 and figure 18 demonstrate related examples.1

2 ## se t ba s i c f unc t i on s###

3 se t : : BasicFunc {4 ” tan x/5” ” cos x” cos (3x ) s i n (5x ) ” s i n x + cos (2x ) ” ” acos x” ” cos x3”

5 ” as in x” ” s i n x” ” s i n x2” 2 1−x 0 .5 x2 x3/5 1/x sq r t ( x )

6 x+1/x x abs (x ) ”exp x” ” log x” ” log x2”

7 round (x ) ” i n t x%2” ”x−i n t x” ” 0 .2 tan x+1/tan x” x∗( rand ()−0.5)

8 x2/5−1/(2x ) ”atan x” sq r t (1−x2 ) ”abs (x−i n t ( x ∗2)) ” (x−1)/(x+1)

9 ” s i n x−tan x” ” s i n x−tan x2” ”x−abs ( i n t x ) ” 0 .5 x−1/x10 −0.5x3+x2+x−1 3∗ s i n (2x ) −0.05x4−0.2x3+1.5x2+2x−3 ”9%in t x”

11 0 .5 x2 /( x3−3x2+4) ”abs x2−3 i n t x” ” i n t x%3”

12 }

3.4. Zoom. I set a default scaling factor (factor = 10) for zooming the plotting graphs.That is to say, the first version of figures plotted are 10 times of the original one. Users canalso zoom in or out by clicking the related icons on the top of canvas. I set the zoom inand zoom out factors as 1.3 and 0.5,respectively. The entry widget next to zooming iconsdemonstrates the scaling factor. Users can input any value in that entry widget to scale thefigure as well.

If users move the mouse pointer over the canvas, they will see the x and y coordinatesdisplaying on the top of canvas. And the display changes to white if the pointer points topoint on the curve.

Figure 19 and figure 20show graph of cos(2x) + sin(x2) with different scale factor 12 and46, respectively.

3.5. With and without grids. There are two buttons ”without grids” and ”with grids”on the top of canvas. They are set to cycle through those basic functions without grids andwith grids in Cartesian plane, respectively. It is clear that the grids will also be scaled afterclick the icon zoom in the ”with grids” case. Accordingly, the graph’s color will change eachtime cycle through 13 kind of colors I set.


Figure 19. with scale factor: 12 Figure 20. with scale factor: 46

Figure 21. With grids Figure 22. Without grids

Figure 23. With scale factor: 7 Figure 24. With scale factor: 108

Figure 21 and figure 22 give examples of graph displaying in the coordinate with andwithout grids. Figure 23 and figure 24show graph of |x− int(2x)| with different scale factor7 and 108 in the coordinate with grids, respectively.

3.6. text, oval, rectangle, polygon, line. There are five buttons namely text, oval, rec-tangle, polygon listed on the top of canvas. They are used to line insert text, oval, rectangle,polygon and lines that I have been set, respectively. No matter which button users click,the prepared text or other items will appear in the canvas. Click the target object and keepthe left mouse button or keyboard pressed can move it. Meanwhile, I set outline colors and

12 FAYAN TAO (1509853F-II20-0019)

Figure 25. Insert text anddraw without coordinate

Figure 26. Insert text anddraw in coordinate

Function tested related input format correct or notAll of those basic functions sin2x, cosx3, logx, 1− x, · · ·

√

(sin(2x), cos(x3), logx, 1− x, · · · )4x + x3 − cosx 4x + x3− cosx

√

3x · x4 − logx 3x ∗ x4− logx√

sin(10x)− cos(x4) + tanx sin(10x)− cosx4 + tanx√

int(x4) + round(5x) intx4 + round(5x)√

√logx− |x3 + ex| sqrt(logx)− abs(x3 + expx)

√

int(9x)%3 + rand()− x4 int(9x)%3 + rand()− x4√

|x2| − 3 + intx absx2− 3 + intx√

x9 + 50cos(x6)− tan(logx) x9 + 50cosx6− tan(logx)√

sin(x4)− int(5x) + e(x3)− 100 · log(x) sinx4− int5x + expx3− 100logx XTable 1. Function testing

halo colors for each item. So when click an item and move it, we can see the item’s outlinecolor clearly.

Text, oval, rectangle, polygon and line can insert and draw both in canvas with andwithout coordinate, as figure 25 and figure 26 shows.

Button click will clear the whole canvas.

3.7. Functions Testing. In order to see whether the graphics canvas is correct to displaygraphs or not, I input 10 functions except those basic functions to test. Only one functionis failed to display. The results are as shown in the table 1.


Figure 27. Pipeline for the first drawing canvas

Figure 28. Pipeline for the second graphics canvas

4. Class diagrams and key codes specification

14 FAYAN TAO (1509853F-II20-0019)

Figure 27 and figure 28 shows the class diagram in terms of designing the first one drawingcanvas and the second graphics canvas, respectively.

4.1. For Drawing canvas. For the first one canvas, the explanation with key codes foreach function displayed in class diagram 27are shown as follows.

• namespace eval canvas{} : set a namespace firstly as following listed code shows.1 namespace eva l canvas {2 s e t currentmode ” drawfree ”

3 s e t th i c kne s s 1 ; ## th i ckne s s f o r pen

4 s e t t h i c k l i s t ”1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

5 19 20 22 24 26 28 30 35 40 45 50”

6 s e t penco lo r ” black ” ; # the o r i g i n a l pen c o l o r

7 s e t f i l l c o l o r ”white ” ;# the o r i g i n a l c o l o r f o r f i l l r e c t ang l e and ova l

8 s e t cvco lo rbg ”white ” ;# Background co l o r f o r cancanvas

9 s e t savename ””

10 }

• proc canvas::gui {} : design the whole GUI layout mainly for buttons and menus.• proc canvas::setcolor {}: extract pallets by using ”tk chooseColor”.• proc canvas::draw mode widget {}: set a ”draw mode” for drawing following modes:

proc canvas::draw free {},draw line {}, draw polygon {}, draw circle {}, which canbe shown in the following codes.

1 proc canvas : : draw mode {widget } {2 . canva . drawing . $ : : canvas : : currentmode con f i gu r e − r e l i e f r a i s e d

3 . canva . drawing . $widget c on f i gu r e − r e l i e f sunken ;# when c l i c k

4 #r e l a t e d drawing buttons , the button w i l l be sunken

5 s e t : : canvas : : currentmode $widget ;# s e t ”widget ” f o r drawing f o l l ow i n g

6 #drawing modes : proc canvas : : d raw f ree {} , d raw l ine {} ,7 #draw polygon {} , d r aw c i r c l e {}8 }

• proc canvas::pointer {}: pointer points to any position in canvas as the code shows.1 proc canvas : : po in t e r {} {2 canvas : : draw mode po in t e r

3 bind . canva . f . c <ButtonPress−1> {4 s e t s t a r t x %x

5 s e t s t a r t y %y

6 s e t s e l t a g [ . canva . f . c ge t tag cur rent ]

7 puts $ s e l t a g }8 bind . canva . f . c <B1−Motion> {9 . canva . f . c move $ s e l t a g [ expr %x − $ s t a r tx ] [ expr %y − $ s t a r ty ]

10 s e t s t a r t x %x

11 s e t s t a r t y %y

12 }13 bind . canva . f . c <ButtonRelease−1> {}14 }

• proc canvas::draw free {}: draw lines freely:


1 proc canvas : : d raw f ree {} {2 canvas : : draw mode drawfree

3 bind . canva . f . c <ButtonPress−1> { s e t tempfree [ . canva . f . c

4 c r e a t e l i n e %x %y %x %y − f i l l $canvas : : penco lo r −width

5 $canvas : : t h i c kne s s ]}6 bind . canva . f . c <B1−Motion> { . canva . f . c coords $tempfree

7 [ concat [ . canva . f . c coords $tempfree ] %x %y ]}8 bind . canva . f . c <ButtonRelease−1> {}9 }

• proc canvas::draw line {}: draw lines. The code is similar to the listing of ”draw free”above.• proc canvas::draw rectangle {}: draw rectangle by invoking ”create rectangle”.• proc canvas::draw polygon {}: draw polygon by invoking ”create polygon”.• proc proc canvas::draw circle {}:draw circles, ovals and points by invoking ”create

oval”.• proc canvas::save {filename} :save/save as figures with gif, jpg and png formats by

using ”tk getSaveFile”.• proc canvas::update pos {}: update the position of x and y coordinate:

1 proc canvas : : update pos {xp yp} {2 s e t o f f s e t 0

3 s e t xpos [ expr $xp − $ o f f s e t ]

4 s e t ypos [ expr $yp − $ o f f s e t ]

5 . canva . s t a tu s . pos c on f i gu r e −t ex t ”$xpos , $ypos”

6 }

4.2. For graphics canvas. In terms of the second graphics canvas, following items give aspecific explanation for each function displayed in class diagram 28.

• proc main {} : arrange the layout of GUI.• proc xyposition {}: display x and y position in coordinate.

1 proc xypos i t i on {w cx cy} {2 s e t x [ expr {double ( $cx−$ : : dx )/ $ : : f a c t o r } ]3 s e t y [ expr {double(−$cy+$ : : dy )/ $ : : f a c t o r } ]4 s e t : : i n f o [ format ”x=%.2 f y=%.2 f ” $x $y ]

5 catch {6 # i f po in t e r po in t s to the curve#

7 # the c o l o r f o r (x , y ) w i l l change to white##

8 $w con f i g −f g [ expr {abs ( [ expr $ : : fun ]−$y )<0.01?”white ” : ” black ” } ]9 } ; # may d iv id e by zero , or other i l l e g a l th ing s

10 }

• proc zoom {}: Zooming the graphs. Here, I set two states, one is for displaying gridswith coordinate, another is for graphs without grids:

1

2 proc zoom {w ra t i o } {3 g l oba l s t a t e

4 s e t : : f a c t o r [ expr round ( $ : : f a c t o r ∗ $ r a t i o ) ]

5 i f { $ s t a t e == 1} {plotFunc $w $ : : f unc t i on };# d i sp l ay graphs without g r i d s ;

6 i f { $ s t a t e == 2} { plotFuncgr id $w $ : : f unc t i on };# d i sp l ay graphs with g r i d s ;

7

8 }

• set ::BasicFunc{}: Set some basic functions for displaying.

16 FAYAN TAO (1509853F-II20-0019)

1

2 s e t : : BasicFunc {3 ” tan x/5” ” cos x” cos (3x ) s i n (5x ) ” s i n x + cos (2x ) ” ” acos x” ” cos x3”

4 ” as in x” ” s i n x” ” s i n x2” 2 1−x 0 .5 x2 x3/5 1/x sq r t ( x )

5 x+1/x x abs (x ) ”exp x” ” log x” ” log x2”

6 round (x ) ” i n t x%2” ”x−i n t x” ” 0 .2 tan x+1/tan x” x∗( rand ()−0.5)

7 x2/5−1/(2x ) ”atan x” sq r t (1−x2 ) ”abs (x−i n t ( x ∗2)) ” (x−1)/(x+1)

8 ” s i n x−tan x” ” s i n x−tan x2” ”x−abs ( i n t x ) ” 0 .5 x−1/x9 −0.5x3+x2+x−1 3∗ s i n (2x ) −0.05x4−0.2x3+1.5x2+2x−3 ”9%in t x”

10 0 .5 x2 /( x3−3x2+4) ”abs x2−3 i n t x” ” i n t x%3”

11 }

• proc plotFunc {}: Apply regular expression to combine those basic functions, so thatusers can input a wide range functions and simplify the input for xn. This functionis dependent on proc RegionFunc {} and proc withoutgrid {}.• proc RegionFunc {}: plot the function in a specific regions in canvas.• proc withoutgrid {}: without grids, there are just X axis and Y axis in the coordinate.

1

2 #regu l a r exp r e s s i on :

3 # syntax ”?” : ze ro or one occur r ence s o f the preced ing element ;

4 #syntax ”+” : one or more occur r ence s o f the preced ing element ;

5 #syntax ”∗” zero or more occur r ence s o f the preced ing element ;

6 # syntax ”{n}” : The preced ing item i s matched exac t l y n t imes .

7 #To input the power o f x , u s e r s are a l lowed to input the format l i k e ”xn”

8 #to r ep r e s en t the power n o f x ;

9

10

11 # p lo t func t i on graphs without g r i d s

12 proc plotFunc {w func t i on } {13 fo r each { re subst } {14 { ( [ a−z ] ) +(x [0−9]?)} {\1(\2)} ” ” ”” { ( [ 0 −9 ] ) ( [ a−z ] ) } {\1∗\2}15 x2 x∗x x3 x∗x∗x x4 x∗x∗x∗x x5 x∗x∗x∗x∗x x6 x∗x∗x∗x∗x∗x16 x7 x∗x∗x∗x∗x∗x∗x17 x8 x∗x∗x∗x∗x∗x∗x∗x x9 x∗x∗x∗x∗x∗x∗x∗x∗x18 x10 x∗x∗x∗x∗x∗x∗x∗x∗x∗x x \$x19 {e\$xp} exp} { regsub −a l l $re $ func t i on $subst func t i on }20 s e t : : fun $ func t i on

21 s e t : : i n f o ”Tcl : expr $ : : fun”

22 s e t c o l o r [ c o l o r choo s e {cyan red purple brown green magenta ye l low orange

23 green green3 green4 blue blue4 purple } ]24 c r e a t e l i n ew i t h ou t g r i d $w [ RegionFunc $ : : fun ] − f i l l $ c o l o r

25 }26

27 }


1 ##################################################################

2 ##plo t the func t i on in a s p e c i f i c r e g i on s in canvas

3 proc RegionFunc { fun args } {4 array s e t opt {−from −200.0 −to 200 .0 −s tep . 1 } ;5 # s e t the r eg i on f o r p l o t t i n g f unc t i on s

6 array s e t opt $args

7 s e t r e s ”{”8 f o r { s e t x $opt(−from )} {$x<= $opt(−to )} { s e t x [ expr {$x+$opt(− s tep )} ]}9 { ;# reg i on f o r x value

10 i f { ! [ catch { expr $fun} y ]} {11 i f { [ i n f o e x i s t s l a s t y ] && abs ( $y−$ l a s t y )>100} {12 append r e s ”\} \{” ;# incont inu i ty , so that the re w i l l be

13 #no graphs appear ing in canvas

14 }15 append r e s ” $x $y” ;# p lo t graphs

16

17 s e t l a s t y $y

18

19 } e l s e {append r e s ”\} \{”} ;# i f x va lue i s out o f reg ion , no graphs .

20 }21 append r e s ”}”22

23 }24

25 ##############################################################

26 # without gr ids , j u s t X ax i s and Y ax i s in the coord inate

27 proc wi thoutgr id {w po in t s args } {28 $w de l e t e a l l

29 f o r each i $po int s {30 i f { [ l l e n g t h $ i ]>2} { eva l $w c r ea t e l i n e $ i $args −tags f }31 }32 s e t f a c $ : : f a c t o r

33 $w s c a l e a l l 0 0 $ fac −$ fac

34

35 $w c r ea t e l i n e −10000 0 1000 0 − f i l l red −width 3 ;# X ax i s

36

37 $w c r ea t e l i n e 0 −10000 0 1000 − f i l l red −width 3 ; # Y ax i s

38 s e t : : dx [ expr { [ $w cget −width ] / 2 } ]39 s e t : : dy [ expr { [ $w cget −he ight ] / 2 } ]40 $w move a l l $ : : dx $ : : dy

41 $w lower f

42

43 }

• proc grid {}: Accordingly, proc grid {} function is mainly to create grids in coordi-nate.

18 FAYAN TAO (1509853F-II20-0019)

1

2 proc g r id { w po in t s args } {3 . . .

4 f o r { s e t y −100} {$y < 100} { i n c r y 2} {5 $w c r ea t e l i n e −1000 [ expr {$y ∗ $ fac } ] 1000 [ expr {$y ∗ $ fac } ]6 − f i l l gray ;# g r i d s in X d i r e c t i o n

7 $w c r ea t e l i n e [ expr {$y ∗ $ fac } ] −1000 [ expr {$y ∗ $ fac } ] 1000

8 − f i l l gray ;# g r i d s in Y d i r e c t i o n

9 }10 $w c r ea t e l i n e −10000 0 1000 0 − f i l l red −width 3 ;# X ax i s

11 $w c r ea t e l i n e 0 −10000 0 1000 − f i l l red −width 3 ; # Y ax i s

12 . . .

13 }

• proc Text {}, proc oval {}, proc rect {}, proc poly {},proc line {}: To insect text,draw oval, rectangles, polygons and lines.

1 #In s e t t ex t and move i t

2 proc Text {w Txt} {3 g l oba l y

4 i n c r y 30

5 $w c r ea t e t ext 50 $y −t ex t $Txt −tags ” text ” − f i l l b lue

6 −tags { ob j e c t moveable } ;7 }8

9 #draw oval , r e c t ang l e polygon , l i n e s and can move them .

10 proc ova l {w } {11 $w c r ea t e ova l 150 110 170 130 −width 4 − f i l l red −ou t l i n e gray

12 −tags { ob j e c t moveable } ;13 }14 proc r e c t {w} {15 $w c r ea t e r e c t ang l e 50 200 100 80 − f i l l orange −ou t l i n e black

16 −tags { ob j e c t moveable } ;17 }18 proc poly {w} {19 g l oba l x1 y1 x2 y2

20 $w c r ea t e polygon 50 10 10 80 120 120 10 −80 − f i l l green4 −ou t l i n e magenta

21 −tags { ob j e c t moveable } ;22 }23 proc l i n e {w} {24 $w c r ea t e l i n e 200 0 200 180 − f i l l b lue −width 4

25 −tags { ob j e c t moveable } ;26 }

• proc move {} and proc moveover {}: This two functions are designed to move itemsin canvas.


1

2 proc move {w x y { i n i t 0}} {3 g l oba l oldx oldy

4 i f $ i n i t {5 s e t oldx $x ; s e t oldy $y

6 $w addtag moveit c l o s e s t $x $y $ : : ha lo

7 $w dtag ! moveable moveit

8 $w r a i s e moveit

9 } e l s e {10 $w move moveit [ expr $x−$oldx ] [ expr $y−$oldy ]

11 s e t oldx $x ; s e t oldy $y

12 }13 updateitem $w

14 }15

16 ## move end

17 proc moveover {w x y} {18 $w dtag moveit

19 updateitem $w

20 }

• proc withhalo {} and proc trigger{} : Items will show outline color when they arepressed by mouse or key, and the outline color also can be seen when the items aremoving.This can be seen in figure 29

20 FAYAN TAO (1509853F-II20-0019)

1

2

3 # when move items , the items ’ ou t l i n e c o l o r w i l l change to red or purple

4 proc updateitem {w} {5 $w i t emcon f i gu r e ob j e c t −ou t l i n e {}6 $w i t emcon f i gu r e withhalo −ou t l i n e red −width 5

7 $w i t emcon f i gu r e moveit −ou t l i n e purple −width 5

8 }9

10 #################################

11 ## the item w i l l has halo in i t s ou t l i n e

12 proc withhalo {w x y s t } {13 i f $ s t { ; # s t : 0 or 1

14 $w addtag withhalo c l o s e s t $x $y $ : : ha lo

15 $w dtag ! moveable withhalo

16 } e l s e {17 $w dtag withhalo

18 }19 updateitem $w

20 }21

22 #######################

23 ## se t a t r i g g e r : when c l i c k to a item , the t r i g g e r w i l l be t r i gg e r ed ,

24 #then the ou t l i n e c o l o r o f the item w i l l appear

25 proc t r i g g e r {w x y tag } {26 s e t t t a g t o t r i g g e r

27 $w addtag $t c l o s e s t $x $y $ : : ha lo $tag

28 i f { [ l s e a r c h [ $w ge t tag s $t ] $tag ] >= 0} {29 $w dtag ( $t&&$tag ) $tag

30 withhalo $w $x $y 0

31 } e l s e {32 $w addtag $tag withtag ( $t&&!$tag )

33 withhalo $w $x $y 1

34 }35 $w dtag $t

36 }

5. System requirement

To implement this tck/tk program, users can use ActiveTcl 8.6.4, which is available forWindows, Linux and Max systems. Compared to previous versions of tcl/tk, ActiveTcl 8.6.4has abundant packages such as Img and Tk, so that users do not have to declare them atthe beginning of codes.

The size of ActiveTcl 8.6.4 is 29.4M, that is not so large. And it is easy to install and oper-ate it. It can be downloaded in this website: http://tcl.activestate.com/software/tcltk/8.6.html

6. Future Works

The two canvas designed are easy to use and the UI is user-friendly. However, functionsare still limited and not so powerful. So in the future, I would like to update them fromfollowing aspects.

1: Insert text at any position in drawing canvas;2: Implement rotation, translation in graphics canvas;3: Add functions of Copy, Paste, Cut, Redo and Undo in both canvas;


Figure 29. item with outline color

4: Combine the functions in drawing canvas with that in graphic canvas.

7. Acknowledgement

I wish to thank Dr. Leung Po for his patient guide on my project. And thanks for himgiving such useful and interesting lectures in Soft Engineer Course. I did not know tcl/tkbefore this class, it is Dr. Leung who introduces us it and provides a good chances for us todesign our own systems, so that I have a opportunity to feel the power of tcl/tk and learnto use it to create diversity GUIs with a wide range functions.

I also wish thank my teammates Zhang Miao and Zeng Zihau, and classmates ChenYuqing, Zhang Yangguang and so on for discussion on tcl/tk.

References

[1] B. Welch, Practical Programming in Tcl and Tk, DRAFT, January 13, 1995.[2] https://en.wikibooks.org/wiki/Tcl Programming/Tk examples]A tiny drawing program[3] http://wiki.tcl.tk/15073[4] tcl/tk online book: http://www.beedub.com/book/[5] http://wiki.tcl.tk/11198[6] http://wiki.tcl.tk/11198[7] http://www.cnblogs.com/kane1990/archive/2011/12/19/2293976.html[8] http://blog.csdn.net/wn0112/article/details/7827204[9] http://blog.csdn.net/wn0112/article/details/7827204

[10] http://wiki.tcl.tk/3082

Computer and information science system, Macau University of Science and Technology

Documents

TAO Fayan_Canvas design by tcltk_Final report