Lecture 10: Building GUIs with Python

School CS120
, ,
1

Lecture 10: Building GUIs with Python

1. Introduction

Hello, future GUI creators! Welcome back to Lecture 10. We’ve explored creating programs that run in the command line. Now, let’s step into making our applications more visual and interactive using Graphical User Interfaces (GUIs).

What is a GUI?
A GUI (Graphical User Interface) allows users to interact with your program using visual elements like windows, buttons, text boxes, and menus, instead of just text commands. This often makes programs more intuitive and easier to use for a wider audience.

Introducing tkinter: Your Built-in GUI Toolkit
Python comes with a standard, built-in library for GUI development called tkinter. The great advantage is that tkinter is part of Python’s standard library, so there’s no separate installation needed! If you have Python, you have tkinter. It provides a straightforward way to create windows, add widgets (GUI elements), and respond to user actions.

Our Goal Today: From Text to Visuals!
Today, we’re going on an exciting journey:

  1. We’ll explore the fundamental building blocks of tkinter.
  2. We’ll learn how to create a window, add different visual elements (called “widgets”), and arrange them neatly.
  3. We’ll discover how to make these elements respond when a user clicks or types – this is called “event handling.”
  4. And for our grand project, we’ll take our command-line “Simple Calculator” from Lecture 3 and transform it into a fully graphical tkinter application, step by step!

GUI programming can feel a bit different from writing command-line scripts because it’s “event-driven” – your program will mostly be waiting for the user to do something. It’s a new way of thinking, so be patient with yourself, and let’s have some fun building visual tools!

2. Core Concepts of tkinter

Creating a GUI with tkinter involves a few key ideas and steps. Let’s explore them one by one. Remember, GUI programming is like being an architect and an event manager for a small visual world inside your computer!

a. Importing tkinter

Just like any other Python module, the first step is to import tkinter so we can use its tools. The standard way to do this is:

import tkinter as tk
from tkinter import font as tkFont # Often useful for custom fonts
# For themed widgets, which give a more modern look (optional for now):
# from tkinter import ttk

Here, we’re importing the tkinter module and giving it a shorter, convenient alias tk. So, whenever we want to use something from tkinter, we’ll prefix it with tk. (e.g., tk.Button). We also often import tkinter.font to have more control over text appearance.

b. The Root Window: Your Application’s Main Stage

Every tkinter GUI application needs a main window. This is often called the root window. Think of it as the main stage for a play, or the primary canvas for a painting. All other parts of your GUI (buttons, text, etc.) will live inside this root window or within containers placed on it.

Here’s how you create a basic root window:

# standalone_root_window.py
import tkinter as tk

# 1. Create the main application window (the root)
root_window = tk.Tk()

# 2. Set the title that appears in the window's title bar
root_window.title("My First Tkinter Window - By Priya")

# 3. Set the initial size of the window (width x height in pixels)
root_window.geometry("400x300") # e.g., 400 pixels wide, 300 pixels tall

# 4. Start the tkinter event loop - This makes the window appear and stay open!
root_window.mainloop()

Let’s break this down:

  1. root_window = tk.Tk(): This is the magic line that creates the actual window. We store it in a variable, often called root or root_window.
  2. root_window.title("..."): This sets the text you see at the very top of the window.
  3. root_window.geometry("WIDTHxHEIGHT"): This defines the window’s starting size.
  4. root_window.mainloop(): This is a very important line. It tells tkinter to start its event loop. The event loop is like the director of our play, constantly watching for “cues” (user actions like mouse clicks or key presses) and making sure the window stays visible and responsive. Without mainloop(), your window might flash for a second and disappear! This line usually comes at the very end of your script.

Try it out! Save the code above as standalone_root_window.py and run it. You should see an empty window appear. That’s your first tkinter stage!

c. Widgets: The Visual Building Blocks

Widgets are the individual components that make up your GUI – the actors and props on your stage. tkinter provides many kinds of widgets.

Important Note on Displaying Widgets:
When you create a widget, you must always tell it where it lives – this is its parent container (usually the root_window or a tk.Frame). After creating a widget, you also need to use a layout manager (like .pack() or .grid()) to make it actually appear in the window. We’ll cover layout managers in detail shortly. For now, we’ll use .pack() in its simplest form just to make things show up in these basic examples.

  • tk.Label: Displaying Text or Images
    A tk.Label is used to display static text or an image. It’s for information that the user reads but doesn’t directly change.

    # standalone_label_example.py
import tkinter as tk

root = tk.Tk()
root.title("Label Example")
root.geometry("300x100") # Made window a bit wider

# Create a Label widget
# The first argument is its parent (where it lives: our root window)
# The 'text' option specifies what text to display
info_label = tk.Label(root, text="Hello, Arjun! Welcome to Tkinter Widgets.")

# Use .pack() to make the label visible.
# pady=20 adds 20 pixels of space above and below the label.
info_label.pack(pady=20)

root.mainloop()

    Run this. You’ll see your message displayed in the window!

  • tk.Button: Performing Actions
    A tk.Button is a clickable button. Its most important option is command, which you set to a Python function that will be called when the button is clicked.

    # standalone_button_example.py
import tkinter as tk

def on_button_click():
    print("Priya clicked the button! Greetings from the console!")
    # Later, we'll make this update the GUI itself!

root = tk.Tk()
root.title("Button Example")
root.geometry("200x100")

click_me_button = tk.Button(root, text="Click Me!", command=on_button_click)
# Note: We pass the function name 'on_button_click', not 'on_button_click()'.
# Tkinter will call the function for us when the button is pressed.
click_me_button.pack(pady=20)

