Create a digital Etch A Sketch

Rss Bot · August 30, 2017

In this tutorial, we take the mechanical drawing toy Etch A Sketch as an inspiration and attempt to implement these features for modern devices, with web technologies. Using the (aptly named) canvas, we first focus on tablets, which are akin in shape to the authentic toy. We can take advantage of touch events to control the dials, and device motion events to erase the content. Not leaving phones out, we will also explore how to use WebSockets to enhance the possibilities by splitting the controls and drawing area.

01. Get the assets

This tutorial will use Node.js. Before we get started, go to FileSilo, select Free Stuff and Free Content next to the tutorial – here you can download the assets you need for the tutorial. Then run the commands below, which will install the dependencies and launch the server. We're using Node to create a localhost, and it will also serve us later for WebSockets.

02. Use the draw() function

In main.js, the draw() function will be the centre point of our application. We use canvas to draw a line between two points; the origin (x1, y1), being where we last left our drawing, and the destination (x2, y2), the new point we want to reach. We now need to trigger this function to observe any form of drawing.

03. Implement keyboard events

Before we implement dials, let's quickly add a keyboard listener that can trigger our draw function. You've already been provided with the different keyCodes in the example, but you will need to amend the listener slightly to trigger the draw() function we defined previously. Now refresh your browser and see what you can draw with the arrow keys.

04. Resize the canvas

You may have noticed that our canvas element doesn't have a size assigned to it yet. For our drawing board, we will want a bigger space, maybe even the whole window. The code below takes care of the resize event, but don't forget to call adjustFrame() in init() as well.

05. Add a frame

We want the application to look like the original toy as much as possible, so we want to add a frame around the drawing area. To do so, we can define a margin value and amend the CSS for #sketch to margin: 20px auto; to centre the canvas horizontally and keep a bigger space at the bottom for the dials.

06. Create the dials

We've already given you the CSS for the dials in public/css/styles.css, so feel free to have a look. Next, add two <div> tags under the <canvas> in the HTML file, as described below. As a convention, we will use the left dial for horizontal drawing, and the right for vertical. We're also adding new variables to the init() function to prepare for touch events.

07. Use ZingTouch

The canvas with added dials, tied to the draw() function

ZingTouch is a JavaScript library capable of detecting various touch gestures, and will also handle mouse events. It is provided for you in the /public/lib/ folder, as we use it to control our dials. Below is the implementation for the left control; you will need to replicate and amend it for the other side.

08. Implement dial bounds

To block the lines from going off-screen, we use the canDraw() function, which returns a boolean. We pass it the direction, either 'horizontal' or 'vertical', and the value of either the horizontal or vertical variable. We call this function in the 'rotate' listener of both dials, and only if 'true' do we increment the angle and call the draw() function.

09. Avoid dial problems

With the bounds we've just implemented, there is a chance the dial might get stuck at one end if the value goes over the limit, even by a decimal point. To avoid this situation, we should handle the case where canDraw() is false and reset the value to a previously valid one, as shown here for the horizontal controller:

10. Get the drawing board on your tablet

It is always recommended to test on your targeted devices as early as possible. Our application is now in a good shape, and can respond to touch events. Follow the steps on accessing localhost remotely to get the drawing board on your tablet.

Next, we will use Safari and the Develop menu to inspect the application on an iPad. For Android devices, use chrome://inspect.

11. Test the accelerometer

Testing the accelerometer in Safari [click the icon to enlarge]

Connect your tablet to your computer via USB and inspect the application using the developer tools.

With the code below in place, you should be able to see the various acceleration values, as you move your device around. In order to reset the canvas, we've decided to consider an acceleration on the x axis over 5, and slowly decrease the opacity (eraseRate).

12. Shake to delete

We've seen in the previous step how to check for motion and acceleration. We now need to call fadeDrawing() when our condition is met. In this instance, we redraw an exact copy of the canvas at a different opacity.

Reset the globalAlpha to 1 in draw() and set the globalCompositeOperation back to source-over.

13. Make it look like the real deal

Our application with shake-to-delete functionality

So far, our application looks quite bland and flat. In order to give it some depth, we will add a frame colour, a shadow inside the frame and a bit of volume on the dials. The CSS for the dial shadows is already provided, but you will need to add those two elements at the end of the body.

Complete the CSS for the elements suggested here:

14. Use WebSockets

At the beginning of this tutorial, we briefly mentioned using WebSockets through our Node server. Now that you have a standalone drawing pad for tablet, we will look at making it available for your phone as well. However, phones might be too small to display both the screen and controls. We are therefore using sockets to communicate between phone and computer screen.

15. Detect the device size

In the main HTML file, replace main.js with extra.js. The latter contains all we've done so far, with modifications to handle devices and sockets, which we'll inspect in the following steps. Have a look at detectDevice() – this method now gets called on load instead of init() and will decide which 'mode' to handle for the application.

Below is the particular case of a phone being detected:

16. From phone to computer

From phone to computer, remotely drawing through sockets

Throughout extra.js you will notice bits of code such as socket.emit() or socket.on(). These are the emitters and listeners for our controls (phone) and screen (computer) instances. Every emitted event needs to go through the server to be re-distributed to all connected sockets. In server\index.js add a few more listeners in the 'connection' function and restart the Node server.

17. Fix phone orientation

Visit the localhost on your computer, while accessing it remotely with your phone (like you did previously from your tablet). You should now see a line being drawn on your screen while turning the dials on your phone. You will notice, however, that the dials don't fit properly if the phone is in portrait mode.

We can fix this with some CSS:

18. Make the toy more realistic

Touching your tablet leaves some temporary fingerprints

Let's get back to our tablet version. Sadly, the Vibration API is not available on iOS, so we can't implement haptic feedback when the dials are turned. In the original toy, though, you could leave temporary black fingerprint marks on the screen if you pushed it. We can add a touch event on the device to replicate this feature.

Set these listeners in init() and explore the functions they call:

19. Save a copy of the canvas

In the drawFingerPrint() method, before we do anything else, we save a copy of the current state of the canvas to a hidden element that we use to restore our drawing when clearing the print. That only happens on first touch, and not on the subsequent calls that increase the size of the print every 100ms.

20. Run the application offline

You could now make the application truly standalone by saving it to your tablet as a Home Screen app. We won't be able to do the same for the phone, as it requires connection to the server. In /public, locate the file named sketch.appcache and replace all the instances of 'localhost' by your IP address.

Now, amend the HTML to read as follows:

21. Save the application

Now visit the application again on your tablet and select the Add to Home Screen option. A new icon should appear on your desktop. Open it once while still being connected to your localhost remotely. The cache manifest we set up previously will download all the necessary files for offline use in the background. Turn the Wi-Fi off and open the app again. Voilà!

This article originally appeared in Web Designer magazine issue 263. Buy it here.

Read more:

View the full article

Sign In