Page 1 of 1

Tkinter, Part 5 - Toolbars And Images.

#1 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2857
  • View blog
  • Posts: 10,961
  • Joined: 15-July 08

Posted 16 November 2009 - 03:07 PM

Tkinter, Part 5 Toolbars And Images

Hello Everyone, and welcome to Tkinter, Part 5! This tutorial is short because we only talk about how to load a wide array of images and then to use those images on a toolbar. For this tutorial, you will need to download the 4 images provided as an attachment at the end of this tutorial. You may or may not need to download the PIL module (Python Imaging Library). For Windows, you can download it here: http://www.pythonwar...m/products/pil/ or on linux type:

$ sudo apt-get install python-imaging



Alright. Let's get started with the library imports:
from Tkinter import *	  // loads Tkinter
from PIL import Image, ImageTk  



The Image class loads images and the ImageTk class makes them compatible (Without it, we would be restricted to GIFs). Next, We set up our GUI class:
class App():
	def __init__(self):
		self.root = Tk()

	def callback(self):
		print "A button was pressed"



At the moment, we have a blank frame and the method that is going to be called when any button on the toolbar is pressed. Now, let us dive into the difficult world of toolbarring ( all inside__init__)
		# Create the toolbar as a frame
		self.toolbar = Frame(self.root, borderwidth=2, relief='raised')

		# Load all the images first as PNGs using the Image.load() method
		# and use ImageTk to convert them to usable Tkinter images.
		self.img1 = Image.open('NewIcon.png')
		self.useImg1 = ImageTk.PhotoImage(self.img1)
		self.img2 = Image.open('LoadIcon.png')
		self.useImg2 = ImageTk.PhotoImage(self.img2)
		self.img3 = Image.open('SaveIcon.png')
		self.useImg3 = ImageTk.PhotoImage(self.img3)
		self.img4 = Image.open('QuitButton.png')
		self.useImg4 = ImageTk.PhotoImage(self.img4)

		# Set up all the buttons for use on the toolbars.
		newBtn = Button(self.toolbar, image=self.useImg1, command=self.callback)
		newBtn.pack(side=LEFT, fill=X)
		loadBtn = Button(self.toolbar, image=self.useImg2, command=self.callback)
		loadBtn.pack(side=LEFT, fill=X)
		saveBtn = Button(self.toolbar, image=self.useImg3, command=self.callback)
		saveBtn.pack(side=LEFT, fill=X)
		quitBtn = Button(self.toolbar, image=self.useImg4, command=self.callback)
		quitBtn.pack(side=LEFT, fill=X)

		# Add the toolbar
		self.toolbar.pack(side=TOP, fill=X) # Set the toolbar with buttons to the top and stretch it horizontally.



I completely understand that having all of these images as separate variables is a hassle, but, unfortunately, at the time that this tutorial was written, there is a bug in PIL where, if a reference to that image is not made, then it gets destroyed by the garbage collector. However, you could always define another class, or a list, or some other datatype to help facilitate this. Next, all we did was added the image to the button using the image flag and setting them to the callback.

The next thing that I'm going to do is something that you've seen before, and that is to add a simple text box and scrollbar to the screen (just to make it look more complete; also in __init__):
		# Set up a Text box and scroll bar.
		self.scrollbar = Scrollbar(self.root)
		self.scrollbar.pack(side=RIGHT, fill=Y)

		self.text = Text(self.root)
		self.text.pack()

		self.text.config(yscrollcommand=self.scrollbar.set)
		self.scrollbar.config(command=self.text.yview)



Now, the only thing left to do is to is to run it from main
if __name__ == "__main__":
	a = App()
	a.root.mainloop()



Again, very simple. The PIL is a huge image library that is extraordinarily useful. From the link that I provided at the beginning is a link to documentation. I recommend downloading it and learning more about this library.

Here is the zip file (including source code, for those who didn't put it together correctly):
Attached File  Toolbars.zip (2.4K)
Number of downloads: 547

Cheers! And see you'll later!

Is This A Good Question/Topic? 1
  • +

Page 1 of 1