root.mainloop()

    When you run this and click the button, “Priya clicked the button! Greetings from the console!” will appear in your console.

  • tk.Entry: Single-Line Text Input
    An tk.Entry widget provides a box for the user to type a single line of text.

    # standalone_entry_example.py
import tkinter as tk

def show_entry_text():
    user_text = name_entry.get() # .get() retrieves text from the Entry
    print(f"The user entered: {user_text}")
    # We can also update another widget, like a Label:
    display_label.config(text=f"You typed: {user_text}")

root = tk.Tk()
root.title("Entry Example")
root.geometry("300x150")

instruction_label = tk.Label(root, text="Enter your name, Rohan:")
instruction_label.pack(pady=5)

name_entry = tk.Entry(root, width=30, font=("Arial", 12)) # width in characters
name_entry.pack(pady=5)
# We can pre-fill text too:
name_entry.insert(0, "Default Name")

show_button = tk.Button(root, text="Show Text", command=show_entry_text)
show_button.pack(pady=10)

display_label = tk.Label(root, text="") # Empty label to display entry text
display_label.pack(pady=5)

root.mainloop()

    Type something in the box and click “Show Text”. The text will print to your console and update the label in the GUI.

  • tk.Text: Multi-Line Text Area
    For longer text input or display spanning multiple lines, you use the tk.Text widget.

    # standalone_text_example.py
import tkinter as tk

def get_text_content():
    # For Text widgets, .get() needs a start and end index.
    # "1.0" means line 1, character 0. tk.END means "the very end".
    content = story_text_area.get("1.0", tk.END)
    print("--- Text Area Content ---")
    print(content.strip()) # .strip() removes leading/trailing whitespace like the final newline

root = tk.Tk()
root.title("Text Widget Example")
root.geometry("350x250")

info_label = tk.Label(root, text="Write a short story about a brave coder:")
info_label.pack(pady=5)

story_text_area = tk.Text(root, width=40, height=5, wrap=tk.WORD, font=("Georgia", 11))
# wrap=tk.WORD makes lines break at word boundaries, not in the middle of words.
story_text_area.pack(pady=5)
story_text_area.insert(tk.END, "Once upon a time, a coder named Aarav...")

get_button = tk.Button(root, text="Get Story from Text Area", command=get_text_content)
get_button.pack(pady=10)

root.mainloop()

  • tk.Frame: Organizing Widgets
    A tk.Frame is an invisible (by default) container widget. Its main purpose is to help you group and organize other widgets. This is extremely useful for more complex layouts, as it allows you to use different layout strategies for different parts of your window.

    # standalone_frame_example.py
import tkinter as tk

root = tk.Tk()
root.title("Frame Example")
root.geometry("300x200")

# Create a top frame with a visible border for clarity
top_frame = tk.Frame(root, borderwidth=2, relief="raised", padx=10, pady=10)
top_frame.pack(pady=10, padx=10, fill=tk.X) # Frame itself is packed

label_in_frame = tk.Label(top_frame, text="This label is in the top frame.")
label_in_frame.pack()

# Create a bottom frame
bottom_frame = tk.Frame(root, padx=10, pady=10)
bottom_frame.pack(pady=10)

button1_in_bottom = tk.Button(bottom_frame, text="Button 1 (Bottom Left)")
button1_in_bottom.pack(side=tk.LEFT, padx=5) # Pack buttons side-by-side in this frame

button2_in_bottom = tk.Button(bottom_frame, text="Button 2 (Bottom Right)")
button2_in_bottom.pack(side=tk.LEFT, padx=5)

root.mainloop()

d. Widget Options: Customizing Appearance and Behavior

Most tkinter widgets accept many options. Common options include:

  • text: The text displayed on the widget.
  • fg (or foreground): Text color (e.g., fg="red").
  • bg (or background): Widget’s background color (e.g., bg="lightyellow").
  • font: Font family, size, and style (e.g., ("Arial", 12, "bold")).
  • width, height: Dimensions (meaning varies by widget).
  • command: Function to call for Button clicks.
  • state: tk.NORMAL (default), tk.DISABLED (grayed out), tk.READONLY (for Entry/Text).
  • relief: Border style (e.g., tk.FLAT, tk.RAISED, tk.SUNKEN).
  • bd or borderwidth: Width of the border.
  • textvariable: Links widget text to a tk.StringVar.

You can set these when creating the widget or change them later using .config() or dictionary-like assignment:
my_label.config(text="Updated Text!", fg="purple") or my_label['text'] = "Even Newer Text!"

e. Layout Management: Arranging Your Widgets

This is like being the stage director for your GUI play. tkinter needs to know where to put your widgets.

Important Rule: Do not mix different layout managers (e.g., .pack() and .grid()) for widgets that share the same parent container. If you need to mix, use tk.Frames. Each frame can use its own layout manager for the widgets inside it.

  • .pack(): The Simple Packer
    .pack() is great for simple layouts, like stacking things vertically or placing them side-by-side. It tries to find the best “parcel” of space for each widget.
    Key options: side (tk.TOP, tk.BOTTOM, tk.LEFT, tk.RIGHT), fill (tk.X, tk.Y, tk.BOTH), expand (True/False), padx/pady (external padding), ipadx/ipady (internal padding).

    # pack_example_sides.py
