Python GUI, Python Tkinter Canvas tutorial, Python User Interface, Python Tk

(Last Updated On: March 28, 2020)

Python GUI

Description:

Python GUI, Python Tkinter Canvas tutorial– I have been using Python in Raspberry Pi based projects for monitoring different sensors and controlling electrical loads. Recently, I published an article about the Industrial Automation, Raspberry Pi Industrial Automation HMI/GUI designing using PYQT5, In this project I designed a simple Python GUI “Graphical User Interface” using PYQT5 for controlling different electrical loads. If you want to learn how to make a python GUI using PYQT5, then I highly recommend you should read this article.

I have been getting requests from my followers on YouTube Channel “Electronic Clinic” about Python GUI designing using Tkinter Canvas. Here is a complete tutorial for you guys. In this tutorial you will learn the extreme basics explaining how to design a graphical user interface using Python Tkinter. In this tutorial, you will also learn how to draw a line, Oval, and a rectangle using the Tkinter Canvas. I will explain everything through simple program examples. I will add images to help you understand what am I doing?

Without any further delay, let’s get started!!!

Adding Buttons In Window Using Python GUI Tkinter Pack Method:

In this section, we are going to understand two concepts of Python GUI,

  1. How to add buttons and functions to our actual Tkinter widget and
  2. How the Tkinter Pack function actually works, how we can place objects in different locations of our Python GUI window.

How to add buttons and functions to our actual Tkinter widget

Code explanation:

I started by importing the tkinter widget.

from tkinter import *

Next, I initialized a variable root and passed the Tk() method.

root = Tk()

Next, I set the geometry of the window.

root.geometry(‘400×400’)

Next, I initialized the button1 variable which is equal to Button. Button is a function which takes two arguments as the input, the root and the text which is displayed on the button, which is the caption. In this example we will display the text “click me”, you can change this text if you want, for now we will go with this text.

So, now let’s run the Python GUI.

Python GUI


Fantastic, we just created a very simple Python GUI using Tkinter. As you can see a button with the text “click me” is just added to the window. Right now, if you click this button, nothing will happen, because there is no code for the click event on this button.

Now, let’s modify the above program, so that when someone clicks the button, we want something to happen there should be some function some action that gets triggered, so, in this scenario I am going to go ahead and create a function that just prints out hello Tkinter text when the button is clicked.

As you can see in the above program I created a function

def funBtn()

Inside this function there is only one instruction

print(“Hello tkinter”)

Each time this function is called, the Hellow tkinter message will be printed

This time we did only one change, which is we also added the command which is equal to the funBtn.

button1=Button(root, text=’click me’, command=funBtn)

This will make a button, with the text “click me”, and when this button is clicked a message will be printed. After you have modified the code, now go ahead, save the program and run the Python GUI program, you can simply press F5.

Python GUI

As you can see when the button is clicked the message “Hello tkinter” is printed on the screen. there’s a lot of different attributes buttons as well you can change the color, the background color, the size of the button, and stuff like that; but just for understanding how a simple button is added to your Python GUI window this is the code necessary.

We just created a simple Python GUI using the tkinter, this is a fully functional button, you can click this button and it will print a message. Now let’s take this to another level, what if you need two, three, or even more buttons?  Now you should pay a very close attention, we will solve some basic issues. To understand how the pack method works, right now, whenever we add an object to our Python GUI you will see that it’s put one underneath the other. We will be using the same program, copy the button code command C and command V to paste the code call this button2. button2.pack  and go ahead and run this Python GUI code given below.

Python GUI

You can see in the picture above, two buttons are added to the Python GUI window, but the problem is the new button we just added comes underneath. There are basically four different positions in Python tkinter, you have top, bottom, left, and right. So, you can go ahead and specify how your objects should be placed if I go ahead and say button1.pack side is equal to left and button2.pack side is equal to left.


Python GUI

As you can see in the picture above, the two buttons are placed side by side.

If I make my button2 side equals right what is going to happen to happen? Let’s check this by modifying the code.

Python GUI

As you can see in the picture above, on the Python GUI widow, one button is pushed all the way to the left side of the window and the other button is pushed all the way to the left side of the GUI window.

Now, other than the left and right, you also have top and bottom I could make my button1 to top and button2 to bottom. Let’s do it.

