We make a widget that allows us to easily mix any proportion of the three primary colors of red, green, and blue. The resulting mixture is displayed on a large swatch of resultant color that can be dragged around the display screen. The swatch is at the edge of the widget with the minimum of intervening colors. We can place the swatch next to any color in a picture that we wish to match and adjust the combined color using handy slider controls that are intuitive to use.
To produce this mixing tool we have made use of Tkinter slider controls two chapters before they are formally introduced. At this stage you should just copy and use the code without knowing the details of how they work knowing that they will be explained in Chapter 7,
The following screenshot shows a color mixing palette.
.jpg)
# color_mixer_1.py
#>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
from Tkinter import *
root = Tk()
root.title("Color mixer in Hex and Integer")
canvas_1 = Canvas(root, width=320, height=400, background="white")
canvas_1.grid(row=0, column=1)
slide_value_red = IntVar() # variables used by slider controls
slide_value_green = IntVar()
slide_value_blue = IntVar()
fnt = 'Bookantiqua 14 bold'
combined_hex = '000000'
red_hex = '00'
green_hex = '00'
blue_hex = '00'
red_int = 0
green_int = 0
blue_int = 0
red_text = 0
green_text = 0
blue_text = 0
# red display
canvas_1.create_rectangle( 20, 30, 80, 110)
canvas_1.create_text(20,10, text="Red", width=60, font=fnt,
anchor=NW, fill='red' )
# green display
canvas_1.create_rectangle( 100, 30, 160, 110)
canvas_1.create_text(100,10, text="Green", width=60, font=fnt,
anchor=NW, fill='green' )
# blue display
canvas_1.create_rectangle( 180, 30, 240, 110)
canvas_1.create_text(180,10, text="Blue", width=60, font=fnt,
anchor=NW, fill='blue' )
# Labels
canvas_1.create_text(250,30, text="integer 256", width=60, anchor=NW )
canvas_1.create_text(250,60, text="% of 256", width=60, anchor=NW )
canvas_1.create_text(250,86, text="hex", width=60, anchor=NW )
# combined display
fnt = 'Bookantiqua 12 bold'
canvas_1.create_rectangle( 20, 170, 220, 220 )
canvas_1.create_text(20,130, text="Combined colors", width=200, font=fnt,
anchor=NW, fill='black' )
canvas_1.create_text(20,150, text="Hexadecimal red-green-blue", width=300,
font=fnt,anchor=NW, fill='black' )
# callback functions to service slider changes
#=============================================
defcodeShorten(slide_value, x0, y0, width, height, kula):
# This allows the callback functions to be reduced in length.
global combined_hex, red_int, green_int, blue_int
fnt = 'Bookantiqua 12 bold'
slide_txt = str(slide_value)
slide_int = int(slide_value)
slide_hex = hex(slide_int)
slide_percent = slide_int * 100 / 256
canvas_1.create_rectangle(x0, y0, x0 + width, y0 + height, fill='white')
canvas_1.create_text(x0+6, y0+6, text=slide_txt, width=width, font=fnt,
anchor=NW, fill=kula )
canvas_1.create_text(x0+6, y0+28, text=slide_percent, width=width,
font=fnt, anchor=NW, fill=kula)
canvas_1.create_text(x0+6, y0+50, text=slide_hex, width=width,
font=fnt, anchor=NW, fill=kula)
return slide_int
defcallback_red(*args): # red slider event handler
global red_int
kula = "red"
jimmy = str(slide_value_red.get())
red_int = codeShorten(jimmy, 20, 30, 60, 80, kula)
update_display(red_int, green_int, blue_int)
defcallback_green(*args): # green slider event handler
global green_int
kula = "darkgreen"
jimmy = str(slide_value_green.get())
green_int = codeShorten(jimmy, 100, 30, 60, 80, kula)
update_display(red_int, green_int, blue_int)
defcallback_blue(*args): # blue slider event handler
global blue_int
kula = "blue"
jimmy = str(slide_value_blue.get())
blue_int = codeShorten(jimmy, 180, 30, 60, 80, kula)
update_display(red_int, green_int, blue_int)
defupdate_display(red_int, green_int, blue_int):
# Refresh the swatch and nymerical display.
combined_int = (red_int, green_int, blue_int)
combined_hex = '#%02x%02x%02x' % combined_int
canvas_1.create_rectangle( 20, 170, 220 , 220, fill='white')
canvas_1.create_text(26, 170, text=combined_hex, width=200,
anchor=NW, font='Bookantiqua 16 bold')
canvas_1.create_rectangle( 0, 400, 300, 230, fill=combined_hex)
slide_value_red.trace_variable("w", callback_red)
slide_value_green.trace_variable("w", callback_green)
slide_value_blue.trace_variable("w", callback_blue)
slider_red = Scale(root, # red slider specification # parameters.
length = 400,
fg = 'red',
activebackground = "tomato",
background = "grey",
troughcolor = "red",
label = "RED",
from_ = 0,
to = 255,
resolution = 1,
variable = slide_value_red,
orient = 'vertical')
slider_red.grid(row=0, column=2)
slider_green =Scale(root, # green slider specification # parameters.
length = 400,
fg = 'dark green',
activebackground = "green yellow",
background = "grey",
troughcolor = "green",
label = "GREEN",
from_ = 0,
to = 255,
resolution = 1,
variable = slide_value_green,
orient = 'vertical')
slider_green.grid(row=0, column=3)
slider_blue = Scale(root, # blue slider specification # parameters.
length = 400,
fg = 'blue',
activebackground = "turquoise",
background = "grey",
troughcolor = "blue",
label = "BLUE",
from_ = 0,
to = 255,
resolution = 1,
variable = slide_value_blue,
orient = 'vertical')
slider_blue.grid(row=0, column=4)
root.mainloop()
Red, green, and blue color values ranging from zero (no color at all) to 255 (full saturated primary color) are set by the position of a slider widget that is self explanatory to use. Every time a slider is moved, the values from all three sliders are combined and displayed graphically on a color swatch as well as numerically. There is no better way of explaining the relationships between primary color components expressed as 0 to 255 integer values, hexadecimal values, and pure or combined colors.
This widget has the swatch placed at the edge of the bottom-left corner to let you drag it close to an area of a picture underneath in order to be able to match the color visually and read off its hex value. There is also a separate window filled with color that can be moved freely around the screen. If you wanted to match a color to some portion of an image in a photo, you could place this swatch right next to the patch of interest in the image and move the sliders until you achieve a decent match and then note the hex value.
The last example in this chapter demonstrates color mixers built in Python modules.
The use of slider widgets as a graphical method of entering numbers which need to share screen real estate with our canvas is sometimes inconvenient. Why can't we make our number controllers just another kind of drawn object inside our canvas? Can we make the slide controllers smaller, neater, and less obtrusive? The answer is yes and we explore this idea in Chapter 7,