DIY Apple Watch ‘Sketch’ Real Touch Messaging App

A couple months ago, Apple announced the Apple Watch. One of the features demonstrated at the live announcement was ‘Real Touch’ messaging, enabling users to quickly sketch a design or drawing, and the end user can watch as the image animates.

‘Real Touch’ is a pretty good use case for the idea of a collaborative whiteboard, a virtual canvas where users can draw and their brush strokes are reflected across all connected devices simultaneously, as they happen. Because ‘Realtime’ is PubNub’s middle name, we thought we’d take a stab at building it on our own.

Virtual Real Touch Messaging Demo

In our virtual demo below, you see two Apple Watches. When next to eachother, watch as you draw on one, brush strokes are reflected onto the other in realtime. Also, feel free to open up the Real Touch messaging CodePen example in two browsers to simulate two different devices syncing in realtime.

See the Pen watch – “Sketch” Real Touch Messaging by Joe Hanson (@ToeJamson) on CodePen.0

See the Pen watch – “Sketch” Real Touch Messaging by Joe Hanson (@ToeJamson) on CodePen.0

Mimicking Real Touch: Multi-Touch and HTML5 Canvas

HTML5 canvas with PubNub is a great way to easily build the collaborative whiteboard functionality we see in the demo. Because web browsers have implemented GPU acceleration, performance has improved and we can now build beautiful graphics, all in a web browser.

We have a full tutorial on building a collaborative HTML5 canvas whiteboard here, enabling you to allow users to draw to one another and sync their brush strokes.

Good news is our tutorial doesn’t just work on web browsers with your mouse. Try pulling the demo up on your phone and use your finger to draw pictures!

Getting Started

You’ll need to sign up for a PubNub account (for our entirely free sandbox tier for development), get your unique publish/subscribe keys in your Developer’s Portal, and then we recommend heading over to the HTML5 canvas tutorial and go from there.