import tkinter as tk
root = tk.Tk(); root.title("Pack Sides")
tk.Label(root, text="TOP", bg="red").pack(side=tk.TOP, fill=tk.X, pady=2)
tk.Label(root, text="BOTTOM", bg="green").pack(side=tk.BOTTOM, fill=tk.X, pady=2)
tk.Label(root, text="LEFT", bg="blue").pack(side=tk.LEFT, fill=tk.Y, padx=2)
tk.Label(root, text="RIGHT", bg="yellow").pack(side=tk.RIGHT, fill=tk.Y, padx=2)
root.mainloop()

  • .grid(): The Structured Grid
    .grid() is usually preferred for more complex layouts because it arranges widgets in a table-like structure of rows and columns. This is perfect for our calculator!
    Key options: row, column, sticky (e.g., tk.N, tk.S, tk.E, tk.W, or tk.NSEW to stretch), columnspan, rowspan, padx/pady.

    # grid_example_simple.py
import tkinter as tk
root = tk.Tk(); root.title("Simple Grid")
tk.Label(root, text="Name:", padx=5, pady=5).grid(row=0, column=0, sticky=tk.W)
tk.Entry(root, width=20).grid(row=0, column=1, padx=5, pady=5)
tk.Label(root, text="Email:", padx=5, pady=5).grid(row=1, column=0, sticky=tk.W)
tk.Entry(root, width=20).grid(row=1, column=1, padx=5, pady=5)
tk.Button(root, text="Submit").grid(row=2, column=0, columnspan=2, pady=10)

# Make columns expand if window is resized
root.grid_columnconfigure(1, weight=1)
root.mainloop()

    sticky=tk.W makes the labels stick to the west (left) side of their cell. columnspan=2 makes the button take up two columns. weight=1 on column 1 allows it to expand if the window is resized.

  • .place(): Pixel Perfection (Use Sparingly)
    .place() lets you position widgets using exact x,y pixel coordinates or relative positions. It’s less flexible for most applications.

f. Event Handling: Making GUIs Interactive

  • command for Buttons: The command option is the easiest way to make buttons do things.
  • Using lambda for Callbacks with Arguments:
    If your function needs specific information (like which button was pressed), lambda is your friend.
    # lambda_example_buttons.py
import tkinter as tk

root = tk.Tk()
root.title("Lambda Example")

display_var = tk.StringVar()
display_label = tk.Label(root, textvariable=display_var, font=("Arial", 14))
display_label.pack(pady=10)

def button_pressed(value):
    display_var.set(f"Button '{value}' was pressed!")

# Create buttons that pass a specific value using lambda
tk.Button(root, text="Button 1", command=lambda: button_pressed("One")).pack(pady=3)
tk.Button(root, text="Button 2", command=lambda: button_pressed("Two")).pack(pady=3)

root.mainloop()
    The lambda: button_pressed("One") creates a mini-function that calls button_pressed with the argument “One”.

g. tkinter Variable Classes (tk.StringVar, etc.)

These are special variables (tk.StringVar, tk.IntVar, tk.DoubleVar, tk.BooleanVar) that can be linked to widgets.

  • Why use them? If you link a tk.StringVar to an Entry’s textvariable and also to a Label’s textvariable, then:

    1. Typing in the Entry automatically updates the StringVar.
    2. The Label (also linked) automatically shows the new text from the StringVar.
    3. If you programmatically change the StringVar using .set(), both the Entry and Label will update.

  • Use .get() to get the value from a Tkinter variable (e.g., my_string_var.get()).

  • Use .set() to set the value (e.g., my_string_var.set("New value")).

    # stringvar_live_update.py
import tkinter as tk

root = tk.Tk()
root.title("StringVar Live Update")

shared_data = tk.StringVar()

tk.Label(root, text="Type here:").pack()
tk.Entry(root, textvariable=shared_data, width=30, font=("Arial", 12)).pack(pady=5)

tk.Label(root, text="Label below mirrors the Entry:").pack()
tk.Label(root, textvariable=shared_data, font=("Arial", 12, "bold"), fg="blue").pack(pady=5)

def clear_entry():
    shared_data.set("") # This will clear both Entry and Label

tk.Button(root, text="Clear", command=clear_entry).pack(pady=10)

root.mainloop()

    This live updating is very powerful for dynamic GUIs. Our calculator will use a StringVar for its display.

h. The Main Event Loop: root.mainloop()

This is the engine of your tkinter application. It must be the last thing you call after setting up your GUI. It makes the window appear, keeps it running, and listens for all user interactions (events).

3. Let’s Build the tkinter Calculator Step-by-Step!

Now, we’ll apply these tkinter concepts to build our graphical calculator. We’ll take an incremental approach, adding features step by step. This is a great way to build more complex applications.

Our Goal: A calculator with a display, digit buttons (0-9, .), operator buttons (+, -, *, /), Clear (‘C’), Backspace (‘<-’), Percent (‘%’) (as a placeholder), and Equals (‘=’).

We’ll use the calculator_operations.py module (you’ll need to make sure this file is in the same directory as your calculator script, or that Python can find it).

Step 1: Basic Window and Display

Let’s start by creating the main window and the calculator’s display area. The display will be a tk.Entry widget, but set to readonly so the user can’t type directly into it; we’ll update it with our code.

# tkinter_calculator_s1.py
import tkinter as tk
from tkinter import font as tkFont

# --- Main Application Window Setup ---
root = tk.Tk()
root.title("My Tkinter Calculator")
# root.geometry("280x380") # You can uncomment and adjust size later
root.resizable(False, False) # Let's keep it fixed size for simplicity

# --- State Variable for the Display ---
# This StringVar will hold the text to be shown in our calculator's display.
current_input_str = tk.StringVar()
current_input_str.set("0") # Initialize display with "0"

# --- UI Elements ---
# Define a font for the display
display_font = tkFont.Font(family="Helvetica", size=24, weight="bold")

