Sketch Mobile

by | Jul 18, 2012 | Releases | 14 comments

Sketch Mobile is a drawing app build for mobile browsers; taking advantage of technologies such as multi-touch, the accelerometer, and the gyroscope; providing a fun & novel environment to express yourself in colorful ways ? Sketch Mobile was commissioned by Google as part of the Mobile Chrome Experiments released at Google I/O show in San Francisco. It was an exciting project to be part of, I hope you enjoy!

This is a short rundown of some of the technologies used to create the Sketch Mobile app;

  • Accelerometer—shake the device to clear the drawing like an Etch-a-Sketch.
  • Canvas—used to create the drawing area and outputs of all the tools pixel/vector based tools. This has long been one of my favorite HTML5 elements ?
  • CSS3—used to create responsive design, looking the same on mobile devices as on desktop computers.
  • Gyroscope—controls where the drips go using spray paint tool.
  • Icon Fonts—used for all the graphical elements within the application.
  • localStorage—used to keep configuration when user comes back.

Icon Fonts

One of the biggest challenges in this project was creating a design that would work as well on a 30” monitor, as it would on an iPhone display—without programming separate designs for each of them. In order to achieve this resolution independence we had to throw raster images out the window; instead we opted to use Icon Fonts along with some fancy CSS3 designed/coded by Daniel Christopher.

Icon Fonts allow you to create a package consisting of your own custom SVG illustrations, which are embedded with the @fontface CSS3 attribute; the best part is, this feature is supported by all modern browsers (http://caniuse.com/fontface). My favorite resource for creating your custom fonts is IcoMoon (http://keyamoon.com/icomoon/), they make generating Icon Fonts a snap! Check it out ?

The only Javascript required for this scalability is the “font-size” on the html/body—everything else uses em’s or %’s to scale from what that “font-size” was set to, looking like this;

var width = window.innerWidth / 1280;
var height = window.innerHeight / 800;
var ratio = Math.min(width, height) * 100 >> 0;
document.body.style.fontSize = ratio + "%";

Event.js

Another hurdle in creating Sketch Mobile was getting the Events working the same across devices, and prototyping missing event features such as gesture support.  I ended up putting together one of the most complete events libraries available—this library is especially relevant if you’re building a HTML5 Canvas application, as it takes into account CSS zooming. Event.js is available to you at Github (https://github.com/mudcube/Event.js) under the MIT license. The primary features of the library includes;

  • 1 finger click, dblclick, and dbltap—Ghost onclick event shaves off 300ms on response.
  • 1+ finger tap, taphold, drag, and swipe—Customizable, from 1 to 12 fingers.
  • 2+ finger pinch, and rotate—Customizable, from 2 to 12 fingers.
  • Shake detection.
  • Keeps track of scaling, event bubbling, bounding boxes, and other things manually, in order to make sure things work the same across browsers.

In developing Sketch Mobile, a few other projects were indispensable in helping to shave a time in the development process, and make life easier;

Tongseng for TUIO

Tongseng allows developers to use the MacBook pro touch pad as if it were an iPad, transmitting touch events to the browser.  It can be a bit tricky to install, but totally worth it… if you’re having problems installing it, you’ll need to compile it on your own, and in XCode you’ll want to click on “fix errors” and switch the code over to the latest SDK. To learn more, head over the excellent HTML5Rocks article on Developing for Mobile Touch by Boris Smus, and head to the bottom of the page near “Developer Tools” to read more.

Adobe Shadow

Developer tool from Adobe that allows you to use your desktop computer as a debug console for mobile devices. You can connect to your device wirelessly, and use your browsers normal error console to get helpful messages that will help debug your applications. Shadow works with Mobile Safari, Chrome Mobile, and the Android Browser; http://labs.adobe.com/technologies/shadow/

Chrome Mobile Debug

Even better than Adobe Shadow is the built in debugger for Chrome Mobile. It provides pretty much the same type of functionality as Shadow, but is more “integrated”, and less buggy. Read more about how to get this up and running; https://developers.google.com/chrome/mobile/docs/debugging

…

Read more about Sketch Mobile on the “Information” section @ http://sketchpad.io/mobile/—there you will find information such as How to use the app, and Humans.txt for a full list of contributors.

I apologize for the psychedelically colorful presets on the tools ? Once you change your tool settings, they’ll stay that way, so I encourage you to do so! Here’s a few drawings created with Sketch Mobile;

14 Comments

  1. superstring on July 20, 2012 at 6:17 am

    Hey Michael,
     
    Sketchpad.io runs well on my iPad using the new Chrome browser. Really like the UI and the support for touch and also the Unistroke Recognizer. Fantastic, looks great!
     
    thom @ superstring

    • mud on July 23, 2012 at 6:06 am

       @superstring Thank you 🙂 I really appreciate it! The Unistroke Recognize was a lot of fun to toy around with—there is definitely some potential there for the future of interaction—although the library still needs some work, it’s recommended; http://depts.washington.edu/aimgroup/proj/dollar/

  2. Jasper on September 4, 2012 at 7:58 pm

    Hi,
    Is it okay to advertise your apps in mudcube and have my users use it? I have a website that is for free for users. Thanks.

  3. Jasper on September 4, 2012 at 8:09 pm

    You have some nice drawing tools/apps. Very interesting.

  4. Jasper on September 7, 2012 at 7:27 am

    thank you. very cool.

  5. Jasper on September 15, 2012 at 10:20 am

    Hi,
    What other services do you do? Do you do Web Development, programming, etc? I have a problem with my site’s speed……..it is slow, it probably takes 5 sec before it starts loading the site. I’m not sure why and i suspect programming or code because i think i have a good dedicated server so i don’t know what to do with the speed. Do you redesign or fix website issues?? Please check it out and let me know if you can do something about it. The site URL is: http://www.ParckPlace.com — thanks.

    • Michael Deal on September 22, 2012 at 6:37 pm

      Hi Jasper, I could of sworn that I responded to this! Yes, I do Web Development, generally projects that involve vector/bitmap graphics, building collages, photo competitions, drawing applications, colorful and interactive tools, and things like that—it’s really best to have me working on these types of things, as it’s my specialty. My rate is $80/hr. Feel free to connect with me; http://about.me/michaeldeal

  6. Robin on October 9, 2012 at 7:02 pm

    Michael Deal… Your Sketchpad for mobile is wonderful. I posted about it on my Google+. I hope I will be able to use it on a Nexus 7 tablet in landscape mode and download to PDF, JPEG and PNG photo formats for presentations. Really nice… You can expand this for Android like Paint.net for Windows!

    • Michael Deal on October 9, 2012 at 8:37 pm

      Thanks Robin 😉 A new version is on the way! PDF is not on the list, but JPEG/PNG output will be, as well as synchronizing with the server. When you mention expanding this like Paint.net, what do you mean?

  7. Robin on October 10, 2012 at 8:40 pm

    Michael, I look forward to the JPEG/PNG ability very much. Paint.Net is an online service with greatly expanded capabilities over Microsoft Paint. Your program could be expanded to provide this type of service with templates in addition. I could not sign into the site.. it said my email formatting was wrong in an error message? It wasn’t wrong… Maybe there was a space… Will try again…

  8. Patricia Parten on July 14, 2013 at 3:21 am

    I am enjoying your Sketchpad very much; however, after working hard on a project and attempt to save the file nothing happens and I am unable to save it (quite frustrating!). Do you know what the problem is? I use chrome, and I also downloaded an app to take a pic of my screen, but it won’t work with Sketchpad either. It just won’t. Heeeeelp!!