in Code

Build a Super Bowl touchdown light with Spark and IFTTT

I love football. Few things make me as happy as drinking beer and watching the Packers on Sunday. Despite living in Seattle for nine years and enjoying watching the Seahawks and Wisconsin alum Russell Wilson play over the years, the NFC Championship game was too bitter of a pill to swallow to enjoy watching the Seahawks in the Super Bowl. Still, I needed a reason to watch, and the #Deflatriots are hardly a reason to get excited.

The Project

Technology to the rescue! What I decided to make was a cool light that would change to the colors of the team, every time the Patriots or Seahawks got a touchdown. This gives me something to look at besides the game and the commercials, and a reason to watch. The folks over at Spark gave me a Spark Button a few weeks ago, that is perfect for a weekend project. They also announced a Spark IFTTT (If This Then That) channel which makes it too easy to do something like this.

 

Ingredients

  • Spark Core or Spark Photon
  • Spark Button, or LED setup
  • Toy football

Spark

If you haven’t heard of Spark, it’s basically like Arduino or any other IoT platform, but they do all of the boring stuff for you, like device config, getting on WiFi and exposing REST APIs, so you can focus on doing the code and your hardware build.

Spark Button

The Spark Button is a shield for the Spark Core (or upcoming Photon) that wraps up a bunch of neopixels, buttons and an accelerometer on to one platform. For a developer like me, it’s a perfect hacking platform so I don’t need to worry about calculating the right resistances just to get some LEDs to turn on. But you can do the same thing with some multi-colored LEDs if you have some.

Toy football

Some kind of cheap toy that you can cut up and put gadgets inside. In my case a free football we got from a bank at a parade.

nakedfootball

Step 1: Get Spark to shout colors

The first thing I wanted to get going was to get the Spark to show the colors of the team. I’d never used the Spark Button before but it has some fancy NeoPixels on it, that I knew would let me make a cool visualization.

Protip: Put the core on the right side of the Spark Button

If you’re weird like me and got a Spark Button that didn’t come with a Spark Core installed, make sure that it’s plugged in on the side without the headers. Yeah, apparently the Button has some crazy reverse headers, which is cool for extensibility and, really good at making you stupid when it takes a Spark engineer to tell you you’re doing it wrong.

Connect the core to wifi

Follow the instructions in the Spark documentation to get it on wifi, either using the Spark Dev IDE, the command-line interface or the Spark mobile app.

Add the Spark Button library to your new app

From the web IDE, go ahead and make a new project. Our friends at Spark put together a sweet library that makes it easy to code against it. You can search for ‘Spark Button’ in the libraries browser.

sparkbutton - ide

Turn on some LEDs

Like other microcontrollers, the Spark has a setup function, where get everything started, and a loop, function that gets called on every clock. If you want to turn on an LED and keep it on for a while, then you need to make sure you all it from the loop.

void loop() {
    // turn all the leds red
    b.allLedsOn(255,0,0);
}

I went ahead and made a handy helper to turn LEDs on to a specified brightness to the color of a provided string.

void colorLeds(String color, uint8_t value) {
    if (color == "red") {
        b.allLedsOn(value,0,0);
    } else if (color == "blue") {
        b.allLedsOn(0,0,value);
    } else if (color == "green") {
        b.allLedsOn(0,value,0);
    } else if (color == "white") {
        b.allLedsOn(value,value,value);
    } 
}

Then, we write a function that changes the LED’s colors whenever there’s a touchdown. In this case, we just enter touchdownMode by changing a bool.

void loop() {
    if (touchdownMode) { 
        // Show green when there's a touchdown
        colorLeds("green", 255);
    } else {
        // Show dim white the rest of the time 
        colorLeds("white", 100);
    }

void touchdown() { 
    touchdownMode = true; 
}

Step 2: Expose the REST API

Spark makes it super easy to expose a REST endpoint for your core. In our case, we  already have a function for touchdown, so we just call the Spark.function() helper.

void setup() {
    // The REST API that we expose to enter touchdown mode
    Spark.function("touchdown", touchdown); 
}

This is one of the best parts of the Spark for me, after you flash your core with this firmware you can go ahead and hit this API to turn the football on. POST 

/v1/devices/{DEVICE_ID}/led 
# EXAMPLE REQUEST IN TERMINAL 
# Core ID is 0123456789abcdef 
# Your access token is 123412341234 
curl https://api.spark.io/v1/devices/0123456789abcdef/touchdown  -d access_token=123412341234

Step 3: Make an IFTTT recipe

Spark just announced it’s IFTTT channel, which makes it easy to kick off device functions from IFTTT triggers. One of the most notable IFTTT triggers, is the ESPN channel which offers triggers for in game updates. Specifically, it fires when there are touchdown for the team you specify. You could just as easily do this with code on an node.js server on Azure, but besides making this easy, ESPN doesn’t offer a public API any more for sports data. These are disgustingly easy to create once you set up your IFTTT account.

ifttt

Choose ESPN in game updates as the trigger for your team. ifttt-espn-that

Choose Spark, “call a function” for the action. Then, chose your “touchdown” function and pass interesting data, like TeamName. teamname

This will go ahead and call that touchdown API any time there’s an ESPN game update for your team. IFTTT passes the data you provide to your Spark function, so later, you can parse the string so you can change the color depending on the team, or validate that it’s a touchdown, not just an end of quarter or something.

Step 4: Hack up your football

The last stage is to make it look cool. A bunch of circuits or wires doesn’t deserve to enter your football watching experience, so go ahead and cram all of those goodies into a crappy plastic football or something.

hacksaw

Step 5: Finish it out

The last stage is to get polish it up and get it ready for showtime.

  • Add a fade animation for the colored LEDs so it pulses like a heartbeat with each touchdown
  • Change the color back white after a few cycles of the color
  • IFTTT is awesome and easy, but it’s not instant which isn’t ideal for this scenario. I found there’s anywhere from a 1m to a 15m delay for when triggers fire. If I was going to build this again, I’d directly use an API without the latency
  • Glue the football halves together
  • Cover up my janky saw cuts with some extra glue so there’s less light leakage

Finished

Now you’re done! Enjoy those commercials and try to forget when your team got kicked out of the playoffs.

Code

Human knowledge belongs to the world! Here’s my final Spark code.

Write a Comment

Comment