ECE 377 Online Assignment 3

SET B
Submitted by
Jithin Sri Sai Kalangi
11701861
A33
[1] Create a symbolic library of 5 object on canvas with drag-and-drop feature.

proc Hello {} {
.c create line 50 50 20 30 -width 4 -tag movable
# Bind actions to objects with the movable tag
.c bind movable <Button-1> {Mark %x %y %W}

.c bind movable <B1-Motion> {Drag %x %y %W}

}
proc Hello1 {} {
.c create bitmap 100 40 -bitmap info -tag movable
.c bind movable <Button-1> {Mark %x %y %W}
.c bind movable <B1-Motion> {Drag %x %y %W}
}

proc Hello2 {} {
.c create rect 200 10 300 90 -outline #777 -fill #777 -tag movable
.c bind movable <Button-1> {Mark %x %y %W}
.c bind movable <B1-Motion> {Drag %x %y %W}
}

proc Hello3 {} {
.c create oval 150 30 180 80 -tag movable
.c bind movable <Button-1> {Mark %x %y %W}
.c bind movable <B1-Motion> {Drag %x %y %W}
}
proc Hello4 {} {
.c create polygon 300 400 300 200 100 80 -tag movable
.c bind movable <Button-1> {Mark %x %y %W}
.c bind movable <B1-Motion> {Drag %x %y %W}
}

proc Mark { x y w } {
global state
# Find the object
set state($w,obj) [$w find closest $x $y]
set state($w,x) $x
set state($w,y) $y
}
proc Drag { x y w } {
global state
set dx [expr $x - $state($w,x)]
set dy [expr $y - $state($w,y)]
$w move $state($w,obj) $dx $dy
set state($w,x) $x
set state($w,y) $y
}

canvas .c -width 400 -height 400

pack .c
button .b1 -text line -command Hello
button .b2 -text bitmap -command Hello1
button .b3 -text rectangle -command Hello2
button .b4 -text oval -command Hello3
button .b5 -text polygon -command Hello4
pack .b1 .b2 .b3 .b4 .b5 -side left
without using movable tags
proc moveit { object x y a b} {
.c coord $object [expr $x ] [expr $y ] [expr $x + $a ] [expr $y+ $b ]
}

proc moveit1 { object x y } {

.c coord $object [expr $x ] [expr $y ]
}
canvas .c -width 250 -height 250
pack .c

button .b1 -text line -command { set myline [.c create line 50 50 100 100 -fill red -width 3 ]
.c bind $myline <B1-Motion> { moveit $myline %x %y 50 50}
}

button .b2 -text info -command {

set myline1 [.c create bitmap 100 40 -bitmap info ]
.c bind $myline1 <B1-Motion> { moveit1 $myline1 %x %y }
}

button .b3 -text error -command {

set myline1 [.c create bitmap 120 40 -bitmap error ]
.c bind $myline1 <B1-Motion> { moveit1 $myline1 %x %y }
}

