What we did
We wanted to be able to easily control the settings of an off-the-shelf RGB LED light strip using a mobile phone. We thought this would be a lot of fun for the office and could be used as a high tech holiday or party decoration. While it's designed for mobile web, this application is also accessible from a tablet or PC.
Our NetBurner Integrated Development Environment (IDE) makes all this magic possible and is included with our kits. You can build, test and deploy the entire project from within the IDE. Data is communicated to the strip through the NetBurner DSPI module. That device then acts as a web server, receiving and processing requests from the browser-based control panel.
What we used
- NetBurner Core Module: MOD54417-100IR -- Also suitable would be the model MOD54415-100IR
- NetBurner MOD-DEV-70CR which is also included the the NNDK-MOD54417LC-KIT
- AdaFruit Weather-proof Light Strip
The sky may just be the limit with LED strips and NetBurner Development Kits! Just think about the possibilities towards home security lighting, aquarium and terrarium or greenhouse lighting, LEDS for models and Lego cities and other fun apps.
Step by step tutorial
- First thing's first. We will need to download and install the tools. The steps for doing this can be found at https://www.netburner.com/support/get-tools, and will require registering for a NetBurner Support Account.
- Once that is complete, we have to get your device up and running. Fortunately, all NetBurner modules are shipped with a default factory application installed. The only thing you need to do is plug it in and connect it to your network via an ethernet cable. For more information on how to do this, or to troubleshoot any problems, please see the Quick Start Guide that came with your module. It can also be found online at https://www.netburner.com/products/core-modules/mod5441x.
- Finally we start getting to the fun part. It's time to run NBEclipse and create our project. The details of how to create an empty project with our examples are detailed pretty thoroughly in our NBEclipse Guide, which is located in your nburn install directory at
/nburn/docs/Eclipse. The general idea, however, is that you create an empty NetBurner Project for a NetBurner Device Executable and leave all of the options on the Project Options page blank.
- When the project has been created, we will import all of the code and files from the LED Light Strip project found at
nburn/examples/MOD5441X/LEDLightStrip. If you are already a NetBurner customer and don't see the example code in your install directory, you might need to download and install the most recent update.
- Once the code is loaded, it should build automatically, and from this point on, you are ready to roll! If you selected your device during project creation, you can push the application to your device by simply hitting the green arrow button located on the NBEclipse toolbar. If you didn't, you will need to add it as per the NBEclipse Guide, and then you can proceed as normal.
The rest of this tutorial is going to cover the application itself, and will outline the steps that are needed for you to create your own ingenious lighting animations.
To start, let's take a look at the classes that our application is composed of:
LED: This class controls the state of an LED's individual color values
LEDStrip: This class controls which animation is playing at a given time, and also contains the logic for each of the animations. By calling
SetCurVis(), you can set which animation is actively playing.
SpiInterface: This class is the project's interface to the SPI module, and ensures it is properly configured. It allows data to be written to the module through the
WriteSpi()function. The SPI module is how the device transfers data to the light strip, and provides the color information for all of the LEDs.
There are a few other files that are important, but don't define a class. A description of these is given below:
main.cpp: This contains the application's entry point in the function
UserMain(). Here, we initialize the device and establish a network connection. It also initializes our objects, and registers the callback function that will be used to handle HTML POST requests. Finally, it creates a separate task that will run the LED animations. In this way, we can ensure that our animations run smoothly even when the device receives and is processing user requests.
web.cpp: This file contains all of the functions that are required to serve web pages to the user, as well as to respond to all of their requests. The function
MyDoPost()is called whenever a POST request is made, and from here we determine what the request entails, such as which animation to play, and respond accordingly. In addition to using standard web technologies such as AJAX, NetBurner provides several mechanisms for exposing and displaying dynamic data from the application directly into the webpage before it is sent to the user. In our LED Light Strip example, we leverage this to display the current animation being played as well as the values of each of the color sliders. This ensures that the information given to the user is always in synch with what is on the server.
app.css: The base styling info for the elements on the page (except the range sliders) is stored here.
"This is all great out of the box," you might be saying, "but how do I add my own custom animations?" In order to do this, the following additions need to be made to the code:
- Add a new value for your animation in the enum
LedVis. Be sure to include it above
- Add a function that will contain the logic of the animation. See void
PlayBitCounter()as an example.
Main(), add a case for your visualization in the switch statement that will call your animation function.
- Write the animation function that you created in
LedVis.h. There are a few important things to note in order to get your animation rolling along. At the beginning of your animation function, call
ClearLeds(). This will ensure all data that has currently been sent to the LED strip will be wiped clean. After that, the inside of your animation function should contain a while loop that checks the value of
m_currentVisualagainst the enum value that you created in
LedVis.has well against
m_resetbeing true. Inside of this while loop, is going to be the bulk of your actual animation code. At the end of the while loop, be sure to call
WriteLeds()to send your color data to the strip, and then an
OSTimeDly()of at least 1, so that the device can process other tasks. After the while loop, be sure to set
m_resetto false. Feel free to take a look at
PlayBitCounter()as an example of how it should be set up.
- Add a radio button option for your new visualization next to the ones listed starting at line 22. Be sure to change the "value" attribute accordingly.
selectVis(all of our radio buttons). This bit of code will ensure that the color sliders are only available if they need to be for a given animation. If your animation will use a color that is specified with the color sliders, add a case statement with the value of the "value" attribute of your new animation below the one for the pulse animation. Otherwise, if it will display colors that are NOT chosen by the user with the color sliders, add a case statement with the value of the "value" attribute below the one for the colorWave animation.
GetCurrentVisualization(), be sure to add your new enum value to the switch statement.
MyDoPost(), in the if statement that tests the url against
LEDFORM, add another else if statement to the end of those that check against the animation names. The string that should be compared against in your new else if statement is that of the "value" attribute for the radio button that you created in
index.html. Notice that it should be in all caps, even if your value in
That's really all you need in order to start adding your own animations! Once the changes are made, recompile, push the new application to your device, and enjoy the results.