pyTermTk - Your first CalculatorπΆοΈ
IntroπΆοΈ
This example shows how to use signals and slots to implement the functionality of a calculator widget, and how to use TTkGridLayout to place child widgets in a grid. Due to the modular nature of pyTermTk, the same result may be achieved in multiple ways, for the sack of simplicity I will use a procedural approach avoiding to create a calculator widget.
DesignπΆοΈ
First of all we need a rough idea about the layout we want to achieve. Thanks to my amazing paint.py I draw my idea and I used it to check the grid placement of any widget
Col: 0 1 2 3
|-------|-------|-------|-------| Row:
βββββββββββββββββββββββββββββββββββ ---
β βββββββββββββββββββββββββββββββ β |
β β r:0,c:0, rspan:1, cspan:4 β β | 0
β βββββββββββββββββββββββββββββββ β ---
β βββββββ βββββββ βββββββ βββββββ β |
β β 1,0 β β 1,1 β β 1,2 β β 1,3 β β | 1
β βββββββ βββββββ βββββββ βββββββ β ---
β βββββββ βββββββ βββββββ βββββββ β |
β β 2,0 β β 2,1 β β 2,2 β β 2,3 β β | 2
β βββββββ βββββββ βββββββ βββββββ β ---
β βββββββ βββββββ βββββββ βββββββ β |
β β 3,0 β β 3,1 β β 3,2 β β 3,3 β β | 3
β βββββββ βββββββ βββββββ β β β ---
β βββββββββββββββ βββββββ β 2,1 β β |
β β 4,0 1,2 β β 4,2 β β β β | 4
β βββββββββββββββ βββββββ βββββββ β ---
βββββββββββββββββββββββββββββββββββ
Start CodingπΆοΈ
Initialize the windowπΆοΈ
From calculator.001.py (tryItOnline):
# If you want to try without installation, run from the pyTermTk root folder
PYTHONPATH=`pwd` tutorial/calculator/calculator.001.py
First thing first I need a parent widget with a grid layout that I can use to place the elements of my calculator
import TermTk as ttk
# Create a root object (it is a widget that represent the terminal)
root = ttk.TTk()
# Create a window and attach it to the root (parent=root)
calculatorWin = ttk.TTkWindow(parent=root, pos=(1,1), size=(30,17), title="My first Calculator")
# Create a grid layout and set it as default for the window
winLayout = ttk.TTkGridLayout()
calculatorWin.setLayout(winLayout)
Once we have out layout object (winLayout) ready we can add all the widgets of calculator to it
Add all the widgets of calculator to itπΆοΈ
From calculator.002.py (tryItOnline):
Based on the positions and sizes defined in the design layout, I place all the widgets on the TTkGridLayout (winLayout)
# If you want to try without installation, run from the pyTermTk root folder
PYTHONPATH=`pwd` tutorial/calculator/calculator.002.py
# Define the Label and attach it to the grid layout at
# Position (Row/Col) (0,0) and (Row/Col)Span (1,4)
# I force the Max Height to 1 in order to avoid this widget to resize vertically
resLabel = ttk.TTkLabel(text="Results", maxHeight=1)
winLayout.addWidget(resLabel, 0,0, 1,4)
# Define the Numeric Buttons and attach them to the grid layout
btn1 = ttk.TTkButton(border=True, text="1")
btn2 = ttk.TTkButton(border=True, text="2")
btn3 = ttk.TTkButton(border=True, text="3")
btn4 = ttk.TTkButton(border=True, text="4")
btn5 = ttk.TTkButton(border=True, text="5")
btn6 = ttk.TTkButton(border=True, text="6")
btn7 = ttk.TTkButton(border=True, text="7")
btn8 = ttk.TTkButton(border=True, text="8")
btn9 = ttk.TTkButton(border=True, text="9")
winLayout.addWidget(btn1, 1,0) # Colspan/Rowspan are defaulted to 1 if not specified
winLayout.addWidget(btn2, 1,1)
winLayout.addWidget(btn3, 1,2)
winLayout.addWidget(btn4, 2,0)
winLayout.addWidget(btn5, 2,1)
winLayout.addWidget(btn6, 2,2)
winLayout.addWidget(btn7, 3,0)
winLayout.addWidget(btn8, 3,1)
winLayout.addWidget(btn9, 3,2)
# Adding the "0" button on the bottom which alignment is
# Position (Row/Col) (4,0) (Row/Col)span (1,2)
# Just to show off I am using another way to attach it to the grid layout
winLayout.addWidget(btn0:=ttk.TTkButton(border=True, text="0"), 4,0, 1,2)
# Define the 2 algebraic buttons
winLayout.addWidget(btnAdd:=ttk.TTkButton(border=True, text="+"), 1,3)
winLayout.addWidget(btnSub:=ttk.TTkButton(border=True, text="-"), 2,3)
# The Enter "=" button (2 rows wide )
winLayout.addWidget(btnRes:=ttk.TTkButton(border=True, text="="), 3,3, 2,1)
# Last but not least an extrabutton just for fun
winLayout.addWidget(mysteryButton:=ttk.TTkButton(border=True, text="?"), 4,2)
This code will produce this result:
ββββββββββββββββββββββββββββββ
β My first Calculator β
ββββββββββββββββββββββββββββββ’
βResults β
ββββββββββββββββββββββββββββββ
ββ 1 ββ 2 ββ 3 ββ + ββ
ββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββ
ββ 4 ββ 5 ββ 6 ββ - ββ
ββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββ
ββ 7 ββ 8 ββ 9 ββ ββ
βββββββββββββββββββββββ = ββ
βββββββββββββββββββββββ ββ
ββ 0 ββ ? ββ ββ
ββββββββββββββββββββββββββββββ
ββββββββββββββββββββββββββββββ
Cool isnβt it?
Operation and results eventsπΆοΈ
From calculator.004.py (tryItOnline):
# If you want to try without installation, run from the pyTermTk root folder
PYTHONPATH=`pwd` tutorial/calculator/calculator.004.py
# Define 2 slots to handle the Add and Sub operations
@pyTTkSlot()
def setOperationAdd():
mathElements['operation'] = "ADD"
@pyTTkSlot()
def setOperationSub():
mathElements['operation'] = "SUB"
# Connect them to the clicked signal of the buttons
btnAdd.clicked.connect(setOperationAdd)
btnSub.clicked.connect(setOperationSub)
# Same for the "=" button
@pyTTkSlot()
def executeOperation():
if mathElements['operation'] is not None:
if mathElements['operation'] == "ADD":
res = mathElements['a'] + mathElements['b']
resLabel.setText(f"{mathElements['a']} + {mathElements['b']} = {res}")
else: # "SUB" Routine
res = mathElements['a'] - mathElements['b']
resLabel.setText(f"{mathElements['a']} - {mathElements['b']} = {res}")
# reset the values
mathElements['a'] = res
mathElements['b'] = 0
mathElements['operation'] = None
btnRes.clicked.connect(executeOperation)