From flash to Moo

As many of you know,  Matt Cottam of  Tellart was my mentor while at RISD. I worked with Matt for over a year and a half on may projects. And he was nice enough to hire me for an inter position one summer… The same summer I was learning actionScript for my multi-touch table. That Summer Tellart + Zango worked to design a beautiful new site for tellart. After all the design was done they allowed me to work on the programming of it in flash. I actually did quite a bit of it, but then had to leave to go back to school before it was finished. After I left, I think they noticed how bad some of the code was, and redid most of. Though I did see some of my code in there latter (very little). – That was summer of 2008.

Fast forward to spring 2009. Im reading the Mootools Documentation and found a class I thought I could have used to re-create the site in JavaScript. It worked. In about 50 lines of code I had made a mock-up that functioned very similer to original. It only took me a few hours. I sent it over to the guys at tellart to show them it could be done if they ever wanted it to. But why?

<rant>

So here is my flash rant. I love flash and ActionScript. But not for making web pages. 90% of the time flash is used on a site, it could have been done with out it. But many who say “Who cares?”. I do. And you should too.

Flash ruines page searchability, navigation, SEO, and a lot more. Not to mention that poorly done it is a CPU HOG!

</rant>

Then, just a few months ago, Matt asks me if I still had that code, and if I would be interested in completing it for their site. When am I not interested in more javaScript work?

So the deal was. The site needed to work on the iPhone, retain all the movies/slideshows, have all the portions be bookmarkable, and make it easier to add more content.

I did it. And my code is now in use on their site.

I kept all the flash for the videos and slideShows, and I used mootools to check for flash. If it was not there, replace all the flash, with jpg images.

I made all the elements on the page dynamically generated in PHP. Using some simple arrays, they can now add a new project with a single line of code. And it will resize everything, and create all the parts needed for it to work without modification.

I enabled bookmarking. This is a lot harder than it sounds. There is one page. One. So what do you bookmark? Well there are 7 projects and an info page with a lot of info. Each project position is boorkmarkable. So if you go to the link, the page will load, and it will auto scroll to that project. If you bookmark a person on the info page. It will auto scroll to the info slide, and do a nice ajax call to grab the info on the right person.

Another part was … if a user is watching a video on a slide 0r slideshow, and moves to a different slide, we needed to stop the current slide, and return to the teaser frame. Because the moving part is all javaScript, there a language problem. How do you talk to a flash movie from JS? With mootools. It’s Swiff class is wonderful (though incorrectly documented). I just had to render all the flash to include the JS connect. Worked really well.

It took a full weekend to do (I had thought less) but it came out really nicely. And on a javaScript friendly browser, it is actually a bit faster than the flash version.

Weekend Update

 This week left me with some extra time, though most of it went to seeing family for Thanksgiving, I did manage to create my first gesture-esk application for my multitouch table. When you place 3 or more fingers on the table, it looks for 3 that are making a triangle within a certain size, if it finds one it places a circle in the middle, symbolizing bringing up a menu system.

I’m not sure if there is a better way to do what I did (it seemed to contain too many for loops), but it starts at a finger, then looks for two other fingers within a certain distance from that one. If it does not find two others close enough, it moves to the next finger. If it finds two or more, it checks to see if any of them are within that distance from each-other, and stops if it does. It works really well, and thanks to a friend on a forum I visit, I was able to use an incenter equation to calculate the center.

I started thinking about the next push for RISDpedia. Im looking at ways to document electronic components next. One of the things I have been thinking about is how to document the availability of said components.

Because you cant just pop into a store to purchase them (sad I know), I needed to have a list of placed they can be ordered. As luck would have it octopart (if you don’t know it you really should) has a search API. Octopart lists all the place where you can order a part (Digikey, Mouser etc), if it is in stock, ho many they have, and more.

The API was a little hard to break into though, and it took me more than a few hours to get everything out of it I needed. It is only available as a JSON object and im not the best with javascript. I used MooTools to handle the JSON call, but because there is no print_r (as in php) to pull, and see everything out of an array, I had to do loop after loop to find the entire structure, so I could then map it out, go back, and just ask for the information I want.

Granted, I’m sure im doing it completely wrong, it works. At some point when I have time Ill make it into a MediaWiki extension for RISDpedia.

Touch Programming

This weekend I started more programming for my multitouch table. And by that I guess I was more trying to fully understand how it is done. See the really bad part about all of this is the lack of real documentation. 

I am part of a forum and wiki for multitouch stuff, but until I started it no one had even documented a hello world application for it. It’s written in AS3 (action script 3), but it is not normal. There are 13 steps to get it to work with the table that you must do for each new project. But on one told anyone this.

I had to dissect a program and find out how and why it worked. Took me a long time because some of the stuff was anything but logical/ comprehendible. Simply copying the code would not work. The code used classes with no documentation, and when building them, you even have to make sure things are saved in the correct folders. But no one ever said this. For the first week I was just writing my code over another program because when I started from scratch it would not work, but my same code overwriting a working program worked fine.

Well it pissed me off to the point I made the absolute simplest program for it. It makes red circles where you touch. It was my hello world. I then made a wiki article on the entire process.

Well that was all fine, but in the simple programs I made, the code really only understood single touch. After you touched it made a circle and forgot you where even touching it. Sure it worked with multi touches at the same time, but only like clicking really quickly in different places works with a mouse.

But there was a paint program that did remember. You can use multi fingers to draw separate lines at the same time. So it was tracking and keeping track of your fingers. I wanted to simplify this as well, and wanted to understand it.

I took out everything I could and got it down to about a third the code it was. It was really nice to get it working. And really great that it is something I understand now. This should allow me to make better apps later on, but even more so, allow others to make great apps we can all use.

Im not sure why documentation is so important to me, but I know even less why good documentation is such a lost world to most people.