BBB Blinken Bulbs

Hello! Did you know that the lights in the BBB Building are programmable? We have provided an API for the lights to allow people to program them via JavaScript. This allows us to provide you with a simple simulator to play around with and test your light controller function, and then push your controller to the strand for all the world to see when you're done.

TLDR With the click of a button, you can run any of the submitted programs from the gallery and view the currently running show via the status page.

Programmers Submit your cool programs to the subreddit and see them displayed in the gallery!

Using the API

To use our simulator and control the lights, you'll need to include our client.js library, which exports Blinken and Bulb objects. You can instantiate it using the new constructor, giving it an object that contains a title and who wrote this show:

const b = new Blinken({title: "My Title", author: "My Name"});

This object has a run() method, which takes as an argument an anonymous function that is called once to initialize the light strand. This function is expected to return another anonymous function that is periodically called to update the state of the light strand. This update function is expected to return the number of milliseconds to wait before the update function is called again. Both the initializer and update functions are given a lights object as an argument, which represents the current state of the light strand. There are 100 lights in our strand (indexed 0-99), and each light can be assigned individual RGB and brightness values. These values are expected as floats between 0 and 1.

Walkthrough Example

Confused? Let's walk through a simple example; we'll leave off anonymous functions for later. Our simple example will alternate the strand between all red and all green lights.

First, let's define the update function, that will be called every 500 milliseconds to allow us to update the state of the light strand:

Now that we have an update function, we need to create an initializer function. Our initializer will simply set all the lights brightness to full on. Our initializer must also return a pointer to our update function.

Finally, we can create the Blinken object, and pass our initializer to it:

Result

That's it! As long as we include the client.js library on the same page as the above JavaScript, we'll see something like this when run in a browser (feel free to click and drag or use the scroll wheel to zoom in and out):

When we're satisfied with our simulation, simply click the Run on Stairs button on the simulation page, and then watch it go! Your code may be queued behind someone if another program is currently running, but the button will change to tell you the current status of your program.

If you're happy with how it looks on the stairs, feel free to submit it to the BBBBlinken Subreddit for all to see, and pick your favorites from the list of already submitted blinkens.

Putting it all together

You can use any JavaScript environment you want, including running it in your browser locally, but it's easiest to share your code and simulation with others (and the subreddit) if you use a JavaScript pastebin-like site. We recommend jsbin.com, since it allows you to see the console as one of the panels. The console can be helpful for finding errors in your program.

To include the JavaScript libraries on jsbin.com, you'll need to include them with the <script> tag in the HTML pane, like this:

JavaScript allows us to do all of the above much more compactly through the use of anonymous functions. Here's a cleaner, more "functional" version of the simple red-green blinking demo:

Here's another example of a simple snake program to help inspire additional ideas.

Happy Hacking!

Contact

Is there a problem with the bulbs? Email blinkenlights@umich.edu.