Forem: Harsh Prateek

Keep GUI in order: Tkinter Grid layout

Harsh Prateek — Tue, 08 Nov 2022 12:39:51 +0000

Introduction:

Ok, this is going to be a short article. In this one, I am about to tell you about grid in Tkinter window object and how you can use it to place the widgets according to your needs in the window.

What is a grid in Tkinter 🤔❓

You can consider a grid in Tkinter as an intersection of horizontal and vertical lines, making boxes which can store widgets to store data. It is just like the spreadsheet in MS Excel or Google Sheets.

How to grab one of them 🤔❓

To grab one of the grid box and put content in it, you just have to use this syntax:-

label = tkinter.Label(window, text = "Widget")

label.grid(row = 1, column = 1)

The above label would be placed in the 1st row of the first column. Remember, row and column values start at 0, thus the label would be placed in the 2nd row and column of the window.

The window would create rows and column as per the requirement of the content. This process is done using the grid() method. We also have to mention the window object in the declaration of the widget. We don't need the pack method since the rendering is done by the grid method itself.

Making a layout using grid😄❕

Enough talking, let's make something to understand the point of using the grid method.

# import tkinter module
from tkinter import * from tkinter.ttk import *

# creating main tkinter window/toplevel
master = Tk()

# this will create a label widget
l1 = Label(master, text = "Height")
l2 = Label(master, text = "Width")

# grid method to arrange labels in respective
# rows and columns as specified
l1.grid(row = 0, column = 0, sticky = W, pady = 2)
l2.grid(row = 1, column = 0, sticky = W, pady = 2)

# entry widgets, used to take entry from user
e1 = Entry(master)
e2 = Entry(master)

# this will arrange entry widgets
e1.grid(row = 0, column = 1, pady = 2)
e2.grid(row = 1, column = 1, pady = 2)

# checkbutton widget
c1 = Checkbutton(master, text = "Preserve")
c1.grid(row = 2, column = 0, sticky = W, columnspan = 2)

# adding image (remember image should be PNG and not JPG)
img = PhotoImage(file = r"C:\Users\Admin\Pictures\capture1.png")
img1 = img.subsample(2, 2)

# setting image with the help of label
Label(master, image = img1).grid(row = 0, column = 2,
    columnspan = 2, rowspan = 2, padx = 5, pady = 5)

# button widget
b1 = Button(master, text = "Zoom in")
b2 = Button(master, text = "Zoom out")

# arranging button widgets
b1.grid(row = 2, column = 2, sticky = E)
b2.grid(row = 2, column = 3, sticky = E)

# infinite loop which can be terminated
# by keyboard or mouse interrupt
mainloop()

This is the GUI that is rendered by running the code:-

I know I used some of the features of Tkinter that I have not discussed yet but I though this is the perfect oppurtunity to provide a preview of the later posts.

This is a grid with 3 rows and 4 columns. The Entry label, i.e the input box is spanned to two columns while the others are the kept in only one column. The image is also spanned, but it is spanned in both row and column, making a square image.

Conclusion:-

This was it guys, it was everything about the Tkinter grid tutorial. I have also started learing flask so maybe the next post is going to be about Flask framework in Python. Hope you would enjoy that as well.
Follow me for more content like this, and subscribe to my newsletter so that you never miss anything I post.

Hope you have a great day😉.

Make Pythonic GUI: Widgets in Tkinter

Harsh Prateek — Tue, 01 Nov 2022 15:40:07 +0000

Introduction:

So, in my previous post, I had talked about developing GUI applications with the help of Tkinter framework of Python. In this post, I am gonna tell you about widgets present in Tkinter that provide the UI and the interactivity to our GUI application. Let's begin😃

What are widgets🤔?

Normally, we consider a widget as an element of Graphical User Interface of a device that either displays some important information, or let's user interact with the OS easily.

For a user, this description is perfect, but for us developers, there is a different meaning of a widget, especially in Tkinter. Here, a widget is an object of the Tkinter framework that can render graphical elements and have special functions to manipulate the look and functionality of the widget.

We have already used one of the widgets to make our window object, this is how we did it:

import tkinter

# Here, the Tk is a widget that will 
# render the window of the GUI application.
window = tkinter.Tk()

window.mainloop()

The Tk() is a widget that would render a window and this is the way we are suppose to call and implement the widgets:- variable = tkinter.widget() if we have named imported tkinter.

How many widgets are there in Tkinter🤔?

For number's sake, there are 19 widgets present in the Tkinter framework. Each of them have different use case and when used together, can create a robust and good-looking UI for any desktop application. Here is a list of all the widgets present in Tkinter.
Button, Canvas, CheckButton, Entry, Frame, Label, Listbox, Menu, Menubutton, Message, Radiobutton, Scale, Text, Toplevel, SpinBox, PanedWindow, LabelFrame, MessageBox

In this post, I am gonna use two of the widgets from the massive list that I mentioned above. The two would be Text and Button. I am also gonna show you how can a widget be styled in any way you want by changing the background color, text color, and the font of the widgets. Let's get started with the code now😉.

# This line imports everything from the module.
from tkinter import *

window = Tk()

# This line sets the title of the GUI Application
window.title("NotePad")

# This line make the window acquire the fullscreen mode by default.
window.state("zoomed")

# This is the implementation of a button that can close a window.
button = Button( 
         text="Close", 
         command=window.destroy, 
         foreground = "white",  
         background="red", 
         font=("Times", 20, "bold")
         )

# This line creates a textbox in the window.
text = Text(
     # This line is manipulates the font and text of the textbox
    font = ("Times", 20, "italic"), 
    )

button.pack()
text.pack()

window.mainloop()

Explanation of the above mentioned codebase:

I know that it can be overwhelming to see all that code at once without any proper explanation but now the explanation would be much easier to understand. Here it is then:

Button widget:

button = Button( 
         text="Close", 
         command=window.destroy, 
         foreground = "white",  
         background="red", 
         font=("Times", 20, "bold")
         )

Although this explanation is about the button widget, but this pattern is true for every widget in tkinter.

The Button widget as the name suggests, renders a clickable button in the GUI that can be assigned any function.
Here is a breakdown of the arguments taken by the widget:

The first argument it took is the text that is to be shown inside the widget, in this case, Close.
The second argument is the function that the button has to perform. We have to assign the command to the function that is to be perform, in this case, I want to close the window, which can be achieved with window.destroy method.
Third and fourth arguments set the text-color with foreground and the background color with the background.
The fourth one is the argument that can manipulate the font of the widget. It takes a tuple in which, the first value is a string that is the font that is to be used. Second value is the text size and the third value is the font weight.

That's it folks. This was the entire breakdown of the Button widget, now let's make the textbox that I promised we would and that is present in the codebase above.

Text Widget:

text = Text(
     # This line is manipulates the font and text of the textbox
    font = ("Times", 20, "italic"), 
    )

Since I already explained everything above, I am not gonna waste any more of your time reading nonsense online.

The text widget creates a textarea in which the user can type plain text as long as he want and it can be saved in the form of paragraphs, instead of long strings without newline character. You can consider it similar to the notepad that comes with Windows OS.

Finished Product:

One last thing, you would have to pack the variable in which you made the widget in the window. This is done with the pack() function. This is how you can do it button.pack(). Without this, you would not be able to see the widget on the window.

Hope you enjoyed the post about widget's in Tkinter framework. Follow me if you like my work and subscribe to the newsletter so that you would always get the article in your inbox. Hope you have a great day😉.

Make Pythonic GUI with Tkinter: Tkinter tutorial

Harsh Prateek — Sun, 30 Oct 2022 14:48:33 +0000

Introduction:

