Make App Pie

Training for Developers and Artists

From Apple to Raspberry Pi: Making Round Rectangle Buttons — The Movie

okImage
The Ok button we make in the video.

When I posted yesterday about GIMP and making Buttons for Python projects on the Raspberry Pi, I had thought someone would have a tutorial for the classic pre-iOS7 rounded rectangle button. I didn’t find any. Here is a video I put together of making those buttons in GIMP on the Raspberry Pi.

At the end of the video I had some source code of how to use the buttons. It is the same as Power_Panel_1 from the Living without StoryBoards and Interface Builder. I’ve added a bit at the end using the PhotoImage class we discussed in Making Icons and Cool Buttons, and here is the complete source code.

#Power_Panel_02
#code By Steven Lipton 04 19 14

from tkinter import *

#make the window
root=Tk()
root.title('Power Panel #1')

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

#make our variables
voltage_value = DoubleVar()
time_value = DoubleVar()
onOff_button_title = StringVar()

#set initial values for the variables
voltage_value.set(120.0)
time_value.set(2400.0)
onOff_button_title.set('Off')

#event Handlers
def onOffButtonPressed():
    if onOff_button_title.get() == 'Off':
        onOff_button_title.set('On')
    else:
        onOff_button_title.set('Off')

#render button
onOff_button_title = StringVar()
onOff_button_title.set('Off')
onOff_button = Button(frame, command = onOffButtonPressed)
onOff_button.grid(row = 2, column = 0, rowspan=2, columnspan = 2,sticky = SW + NE)

onOff_button.configure(textvariable = onOff_button_title)

#render Labels
voltage_label = Label(frame, text = 'Voltage')
voltage_label.grid(row = 1,column = 0, sticky = E)

time_label = Label(frame, text = 'Time')
time_label.grid(row = 0, column = 0, sticky = E)

time_value_label = Label(frame, textvariable = time_value, justify = LEFT)
time_value_label.grid(row =0, column= 1, sticky = W)

#render text fields
voltage_value_entry = Entry(frame, textvariable = voltage_value)
voltage_value_entry.grid(row=1, column = 1)

#add another 2 buttons
buttonImage1=PhotoImage(file='okImage.gif')
okay_button = Button(frame, command = onOffButtonPressed)
okay_button.grid(row=4,column=0)
okay_button.configure(image=buttonImage1,relief = FLAT)

buttonImage2=PhotoImage(file='cancelImage.gif')
okay_button = Button(frame, command = quit)
okay_button.grid(row=4,column=1)
okay_button.configure(image=buttonImage2, relief = FLAT)

#start the main loop
mainloop()

One response to “From Apple to Raspberry Pi: Making Round Rectangle Buttons — The Movie”

  1. […] can make your own or download these buttons. Place the files in the same directory as your program. We set relief to […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: