Colors

Almost all widgets have background and foreground colors, which can be set using the bg and fg attributes, respectively. As the following code shows, we can set either of these to a standard color by specifying the color's name, such as white, black, red, green, blue, cyan, yellow, or magenta:

Download gui/color.py

from Tkinter import * window = Tk()

button = Label(window, text="Hello", bg="green", fg="white")

button.pack()

window.mainloop()

The result is shown in Figure 14.10, on the next page. As you can see, pure white text on a bright green background is not particularly readable.

We can choose more colors by specifying them using the RGB color model introduced in Section 4.4, Pxels and Colors, on page 68. As we said there, RGB values are conventionally written in hexadecimal (base-16) notation; the best way to understand them is to play with them.

STYLE M 309

Figure 14.10: A label with color

The following color picker does this by updating a piece of text to show the color specified by the red, green, and blue values entered in the text boxes:

Download gui/colorpicker.py

from Tkinter import *

def change(widget, colors):

'''Update the foreground color of a widget to show the RGB color value stored in a dictionary with keys 'red' , 'green' , and 'blue'. Does

new_val += colors[name].get() widget['bg'] = new_val

# Create the application, window = Tk()

frame = Frame(window) frame.pack()

# Set up text entry widgets for red, green, and blue, storing the

# associated variables in a dictionary for later use. colors = {}

('green', '#00FF00'), ('blue', '#0000FF')): colors[name] = StringVar() colors[name].set( '00')

entry = Entry(frame, textvariable=colors[name], bg=col, fg="white") entry.pack()

# Display the current color.

current = Label(frame, text= ' ' , bg='#FFFFFF') current.pack()

# Give the user a way to trigger a color update.

update = Button(frame, text='Update', command=1ambda: change(current, colors)) update.pack()

# Run the application. mainloop()

This is the most complicated GUI we have seen so far but can be understood by breaking it down into a model, some views, and a controller. The model is three StringVars that store the hexadecimal strings representing the current red, green, and blue components of the color to display. These three variables are kept in a dictionary indexed by name for easy access. The controller is the function change, which concatenates the strings to create an RGB color and applies that color to the background of a widget. The views are the text-entry boxes for the color components, the label that displays the current color, and the button that tells the GUI to update itself.

This program works, but neither the GUI nor the code is very attractive. It's annoying to have to click the update button, and if a user ever types anything that isn't a two-digit hexadecimal number into one of the text boxes, it results in an error. The exercises will ask you to redesign both the appearance and the structure of this program.

Was this article helpful?

0 0

Post a comment