# Create the display Entry widget
# It's linked to current_input_str via 'textvariable'.
# 'state="readonly"' means user can't type, we update it via code.
display_entry = tk.Entry(
    root,
    textvariable=current_input_str,
    font=display_font,
    bd=5, # Border width
    relief=tk.SUNKEN, # Sunken border effect gives it depth
    justify='right',  # Text will be aligned to the right
    # To make readonly Entry look like normal one, but not editable by keyboard:
    disabledbackground="white", # Background when disabled (or readonly)
    disabledforeground="black"  # Text color when disabled (or readonly)
)
# Place the display on the grid, spanning 4 columns
display_entry.grid(row=0, column=0, columnspan=4, padx=10, pady=15, ipady=15, sticky="nsew")

# Configure column weights - this helps the display expand if window is resized
# (even if resizable is False now, it's good practice for grid layouts)
for i in range(4): # We plan for 4 columns of buttons
    root.grid_columnconfigure(i, weight=1)
root.grid_rowconfigure(0, weight=1) # Allow display row to take space

# --- Start the Application ---
root.mainloop()

To Do: Save this as tkinter_calculator_s1.py and run it. You should see a window titled “My Tkinter Calculator” with a display area showing “0”. The display should span the width of the window.

Step 2: Adding the First Row of Digit Buttons & Basic Input

Now, let’s add just one row of digit buttons (7, 8, 9) and make them append to our display.

# tkinter_calculator_s2.py
import tkinter as tk
from tkinter import font as tkFont

# --- Global State (for now, will move to class later) ---
current_input_str = None # Will be StringVar
clear_next_input = False # Will be boolean

# --- Event Handler for Digits (Simplified) ---
def on_digit_press(digit_char):
    global clear_next_input # To modify global variable

    current_text = current_input_str.get()
    if clear_next_input: # If a result or operator was just shown, start new input
        current_text = ""
        clear_next_input = False

    if current_text == "0" and digit_char != '.': # Replace initial "0"
        current_input_str.set(digit_char)
    else:
        # Prevent multiple decimal points (basic check)
        if digit_char == '.' and '.' in current_text:
            return
        current_input_str.set(current_text + digit_char)

# --- Main Application Window Setup ---
root = tk.Tk()
root.title("My Tkinter Calculator - Step 2")
root.resizable(False, False)

current_input_str = tk.StringVar()
current_input_str.set("0")

display_font = tkFont.Font(family="Helvetica", size=24, weight="bold")
button_font = tkFont.Font(family="Helvetica", size=14) # Font for buttons

display_entry = tk.Entry(
    root, textvariable=current_input_str, font=display_font,
    bd=5, relief=tk.SUNKEN, justify='right', state='readonly',
    disabledbackground="white", disabledforeground="black"
)
display_entry.grid(row=0, column=0, columnspan=4, padx=10, pady=15, ipady=15, sticky="nsew")

# --- Button Definitions (One Row) ---
button_texts_row = ['7', '8', '9']
# Buttons will start on row 1 (row 0 is display)
# We are using a simplified handler for now.
for i, text in enumerate(button_texts_row):
    button = tk.Button(
        root, text=text, font=button_font, height=2, width=5,
        command=lambda char=text: on_digit_press(char) # Pass the digit to handler
    )
    button.grid(row=1, column=i, padx=2, pady=2, sticky="nsew")

# Configure column/row weights for expansion
for i in range(len(button_texts_row)): # Configure columns used by these buttons
    root.grid_columnconfigure(i, weight=1)
root.grid_rowconfigure(0, weight=1) # Display row
root.grid_rowconfigure(1, weight=1) # Button row

root.mainloop()

To Do: Save and run tkinter_calculator_s2.py. Click the ‘7’, ‘8’, ‘9’ buttons. You should see them appear in the display. Notice how lambda char=text: on_digit_press(char) is used to send the specific digit to our handler.

Step 3: Adding All Buttons (Layout Focus)

Let’s get the full layout of buttons in place. We’ll create a more general on_button_press function that currently just prints the action associated with each button. This step focuses on getting the visual structure right.

# tkinter_calculator_s3.py
import tkinter as tk
from tkinter import font as tkFont

# --- Unified Button Press Handler (Temporary) ---
def on_button_press(action_char):
    print(f"Button pressed: {action_char}")
    # For digits, we can still append to display for now
    if action_char.isdigit() or action_char == '.':
        current_text = current_input_str.get()
        if current_text == "0" and action_char != '.':
            current_input_str.set(action_char)
        else:
            if action_char == '.' and '.' in current_text:
                return
            current_input_str.set(current_text + action_char)
    # Other actions (operators, C, =, etc.) will be handled later

# --- Main Application Window Setup ---
root = tk.Tk()
root.title("My Tkinter Calculator - Step 3 (Full Layout)")
root.resizable(False, False)

current_input_str = tk.StringVar()
current_input_str.set("0")

display_font = tkFont.Font(family="Helvetica", size=24, weight="bold")
button_font = tkFont.Font(family="Helvetica", size=14)

display_entry = tk.Entry(
    root, textvariable=current_input_str, font=display_font,
    bd=5, relief=tk.SUNKEN, justify='right', state='readonly',
    disabledbackground="white", disabledforeground="black"
)
display_entry.grid(row=0, column=0, columnspan=4, padx=10, pady=15, ipady=15, sticky="nsew")

