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.

I know this is an easy one, but I’ll forget it if I don’t write this down.

Permalink

| Leave a comment

1. Click Tools in the menu bar
2. Options
3. Expand Text Editor ( in the popup window )
4. Click ‘All Languages’
5. Check the ‘Line numbers’ box under the Display heading ( on the right )
6. Click OK
7. Happy Happy Joy Joy!

Don't point and click to your files, just type their name

If you’re unfamiliar with this, it’s a File Open dialog that let’s you type the name of the file you’re looking for, instead of requiring you to point and click your way to the file. This is one of the few features I still can’t believe Visual Studio doesn’t have built in. Now I’ve had other MS experts show me similar “quick find” features of Visual Studio, but it’s still not as easy as Ctrl+Shift+R > type the filename.

When I was using Visual Studio 2008 I came across the Sonic File Finder plugin and I was hooked.  Then I upgraded to Visual Studio 2010 and my plugin went away.  Today I solved my quick open plugin issue by browsing the Visual Studio Gallery and installing Quick Open File.  This quick open plugin does exactly what Eclipse’ Open Resource does, and it’s a good bit simpler than Sonic File Finder.  Now that I’ve got the plugin installed, the next step is to configure Visual Studio to open this plugin when I hit the Ctrl + Shirt + R keyboard combination.

Add Ctrl+Shift+R to Visual Studio

1. Fire up Visual Studio
2. Click Tools > Options > Environment > Keyboard
3. You should now be at the window for assigning keyboard shortcuts

   

4. Type “Quick” into the Show commands containing box
5. Click inside the “Press shortcut keys” box, and then press Ctrl + Shift + R on your keyboard
6. Assuming you’ve set this to Global, you are now good to go.

**NOTE : When assigning a keyboard shortcut in Visual Studio, you want to make sure your new shortcut isn’t already assigned to a different command.  If this is the case, you should remove your shortcut assignment from the other command before assigning to your new command.  This dialog will show you what is already assigned to a keyboard combination like so.

Assuming you made it this far, pressing Ctrl + Shift + R in Visual Studio should now show you this Quick File Open dialog.

There you go, quick open in Eclipse and Visual Studio!

DataBinding: ‘MyApp.vo.customVO’ does not contain a property with the name ‘Name’

I was stumped because my custom VO class did in fact have a public property called Name.  After many trials and tribulations I figured out that .NET didn’t like how I structured my custom class.

Here is what my original custom class looked like.

namespace MyApp.vo
{
    public class customVO
    {
        public Int32 id  = 0;
        public DateTime time  = new DateTime();
        public string Name  = string.Empty;
        public string DeviceType  = string.Empty;
        public string ObjectIDs  = string.Empty;
    }
}

Luckily I have JetBrains ReSharper installed, and it suggested using C#’s Auto-Implemented properties. This is the one thing I hadn’t thought about trying, and it ended up being the fix! My new custom VO class now looks like this.

namespace MyApp.vo
{
    public class customVO
    {
        public Int32 id { get; set; }
        public DateTime time { get; set; }
        public string DeviceType { get; set; }
        public string ObjectIDs { get; set; }
        public string Name { get; set; }
    }
}

So if you find yourself running into this error while trying to DataBind a collection of custom classes to a ListBox or similar control, have a look at your custom class and see if you can convert it over to using auto-implement properties as well.

Now I’m not suggesting this is the only way to DataBind a List of custom classes to a ListBox, but it solved my problem and let me do direct databinding from my service call without having to do any pre-processing on my list.

Hope this helps someone else.

After finishing this post I ran into all sorts of other strange issues and restarted using a Web Appliction instead of a plain old Website.  Between IntelliSense not showing any classes, to project reference issues, I couldn’t figured it out in time.  I’m sure there’s a way, I just had to move on.  So maybe this ramble below will be helpful for someone.

Just ran into something quirky with Visual Studio 2008′s new ADO.NET Entity Data Model wizard.  While working on an ASP.NET 3.5 website ( not a codebehind web application ) I was trying to get the ADO.NET Entity Data model wizard to work with MySQL and ran into a probable Visual Studio bug.  To sum up the issue, if you are going to add a new edmx to your project, do NOT save it to the App_Code folder initially.  Put it in your root folder, compile your project, then move the edmx where you’d like.

Assuming you’ve already created your ASP.NET Website project, here’s how you reproduce this issue.

Right click your project and left click ‘Add New Item’

Add New Item

Select ADO.NET Entity Data Model, name it, select your language of preference

ADO.NET Entity Data Model

Click Yes to the ‘Store in App_Code’ prompt

Place file in 'App_Code' folder

Complete the new Entity Data Model wizard

See this tutorial if you have not done this before

Compile project after completing wizard

Invalid token 'void' in class, struct, or interface member declaration

At this point your project should have a new.edmx file located inside of the App_Code folder, but the project won’t build without failing.  If you are stuck in this predicament, follow this workaround.

Move .edmx to root folder and rebuild

WORKAROUND : move edmx to root folder, then recompile

After moving your edmx file to the root folder you should be able to compile without problem.  Assuming this solves your problem, you should be able to move your edmx file to the App_Code folder without problem.  Seems like an initial compile problem.

Visual Studio 2008's Publish Failed message

Here’s what you should do inside of Visual Studio to find out why your publish failed.

1. Click the Tools menu > then Options to bring up the Options dialog.
2. Expand ‘Projects and Solutions’ on the left and click General
3. On General, click ‘Show Output window when build starts’
4. Now click on ‘Build and Run’ in the left tree
5. Next select a value from the ‘MSBuild project build output verbosity’ drop down menu
6. OK your way back to the main Visual Studio window
7. The next time you Build or Publish your project, you should see the Output panel pop up.  If your publish is still failing, the answer will live inside the Output panel

Here’s a visual walkthrough of these instructions.

Tools > Options > Projects and Solutions > General

Tools > Options > Projects and Solutions > Build and Run

Visual Studio's Output Panel