As a Chicago Blackhawks fan, I often find myself celebrating an important goal by playing Chelsea Dagger on my surround sound system. But, opening up the Spotify app on my iPad or phone and beaming to my SONOS Connect just seemed like more trouble than it was worth for such a trivial task. What if I could press a button and have the song automatically start up? That sounds like a fun little side project. Then, I realized this would be a great excuse to put my brand new Philips Hue-decorated basement to use. I could also flash the lights red with the music, right? From here, I decided to create a Philips Hue and SONOS powered Goal Celebration API.
Background Research
First, I looked to see what exists out there today. There are a lot of variations – people that used Hue lightbulbs, a pricey goal light sponsored by Budweiser, triggering the code from a radio feed, but nothing exactly what I was looking for (Hue customization and Sonos). So, I was set off to create my own Goal Celebration API.
Architecture
I decided to start off with a NodeJS server, thinking I could utilize some existing NPM packages to smooth things over. I tried several packages for SONOS and Hue, but here’s the dirty secret about these: they have a lot of latency. They work great, and perhaps if I was doing something more complex, I could justify the delay. But, for how simple my purposes are, there’s no reason I should press a button, wait five seconds, and then have the song kick off. I may as well just open up Spotify myself at that point. So, I decided I’d just be old-school and make the HTTP calls myself.
One project I did find on Github that was especially useful (with no noticeable delay) was jishi’s node-sonos-http-api. It allowed me to create a “playlist” (of just Chelsea Dagger) on my SONOS account ahead of time, and start the playlist with an HTTP GET call. Same deal if I want to stop the song on-demand. So I can just run the project on my home server, and issue the GET calls on the same box as my Node API.
Thankfully, Philips has created a pretty intricate API for Hue systems. It runs right on the Hue bridge, so you can just read the current state of all light bulbs, modify the JSON locally, and push it back for it to take effect immediately. Also, not very difficult. It’s a little unreliable at times if you’re issuing a lot of commands, but it’s on the easier side of things. I will add this: I initially had a lot of unreliability with my dozen bulbs receiving commands – turns out a major culprit was that I was still using the Hue Bridge V1. After upgrading to the V2 model, things worked a lot better.
Goal Celebration API Code
Next, creating my Node API. I won’t dive too deep into the code here – if you’re really curious, feel free to scroll to the bottom and peruse the source code on my Github. But from a high level, I’m receiving a GET call to kick off the sequence. Then, I start the music via SONOS, save Hue’s current light state, turn the lights red and flash them, sleep for a configurable time (I found the sweet spot to be 50 seconds), turn off the music, and reset the Hue lights back to what they were before we started. I also implemented some simple throttling by rejecting any requests made within 60 seconds of the last one’s completion (because I just know that at least one of my buddies is going to try and crash this thing by calling it 300 times in a row).
Angular Web App
I then needed something to test my newly created Goal Celebration API. First, I created a simple Angular web app (actually built into the API’s root index, because it’s not going to eat up a lot of resources anyway). This was a really great entry point for testing during development, but not really convenient or practical for everyday use.
Xamarin Native Apps (Android / iOS)
Now for the cooler stuff. I’ve been looking for a good reason to get my hands dirty with Xamarin, and this felt like an easy way to get started. I figured even though I won’t release this to Google Play or the App Store, it would be convenient to deploy apps via App Center to my Note 8, iPad, and maybe a friend’s device while they’re visiting. The setup and build infrastructure is probably more complicated than the code was here – I’m just calling my endpoint and doing a few fun animations.
Also, if you’re looking to get started with Xamarin and XAML design, I highly recommend trying out LiveXAML. Simply put, Xamarin requires that you rebuild the entire solution before you can see your front-end XAML changes. LiveXAML lets you bypass that and see your changes on an emulator or device as soon as you hit Save. Installation was easy, and the tool simply ran without issues. In the spirit of full disclosure: I received a free license for LiveXAML in exchange for this plug, but this is also my honest opinion. I’d recommend at least giving the free trial a shot for your next Xamarin project – I know it saved me a lot of time.
IoT Wifi Button
I also made a nice big red button to press and make a call to the API. This was a little more complex, and can actually be applied to just about any API. Since this post is already a little wordy for my taste, I split this out into its own post that you can find here.
Conclusion
So now we’ve got our button and GUI apps running on Android, iOS, and Angular. That seems like a good time to sit back, enjoy a few goals, and call Phase 1 complete.
If you’re curious about my Goal Celebration API Code, you can check it out on Github.
3 thoughts on “Goal Celebration API: Built with Philips Hue and SONOS”