From Apple to Raspberry Pi: Making Icons and Cool Buttons

If there is one thing that Apple developers believe,  user interfaces needs to look cool. Looking cool often requires not text, but images on your on your controls. While  not as robust as UIView and its subclasses, Tkinter does display graphics. We can add buttons that look a lot better than the standard buttons.

Make A Basic Button

Let’s set up a simple button program:

#image_button_01
#make the window
root=Tk()
root.title("Steve's Button Sampler")

#make the frame
frame = Frame(root)
frame.grid(row=0, column=0)

# --- event handlers go here when we add them in 

# --- Add the buttons

#button 1 -- basic button
button_1 = Button(frame, text = 'Ok')
button_1.grid(column = 0 , row = 0)

#main loop
mainloop()

This will give us a simple button, not much more than we expected and have done before:

Make a Flat iOS7 Button

The latest style in buttons is the simplest. Everything to do the flat style of iOS7 is already there. Add this code below the code below button 1:

#button_2 -- basic flat button
button_2 = Button(frame, text = 'Ok',relief = FLAT)
button_2.grid(column = 1 , row = 0)
button_2.configure(fg='blue',font=('Sans','18','bold'))

When you run and build this code you get the following:

Make two changes for  this style of button. Start by setting a font:

button_2.configure(fg='blue',font=('Sans','18','bold'))

The fg='blue' specified the text color. Specify the font as a tuple of the font family, size and weight. Most Tkinter widgets can use a font = attribute.
The second change is the relief attribute. relief determines if the button is sunken, raised or flat in its normal state. We changed it here to FLAT making the flat button. We could also add a background of course.

Make Bitmap Buttons

Another type of button is a bitmap button. There are several built-in bitmaps, and while the documentation notes you can make your own the type of data file .xbm is very old and very rare. Mozilla stopped supporting it in Firefox 3.0. I’d never use them, but for comparison purposes, we’ll add it to the sampler:

#button 3 -- bitmap button
button_3 = Button(frame, text = 'Ok')
button_3.grid(column = 2 , row = 0)
button_3.configure(bitmap = 'info')

Build and run:

It’s pretty ugly. The text doesn’t show either. For this setting it is either the bitmap or the text — not both.

Loading GIMP

The last option we’ll discuss is the most involved. We can use a .gif image as a button image. The Raspberry Pi does not come with a graphics application to make .gif files, so we will have to add one. The best application for that is GIMP.

I’ve heard GIMP called the Photoshop of Linux or the Poor Man’s Photoshop. While it is a Linux-based application, and it is a free, open source program, both titles do not do it justice. It does not come bundled with the Raspberry Pi.  It is easy to load, and quite powerful. From GIMP, we can make graphics for buttons.

Get to a command line by opening  LXTerminal. Type the following command:

sudo apt-get install gimp

The system will eventually prompt you if you want to install. Type y and hit return.
GIMP will take a while to load, but once done you can close the terminal window.

Hit the start icon in the lower left corner of the window display. Select Graphics>GNU Image Manipulation Program

GNU will start. On initial start up the windows look like this:

I suggest moving up the left and right dockers to the top of the window, and re-arranging things like this to see all the possible controls:

Making a Button with the GIMP Button Script

GIMP includes a series of scripts to automate many tasks. One is a button making script. From the drop down menu, select File>Create>Buttons>Round Button… a Dialog box appears.

Press OK, and the script will run, producing two buttons with questionable color choices.

The round button script makes a button for both the pressed and unpressed state. Let’s a make a button image that might work better in Tkinter. select File>Create>Buttons>Round Button and get the dialog box again:
Make the following changes:

• In the text field delete GIMP. Press the space bar three times type Ok and then three more spaces. This is a trick to size the button properly. Apparently the script will size the button to the exact size of the title, with no white space. Adding spaces on either side of the title creates space between the sides of the buttons and the title.
• Change the font size to 18
• Change the font. When you click the font button a dialog box appears.  Change the font to Sans Bold. Then close the dialog box.

• Change the top color by clicking in the color swatch. This will open a color dialog window.In the HTML notation box type eeeeff for a light blue color.

• Change the Bottom Color by clicking the color swatch and changing the HTML notation box to ffffff for white.
• Deselect the Not Pressed(active) and the Pressed check boxes. This will give us only one button.

• Your button dialog box should look like this:
  
  • Click OK. The script will generate one button

Saving the Button Image

Now that we have a button, let’s save it as a .gif. From the drop down menu select File>Save>Export. A save dialog appears. In the bottom left corner, click the arrow next to select file type.

In the list the appears select gif.
In the Name text field type button_3.gif. Select the same directory as your python program. Click Export. You will get a Export Image as GIF dialog box

.

You don’t want interlaced or the label, so make sure both are unchecked. The image will save to the directory.

You can now go to File>Quit. If you did not save in a GIMP native file format you will get a message about saving your work. For now you can discard your changes. When working on a real project, it is a good idea to save your work.

GIMP is a full featured program. There is a lot you can do to make buttons and other graphics. I’d suggest searching the web for a lot of great tutorials on using it  and how to make incredible buttons. Here’s a few I found that look nice:

• http://mygimptutorial.com/round-web-20-button-with-a-metal-ring
• http://dinablaszczak.hubpages.com/hub/CreateasquareglossybuttoninGIMP28tutorial
• http://www.gimpusers.com/tutorials/create-soft-glassy-buttons
• http://www.gimpusers.com/tutorials/create-sytlish-buttons
• http://www.gimpusers.com/tutorials/glossy-orb-icons-for-websites

Coding a PhotoImage Button

We now have our button in the same directory as our Python program. Go back to your Python program. Add this code below the code for button 3

#button 4 -- image button (round rect)
button_4 = Button(frame, text = 'Ok')
button_4.grid(column = 3 , row = 0)
button_Image = PhotoImage(file = 'button_3.gif')
button_4.configure(image = button_Image,bg = 'white')

Build and run:

That looks much  nicer than the other buttons.  There are two steps different than the basic button. First, we need to load the image into an identifier before using.

button_Image = PhotoImage(file = 'button_3.gif')

Then we use that identifier with the image attribute:

button_4.configure(image = button_Image,bg = ‘white’) [/code]

Like bitmaps, images obscure whatever text we use for a title. So remember to include your title in your button graphic. There is not much difference in the button between the active and passive states of the button, which is why we only needed one image — Tkinter Buttons only accept one.

This is not the whole story. Next time, I’ll introduce a few more simple Tkinter widgets to have a good toolbox to work from. Sometimes that will be all you need. But for a far more professional look, and a lot more of the functionality like one would find in Xcode, The lesson after that will introduce styled widgets, starting with the styled button.

The Code for This Lesson

#image_button_01

#Steven Lipton 04-26-14
#Demonstration of buttons and check buttons

from tkinter import *

#make the window
root=Tk()
root.title("Steve's Button Sampler")

#make the frame
frame = Frame(root)
frame.grid(row=0, column=0)

# --- event handlers go here when we add them in 

# --- Add the buttons

#button 1 -- basic button
button_1 = Button(frame, text = 'Ok')
button_1.grid(column = 0 , row = 0)

#button_2 -- basic flat button
button_2 = Button(frame, text = 'Ok',relief = FLAT)
button_2.grid(column = 1 , row = 0)
button_2.configure(fg='blue',font=('Sans','18','bold'))

#button 3 -- bitmap button
button_3 = Button(frame, text = 'Ok')
button_3.grid(column = 2 , row = 0)
button_3.configure(bitmap = 'info')

#button 4 -- image button (round button)
button_4 = Button(frame, text = 'Ok')
button_4.grid(column = 3 , row = 0)
button_Image = PhotoImage(file = 'button_3.gif')
button_4.configure(image = button_Image)

#button 5 -- image button (round rect)
button_4 = Button(frame, text = 'Ok')
button_4.grid(column = 3 , row = 0)
button_Image = PhotoImage(file = 'button_3.gif')
button_4.configure(image = button_Image)

# --- main loop

mainloop()