Tuesday, June 20, 2017 12:00 am

DIY Mobile Controlled LED Strip

Written by 
Rate this item
(2 votes)

Ever see an LED light strip and think to yourself, "Man, if only I had a device that would let me remotely control that from my mobile phone or computer." Well friend, I'm here to tell you that your dream can soon become a reality. With NetBurner's MOD54415 or MOD54417 development kits, you can have a remote controlled LED light strip in a little over an hour. To see just how this is accomplished, follow the guide below.

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.

There was no app development needed for iOS or Android and we utilized standard HTML, Javascript, Ajax and CSS technologies enabled through nearly any web browser. The code library is good as-is or you can use it as a springboard to try out new concepts, integrations and applications.

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

Other applications

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  • index.html: This file is the single page used for our control panel. It lists the different animations that the users can choose from, and provides them with a way to control the color that is used in select animations. Additionally, it houses some javascript functions that are used when we manipulate the controls on the page, and to make adjustments to our page’s style to ensure mobile compatibility.
  • 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:

  1. In LedVis.h
    • Add a new value for your animation in the enum LedVis. Be sure to include it above eLedVisCount.
    • Add a function that will contain the logic of the animation. See void PlayBitCounter() as an example.
  2. In LedVis.cpp
    • In 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_currentVisual against the enum value that you created in LedVis.h as well against m_reset being 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_reset to false. Feel free to take a look at PlayBitCounter() as an example of how it should be set up.
  3. In index.html
    • 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.
    • Next, we move to the javascript statement that changes the css properties of elements with the class of 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.
  4. Finally, in web.cpp
    • In GetCurrentVisualization(), be sure to add your new enum value to the switch statement.
    • In 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 index.html isn't.

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.

Questions on how we created this? Feel free to check out our forums or drop us a note. Built something cool yourself? We'd love to see it!

Read 246 times Last modified on Thursday, July 27, 2017 5:21 am

Leave a comment

NetBurner Learn

The NetBurner Learn website is a place to learn faster ways to design, code, and build your NetBurner based product. Sign-up for our monthly newsletter!

Latest Articles