# --- Full Button Layout ---
# (text, row, col, columnspan, action_character_or_key)
buttons_config = [
    ('C', 1, 0, 1, 'clear'), ('<-', 1, 1, 1, 'backspace'), ('%', 1, 2, 1, 'percent'), ('/', 1, 3, 1, '/'),
    ('7', 2, 0, 1, '7'), ('8', 2, 1, 1, '8'), ('9', 2, 2, 1, '9'), ('*', 2, 3, 1, '*'),
    ('4', 3, 0, 1, '4'), ('5', 3, 1, 1, '5'), ('6', 3, 2, 1, '6'), ('-', 3, 3, 1, '-'),
    ('1', 4, 0, 1, '1'), ('2', 4, 1, 1, '2'), ('3', 4, 2, 1, '3'), ('+', 4, 3, 1, '+'),
    ('0', 5, 0, 2, '0'), ('.', 5, 2, 1, '.'), ('=', 5, 3, 1, 'equals')
]

for (text, r, c, cs, action_char) in buttons_config:
    button = tk.Button(
        root, text=text, font=button_font, height=2, width=5 if cs == 1 else 11, # '0' button is wider
        command=lambda char=action_char: on_button_press(char)
    )
    button.grid(row=r, column=c, columnspan=cs, padx=2, pady=2, sticky="nsew")

# Configure column/row weights for expansion
for i in range(4): root.grid_columnconfigure(i, weight=1) # 4 columns
for i in range(6): root.grid_rowconfigure(i, weight=1)   # 6 rows (0 for display, 1-5 for buttons)

root.mainloop()

To Do: Save and run tkinter_calculator_s3.py. Now you should see the complete calculator layout! Clicking digit buttons will update the display. Clicking other buttons will print their action_char to the console.

Step 4 to 7: Encapsulating in a Class and Implementing Full Logic
From this point, it’s best to organize the code into a CalculatorApp class as shown in the “Full Code Presentation” section. This class will hold the state variables (self.first_operand, self.operator, self.clear_display_on_next_digit, self.current_input) and the on_button_press method will contain the complete logic for all operations (digits, operators, equals, clear, backspace, percent placeholder).

The “Full Code Presentation” below shows this complete, class-based structure with all the robust logic implemented. The “Detailed Code Walkthrough” that follows it will explain this final version thoroughly. Students should aim to understand how the logic from these conceptual steps is integrated into the final class structure.

c. Full Code Presentation (tkinter_calculator_app.py)

This is the code that should be in examples/gui_apps/tkinter_calculator_app.py.
(The following code block is the latest corrected script, including robust error handling and state management.)

# examples/gui_apps/tkinter_calculator_app.py
import tkinter as tk
from tkinter import font as tkFont # For custom fonts

# IMPORTANT: To run this script, ensure that the file
# 'calculator_operations.py' from 'examples/modules_example/'
# is in the SAME directory as this script.
# For simplicity in this educational context, we are assuming it's copied here
# or that Python's path is configured to find it (e.g., by running from
# the parent 'examples' directory using a command like: python -m gui_apps.tkinter_calculator_app).
# A more advanced setup might involve Python packages or adjusting PYTHONPATH.
try:
    import calculator_operations as calc_ops
except ImportError:
    print("FATAL ERROR: calculator_operations.py not found.")
    print("Please copy it from 'examples/modules_example/' to the same directory as this script,")
    print("or run from a suitable parent directory.")
    # Fallback stubs so the GUI can at least start to show itself
    class calc_ops:
        @staticmethod
        def add(a,b): return "Module Missing"
        @staticmethod
        def subtract(a,b): return "Module Missing"
        @staticmethod
        def multiply(a,b): return "Module Missing"
        @staticmethod
        def divide(a,b): return "Module Missing"
    # Consider exiting if module is critical: import sys; sys.exit()