Python GUI

As you can see, this time one button is pushed all the way to the top of the Python GUI window and the other button is pushed all the way to the bottom of the Python GUI window. Now you can modify your layout by putting objects as you want. You can add multiple objects.


Making shapes using tkinter canvas Python GUI:

In this section, we are going to understand the tkinter canvas Python GUI. So, what is the canvas in Python the Canvas is basically a drawing tool that tkinter provides on top of the canvas. You can go ahead and draw shapes. You can draw lines, circles, ovals, rectangles, etc, and basically any sort of 2D game that you want to make. You will be using tkinter canvas to draw those items on the GUI screen. So, let’s go ahead and understand how to actually create a tkinter canvas on our tkinter code.

The above code looks similar to the very first program I explained in the beginning, except the 4th and 5th lines of code.

I initialized the canvas I created a variable c which is going to be equal to Canvas and then inside the brackets just like we did previously for the button, we’re going to pass in the home where our canvas is located, in our scenario it’s root after that you can give your canvas a height and a width, right now we’ve given our view root geometry our 400 by 400 view; so what we can do now is, give our tkinter canvas let’s say height is equal to 250 and width is equal to 300. So this is going to create a canvas inside of our Python GUI window, after that I gave it a background color so the property bf is equal to background color and I am going to select RED as the background color.  After running the above code, you will see a RED color window as you see in the picture below.

Python GUI


Draw a line using canvas Python GUI tkinter:

So, the first item that we are going to create on our tkinter canvas is going to be a line. Now the function for that is canvas variable, in my case my canvas variable is c so the function is c.create_line. when you are creating a line it takes in four parameters the XY of your initial position and the XY of your ending position.

Code explanation:

To draw a line on a tkinter canvas for that I initialized l for line, in this scenario the l is equal to c.create_line and then I passed in some coordinates so again the initial point 5 comma 5 and then the ending point which is slightly more width so 200 and then let’s move down to pixels 5. So, we created a line 5 comma 5, 200, 5 and line thickness width is 5. Save the above program, simply run the code, you should be able to see a line as you can see in the picture below.

Python GUI

Now I am moving my line diagonally across the screen for that just change the line position from 5 to 200

Python GUI

So, that is how you can create a line on your Python tkinter canvas.

Making Oval/Circle shape using Python GUI tkinter canvas:

The second object I am going to draw is an oval. So, I started off by initializing a variable for oval which is O and is equal to c.create_oval and again if you want to make a circle with an oval it’s relatively straightforward you pass in your initial points as 20 comma 20 you pass in your ending points 100 comma 100 and then after that I specified a fill color let’s go ahead and fill our oval with the color blue. Copy and paste the below code.

After running the above program you will be able to see a Blue color circle. You can create different shapes simply play with the values.

Python GUI

Making Rectangle shape using Python GUI tkinter canvas:

The third object that I am going to create is a rectangle. So, I started off by initializing a variable for rectangle r which is equal to c.create_rectangle and again if you want to make a rectangle you will pass in your initial points 20 comma 20 you pass in your ending points 100 comma 100 and then after that I specified a fill color.

Copy and paste the above program. Save the program and then press F5 to run the code. After running the code you will be able to see a Blue color rectangle which you can see in the picture given below.

Python GUI

You can make this rectangle smaller or larger by simply changing the values. In this article I have shared enough information with you guys. Now you should be able to make amazing Python GUI applications for Raspberry Pi using the tkinter canvas. If you have any questions let me know in a comment. Check the related Raspberry Pi based projects in the related projects section.


Raspberry Pi related Projects:

Raspberry Pi Home Automation using RC522 RFID, Smart Home

Raspberry Pi Home Automation using RC522 RFID, Smart Home

Raspberry Pi RFID RC522 NFC Reader, Tags Scanner python code

Raspberry Pi RFID RC522 NFC Reader, Tags Scanner python code


Raspberry Pi Industrial Automation HMI/GUI designing using PYQT5

Raspberry Pi Industrial Automation HMI/GUI designing using PYQT5

Raspberry Pi DS18B20 Temperature Sensor & Text file

Raspberry Pi DS18B20 Temperature Sensor & Text file

 

Recommended For You

About the Author: Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Leave a Reply