We are IoTalabs and we are a group of Internet of Things enthusiasts that love hacking together different devices. We've been working on many projects (check out our current project http://doteverything.co/) and we wanted to share our experience making a digitized drawing board!

Drawing on a computer can't match the ease and accuracy of moving around a pencil on paper in real life. A mouse or trackpad is far too cumbersome to maneuver, making even a stick figure hard to look good. But what if there was a way to map actual pencil strokes onto the computer so that you could still draw naturally AND have your creation on your screen? This is why we made Back to the Drawing Board!, a simple way to use a pen or pencil and draw on actual paper which translates your drawing on to a screen.

We utilize the power of a BeagleBone Black to do the core image processing of this project. Even though the processing power to convert physical drawings into digital ones is not intense, the power of the BeagleBone makes it a smooth and fast process.

Check out our current project at our website and take a look at this guide in a different format at our blog.

Step 1: The Apparatus

The way to map x and y coordinates is by using two linear potentiometers: one for x and one for y. These change voltages when pulled on. This setup needs to be mounted on a surface that makes it easy for the user to draw using a normal writing utensil (Refer to the image for list of materials). The surface we chose is a flat, smooth piece of wood that we can mount brackets to. We drilled evenly spaced holes throughout the borders to place the brackets on so make sure that the spacing matches the brackets. The brackets had to be placed diagonally opposite each other (refer to picture) so that one could measure x values and the other y. The way that these values are measured is by the pulling and retracting of a spring loaded string which in this case comes from two badge holders. This is then place on the brackets so that the strings can be extended outward. The next step is to place two spools each on the end of the potentiometers. This is what will rotate the potentiometers once the strings are pulled as they are wrapped around the spools. Finally, these strings are attached to a washer in the middle so that a pencil can be placed in the washer and the user can just start drawing like they normally do. With all of this in place, the apparatus is set up.

Step 2: The Pin Layout

The way we control when the user can start and stop writing is by pressing and holding a button to activate drawing and releasing it to stop. There is also another button to toggle through different colors.

To do this we need to understand which pins of the BeagleBone to use. The buttons need to be connected to GPIO pins so that we can program what they do later on. In this case we connected one button to P9_11 and the other to P9_15 (refer to schematic).

Theres also an LED that signifies when the button is depressed so that the user knows that the button click is functioning for drawing. This LED is hooked up to P9_13.

The two potentiometers are analog inputs so these require pins to the BeagleBone’s analog input pins. Here we connected one potentiometer to P9_33 and the other to P9_35. Both of these potentiometers had to be connected to a 1.8 V power source so that they could read values. This is all that is required on the hardware side. Below is an example of something we were able to draw.

Step 3: The Code

The code is what actually maps the voltage values to x and y coordinates. The code utilizes the processing.js framework to create the HTML5 canvas and the backend of the drawing. We also had to utilize the BoneScript library to read in the values from the potentiometers. Refer to the full code snippet that shows how each section was broken up to set up the canvas, read in the values, set colors, and draw.

Check out the code here. You can also download processing.js here and BoneScript here.

Step 4: The Final Product

The entire project put together allows the user to insert a writing utensil of their choice and insert it into the washer to draw like normal. Just hold down the button to draw and you are on your way! Check out the video for a demo.