Tkinter: Multiple page Login window and images

What will you learn?

1. Tkinter introduction and sample code.
2. Make typing speed application using Python.
3. Multiple page GUI window with login page and image.

Tkinter Introduction and sample code

Tkinter is one of the famous GUI (Graphical User Interface) toolkits that are used in creating GUI applications.

These are the following steps used while creating a GUI application using Tkinter:

import tkinter as tk

window=tk.Tk()
window.title("Face Recognition System")

#Label and text field
l1 = tk.Label(window, text="Name: ", font=("Arial",15))
l1.place(x=0,y=0)
t1 = tk.Entry(window, bd=5, width=20)
t1.place(x=180, y=0)

l2 = tk.Label(window, text="Age: ", font=("Arial",15))
l2.place(x=0,y=60)
t2 = tk.Entry(window, bd=5, width=20, show='*')
t2.place(x=180, y=60)

l3 = tk.Label(window, text="Address: ", font=("Arial",15))
l3.place(x=0,y=120)
t3 = tk.Entry(window, bd=5, width=20, show='*')
t3.place(x=180, y=120)


#Combobox (drop down menu)
l4 = tk.Label(window, text="Drop down menu: ", font=("Arial",15))
l4.place(x=0,y=180)

from tkinter.ttk import *
c1 = Combobox(window)
c1['values'] = ("Nepal","India","Pakistan","USA","Bangladesh","Australia")
c1.current(0)
c1.place(x=180, y=180)


#Check button
from tkinter import *
l5 = tk.Label(window, text="Languages: ", font=("Arial",15))
l5.place(x=0,y=240)
var1 = IntVar()
cb1 = Checkbutton(window,text="C",font=('Arial',10),var=var1)
cb1.place(x=180, y=240)
var2 = IntVar()
cb2 = Checkbutton(window,text="C++",font=('Arial',10),var=var2)
cb2.place(x=280, y=240)
var3 = IntVar()
cb3 = Checkbutton(window,text="Python",font=('Arial',10),var=var3)
cb3.place(x=180, y=280)
var4 = IntVar()
cb4 = Checkbutton(window,text="Java",font=('Arial',10),var=var4)
cb4.place(x=280, y=280)

#Radio button
l6 = tk.Label(window, text="Sex: ", font=("Arial",15))
l6.place(x=0,y=320)
var = IntVar()
r1 = tk.Radiobutton(window, text='Male', var=var, value=1)
r1.place(x=180, y=320)
r2 = tk.Radiobutton(window, text='Female', var=var, value=2)
r2.place(x=260, y=320)
r3 = tk.Radiobutton(window, text='Other', var=var, value=3)
r3.place(x=340, y=320)

#Scrolled text
l7 = tk.Label(window, text="Comment: ", font=("Arial",15))
l7.place(x=0,y=380)
from tkinter import scrolledtext
txt = scrolledtext.ScrolledText(window, width=20, height=1)
txt.place(x=180,y=380)
txt.insert(tk.INSERT, 'write some comment')

#Spinbox
l8 = tk.Label(window, text="Number: ", font=("Arial",15))
l8.place(x=0,y=440)
spin = tk.Spinbox(window, from_=0, to=10, width=5)
spin.place(x=180, y=440)

#Button
b1 = tk.Button(window, text="Submit ", font=("Arial",10))
b1.place(x=140,y=480)


window.geometry("400x550")
window.mainloop()

Typing Speed Application Using Python

Let us build a typing speed app with Python and Tkinter.

I'll go over each code step by step.

Step 1: Import required packages:

We require a number of packages, including a tkinter, a keyboard, and time.

# importing all libraries
import tkinter as tk
from tkinter import *
from tkinter import messagebox
import random
import keyboard
import time

Step 2: Create a window

To create a window, we can use tkinter which is a Python GUI toolkit. window.title will define the title of the GUI window and window.resizable(0,0) will remove the maximize option from the window. We will not be able to maximize our window.

# creating window using gui
window = tk.Tk()
window.title('Typing Speed')
window.resizable(0,0)

# define size of window
window.geometry("470x200")

Step 3: Create a label and button

To create a label, we can use tk.Label and to create a button, we can use tk.Button.

x1 = tk.Label(window, text="Lets check your typing speed....", font="Arial 20")
x1.place(x=10, y=50)

b1 = tk.Button(window, text="Start", width=12, bg='white', fg="tomato", font="Algerian,10")
b1.place(x=150, y=100)

Step 4: When space is pressed

When the space key is pressed from the keyboard, we have to check whether we typed correctly or not.

if keyboard.is_pressed('space'):
    a = txt.get().split()[-1]
    b = words[word].split()[i]
    
    if a==b:
        count+=1

    else:
        icount+=1

Step 5: When we typed correctly vs when we typed incorrectly

When we typed correct, we had to increase the number of correct words by 1 and we had to highlight that text with orange color, and in the opposite case, when we typed incorrect, increased the number of incorrect words and highlighted with red color. Another extra code here is to get the index and the length of the typed word so that we can highlight specific parts of the sentence.

if a==b:
    count+=1
    new_str = new_str + b + ' '
    c = new_str+' '.join(words[word].split()[i+1:])

    # get index to know which part to be highlighted
    idx = words[word].index(b,idx+ln)
    ln = len(str(b))

    text.delete("0."+str(idx), END)
    text.insert(END, c)

    text.tag_add("start", "1."+str(idx), "1."+str(idx+ln))
    text.tag_config("start",  foreground="orange")

else:
    icount+=1
    new_str = new_str + b + ' '
    c = new_str+' '.join(words[word].split()[i+1:])

    # get index to know which part to be highlighted
    idx = words[word].index(b,idx+ln)
    ln = len(str(b))

    text.delete("0."+str(idx), END)
    text.insert(END, c)

    text.tag_add("start", "1."+str(idx), "1."+str(idx+ln))
    text.tag_config("start",  foreground="red")

Step 6: Calculate Typing speed

To calculate typing speed, we have the following formula:

All typed entries refer to a number of characters typed including a single space (between each word) and special symbols. I am taking each 5 characters as one word. 
Note: The join function converts the list to a string. I am using the join function to remove multiple spaces between words.

start= time.time()

'''
our code

'''

end = time.time()

typed_entries = len(' '.join(txt.get().split()))
time_in_min = (end-start)/60
result = int((typed_entries/5)/time_in_min)

# Display result in messagebox
messagebox.showinfo('Result', "Your Typing Speed= "+str(result)+" wpm")

Multiple page GUI window with login page and image | Tkinter - Python GUI Toolkit

Tkinter is a simple and useful GUI (Graphical user interface) tool. We can use Tkinter to turn our project into a GUI. I have covered the basics of tkinter: 

1. Learn tkinter in 30 minutes: 

2. Tkinter canvas widget in Python: 

3. Multiple page Tkinter window: 

In this course, I have made three windows, The first window is the login page. We must register first to enter the next page.

The username and password will be stored in the text file so that when you open the window the next time, your username and password will still be valid.

To learn step by step, I recommend you to watch the below video carefully. The source code is attached below.

import tkinter as tk
from tkinter import messagebox
from PIL import Image, ImageTk  # install pillow with pip: pip install pillow


class FirstPage(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        load = Image.open("img1.jpg")
        photo = ImageTk.PhotoImage(load)
        label = tk.Label(self, image=photo)
        label.image = photo
        label.place(x=0, y=0)

        border = tk.LabelFrame(
            self, text='Login', bg='ivory', bd=10, font=("Arial", 20))
        border.pack(fill="both", expand="yes", padx=150, pady=150)

        Label1 = tk.Label(border, text="Username",
                          font=("Arial Bold", 15), bg='ivory')
        Label1.place(x=50, y=20)
        Txt1 = tk.Entry(border, width=30, bd=5)
        Txt1.place(x=180, y=20)

        Label2 = tk.Label(border, text="Password",
                          font=("Arial Bold", 15), bg='ivory')
        Label2.place(x=50, y=80)
        TXT2 = tk.Entry(border, width=30, show='*', bd=5)
        TXT2.place(x=180, y=80)

        def verify():
            try:
                with open("credential.txt", "r") as f:
                    info = f.readlines()
                    i = 0
                    for e in info:
                        u, p = e.split(",")
                        if u.strip() == Txt1.get() and p.strip() == TXT2.get():
                            controller.show_frame(SecondPage)
                            i = 1
                            break
                    if i == 0:
                        messagebox.showinfo(
                            "Error", "Please provide correct username and password!!")
            except:
                messagebox.showinfo(
                    "Error", "Please provide correct username and password!!")

        BTN1 = tk.Button(border, text="Submit",
                         font=("Arial", 15), command=verify)
        BTN1.place(x=320, y=115)

        def register():
            window = tk.Tk()
            window.resizable(0, 0)
            window.configure(bg="deep sky blue")
            window.title("Register")
            Label1 = tk.Label(window, text="Username:", font=(
                "Arial", 15), bg="deep sky blue")
            Label1.place(x=10, y=10)
            txt1 = tk.Entry(window, width=30, bd=5)
            txt1.place(x=200, y=10)

            lbl2 = tk.Label(window, text="Password:", font=(
                "Arial", 15), bg="deep sky blue")
            lbl2.place(x=10, y=60)
            txt2 = tk.Entry(window, width=30, show="*", bd=5)
            txt2.place(x=200, y=60)

            lbl3 = tk.Label(window, text="Confirm Password:",
                            font=("Arial", 15), bg="deep sky blue")
            lbl3.place(x=10, y=110)
            txt3 = tk.Entry(window, width=30, show="*", bd=5)
            txt3.place(x=200, y=110)

            def check():
                if txt1.get() != "" or txt2.get() != "" or txt3.get() != "":
                    if txt2.get() == txt3.get():
                        with open("credential.txt", "a") as f:
                            f.write(txt1.get()+","+txt2.get()+"\n")
                            messagebox.showinfo(
                                "Welcome", "You are registered successfully!!")
                    else:
                        messagebox.showinfo(
                            "Error", "Your password didn't get match!!")
                else:
                    messagebox.showinfo(
                        "Error", "Please fill the complete field!!")

            btn1 = tk.Button(window, text="Sign in", font=(
                "Arial", 15), bg="#ffc22a", command=check)
            btn1.place(x=170, y=150)

            window.geometry("470x220")
            window.mainloop()

        BTN2 = tk.Button(self, text="Register", bg="dark orange",
                         font=("Arial", 15), command=register)
        BTN2.place(x=650, y=20)


class SecondPage(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        load = Image.open("img2.jpg")
        photo = ImageTk.PhotoImage(load)
        label = tk.Label(self, image=photo)
        label.image = photo
        label.place(x=0, y=0)

        Button = tk.Button(self, text="Next", font=(
            "Arial", 15), command=lambda: controller.show_frame(ThirdPage))
        Button.place(x=650, y=450)

        Button = tk.Button(self, text="Back", font=(
            "Arial", 15), command=lambda: controller.show_frame(FirstPage))
        Button.place(x=100, y=450)


class ThirdPage(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)

        self.configure(bg='Tomato')

        Label = tk.Label(self, text="Store some content related to your \n project or what your application made for. \n All the best!!",
                         bg="orange", font=("Arial Bold", 25))
        Label.place(x=40, y=150)

        Button = tk.Button(self, text="Home", font=(
            "Arial", 15), command=lambda: controller.show_frame(FirstPage))
        Button.place(x=650, y=450)

        Button = tk.Button(self, text="Back", font=(
            "Arial", 15), command=lambda: controller.show_frame(SecondPage))
        Button.place(x=100, y=450)


class Application(tk.Tk):
    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)

        # creating a window
        window = tk.Frame(self)
        window.pack()

        window.grid_rowconfigure(0, minsize=500)
        window.grid_columnconfigure(0, minsize=800)

        self.frames = {}
        for F in (FirstPage, SecondPage, ThirdPage):
            frame = F(window, self)
            self.frames[F] = frame
            frame.grid(row=0, column=0, sticky="nsew")

        self.show_frame(FirstPage)

    def show_frame(self, page):
        frame = self.frames[page]
        frame.tkraise()
        self.title("Application")


app = Application()
app.maxsize(800, 500)
app.mainloop()

Conclusion:

In this way, we can utilize the Tkinter toolkit to make your GUI application. You can use Tkinter Canvas to make a separate layer in the application. You can also add a sign-in and sign-up page in the Tkinter window.

I hope this post is very helpful to you. If you have any questions, ask me in the comment section. I will reply as soon as possible. Thanks.