Python Gui Tkinter Canvas Tutorial For Beginners, line oval & rectangle

python gui

Description:

python GUI Tkinter canvas tutorial for beginners, line oval rectangle-this is a very detail tutorial about how to make a GUI in python using Tkinter and also you will learn how to use canvas in Tkinter python.



Adding buttons in the window using the python GUI Tkinter pack method:

in this tutorial we’re now going to understand two concepts of python GUI one how to add buttons and functions to our actual Tkinter  widget and two how the Tkinter pack function actually works how we can place objects in different locations of our python GUI window let’s started first thing first guys we’re going to import Tkinter widget than I initialize a variable root and pass the Tk() method then I set the geometry of the window than I initialize the button1 variable  and is equal to Button and pass in root comma and the text on the button is click me so basically what I’m doing is I’m gonna add a button to my view with the text click me very very straightforward


let’s run the python gui here is my window click me fantastic so right now if you click on this button guys nothing happens because I don’t perform any click event on the button

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 canvas python GUI Tkinter:

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

Making 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.


when you run the code the output will be like this

python gui

As you can a black line is created on canvas.

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 create a line on your canvas


Making oval shape using canvas python GUI Tkinter:

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.

python gui

Making Rectangle shape using canvas python GUI Tkinter:

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.

Related Project:

Raspberry Pi HMI Project using PYQT5 Software tutorial

 

 

Recommended For You

Leave a Reply

%d bloggers like this: