We can now draw basic shapes in our paint program. However, we still cannot change the colors of these shapes. Before we allow users to change colors, we must provide a way for them to select colors.

We will, therefore, provide a color chooser, letting the user select two different colors: the foreground color and the background color.

While we are at it, let's also add a label showing the x, y coordinate of the mouse over the canvas, as highlighted in the preceding screenshot.

Let's begin with the color palette. The two color palettes are nothing but two small rectangle items placed on a canvas. To show these two rectangles, we define a method, create_color_palette and call it from the existing create_gui method.

The code for create_color_palette is as follows (see code 6.05.py):

def create_color_palette(self):
  self.color_palette = Canvas(self.tool_bar, height=55, width=55)
  self.color_palette.grid(row=10, column=1, columnspan=2, pady=5, padx=3)
  self.background_palette = self.color_palette.create_rectangle( 15, 
    15, 48, 48,       
      outline=self.background, fill=self.background)
  self.foreground_palette = self.color_palette.create_rectangle(
    1, 1, 33, 33, outline=self.foreground, fill=self.foreground)
  self.bind_color_palette()

The method ends by calling a method named bind_color_palette, which is defined as follows (see code 6.05.py):

def bind_color_palette(self):
   self.color_palette.tag_bind(self.background_palette, 
                              "<Button-1>", self.set_background_color)
   self.color_palette.tag_bind(self.foreground_palette, 
                              "<Button-1>", self.set_foreground_color)

The preceding code simply binds the mouse click to two not yet defined methods, set_background_color, and set_foreground_color, using the tag_bind method of the Canvas widget.

Here's the signature of the tag_bind method:

tag_bind(item, event=None, callback, add=None)

The method adds an event binding to all matching items. Note that the bindings apply to the items, not the tag. For example, if you add the existing tag to new items after a call to tag_bind, the new items will not automatically bind to the event.

Next, let's define the method that actually opens a color picker and sets the foreground and background colors based on user-selected colors.

Tkinter comes with a built-in colorchooser module that we import into our namespace as follows (see code 6.06.py):

from tkinter import colorchooser

To open a color chooser, we need to call its askcolor method, as shown here:

def get_color_from_chooser(self, initial_color, color_type="a"):
  color = colorchooser.askcolor(color=initial_color, title="select {}            
                                    color".format(color_type))[-1]
  if color:
    return color
  else:  # dialog has been cancelled
    return initial_color

Upon clicking OK, the color chooser returns a tuple of the form: 

((217.84765625, 12.046875, 217.84765625), '#d90cd9') 

Where the first item of the tuple is another tuple comprising the RGB values of the chosen color and the last item of the tuple represents the hexadecimal color code of the chosen color, if the Cancel button is clicked, it returns None.

We then use the preceding method to set the foreground and background colors as follows:

def set_foreground_color(self, event=None):
  self.foreground = self.get_color_from_chooser(self.foreground, 
    "foreground")
  self.color_palette.itemconfig(self.foreground_palette, width=0, 
    fill=self.foreground)
 
def set_background_color(self, event=None):
  self.background = self.get_color_from_chooser( self.background,  
    "background")
  self.color_palette.itemconfig(self.background_palette, width=0, 
    fill=self.background)

This concludes coding the color chooser for our paint program. However, note that the colors you choose will simply change the value of the foreground and background attributes. It will not change the color of items drawn on the canvas. We will do that in a separate iteration.

Finally, let's define the methods that show the current mouse position in a label.

We create two new methods (see code 6.05.py):

def create_current_coordinate_label(self):
  self.current_coordinate_label = Label(self.tool_bar, text='x:0
y: 0 ')
  self.current_coordinate_label.grid( row=13, column=1, columnspan=2, 
    pady=5, padx=1, sticky='w')
 
def show_current_coordinates(self, event=None):
  x_coordinate = event.x
  y_coordinate = event.y
  coordinate_string = "x:{0}
y:{1}".format(x_coordinate, y_coordinate)
  self.current_coordinate_label.config(text=coordinate_string)

And we call the show_current_coordinates from our existing on_mouse_unpressed_motion method as follows (see code 6.05.py): 

def on_mouse_unpressed_motion(self, event):
 self.show_current_coordinates(event)