Endless Mural wins FWA for HTML5

I’m ecstatic to announce the Endless Mural HTML5 project has won the prestigious FWA Site of the day award.  While this isn’t the first project I’ve worked on that has won the FWA, it is the first NON-Flash, HTML5 and ASP.NET project that has.  No Flash, and we still got the FWA site of the day, SWEET!.

I need a SQL Ninja

On Friday July 23rd I got the chance to skateboard with my good buddy and personal hero Joshua Davis. I feel lucky being able to say we’ve actually been skating together for a few years now, but this was certainly my favorite session we’ve had so far. We started out at Broomfield’s new park because I had to show Josh the new mini bowl.

Two hot dogs ( http://yfrog.com/n3hs5j )

After Broomfield we made a quick stop for lunch, and then on to the Denver Skatepark in downtown.  It was great showing Josh the lines at my hometown skateparks, as well as a few radical maneuvers.

Now that Josh had seen my non-frontside airs, it was time to wrap things up.  As we were saying our goodbyes I decided to ask about work.  Normally I don’t talk about work at the skatepark, but I was thinking about going indie again, and figured what the heck.

Turns out Josh was about to start a project for Microsoft ( WHAT?!?! ) and he need to “find a SQL Ninja” ( DOUBLE WHAT?!?! ).  I’ve been actively working with MS SQL Server since version 6.5, so I let him know he was looking at his sql ninja.  Josh was interested, but gave me the “just cause we’re bros, doesn’t put you on the team”.

HTML5 drawing tool in one night

Driving home from the skatepark I called my wife super giddy.  ”Honey, I may be going indie sooner than we planned”.  I gave her the rundown of the potential project Josh and I just spoke about, and let her know I had some homework to do.  That night I went home and built out a distant cousin of the endless mural project.

HTML5 drawing tool powered by ASPX and MySQL

HTML5 drawing tool powered by ASPX and MySQL

EFDRAW is a really simple HTML5 drawing tool powered by ASP.NET and MySQL. It has most of the features of the mural ( draw, save, replay, share ), but this was only a proof of concept.  This was my first dive into HTML5 development, and it’s pretty sweet.

If you’re interested in HTML5 drawing tools, feel free to play around with EFDRAW, view source, help yourself.

There’s one thing…. Azure

A few days after building EFDRAW my band The Compilers played at Ignite Denver 7. Right before starting our first set my phone rings and it’s Josh! OMG I think, this is either the “you got it” or the “sorry bud, we’ll skate again” call. I decide to take the call even though we were locked and loaded, standing on stage with our gear waiting for the house music to go down. I answer and it’s Josh, but not the usual hyperactive Josh I’m accustomed to. I ask about the gig and he says “Well, there’s one thing. We have to use Azure”.

I let him know I’ve worked with other cloud platforms already, just not Microsoft’s. So we talk a little more and Josh passes the phone to Branden so we can talk 0s and 1s. After talking to Branden “mega brain” Hall for a few minutes he asks if I can do this. I tell him yes, he says yes, I get excited, he gets excited. Branden passed me back to Josh and I’m in shock at this point.

Now the boring stuff

So that’s the story of how I landed the Endless Mural gig, now the boring technical details.

The drawing portion of the mural was built by Branden Hall of Automata Studios.  I did the backend which is made up of ASP.NET ( C# ), SQL Azure, and Windows Azure.  We’re using Azure blob storage to save and serve up the PNGs created at the mural.  To access SQL server, I wrote a super lightweight data access library using all native .NET.

For the most part the backend was very much like every other .NET SQL Server project I build, but Azure did introduce a few gotchas.

1. The publishing and management of your cloud site mainly goes through http://windows.azure.com/.
2. You can deploy your site from Visual Studio which proved to be immensely helpful after my Azure deploy package grew beyond 100 MB.
3. You can access SQL Azure directly from SQL 2008+ management tools.
4. You can not FTP single files up to the cloud, only the full ball of wax.
5. You can still use web.config for configuration storage, but Azure also has it’s own version of web.config.
6. If you need to edit your settings after deploying, store those settings in your Azure service config, not web.config
7. SQL Azure requires all tables to use clustered indexes
8. SQL Azure has it’s own TSQL restrictions ( not many, but be aware )
9. On average, doing a full republish of an Azure site took a full hour.

I could probably ramble on and on about Azure, but I’ll cut it short.  If you happen to have any questions about Azure feel free to hit me up or leave a comment.  I would also like to say that I know Microsoft is and has been actively improving Azure by the day.  The state of Azure today is most likely even better than when we built the mural, so my experiences may not be your own.

The toolbox

• Windows Azure SDK
• Windows Azure Platform Kit June 2010
• Windows Azure Tools for Visual Studio ( v1.2 )
• Microsoft Seadragon Ajax library
• Microsoft SQL Server 2008 R2
• Microsoft SQL Azure
• ASP.NET 4 ( C# )
• Windows Azure
• Azure Storage Explorer

Here is the toolbox that Branden used on the client side.

Hotlinks from the server guy

• Developing and Deploying with SQL Azure
• SQL Azure DB T-SQL reference
• Azure w/Intellitrace
• Using Windows Azure Page Blobs .. how to upload / download blobs
• Windows Azure Deep Dive: Working with Configuration
• Seadragon Ajax – Getting Started
• Creating Content : Deep Zoom Tools
• Deep Zoom Blog
• Twitter TWEET Button

It’s a wrap

This project was the most concentrated five weeks I’ve had in quite some time. I still wonder if we were only given five weeks because this was an HTML5 project. Either way, the mural team made some magic and now you can too. If you’re like me and just want to doodle, go make some art at the mural. If you’re a developer interested in HTML5 and Javascript programming, go check out the javascript library okapi.js which Branden Hall recently open sourced.

Also be sure to visit the magicians, I mean artists, who made the amazing patterns you see when using the mural. I’m a life long doodler, but can’t art myself out of a paper bag.

Evgeny Kiselev

Evgeny Kiselev - www.ekiselev.com

Guilherme Marconi

Guilherme Marconi - brain.marconi.nu

Joshua Davis

Joshua Davis - www.joshuadavis.com

Matt Lyon

Matt Lyon - www.c8six.com

And lastly I put up a photo album on Facebook of all my camera phone pictures from the trip.  Check out the endlessmural photo album.

Go make art at endlessmural.com

Endlessmural.com is a generative drawing tool written in HTML5, Javascript, CSS3, on top of a Microsoft Azure backend.  Go, make art, share the url.

Here is a piece I made today.

Usage is simple :

1. Open with Internet Explorer
2. Point and click through the options
3. Click the ‘Make Script’ button

From here you can paste the xcopy script directly onto the command line, or into notepad and Save As “yourfile.bat”.

Download xcopier here

XCOPY maker in action