Over the past weekend (September 14 -17 2012) I had the opportunity of attending a hack-a-thon in Chattanooga, Tenesse duly named “Hackanooga“. The event spanned 3 days and brought developers from across North America to utilize Chattanooga’s 1 gbps network. Various teams were formed (~12 I think) based on interests and technical strengths and the hacking began shortly after. It was an amazing hacking filled weekend, full of great food, awesome people, and great demos from every team. It’s worth mentioning how well organized the event was as everything went off flawless, the interruptions were kept to a minimum and everyone tried to stick to the “less yack, more hack” motto. In terms of what I got done over the weekend, I had the opportunity to work on a few different things, ranging from writing a small patch for Andor Salga’s point-stream project, integrating Popcorn Maker into the Big Blue Button project, and helped Alan Kligman get his demo ready using Popcorn.js (The GPS data seems to be a tad off, but it’s still really cool!).
The patch I wrote for Andor, solved an issue he was having with limiting the amount of point-cloud data he was pushing across his node.js server. He wanted to be able to allow the client to change the amount of data that they wanted (which would in turn provide a clearer image) if they were on a slow connection. Being able to specify the amount of data, the user would be able to experience the project even if they weren’t on a fast network and the site would still seem responsive, instead of lagging in an attempt to keep up with the amount of data being received. The patch essentially took only a percentage of each point-cloud frame (which was randomized, as the data is originally stored from the top of the image down) and pushed it to the client. I set up a small slider on the client side to let the user control the amount of data, which was updating a server variable via socket.io. Below you can see a small screencast of it working and you can find the
In addition to Andor’s project, I mainly focused on integrating Popcorn Maker into the Big Blue Button project, which took up the majority of the weekend. I had the chance to speak with Fred Dixon of Big Blue Button before I went down to Chattanooga and he noticed my experience with Popcorn.js and Popcorn Maker. He asked me if I would be interested in working with him and his team in order to allow their clients to remix published meetings from BBB (Big Blue Button). I began by modifying the BBB exported project template to include necessary attributes and scripts in order to work on Popcorn Maker. In favor of having the Popcorn Maker template not effect existing projects, I created a second template, remix.html, that would live along side the current template and only be used when editing the meeting using Popcorn Maker. Another hurdle that I had to work with was the fact that all of the exported meetings had their events stored in xml files and had no usable plugins for Popcorn.js (they were all using a code plugin, which runs an arbitrary piece of code at a given time). I went back and refactored these pieces into reusable plugins, but still had an issue interacting with the xml data, as Popcorn Maker doesn’t currently have a way to handle the data in that format. In an effort to get things working quickly (as we only had ~36 hours in total!) I produced a dirty hack that would XHR the data when parsing a saved-data.json file. I added a property into the saved-data.json to notify Popcorn Maker that we needed to parse and XML file for this project. Another issue was that each projects XML data was stored in a different folder location on the server, so I had to modify Popcorn Maker to take a meeting id as a query-string parameter and find the appropriate data on their server. In addition to this, logging in a saving using our node.js server was a headache.
The main reason interacting with our node.js server was a problem, was that the big blue button server served up files on a different port and location then our node.js server. This meant that whenever I tried to log in, I would get error letting me know that the domains didn’t match because of a port mismatch, and therefore couldn’t access anything on the Popcorn Maker node.js server. I fought for a long time with this, but eventually, around 3am, figured out that I needed to alter the response headers to accept cross origin requests and so on. On sunday morning I was in pretty good shape and managed to modify our embed files for Popcorn Maker to work with the BBB template. The exported page used the same controls we currently use in Popcorn Maker, overlaid over the published meeting HTML that the user modified. In addition to the two custom plugins (chat and slide), various other Popcorn Maker were kept in such as webpage, image, and Google Maps. The project seemed to be a pretty big success, as the Fred and the BBB team have plans to integrate it into their project. Below is a short screen cast of what I created.
About an hour before we were going to present our demos, Alan Kligman approached me and asked if I wanted to hack together a demo with him using Popcorn.js. After Alan explained what their project was and what they were looking for (they stored various geolocation data while a user took video of their phone, which was then uploaded and played back with Popcorn.js) we began to hack something togethor. Since Alan was using so much geolocation data (which was time coded) we decided to plot Alan’s location from the video on a map as he walked along a street. Alan pointed me at all of the information I needed and organized it into a few usable scripts and we were off. It’s funny because the hardest, and most time consuming part of this whole hack, was attempting to get elements position correctly on a page using CSS. Go figure that the biggest bottle neck for two programmers was CSS 😐 Take a look at the screencast of the demo below.
The weekend overall was a success, which is evident from the attention it got from the media (close to 100 people showed up for the demos I believe), the mayor of Chattanooga, and it even got featured on the news. It was loads of fun and a lot of cool projects and demo were produced from everyones hard work over the weekend. If you haven’t been to Chattanooga before, I recommend checking it out, as the town is absolutely beautiful and the people there are amazing! Here are some pictures from the weekend that I took: