Creating GUI of the calculator
Creating the calculator GUI :
Aim :
- To create a simple addition and subtraction window in hypermesh by writing Tcl/Tk code as shown in below Figure 1.
| Figure 1-Addition and Subtraction Window. |
- To press the corresponding buttons in the addition and subtraction window, So the text boxes should indicate the corresponding values.
- To create the GUI layout of the calculator of our choice which is shown in below Figure 2 and, Create all dummy buttons.
| Figure 2-GUI Layout Window. |
Procedure :
1) Create a simple addition and subtraction window :
- First write a tcl/tk code to set up a window, Which is written down here 👇
set top .window
catch {destroy $top}
toplevel $top -class TopLevel
wm title $top "Addition and Subtraction"
wm geometry $top 150x100+100+50; update
wm resizable $top 0 0
wm deiconify $top Creating Buttons :
- Two aspects need to be dealt with while dealing with buttons.
1)Button Behaviour
2)Button Placement
button $windowpath -text "Text" -command {something}
place $windowpath -x value -y value -width value -height value
"button" command creates the button with its different attributes including what commands to execute
"place" command places the button geometry in the current frame. This involves the following :
- Location
- Height and Width
Creating Entry Box :
entry $top.01 -textvariable "::myvar"
place $top.01 -x 50 -y 50
Tcl/Tk code written for creating Buttons and Entry Box which is written down here
button $top.01 -text "A="; place $top.01 -x 10 -y 10 -width 60 -height 20
entry $top.02 -textvariable ::A; place $top.02 -x 80 -y 10 -width 60 -height 20
button $top.03 -text "B="; place $top.03 -x 10 -y 30 -width 60 -height 20
entry $top.04 -textvariable ::B; place $top.04 -x 80 -y 30 -width 60 -height 20
button $top.05 -text "SUM" -command {set ::D [expr $::A+$::B]}; place $top.05 -x 10 -y 50 -width 60 -height 20
entry $top.06 -textvariable ::D; place $top.06 -x 80 -y 50 -width 60 -height 20
button $top.07 -text "SUB" -command {set ::E [expr $::A-$::B]}; place $top.07 -x 10 -y 70 -width 60 -height 20
entry $top.08 -textvariable ::E; place $top.08 -x 80 -y 70 -width 60 -height 20
| Figure 3-Tcl/Tk code written to create add and sub layout. |
set top .window
catch {destroy $top}
toplevel $top -class TopLevel
wm title $top "Addition and Subtraction"
wm geometry $top 150x100+100+50; update
wm resizable $top 0 0
wm deiconify $top
button $top.01 -text "A="; place $top.01 -x 10 -y 10 -width 60 -height 20
entry $top.02 -textvariable ::A; place $top.02 -x 80 -y 10 -width 60 -height 20
button $top.03 -text "B="; place $top.03 -x 10 -y 30 -width 60 -height 20
entry $top.04 -textvariable ::B; place $top.04 -x 80 -y 30 -width 60 -height 20
button $top.05 -text "SUM" -command {set ::D [expr $::A+$::B]}; place $top.05 -x 10 -y 50 -width 60 -height 20
entry $top.06 -textvariable ::D; place $top.06 -x 80 -y 50 -width 60 -height 20
button $top.07 -text "SUB" -command {set ::E [expr $::A-$::B]}; place $top.07 -x 10 -y 70 -width 60 -height 20
entry $top.08 -textvariable ::E; place $top.08 -x 80 -y 70 -width 60 -height 20
| Figure 4-Tcl/Tl Code for Add and Sub Layout. |
2) Create the GUI layout of any calculator of your choice. Create all dummy buttons :
- Tcl/Tk code is written to create a calculator GUI layout, Which is written down here 👇
set top .window
catch {destroy $top}
toplevel $top -class TopLevel
wm title $top "Calculator"
wm geometry $top 300x280+100+40; update
wm resizable $top 0 0
wm deiconify $top
button $top.01 -text "CE"; place $top.01 -x 10 -y 60 -width 60 -height 20
button $top.02 -text "C"; place $top.02 -x 80 -y 60 -width 60 -height 20
button $top.03 -text "⌫"; place $top.03 -x 150 -y 60 -width 60 -height 20
button $top.04 -text "7"; place $top.04 -x 10 -y 100 -width 60 -height 20
button $top.05 -text "8"; place $top.05 -x 80 -y 100 -width 60 -height 20
button $top.06 -text "9"; place $top.06 -x 150 -y 100 -width 60 -height 20
button $top.07 -text "4"; place $top.07 -x 10 -y 140 -width 60 -height 20
button $top.08 -text "5"; place $top.08 -x 80 -y 140 -width 60 -height 20
button $top.09 -text "6"; place $top.09 -x 150 -y 140 -width 60 -height 20
button $top.010 -text "1"; place $top.010 -x 10 -y 180 -width 60 -height 20
button $top.011 -text "2"; place $top.011 -x 80 -y 180 -width 60 -height 20
button $top.012 -text "3"; place $top.012 -x 150 -y 180 -width 60 -height 20
entry $top.013; place $top.013 -x 10 -y 10 -width 270 -height 40
button $top.014 -text "÷"; place $top.014 -x 220 -y 60 -width 60 -height 20
button $top.015 -text "X"; place $top.015 -x 220 -y 100 -width 60 -height 20
button $top.016 -text "-"; place $top.016 -x 220 -y 140 -width 60 -height 20
button $top.017 -text "+"; place $top.017 -x 220 -y 180 -width 60 -height 20
button $top.018 -text "±"; place $top.018 -x 10 -y 220 -width 60 -height 20
button $top.019 -text "0"; place $top.019 -x 80 -y 220 -width 60 -height 20
button $top.020 -text "."; place $top.020 -x 150 -y 220 -width 60 -height 20
button $top.021 -text "="; place $top.021 -x 220 -y 220 -width 60 -height 20
| Figure 5-Tcl/Tk code written for creating calculator GUI. |
| Figure 6-Tcl/Tk code written for creating calculator GUI. |
Result :
- Hence created a simple addition and subtraction window in hypermesh by writing Tcl/Tk code.
- Hence created the GUI layout of the calculator of our choice and created all the dummy buttons.