I just returned from a hackathon arranged by Dreamhack, it was a great event, well planned out with nice people, so I will definitely try to go next time too.
In this blog post I will explain what I built and my thought process behind it.
Before going to the event I had a clear idea that I wanted to build something that I could incorporate IoT (Internet of Things) into, preferably something where the IoT device could be a phone. Using phones as the device makes sense because it makes it easy to get a lot of connected devices during the presentation when the audience is involved. And involving the audience is always a good trick at a hackaton.
IBM was one of the sponsors the event, and they were promoting their Platform-as-a-Service, this demo, a web page that you can connect your phone to and it tracks how much shaking and the acceleration you do on the phone from the browser.
This fitted my original idea, so I quickly signed up for Bluemix, created an IoT foundation service, went to the github repo for the demo page, and grapped their JavaScript implementation of a client that can communicate over the https://github.com/sjkp/dreamhackathon2015/tree/master/Accelerometer. The mqtt.js files is the client side library used for communicating over MQTT and the client.js is the code for connecting and authenticating.
It is worth noticing that the way I authenticate the devices is rather hacky, instead of registering each device individually as you would do normally, I simply use application authentication so all connected devices are using the same credentials and passing messages as the one device I preregistered. I had to do it this way as the same device can’t be connected twice, and I didn’t want to build automatic device registration (although there is an API for that). The free trial of Bluemix is also limited to 20 devices, and I wanted to aim big, so didn’t want that to limit my application. In order to register each device, the user have to sign into the web page with a username, this username I use as a topic (a messaging channel), so that all messages from a single user is sent to a specific topic. On the server-side I just used a wild card topic listener that would listen to all messages, and then inspect the message received to see which topic it was sent to, and hence which user sent it.
I did not have any great ideas how I wanted to use the above technology. So I spent all Saturday evening building a web application that could show a generic high score board, that would show how well all the connected users were doing in real-time. The high score board was a dynamic treemap diagram made with D3.js where the size of each square would represent how well a user were doing compared to the rest, thus the leading user would be in the upper left corner and the size of his square would represent how big a percentage that user had of the sum of all the scores. For the score board web application I used ASP.net and SignalR to update the score board in real-time. The SignalR backend was connected to the MQTT protocol by using the M2Mqtt library. The full source code is on github.
I was very impressed with how little latency there was in the whole system. I did some testing where I had the score board play a sound every time i shook the phone, and the delay wasn’t really noticeable. Because of the good performance I decided to do a collaborative music game, where people would shake their phone to the beat of a song and obtain points. Unfortunately I had to scrap that idea after working on it all of Sunday morning as I simply couldn’t get the sound playback in the browser to properly align with the beat detection, building this sort of application in HTML5 is probably not viable. I could have done it on the server, but then I would have issues syncing the music playing in the browser with the server, I should have went with a different framework, e.g. Unity, than HTML5 for the score board, but that was too late to change then.
So instead of a collaborative (which by the way was the theme for the hackaton) music game, I came up with the idea: Co-op anger management. So instead of shaking your phone to a beat, you just had to shake it as hard as possible and as much as possible for 10 seconds. You would do this together with your colleagues or friends, the one releasing most anger would then win the round, and a new round can be started from the score board.
You can see a video of one of my testing attempts here:
It all worked super great when I presented it in front of all the other contestants, so I was the lucky winner of IBM’s special price for Bluemix integration 🙂
If you want to try yourself:
This is the URL for the mobile web page, that will track how much you are shaking: http://dh2015.azurewebsites.net
This is the URL for the score board, where you can see and hear how much anger you are releasing: http://dh2015admin.azurewebsites.net