From Apple to Raspberry Pi: Windows Buttons and Widgets — on Pi!

appleberryI’ve explored much of the basic coding in Python, but I’ll need a good user interface for the projects I’m doing. When it comes to the graphical user interface (GUI), Xcode and Python are on  two different planets. With storyboards and interface builder, Xcode arguably spoils developers. There are times one does need to add buttons and text programmatically to UIView, but it is mandatory to do so in Python, using a module called tkinter.

Making  a Tkinter Window and Frame

A bare bones version of a tkinter window look like this:

#tkinter_playbox_01
#regular import
from tkinter import *

#make the  window
root = Tk()
root.title('tkinter Playbox')

#start the mainloop
root.mainloop()

This is actually pretty boring.

tkinter01

The code makes a window by creating an instance of Tk and set the window’s title. We the start the main loop to get everything going:

Next we will need to add a frame to the code:

#tkinter_playbox_01
#regular import
from tkinter import *

#make the  window
root = Tk()
root.title('tkinter Playbox')

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

#start the mainloop
root.mainloop()

This time when we run, our window seems to disappear. If you look around, you might find a tiny  black sliver like this one:

tkinter02

We created a frame, and the frame is an auto-sizing frame. We have no content in the frame , so it is the smallest it can possibly be.

Adding Labels in Tkinter

Now under the frame code add this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

Now run this code:

tkinter03

Here, we add a label called label1. This prints the always familiar message Hello. Let’s make another label. In our code, under the first label add this:

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=1)

And that works as expected:

tkinter04

Notice the use of .grid(). This method places the widget in the row and column in the frame specified. We can swap the labels by changing our code to this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=1)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=0)

tkinter05

or stack them like this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=1,column=0)

tkinter06

Adding Buttons to the Tkinter Window

Now let’s add two buttons. Change the code as shown below. Make sure to change the grid positions on the labels:

#make buttons
button1 = Button(rootFrame, text = 'Press Me')
button1.grid(row =1, column = 0)
quit_button = Button(rootFrame,text='quit)
quit_button.grid(row = 1,column = 1)
#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=1)

We added the buttons the same way we added the labels, except using the Button constructor instead. When we run this time we get:

tkinter07

We can even click the buttons but they do nothing. Add the following to the quit button:

quit_button = Button(rootFrame,text='quit', command = quit)

Now when we click the quit button our program ends. adding in the command option allows us to call a method or function where the work gets done. Let’s try another example, but before we do we need to introduce variables in Tkinter. Add the following to the code, Just under the root.title assignment:

#define some variables
my_label_text = StringVar()
my_label_text.set('Python')

Now change label2 as follows:

label2 = Label(rootFrame,textvariable= my_label_text)

Run and you should see no difference.

tkinter07
Tkinter has its own set of variables. Unlike Python, they are strongly typed. These can be assigned to the textvariable or variable option of widgets to allow for dynamic changes to the widget, in this case a label. The variables have two methods associated with them, set and get. In the above code, we create a Stringvar, and then set its value to Python.

We can use the getter for the variable in a function for our button. Just underneath the from..import, add

def pressMe():
    print ('GO!')
    if my_label_text.get() == 'Python':
        my_label_text.set('Monty')
    else:
        my_label_text.set('Python')

Now change button 1 to this

button1 = Button(rootFrame, text = 'Press Me', command = pressMe)

Your code should now look like this:

#tkinter_playbox_01
#regular import
from tkinter import *

def pressMe():
    print ('GO!')
    if my_label_text.get() == 'Python':
        my_label_text.set('Monty')
        print ('Monty')
    else:
        my_label_text.set('Python')
        print ('Python')
#make the  window
root = Tk()
root.title('tkinter Playbox 01')

#define some variables
my_label_text = StringVar()
my_label_text.set('Python')

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

#make buttons
button1 = Button(rootFrame, text = 'Press Me', command = pressMe)
button1.grid(row =1, column = 0)
quit_button = Button(rootFrame,text='quit', command = quit)
quit_button.grid(row = 1,column = 1)

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,textvariable = my_label_text)
label2.grid(row=0,column=1)

#start the mainloop
root.mainloop()

Now when you click the button, the label will toggle between Monty and Python. This gives us buttons and labels, two of the most important of the widgets/controls in a UI. In our next installment, we will do a bit of customization to the buttons and labels.

2 thoughts on “From Apple to Raspberry Pi: Windows Buttons and Widgets — on Pi!”

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 )

Google+ photo

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

Connecting to %s