In our last installment, we learned how to add buttons and labels to a Python program. Now we are going to make them look a little nicer than the generic buttons we haven now using the
configure method of Tkinter.
To start, lets enter this code into a new window.
# tkinter_playbox_03 # learning about configure from tkinter import * root= Tk() root.title('Tkinter Color Button Playbox') #make a frame rootframe = Frame(root) rootframe.grid(row=0,column=0) #make buttons button1 = Button(rootframe, text = 'color') button1.grid(row = 0, column = 0) quitbutton = Button(rootframe, text = 'Quit', command = quit) quitbutton.grid(row = 1, column = 0) #main loop root.mainloop()
Now, change the
button1 declaration to this
button1 = Button(rootframe, text = 'color', background = 'blue')
We added the
background = 'blue' option. Not surprisingly, the button is now blue. Places we assign the parameters for the Button class we call an option in Tkinter. One good source for a list of button options is New Mexico Tech’s Tkinter 8.5 Reference. Look into the options available, but here is a list of a few we will be discussing:
background(also bg) – sets the background color
foreground– sets the text color
activebackground– on a mouse over, background color of the button
activeforeground– on a mouse over condition, text color of the button
command– specify a method or function to execute when button is clicked
text– a static title for the button
textvariable– link to a variable to change the title dynamically
We define colors with strings. There are several standard colors like
green. The list of standard colors is in the Tk documentation You can also define a color by a hex description of RGB in the form of
#rrggbb, such as
#ff0000 for red.
We have been setting options for the button in one long string of options. That can get confusing very quickly. We can use the
configure method to clean this up a bit. Change the code for
button1 to this:
button1 = Button(rootframe, text = 'color') button1.configure(background = 'blue')
Let’s add another
button1 = Button(rootframe, text = 'color') button1.configure(background = 'blue') button1.configure(activebackground = 'blue', activeforeground = 'white')
This code doesn’t seemingly change anything, but moves your cursor over the button. The background remains blue, but the text changes to white.
Now modify the code for
button1 to the following:
#make buttons colors = ('red','orange','yellow','green','blue','violet') col=0 for color in colors: button1 = Button(rootframe, text = color) button1.grid(row = 0, column = col) button1.configure(background = color ) button1.configure(activebackground = color, activeforeground = 'white') col=col+1
What we do here is create a immutable list of colors called a tuple. We then use a
for loop to loop through the colors setting the button colors to each color in the tuple. We also created a variable
col, which counts columns and places our button in the next column. Run this code, and you should see:
Play with the buttons a bit, and you will see the buttons highlight with white text when you put your mouse cursor over them. However clicking the buttons doesn’t do anything. Let’s change that, by changing the color of the quit button when we click a button.
In order to change the quit button, we will need a function for an event handler. Add the following:
#event handlers def buttonPressed(buttoncolor): quitbutton.configure(background = buttoncolor)
There is a problem here. Our function has a parameter. We added a event handler last time using the
command option. We do it in our current code with the
Quit button, calling
quit. However, in is simple state,
command takes no parameters, and we can’t just add parameters to the function assigned to
command. Instead we use this strange thing called
lambda. There are a lot of explanations of what
lambda really is, and Yet Another Lambda Tutorial is a really good one with links to some of the others. I’m not going to explain
lambda. It has one major use for all intents and purposes and that’s getting parameters into your event handler, by wrapping your function in a way
command likes. Change your code as follows:
button1 = Button(rootframe, text = color, command = lambda color=color:buttonPressed(color))
You will see that there is a multiple use of the variable color. Due to our loop we need to make a variable within a local scope so we gt the right color. If we don’t, it will only use the last color. Run this,try pressing the buttons, and see what happens.
Our quit button is all alone on the corner. Let’s set it up to take up all the space on the bottom row. Start by changing the
quitbutton code like this:
quitbutton.grid(row = 1, column = 0, columnspan = 3)
The quit button moves over to the third column, but does not change its width. The option
grid tells the widget like a button to span three columns, starting at column 0. It did, but kept its size the same. We need the Xcode equivalent of a strut which is called a sticky. Stickies use the constants based on compass directions
N,S,E,W for the sides of the window, and
NE,NW,SE,SW for the corners. These directions can be added together. To get a
columnspan to be across its entire width, make it sticky on both ends like this:
quitbutton.grid(row = 1, column = 0, columnspan = 3, sticky=E+W)
There is several ways to get this across the whole window. I like a dynamic approach based on the number of elements in our tuple, so I can change the tuple and the quit button will respond properly:
quitbutton.grid(row = 1, column = 0, columnspan = len(colors), sticky=E+W)
We learned a lot about buttons. However that is not the only type of input. We’ll look at text input and more with formatting labels in our next installment.
The full code for this example:
#make the window root= Tk() root.title('Tkinter Color Button Playbox') #make a frame rootframe = Frame(root) rootframe.grid(row=0,column=0) #event handlers def buttonPressed(buttoncolor): quitbutton.configure(background = buttoncolor) #make buttons colors = ('red','yellow','green','cyan','blue','magenta') col=0 for color in colors: button1 = Button(rootframe, text = color, command = lambda color=color:buttonPressed(color)) button1.grid(row = 0, column = col) button1.configure(background = color ) button1.configure(activebackground = color, activeforeground = 'white') col=col+1 quitbutton = Button(rootframe, text = 'Quit', command = quit) quitbutton.grid(row = 1, column = 0, columnspan = len(colors), sticky=E+W) #start the main loop root.mainloop()
If you are making your own stuff, doing your own work and trying to sell it in the market, most advice isn't enough. You want it to work. You want to sell your works to those who most are touched by them. This newsletter is for you. I am one of those people like you, creative, independent and maybe a little bit crazy to the outside world. I'll talk about writing good apps for Apple platforms, the tools and API's to get there. Along the way I will show you how to become you best creative self. I will show you how to build and create, and make some money at it too.
Get exclusive content, new post notifications, tips and more in A Slice of App Pie.
In Practical Auto Layout for Xcode 8, using simple, practical, easy to follow examples, you will learn how to master auto layout, size classes and stack views on the Xcode 8 storyboard. Using easy to follow examples, you will learn how to make universal apps quickly easily and in far less time than ever before.
You will learn to use auto layout, size classes and new Swift implementations of view controllers. With plenty of color illustrations and code snippets, Swift Swift View Controllers will take you step by step through many easy demonstrations, teaching you the stuff you really need to know to implement any of these view controllers.