This post is all about how to get started with GUI programming with Python and how to use Tkinter framework of Python to make exceptional GUI tools for windows, mac and linux devices. By the end of this long post(Not too long though😅), you can at get started with Tkinter and understand what it is all about. Consider it as an introduction to GUI Development and to Tkinter. Let's get started now.

What is Tkinter?

Ok, so basically Tkinter is a framework of Python that come bundled with the Python language and can be used without installing any 3rd party dependencies. It is used to make GUI applications in Python and has native support for making desktop applications of Windows, Linux, and MacOS. Since it is present in the python package natively, it is the most popular framework for making GUI applications in Python.

How to get started with Tkinter?

To start making GUI apps, we first have to import the Tkinter module in our program environment. This is how we can get it done: import tkinter as tk.
This way we can get the module in our program to be used. Let's start a window with our tkinter framework.

Making a window object with Tkinter:

To make a window object, we have to use the Tk() function of the tkinter module. If we want to make a window with the name window, we can do it like this: window = tk.Tk(). Since I have imported the module by the name tk, I can use this method easily, but this can also be done this way: window = tkinter.Tk().

After doing all this we would (if not for any bugs!😆) get a window if we would run the code. Although if at this point you would run the code, the code would execute perfectly without showing any window, this is not a bug, the window did open but it instantly closes. You can say that it does not get the time to show up in front you😅.

To keep the window open, we would need the mainloop() function of the window object.This is how we can do it: window.mainloop(). The mainloop function keeps our window open and thus we can use it for making our GUI.

This is the code so far:

import tkinter as tk

# Used to make the window object that would contain all the function necessary to make GUI.
window = tk.Tk() 

# Would keep the window open and prevent it from closing until we do it.
window.mainloop()

If, at this point you would run the code, this is what you are going to see.

A completely blank screen which was not there until we run the code. This is the screen which we made. Congratulations on making your first ever GUI screen🎉🎊🎉. From now on we would meddle with this screen to see what more we can do with it.

What can the window object do?

So, as I have previously said that the window object is like the playground where all the stuff we make as GUI would exist. That being said, we can still make a few changes to our window object, it has some amazing function with which, we can change it's size, color, title or even set the minimum and maximum size of the window. Let's have a look at each one of them.

Title:

To change the title of our window we can use the title() function. It takes a string as argument and then use the string as the title of the window. This is how it is done window.title("title of the window")

Background Color:

We can also change the background color of the window. The background color of the window is like a dictionary in the window object, thus it is to be changed the same we change the value of a key-value pair in Python. This is how it is done: window['bg'] = "green", this line would set the background color as green.

Dimensions:

To open the window in fullscreen mode by default, we can achieve this by changing the state to zoomed. This is how it is done: window.state("zoomed"). Now, the window would open in the fullscreen mode by default. By this point, this is how our codebase looks like:

import tkinter as tk

# Used to make the window object that would contain all the function necessary to make GUI.
window = tk.Tk() 

# Sets the title of the window.
window.title("GUI with Python")

# Sets the background color to green
window['bg'] = "Green"

# Opens the window in fullscreen by default.
window.state("zoomed")

# Would keep the window open and prevent it from closing until we do it.
window.mainloop()

I would appreciate if you would take the time to meddle with the code and execute it on your own system. Trust me, it would be worth it😉.

I hope you liked this little tutorial which I made on Tkinter, although I say it was on tkinter, it is more like the start of a series in which I would everyday post an article about tkinter, thus I thought it was best to start it with nothing but the building block of whole thing GUI, the window object.

In the next one, I am gonna post about what are widgets and how to use widgets to make your application unique and great. I hope you enjoyed this little tutorial (although it was pretty boring tbh😅).

If you followed this far in the tutorial, I would ask of you to follow me and subscribe to my newsletter so that you never miss any article that I post about Python and Tkinter. Hope you to have a great day😊.