Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
Resource icon

Simple Tkinter Calculator Part 2 - (Building the window display)

In part 2 of our project, we will be building the window graphics for the calculator.
We will:
  • Create a container to hold all the widgets
  • Create a entry field that will display the numbers, symbols, and results of calculations
  • Create a list of numbers and symbols used
  • Create an empty list to hold the buttons
  • Build the buttons

The containter
Python:
        # Create a container to hold all the widgets.
        # We will put the container in the parent widget
        # and use sticky to pull it in all four directions.
        # We also will use the padding argument to give some padding
        # to the main container. The columnconfig and rowconfig helps
        # in keeping the buttons width and heigh the same
        container = tk.Frame(parent)
        container.grid(column=0, row=0, sticky='news', padx=8, pady=6)
        for i in range(4):
            container.grid_columnconfigure(i, weight=3, uniform='cols')
        for i in range(1, 6):
            container.grid_rowconfigure(i, weight=3, uniform='rows')

The Entry field
Python:
        # Create an entry widget and give it a column span of 4
        self.entry = tk.Entry(container, font=(None, 16, 'normal'), relief='sunken')
        self.entry.focus()
        self.entry.grid(column=0, columnspan=4, row=0, sticky='new', pady=5, padx=4)

Create the lists and set variables
Python:
        '''
            Setting up the buttons we will create an empty list and
            append the buttons as we create them. We will also set
            variables alled col, row, and index. col and index will be set to 0
            and row will be set to 1. We want our buttons to start at row 1.
            The entry field is in row 0
        '''
        # Create the items that we want our button text to be
        # The items list is setup to the order in which we build the buttons
        # by row
        items = [7,8,9,'*',5,6,7,'/',1,2,3,'+',0,'.','=','-']
        self.btns = []
        col, row, index = 0, 1, 0

Build Buttons
Python:
        for item in items:
            self.btns.append(tk.Button(container, text=item, cursor='hand2'))
            self.btns[index]['font'] = (None, 14, 'normal')
            self.btns[index].grid(column=col, row=row, sticky='news', padx=4, pady=4)
            index += 1
           
            # If we reach the 3rd column - set col = 0 and increase row + 1
            # else increase col + 1
            if col >= 3:
                col = 0
                row +=1
            else:
                col += 1

        # Create and append a clear button
        self.btns.append(tk.Button(container, text='Clear', font=(None, 14, 'normal'), cursor='hand2'))
        self.btns[16]['bg'] = 'tomato'
        self.btns[16]['activebackground'] = 'red'
        self.btns[16]['activeforeground'] = 'white'
        self.btns[16].grid(column=0, columnspan=4, sticky='news', padx=4, pady=4)


Our code thus far should look like this
Python:
import tkinter as tk
from decimal import Decimal

class Window:
    def __init__(self, parent):
        self.parent = parent
        ''' We will be using the grid manager '''
        parent.columnconfigure(0, weight=1)
        parent.rowconfigure(0, weight=1)

        # Set a minimum size for our window
        parent.geometry('800x600+200+200')
        parent.resizable(False, False)

        # Create a container to hold all the widgets.
        # We will put the container in the parent widget
        # and use sticky to pull it in all four directions.
        # We also will use the padding argument to give some padding
        # to the main container. The columnconfig and rowconfig helps
        # in keeping the buttons width and heigh the same
        container = tk.Frame(parent)
        container.grid(column=0, row=0, sticky='news', padx=8, pady=6)
        for i in range(4):
            container.grid_columnconfigure(i, weight=3, uniform='cols')
        for i in range(1, 6):
            container.grid_rowconfigure(i, weight=3, uniform='rows')

        # Create an entry widget and give it a column span of 4
        self.entry = tk.Entry(container, font=(None, 16, 'normal'), relief='sunken')
        self.entry.focus()
        self.entry.grid(column=0, columnspan=4, row=0, sticky='new', pady=5, padx=4)

        '''
            Setting up the buttons we will create an empty list and
            append the buttons as we create them. We will also set
            variables alled col, row, and index. col and index will be set to 0
            and row will be set to 1. We want our buttons to start at row 1.
            The entry field is in row 0
        '''
        # Create the items that we want our button text to be
        # The items list is setup to the order in which we build the buttons
        # by row
        items = [7,8,9,'*',5,6,7,'/',1,2,3,'+',0,'.','=','-']
        self.btns = []
        col, row, index = 0, 1, 0
       
        for item in items:
            self.btns.append(tk.Button(container, text=item, cursor='hand2'))
            self.btns[index]['font'] = (None, 14, 'normal')
            self.btns[index].grid(column=col, row=row, sticky='news', padx=4, pady=4)
            index += 1
           
            # If we reach the 3rd column - set col = 0 and increase row + 1
            # else increase col + 1
            if col >= 3:
                col = 0
                row +=1
            else:
                col += 1

        # Create and append a clear button
        self.btns.append(tk.Button(container, text='Clear', font=(None, 14, 'normal'), cursor='hand2'))
        self.btns[16]['bg'] = 'tomato'
        self.btns[16]['activebackground'] = 'red'
        self.btns[16]['activeforeground'] = 'white'
        self.btns[16].grid(column=0, columnspan=4, sticky='news', padx=4, pady=4)
     
     
class Controller:
    ''' The Controller class will hand all button commands as well as calculations '''
    def __init__(self, window):
        self.window = window
     
     
if __name__ == '__main__':
    root = tk.Tk()
    root.title('Tkinter Calculator')
    controller = Controller(Window(root))
    root.mainloop()
  • Kazam_screenshot_00000.png
    Kazam_screenshot_00000.png
    12.1 KB · Views: 66
Back
Top Bottom