digital drawboard

Inspiration

When I was doing my physics and math homework, I always needed to write some steps or thought processes. As a result, I always need either a draft paper or some whiteboard software. However, I then found out that all those whiteboard software requires it to be on a separate screen or separate app. I always need to switch back and forth between my problem sheet and my drafts, which is super inconvenient. I've worked with tkinter, pynput, and python before and I realized that with the transparency of tkinter canvas, I can achieve the function of writing / drawing directly onto the computer screen.

What it does

It is a whiteboard app that works without a separate screen, which means that you can directly write on your screen. The app draws lines when you hold down your mouse (just like other drawboard do!). The control panel or app config can be opened when pressing "left ctrl" + "P", and hidden when pressing "left ctrl" + "O". Note: the keylogger (pynput) has some issues with key input when holding ctrl or shift which can mess up the stored hotkey if you find the hotkey command not working, press left ctrl and backspace to fix it. Sorry for this inconvenience. Here are some of the more detailed functions it provides:

1. Drawing.

Draw lines on your screen, you can disable/enable it when needed either with the hotkey left ctrl and shift or in the control panel. In the control panel, you can also change line width and color. To enable eraser mode, you can either press "left alt" + "shift" or turn it on/off in the control panel. To clear your whiteboard, you can either press "left alt" + "backspace" or clear in the control panel.

2. Create shape/text.

To do that, you will have to open the control panel and go to Action -> Utilities, under that page, you can click the corresponding button to create an unfilled rectangle, filled rectangle, unfilled oval, filled oval, textfield, and lines. The very bottom button continuous means that if it's currently continuous, you will for example always draw lines, otherwise, you will only be able to draw one line or shape and click the button again to draw another line/shape

3. Hotkey config.

The hotkey config can be found under Action -> hotkey config

4 Object List.

You can delete objects you've created under Action -> Objects. When you click on one of the objects inside the listbox, the corresponding object will be highlighted, you can press enter to delete clicked objects.

Note:

Can be compiled into exe with pyinstaller to make it more convenient to run.

How we built it

I created this app with python programming language. I used tkinter for the GUI framework, pynput/pyautogui for mouse and keyboard capture, JSON for data(setting) storage, and ThreadPoolExecutor for thread management. Some of the key components or key functions are:

1. self.root.attributes("-transparentcolor", "white") -> make white color transparent
2. self.root.attributes('-alpha',1) -> make the window completely transparent
3. self.root.attributes('-topmost', True) -> make the program always on the topmost layer of among all programs
4. A set of tkinter add functions along with gridmap provides a much more manageable way to create my GUI, such as function "addlabel", function "addbutton" and function "addscale".
5. self.pool = futures.ThreadPoolExecutor(max_workers=10) -> allows multithreading

Challenges we ran into

Multithreading is a big problem I encountered when making this app. When I first started I realized that tkinter mainloop completely occupies the main thread, and I need other threads to run along with it to achieve my goal. Then I found the ThreadPoolExecutor and I found out that I can submit a function to the thread pool to achieve multithreading. However, another thing I run into is the pynput mouse and keyboard listener thread, they seem to be a Thread object from the Thread library and I will have to start and join those two together in one function and then submit the function to the thread pool. Nonetheless, the threading part was resolved with ThreadPoolExecutor, start(), and join().

Another challenge I encountered was that I found that I need to modify a lot of my tkinter widgets. However, my original method, or just simply declaring them one by one, doesn't come to be very useful and I find myself unable to manage all my tkinter widgets as the control panel grows bigger and bigger. As a result, I created many custom functions (addlabel, addbutton, addonepbutton, addscale...) and store them in a three-dimensional list ([frame][row][column]).

When I was coding the drawing function of the app, I originally thought of just drawing many dots following the mouse. However, I find that both my mouse monitor option (pynput and pyautogui) cannot capture the mouse at such a rate that is both CPU efficient and sufficient to draw continuous lines. As a result, I figured I can store previously monitored x and y values and then draw a line from the previous x y value to the current x y values. This find makes the line more continuous and can also be achieved between a 0.02-sec gap which does not take much of the CPU.

Accomplishments that we're proud of

I am proud that I can write an actually useful app because I am using it every day when doing physics and math. Originally I felt like I was just doing programming, but I cannot get my knowledge to any actual use. I am very glad that I can do more practical things with my programming knowledge.

What we learned

I have learned a lot about programming. I have learned a lot of skills and concept coding in this project. I need to constantly google and look up definitions or uses from documentation, but I think this greatly improved my developing skills. I am much more confident in terms of learning myself compared to before. I am also more familiar with the concepts of for example multithreading, data storage, and organizing my code.

What's next for digital drawboard

1. Make the GUI look better (this has always been a problem with tkinter, I was considering switching my GUI framework to customtkinter which looks much better)
2. Being able to save the current drawings, objects, and texfields into some kind of file.
3. Being able to switch between multiple canvases.
4. A better keyboard and mouse monitor considers the keyboard input issue and the fact that I was using two separate modules to achieve this function.

Built With

• python
• tkinter