Welcome folks today in this blog post we will be building image viewer tkinter app in python. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the following library using the pip command as shown below
pip install tkinter
After installing this library make an app.py file and copy paste the following code
app.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
# importing the tkinter module and PIL # that is pillow module from tkinter import * from PIL import ImageTk, Image def forward(img_no): # GLobal variable so that we can have # access and change the variable # whenever needed global label global button_forward global button_back global button_exit label.grid_forget() # This is for clearing the screen so that # our next image can pop up label = Label(image=List_images[img_no-1]) # as the list starts from 0 so we are # subtracting one label.grid(row=1, column=0, columnspan=3) button_for = Button(root, text="forward", command=lambda: forward(img_no+1)) # img_no+1 as we want the next image to pop up if img_no == 4: button_forward = Button(root, text="Forward", state=DISABLED) # img_no-1 as we want previous image when we click # back button button_back = Button(root, text="Back", command=lambda: back(img_no-1)) # Placing the button in new grid button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_for.grid(row=5, column=2) def back(img_no): # We willl have global variable to access these # variable and change whenever needed global label global button_forward global button_back global button_exit label.grid_forget() # for clearing the image for new image to pop up label = Label(image=List_images[img_no - 1]) label.grid(row=1, column=0, columnspan=3) button_forward = Button(root, text="forward", command=lambda: forward(img_no + 1)) button_back = Button(root, text="Back", command=lambda: back(img_no - 1)) print(img_no) # whenever the first image will be there we will # have the back button disabled if img_no == 1: button_back = Button(root, Text="Back", state=DISABLED) label.grid(row=1, column=0, columnspan=3) button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_for.grid(row=5, column=2) # Calling the Tk (The intial constructor of tkinter) root = Tk() # We will make the title of our app as Image Viewer root.title("Image Viewer") # The geometry of the box which will be displayed # on the screen root.geometry("700x700") # Adding the images using the pillow module which # has a class ImageTk We can directly add the # photos in the tkinter folder or we have to # give a proper path for the images image_no_1 = ImageTk.PhotoImage(Image.open("sample1.png")) image_no_2 = ImageTk.PhotoImage(Image.open("sample2.png")) image_no_3 = ImageTk.PhotoImage(Image.open("Sample3.png")) image_no_4 = ImageTk.PhotoImage(Image.open("sample4.png")) # List of the images so that we traverse the list List_images = [image_no_1, image_no_2, image_no_3, image_no_4] label = Label(image=image_no_1) # We have to show the the box so this below line is needed label.grid(row=1, column=0, columnspan=3) # We will have three button back ,forward and exit button_back = Button(root, text="Back", command=back, state=DISABLED) # root.quit for closing the app button_exit = Button(root, text="Exit", command=root.quit) button_forward = Button(root, text="Forward", command=lambda: forward(1)) # grid function is for placing the buttons in the frame button_back.grid(row=5, column=0) button_exit.grid(row=5, column=1) button_forward.grid(row=5, column=2) root.mainloop() |
Now just replace the paths of all the four images in the above python script and then run the script by typing the below command
python app.py
As you can see in the gui app we have three buttons first is the forward button and the second is backward and the third one is quit button