class CalculatorApp:
    def __init__(self, root_window):
        self.root = root_window
        self.root.title("Tkinter Calculator")
        # self.root.geometry("300x400") # Optional: set initial size

        # --- State Variables ---
        self.current_input = tk.StringVar()
        self.first_operand = None
        self.operator = None
        self.clear_display_on_next_digit = False

        # --- UI Elements ---
        self.display_font = tkFont.Font(family="Helvetica", size=18, weight="bold")
        self.button_font = tkFont.Font(family="Helvetica", size=12)

        self.display_entry = tk.Entry(self.root, textvariable=self.current_input, font=self.display_font,
                                      bd=5, relief=tk.SUNKEN, justify='right', state='readonly',
                                      disabledbackground="white", disabledforeground="black")
        self.display_entry.grid(row=0, column=0, columnspan=4, padx=5, pady=10, sticky="nsew")

        buttons = [
            ('C', 1, 0, 1, 'clear'), ('<-', 1, 1, 1, 'backspace'), ('%', 1, 2, 1, 'percent'), ('/', 1, 3, 1, '/'),
            ('7', 2, 0, 1, '7'), ('8', 2, 1, 1, '8'), ('9', 2, 2, 1, '9'), ('*', 2, 3, 1, '*'),
            ('4', 3, 0, 1, '4'), ('5', 3, 1, 1, '5'), ('6', 3, 2, 1, '6'), ('-', 3, 3, 1, '-'),
            ('1', 4, 0, 1, '1'), ('2', 4, 1, 1, '2'), ('3', 4, 2, 1, '3'), ('+', 4, 3, 1, '+'),
            ('0', 5, 0, 2, '0'), ('.', 5, 2, 1, '.'), ('=', 5, 3, 1, 'equals')
        ]

        for (text, r, c, cs, action_char) in buttons:
            btn = tk.Button(self.root, text=text, font=self.button_font,
                            command=lambda char=action_char: self.on_button_press(char),
                            height=2, width=5 if cs == 1 else 11)
            btn.grid(row=r, column=c, columnspan=cs, padx=2, pady=2, sticky="nsew")

        for i in range(6): self.root.grid_rowconfigure(i, weight=1)
        for i in range(4): self.root.grid_columnconfigure(i, weight=1)
        self.current_input.set("0")

    def on_button_press(self, char_or_action):
        if char_or_action.isdigit() or char_or_action == '.':
            current_display_val = self.current_input.get()
            if self.clear_display_on_next_digit:
                current_display_val = ""

            if char_or_action == '.':
                if '.' in current_display_val:
                    return
                if not current_display_val:
                    current_display_val = "0"
            elif current_display_val == "0":
                 current_display_val = ""
            self.current_input.set(current_display_val + char_or_action)
            self.clear_display_on_next_digit = False

        elif char_or_action in ['+', '-', '*', '/']:
            current_display_string = self.current_input.get()
            if current_display_string in ["Error", "Input Error", "Invalid Input", "Error: Div by zero", "Calc Error", "Incomplete Op", "Module Missing", "Percent N/I"]:
                return

            if current_display_string:
                try:
                    self.first_operand = float(current_display_string)
                    self.operator = char_or_action
                    self.current_input.set('')
                    self.clear_display_on_next_digit = True
                except ValueError:
                    self.current_input.set("Invalid Input")
                    self.first_operand = None
                    self.operator = None
                    self.clear_display_on_next_digit = True
            elif self.first_operand is not None:
                 self.operator = char_or_action
                 self.current_input.set('')
                 self.clear_display_on_next_digit = True

        elif char_or_action == 'equals':
            current_display_string = self.current_input.get()
            if not current_display_string or current_display_string in ['+', '-', '*', '/'] or "Error" in current_display_string or "N/I" in current_display_string or "Missing" in current_display_string:
                self.current_input.set("Invalid Input for Calc")
                self.clear_display_on_next_digit = True
                return

            if self.operator and self.first_operand is not None:
                try:
                    second_operand = float(current_display_string)
                    result = None
                    op_func = None
                    if self.operator == '+': op_func = calc_ops.add
                    elif self.operator == '-': op_func = calc_ops.subtract
                    elif self.operator == '*': op_func = calc_ops.multiply
                    elif self.operator == '/': op_func = calc_ops.divide

                    if op_func: result = op_func(self.first_operand, second_operand)

                    result_formatted_str = ""
                    if isinstance(result, str) and "Error" in result:
                        result_formatted_str = result
                    elif result is not None:
                        if result == int(result): result_formatted_str = str(int(result))
                        else: result_formatted_str = str(round(result, 10))

                    self.current_input.set(result_formatted_str)

                    if result is not None and not (isinstance(result, str) and "Error" in result):
                        self.first_operand = float(result_formatted_str) # Result becomes new first_operand
                    else:
                        self.first_operand = None
                    self.operator = None
                    self.clear_display_on_next_digit = True
                except ValueError:
                    self.current_input.set("Invalid Input for Calc")
                    self.clear_display_on_next_digit = True
                except Exception as e:
                    self.current_input.set("Calc Error")
                    self.first_operand = None
                    self.operator = None
                    self.clear_display_on_next_digit = True
            elif current_display_string and not self.operator :
                self.clear_display_on_next_digit = True
                return
            else:
                 self.current_input.set("Invalid Input for Calc")
                 self.clear_display_on_next_digit = True

        elif char_or_action == 'backspace':
            current_val = self.current_input.get()
            if "Error" in current_val or "N/I" in current_val or "Missing" in current_val:
                self.current_input.set("0")
            elif self.clear_display_on_next_digit : # If a result was just shown, clear to 0
                self.current_input.set("0")
            elif current_val != "0":
                new_val = current_val[:-1]
                self.current_input.set(new_val if new_val else "0")
            self.clear_display_on_next_digit = False

        elif char_or_action == 'percent':
            self.current_input.set("Percent N/I")
            self.clear_display_on_next_digit = True

        elif char_or_action == 'clear':
            self.current_input.set("0")
            self.first_operand = None
            self.operator = None
            self.clear_display_on_next_digit = False

        elif char_or_action in ['(', ')'] and char_or_action not in ['backspace', 'percent']:
            current_display_string = self.current_input.get()
            if self.clear_display_on_next_digit:
                current_display_string = ""
            if current_display_string == "0" and char_or_action == '(':
                 current_display_string = ""
            if current_display_string not in ["Error", "Input Error", "Invalid Input", "Error: Div by zero", "Calc Error", "Incomplete Op", "Module Missing", "Percent N/I"]:
                 self.current_input.set(current_display_string + char_or_action)
            elif char_or_action == '(' :
                 self.current_input.set(char_or_action)

if __name__ == '__main__':
    main_window = tk.Tk()
    app = CalculatorApp(main_window)
    main_window.mainloop()

d. Detailed Code Walkthrough

Let’s break down the tkinter_calculator_app.py, focusing on its robust logic from the latest version:

  1. Imports and calc_ops Handling:

    • Standard imports: tkinter as tk and from tkinter import font as tkFont.
    • Simplified calc_ops Import: The script now directly attempts import calculator_operations as calc_ops.
      • Guidance for Students: A crucial comment explains that for this to work easily, calculator_operations.py (from the examples/modules_example/ directory) should be copied into the same directory as tkinter_calculator_app.py. This simplifies the setup for educational purposes, avoiding more complex Python path configurations.
      • Clear Error Feedback: If the import fails, a “FATAL ERROR” message is printed to the console, and a stub calc_ops class is used. This stub’s methods return “Module Missing”, making it very obvious on the calculator display if the real calculation logic isn’t working.

  2. CalculatorApp Class: The GUI is neatly encapsulated in this class. This is good practice for organizing GUI code, keeping data (like state variables) and methods (like event handlers) together.

    • __init__(self, root_window):

      • Initializes the main application window (self.root).
      • State Variables - The Core of Calculator Logic: These are instance variables (self.something) so they can be accessed and modified by all methods within the class.
        • self.current_input = tk.StringVar(): This StringVar is linked to the display Entry. Any call to self.current_input.set(...) updates the display, and self.current_input.get() retrieves the current text from it.
        • self.first_operand = None: Stores the first number of an operation (e.g., the 5 in 5 + 3). It’s set when an operator button is pressed after a number. After a calculation, it’s updated with the result to allow for chained operations (e.g., 5 + 3 = * 2 =).
        • self.operator = None: Stores the character of the pending arithmetic operator (e.g., '+', '-').
        • self.clear_display_on_next_digit = False: This boolean flag is vital for managing the input flow:
          • It’s set to True after an operator is successfully processed (because the display is then cleared via self.current_input.set('') to await the second operand) or after a calculation result is shown with ‘=’ or if an error message is displayed. This means the next digit pressed should start a new number.
          • When a digit button is pressed: If this flag is True, the current_display_val (local variable in handler) is reset to "" (or “0” if only a decimal is pressed next) before the new character is appended. The flag is then immediately set back to False, as the user has started entering a new number.
          • The ‘Clear’ and ‘Backspace’ buttons also manage this flag to ensure correct subsequent input behavior.
      • UI Elements: Fonts are defined. The Entry widget is configured (readonly, linked to self.current_input).
      • Button Layout: The buttons list defines the text, grid position, columnspan, and an action_char (e.g., ‘7’, ‘+’, ‘clear’, ‘backspace’, ‘percent’) for each button. The layout includes ‘<-’ and ‘%’ buttons.
      • Buttons are created in a loop; lambda is used in command to pass the specific action_char to the self.on_button_press method.
      • The display is initialized to “0” using self.current_input.set("0").

    • on_button_press(self, char_or_action) Method (Central Event Handler): This method is the heart of the calculator’s interactivity.

      • Digit/Dot Handling (char_or_action.isdigit() or char_or_action == '.'):
        • It gets the current display value (current_display_val = self.current_input.get()).
        • If self.clear_display_on_next_digit is True, current_display_val is reset to "". If the character being pressed is . and the display was just cleared, current_display_val becomes “0” to correctly form “0.”.
        • It correctly handles replacing an initial “0” (if current_display_val is “0” and char_or_action is not ‘.’, current_display_val becomes "" before appending the new digit).
        • Prevents multiple decimal points in a number.
        • The new character is appended to current_display_val, and self.current_input (the StringVar) is updated via .set().
        • Finally, self.clear_display_on_next_digit is set to False, because the user is now actively typing or editing a number.
      • Operator Handling (char_or_action in ['+', '-', '*', '/']):
        • Gets the current display string.
        • Input Validation: It first checks if the current_display_string is one of the known error or placeholder messages (like “Error”, “Invalid Input”, “Percent N/I”). If so, it returns, preventing attempts to use these strings as numbers.
        • If current_display_string is valid (not an error and not empty):
          • It attempts self.first_operand = float(current_display_string).
          • Sets self.operator = char_or_action.
          • Display Update: It calls self.current_input.set('') to clear the display, making it ready for the user to input the second operand.
          • Sets self.clear_display_on_next_digit = True. (Even though the display is empty, this flag signals that the very next digit input is the start of a new number and shouldn’t try to append to an empty string in a way that might miss the initial “0” for decimals).
          • If float() conversion fails (e.g., if a non-numeric string somehow got through, though unlikely with button input), it displays “Invalid Input”, resets first_operand and operator, and sets self.clear_display_on_next_digit = True.
        • If current_display_string is empty but self.first_operand already exists (e.g., user pressed “5”, “+”, then immediately “-”), it just updates self.operator and ensures the display is clear for the second number.
      • Equals Handling (char_or_action == 'equals'):
        • Gets current_display_string.
        • Input Validation: It first checks if current_display_string is empty, or is an operator itself, or is an error/placeholder string. If any of these, it sets the display to “Invalid Input for Calc”, sets self.clear_display_on_next_digit = True, and returns. This is crucial for preventing errors when float() is called.
        • If self.operator and self.first_operand are validly set (meaning a first number and an operator are pending):
          • It attempts second_operand = float(current_display_string).
          • If float() fails, it sets “Invalid Input for Calc” and self.clear_display_on_next_digit = True. The first_operand and operator are preserved in this case, allowing the user to potentially correct the second number and try hitting equals again.
          • If successful, it calls the appropriate calculation function from calc_ops.
          • Displays the result (formatted nicely to remove unnecessary .0 or limit decimal places) or an error message from calc_ops.divide (e.g., “Error: Div by zero”).
          • State Update for Chaining: If the calculation was successful (i.e., result is a number, not an error string), self.first_operand is updated with this numerical result (float(result_formatted_str)). This allows for chained operations like 5 + 3 = (shows 8), then * 2 = (calculates 8 * 2, shows 16).
          • self.operator is reset to None because the current operation is complete.
          • self.clear_display_on_next_digit = True so the next digit input starts a new number.
        • Handles other edge cases, like if “=” is pressed when only a number is on display (it just keeps the number and sets clear_display_on_next_digit = True) or if the state is otherwise incomplete for a calculation.
      • Clear Handling (char_or_action == 'clear'):
        • Resets self.current_input to “0”.
        • Resets self.first_operand to None, self.operator to None.
        • Sets self.clear_display_on_next_digit = False (ready for fresh input).
      • Backspace (‘<-’) Handling (char_or_action == 'backspace'):
        • Gets current_val.
        • If current_val is an error message, “Percent N/I”, or “Module Missing”, OR if self.clear_display_on_next_digit is True (meaning a result or operator was just processed), backspace effectively clears the display to “0”.
        • Otherwise (if editing a normal number and it’s not already “0”), it removes the last character. If the string becomes empty as a result, it’s set to “0”.
        • Always sets self.clear_display_on_next_digit = False because using backspace means the user is actively editing or starting a new input.
      • Percent (‘%’) Handling (char_or_action == 'percent'):
        • This is a placeholder. It sets the display to “Percent N/I” (Not Implemented) to clearly communicate its status.
        • Sets self.clear_display_on_next_digit = True so the next digit input will clear this message.
      • Parentheses: The logic for ( ) is mostly defensive. Since these buttons are not in the current layout (replaced by backspace and percent), this part of the handler is not actively used by the main calculator buttons.

  3. if __name__ == '__main__': block: Standard Tkinter application launch: creates the root window, instantiates CalculatorApp, and starts the mainloop.

