Category: Tutorial

Prerequisite: Basic Python

However, as you probably have noticed, this editor is not interesting. First of all, the users can only draw black pixels. Secondly, there is no way to erase the drawing.

Luckily, both problems can be solved by implementing a color picker and that is exactly what I’m going to do today.

Again, one of the advantages of using python is because of its rich library base. There are at least dozens of open-source libraries of color picker available on GitHub, but ultimately I was settled with this one.

Install vcolorpicker

1
pip install vcolorpicker

The first thing to do is to get a color. A color can be interpreted in different ways, but the most common way to represent it is using the RGB color system ({{ “Red” | colorize: “red” }} {{ “Green” | colorize: “green” }} {{ “Blue” | colorize: “blue” }} color system).

It can either look like

1
# Example (Don't copy)
2
# Decimal code
3
 R    G    B
4
(255, 255, 255)

or

1
# Example (Don't copy)
2
# Hex code
3
#FFFFFF
4

5
 (R) (G) (B)
6
#(FF)(FF)(FF)

Both represent color white.

Now it’s time to invoke the color-picking menu. To do so, I’ll import the getColor() function from the vcolorpicker library.

1
from vcolorpicker import getColor
2
getColor()

Press run, get

That was a quick setup. Now I can enter number to the RGB field between range [0, 255] to get different colors. What getColor() does is to pick a RGB color, and represent it as (decimal, decimal, decimal). This can be verified with the following code

1
# Example (Don't copy)
2
print(getColor())

If nothing is done and ‘OK’ button is pressed, the terminal would print (0.0, 0.0, 0.0) instead.

Why does this matter? Well, remember this function?

1
# Example (Don't copy)
2
def set_color(self, event=None):
3
    self.canvas.itemconfig(self.id, fill='black')

It would be great if ‘black’ can be replaced with our chosen color. However, before doing that, I need to convert the color into hex code. To do so

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3

4
getColor()
5
# optional
6
print(f'#{rgb2hex(getColor())}')

Now the terminal will print #000000 instead. This is the same thing as (0.0, 0.0, 0.0), but the fill prop does not work with decimal codes so I need to convert it into hex first.

Now, as you probably have noticed, our canvas will not open if getColor() is directly invoked. This indicates that I need a trigger in my editor, and a button would be prefect for this task.

Time to learn how to create a button in tkinter. I know it has been a while we have not talked about the editor itself. To recap, the editor consists two parts: its base and a canvas. The canvas is where the user draws pixels. However, in this case, I will put a button on the base.

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3
import tkinter as tk
4

5
button = tk.Button(base
6
                   text='pick',
7
                   command=getColor)
8
button.config(width=2, height=1)
9
button.place(x=300, y=700)

Get

After clicking on the ‘pick’ button

Now it’s time to modify the set_color() function we have. Oh wait, I suddenly realized that the hex color code is not being stored anywhere. To fix that, I will modify the button’s command.

1
from vcolorpicker import getColor
2
from vcolorpicker import rgb2hex
3
import tkinter as tk
4

5
base_height = 800
6
base_width = 600
7
theme_color = '#383838'
8
canvas_len = 512
9
outline_width = 2
10
grid_len = 32
11
sqsize = canvas_len / grid_len
12
color = '#FFFFFF'
13

14
def pick_color():
15
    global color
16
    color = f'#{rgb2hex(getColor())}'
17

18
button = tk.Button(base
19
                   text='pick',
20
                   command=pick_color)
21
button.config(width=2, height=1)
22
button.place(x=300, y=700)

The color value will be modified after getColor() returns a result (when the ‘OK’ button in color picker is pressed). Now we can go back to set_color() function.

1
class OnePixel:
2
    def __init__(self, m_canvas, pixel_row, pixel_col,
3
                 start_x, start_y, size, outline, width):
4
        self.canvas = m_canvas
5
        self.id = self.canvas.create_rectangle((start_x,
6
                                                start_y,
7
                                                start_x + size,
8
                                                start_y + size),
9
                                               fill="white",
10
                                               outline=outline,
11
                                               width=width)
12
        self.canvas.tag_bind(self.id, "<ButtonPress-1>", self.set_color)
13
        self.row = pixel_row
14
        self.col = pixel_col
15

16
    def set_color(self, event=None):
17
        self.canvas.itemconfig(self.id, fill=color)

I’ve learned something today, how about you?

💗 If you liked this blog, consider following me on GitHub.

🍯 Happy Coding 🍯