button .b4 -text oval -command {

set myline1 [.c create oval 150 30 180 80]
.c bind $myline1 <B1-Motion> { moveit $myline1 %x %y 30 50}
}
button .b5 -text rectangle -command {
set myline1 [.c create rect 200 10 300 90 -outline #777 -fill #777]
.c bind $myline1 <B1-Motion> { moveit $myline1 %x %y 100 80}
}
pack .b1 .b2 .b3 .b4 .b5 -side left

[2] Describe bind command with example.

Bind is a command which is associated with some event performed, it can be button press, mouse
entering the window, frame, focus in, focus out and lot more. It returns the events for command
bindings.
The default bindings that we have are defined by the classes, we can make it more specific by binding
them to the objects as well, so only for that object it works.
The syntax for it is,
bind [nameofclass/object] <Event-name> {operations to be performed}
bind all <Button-B1> { puts “the object is at %x and %y”}
in this example to make this bind global , it is declared as global and it returns the values of the
mouse pointer, here the %x and %y is substituted with the corresponding x and y coordinates.
Some other events are:
<key-Return>: The event occurs when the return key is pressed on a specific object or class
<key-space>: The event occurs when the space key is pressed on a specific object or class
<ButtonRelease-1>: The event is occurred when the mouse left button is pressed on a specific objects
and then it gets selected
<B1-Motion> : The event occurs when the when mouse left button is pressed, it selects the object and
makes it move along with the cursor.
e.g.
frame .one -width 30 -height 30 -bg red
bind all <Control-c> {destroy %W}
bind .one <Any-Button> {puts "Button %b at %x %y"}
pack .one

line 1: a frame is created with the background colour red

line 2: binding key stroke ‘ctrl+c’ to destroy the widget, ‘%w’ replaces with the widget path and ‘all’
represents for all types of widgets
line 3: binding any button press of mouse to display the value of the cursor in that widget.
%x and %y are substituted by the respective values of x and y coordinates of the mouse and they are
printed on the console.
line 4: Placing frame into the wish window so that it appears.

[3] Write script to design menubar-menu shown below

menu .mbar
. config -menu .mbar
.mbar add cascade -label “File” -underline 0 -menu [menu .mbar.file -tearoff 0]

set m .mbar.file

$m add cascade -label “Import” -underline 0 -menu [menu $m.import -tearoff 1]

$m add separator
$m add command -label “Exit” -underline 0

set m1 $m.import
$m1 add command -label “News Feed”
$m1 add command -label “Bookmarks”
$m1 add command -label “Mail”

[4] Write difference between frame and canvas

Frame Canvas
1 It is a widget of rectangular in shape, It is a drawing widget which is needed for
which is needed for grouping widgets and displaying images and geometrical shapes
designing complex GUI
2 Syntax: Syntax:
frame framename configuration options canvas canvasname configuration options
frame .f1 -height 10 -width 5 -/ canvas .c -width 10 -height 15
background red
3 It is a widget which contains only widgets It is a widget where widgets can be placed
that are arranged with the help of and figures also can be drawn. The widgets
 geometric mangers i.e. place, pack and inside the canvas can be placed without
grid using geometric manger.
pack .f1.l1 .f1.l2 -side left .c create line $a $b $c $d -width $w
where .l1 and .l2 are lables Where a,b,c,d are the coordinates and w is
the width of that line.
4 The frame size changes according to its The size of the canvas is always rigid and
sub widgets by default until it is restricted any figures create out of its area cannot be
to change its size seen.
5 All the parameters that can be used are It can be designed in any way and it actually
predefined and cannot be customized looks like self-made design.
apart from the given options
like borderwidth.

[5] Explain the script given below, explain the widget used
proc Counter {} {
for {set i 0} {$i < 100} {incr i} {
puts "$i"
after 25
.pb configure -value $i
update idletask
}
}
ttk::progressbar .pb -orient horizontal -maximum 100 -length 400 -value 0 -variable a
button .bt -text "Start counter" -command Counter
pack .pb
pack .bt

The widget used here is progress bar. Line by line explanation is below
Line 1: definition of a function
Line 2: initialising a for loop that runs from 0 to 100
Line 3: writes i value on the console
Line 4: it delays for 25 milliseconds
Line 5: changes the value of progress bar object .pb
Line 6: updates the value of background tasks and keeps the application up-to-time. ( update non-
event triggered activities)
Line 7,8: Closing of loop and function
Line 9: instantiates a widget of class progressbar and configuring its orientation to horizontal and
maximum value od 100 with a length of 400 with a present value of 0 with a variable a
Line 10: instantiate/creates a button with instance name .bt1 and showing text "Start counter" and
triggers a event of function invoke named Counter i.e from line 1 to line 8 when it is pressed.
Line 11: it packs .pb object onto wish window
Line 12: it packs .bt1 object onto the wish/output window.