This detailed walkthrough should provide a clear understanding of the calculator’s now more robust internal logic, especially how it manages its state (first_operand, operator, clear_display_on_next_digit) and handles potential user input errors or edge cases.

5. Recap of Concepts Learned

Today, we’ve learned the fundamentals of GUI programming with Python’s built-in tkinter library:

  • What GUIs are and why they are useful for user interaction.
  • tkinter Basics:
    • Importing: import tkinter as tk.
    • Root Window: Creating the main application window with tk.Tk(), setting its title and geometry.
    • Widgets: The core elements like tk.Label, tk.Button, tk.Entry, tk.Text, and tk.Frame.
    • Widget Configuration: Customizing appearance and behavior using options like text, fg, bg, font, width, height, state.
  • Layout Management with .grid(): Arranging widgets in rows and columns, using sticky for alignment, and columnspan/rowspan for merging cells. (And a brief mention of .pack() and .place()).
  • tkinter Variables (tk.StringVar): Using special variables to link Python logic directly to widget content for dynamic updates (e.g., textvariable).
  • Event Handling:
    • Using the command option of tk.Button to link button clicks to Python callback functions.
    • Using lambda functions to pass specific arguments to callbacks.
  • Application Structure: Separating GUI setup, state management variables, and event handling logic (often within a class).
  • root.mainloop(): The essential call to start the tkinter application and make it responsive.
  • Project Application: We planned and implemented a GUI for our calculator using tkinter, including features like backspace and a placeholder percent display, and focused on robust state management.

6. Homework & Further Challenges

  1. Complete the tkinter Calculator:

    • Ensure you understand the CalculatorApp class structure, how tk.StringVar is used, and how event handlers like on_button_press modify the calculator’s state variables (self.first_operand, self.operator, self.clear_display_on_next_digit).
    • Test the existing backspace functionality. Consider edge cases: what happens if you backspace an error message? Or a result that was just calculated? (The current code has specific logic for this).
    • Implement Full Percentage (%) Functionality: The current ‘%’ button displays “Percent N/I”. Your task is to implement the actual calculation. First, decide how it should work:
      • Option A (Unary): Pressing a number then ‘%’ (e.g., 50 %) converts the number to its percentage value (e.g., 0.50). The result could then be used in further calculations.
      • Option B (Binary): It could work like X % of Y. For example, 200 + 10 % might mean 200 + (10/100 * 200) = 220. This is more complex and common in some calculators.
        You’ll need to modify the on_button_press method to handle the chosen logic when the ‘%’ button’s event occurs. Think about how it interacts with first_operand, operator, and current_input.

  2. Calculator Enhancements (with tkinter):

    • Refined Backspace for Operations: The current backspace primarily works on the number being typed or clears a result/error to “0”. Consider how it might work if an operator was just displayed (e.g., if "5 * " is shown, what should backspace do? Clear the operator? Go back to “5”?).
    • Keyboard Input: (Advanced) Use root.bind() or entry.bind() to allow users to type numbers and operators using their keyboard. For example, pressing the ‘7’ key should act like clicking the ‘7’ button.
    • History Feature: Add a tk.Text widget to the side or below the calculator to log the calculations performed (e.g., “5 + 3 = 8”).

  3. Project: GUI To-Do List with tkinter:

    • Convert your command-line To-Do List application (from Lecture 4 or 6) into a tkinter GUI.
    • Features to aim for:
      • A tk.Entry widget for users to type new tasks.
      • A tk.Button to “Add Task”.
      • A tk.Listbox widget to display the current tasks.
      • Buttons for “Mark as Complete” (could strike through text in the Listbox or move it to another Listbox).
      • A tk.Button to “Remove Selected Task”.
      • (Optional) Use tkinter.filedialog (askopenfilename, asksaveasfilename) to load and save tasks if you implemented persistence.
    • Layout: Think about how to arrange these elements using .grid() or .pack().

  4. Explore tkinter Further:

    • Look up other tkinter widgets: Checkbutton, Radiobutton, Scale, Spinbox, Menu, Scrollbar.
    • Read about tkinter.ttk (Themed Tkinter) for widgets that more closely match the native look and feel of the operating system.
    • Experiment with different widget options and layout configurations.

tkinter is a powerful tool that’s included with Python, making it readily available for adding graphical interfaces to your projects. While it can sometimes be more verbose than wrapper libraries, understanding its fundamentals provides a solid base for GUI development.
Happy Coding, and may your tkinter windows always be well-arranged, says Priya!