Image Editing Software | GUI Designing | Creating Buttons

Hello Friends! We are going to develop an Image Editing Software in python. We will be using various libraries like Tkinter, PIL, and OpenCV. We will be developing several features like brightness adjustment, contrast adjustment, applying various filters on the image, etc. So why wait? Let's get started. Make sure to check out the video below before starting.

We will start by designing the GUI and later on, we will add the required functionalities to it for image editing. In this tutorial, we will be creating a window that will hold 3 buttons(Import, Save, Close).

To create the GUI we will start by importing the Tkinter in our python file as shown below.

import tkinter as tk

To create a window we will have to call a method called tk.Tk().

window = tk.Tk()

So the window is ready. But if you run the above code, you won't see anything appearing on the screen. This is because the program has finished execution. You will have to add a loop to hold the window on the screen. For that, we will call the method tk.mainloop().

tk.mainloop()

Now if you run the code, you will see a small window appearing on the screen as shown below.

But a small window is not fun. Right? So let us make this window to adapt the resolution of your computer screen. For that, we will have to get the length and height of your computer screen. This can be done using the method below.

screen_width = window.winfo_screenwidth()
screen_height = window.winfo_screenheight()

The above methods will return the screen width and screen height respectively. Now, we have to use these variables to make the window size larger. That can be done using the following method.

window.geometry(f'{screen_width}x{screen_height}')

Now if you run the code, You will see the window of your computer screen size.

Now, let's add some buttons to it. We will be adding three buttons.

1. Import - To import an image from your computer for editing

2. Save - This button will save the edited image as a new file

3. Close - This will close the window.

We want to group these buttons for proper alignment and placing in our GUI. For that, we will be using Frames to group these buttons together. Frame is like a container that is responsible for the grouping of another widget. Let us create a frame using tk.Frame() method.

Frame1 = tk.Frame(window, height=20, width=200)
Frame1.pack(anchor=tk.N)

The method takes several arguments. We will be only using important ones. The first parameter is the window name on which you want to place the frame, The second and third parameters are the height and width of the frame.

The pack() method is used to place any widget on the window. The parameter anchor=tk.N signifies that the frame will be placed on the top side of the window.

Now, let us create the buttons that will be placed inside this frame. We will be using tk.Button() method for this.

importButton = tk.Button(Frame1, text="Import", padx=10, pady=5, command=importButton_callback)
importButton.grid(row=0, column=0)

saveButton = tk.Button(Frame1, text="Save", padx=10, pady=5, command=saveButton_callback)
saveButton.grid(row=0, column=1)

closeButton = tk.Button(Frame1, text="Close", padx=10, pady=5, command=closeButton_callback)
closeButton.grid(row=0, column=2)

The meaning of all the parameters is as follows.

1. Frame1:- The frame on which you want to place the button(you can use window name if you do not want to create frame).

2. text:- The label that will appear on the button.

3. padx:- Additional padding to the left and right of the text.

4. pady:- Additional padding above and below the text.

5. command:- The method that will be executed when the button is pressed.

Similar to pack() method, grid() method is also used to place a widget on the window. The grid method divides the space into rows and columns. So as per the code above the buttons are placed side by side.

Remember to define the methods that you have called in the command parameter or you will get an error.

def importButton_callback():
    pass

def saveButton_callback():
    pass

def closeButton_callback():
    window.destroy()

Currently, we will not implement anything in these methods. We will add functionalities to these buttons later. For the close button we have called the method as window.destroy(). This will close the window. After running this code successfully the GUI will appear as shown below.

Happy Coding...!!!

For full code Click here.