The Job:
Well, the truth is that I didn’t rack my brains with it: I simply did everything that was asked! All without any tricks or bribery being involved!
Besides the basics, other things I did, and I would recommend you do too, are:
• Include a few useful extras, such as settings for customizing the shapes used, which, although they were not asked for, surely make it a better ‘product’.
• Put a lot of effort into documenting the project (I included both a pdf tutorial, and a video screencast on how to use it). No coder likes to do so, I’m sure! But hey, the reviewers, or people that would in the future use your code probably prefer a good documentation or tutorial than diving into code!
And well, this was the result:
The Internal Guts:
Ok, now for the interesting stuff you coders might be wondering about: the languages/ frameworks/ APIs used, and the main difficulties involved. As ‘Visualize’ is a jQuery plugin, all the code I needed to change was pure javascript (and some bits of CSS for styling). And inside the javascript world, I mainly used some jQuery features (selectors, appending, prepending... nothing really fancy was needed), and also the HTML5 canvas API. All the actual plot (the white rectangle with the lines) is an HTML canvas, so most of my time was spent with it, for changing the vertices to custom shapes. For these shapes I could have simply used .png’s or .gif’s, but that would be a dirty trick which would make the process of using ‘visualize’ more tedious both for the computer loading it, and the web designer importing it... So I finally decided to draw them in code. I had to apply my geometry skills from school to draw them more or less accurately and, well, on the one hand some were obvious such as the square or circle, but on the other, I spent quite a lot of time (maybe half an hour, if not more) with the damn star only! Finally, I also drew the shapes in the ‘legend’ under the plot using little canvases for each one you see.
Apart from that, not much... the labels at the top and right weren’t really difficult to implement, and the scrambled legend problem was fixed changing a bit of the CSS and layout.
The only final thing that is worth mentioning is, guess what...?
IE6 (and IE7 and IE8) Compatibility:
First of all, some of you might have noticed that before IE9 canvas wasn’t supported in Internet Explorer (this is not Microsoft’s fault! this is because the HTML5 Canvas API has started to be implemented more or less recently). But the original ‘Visualize’ worked from IE6 onwards, using a very interesting library you should take note of:
ExCanvas, which brings Canvas functionality to lower versions of IE... or most of it at least. And well, although it worked fine with the original Visualize, when I tested it in my modified version I almost sh*t my pants off: everything was broken. Luckily, most of the problems were solved simply changing a bit of the HTML layout, but one didn’t! For some reason, the little canvases that I used for drawing the shapes in the legend didn’t display anything!
*I hope this gets well indexed in Google, as I couldn’t find anyone that had solved this problem before me:*
To draw more than one canvas using ExCanvas you need to add them one by one to the DOM.
What do I mean? That you can not create yourself an HTML node with a list of many canvases and then append it using jQuery to wherever you want it. Instead, you need to create one canvas, draw on it, append it to the DOM; create another one, draw on it, append it to the DOM, etc. What a pain!
And with that, I finish my post.
I would like to thank again, firstly you for taking the time to read this, and secondly the CloudSpokes staff that made all this possible! Count me in for lots more contests!
-
alfongj
