Cloud Connected NeoPixels Using The Particle Core

NeoPixels are a bright and colorful way to draw attention to wearable clothing, Arduino powered robots and more. As wonderful as all of those possibilities sound, there has been one thing I’ve wanted to try for a while. I’ve always wanted to control my NeoPixels via the cloud using a Particle Core (previously called a “Spark Core”).

Particle Cores are microcontrollers that are quite similar to an Arduino Nano, however they have inbuilt Wi-Fi and come with a cloud based service that makes it easy to control your Core from afar. You can find out more on the Particle website. There are two newer versions of the device currently available for pre-order, the Particle Photon and the Particle Electron. The Photon has better reliability and is overall a faster and better upgrade to the Core. The Electron goes a step further and provides 2G/3G connectivity in over 100 countries, doing so via a global subscription service. It brings connectivity to a whole new and exciting level!

If you’re looking to get started and you don’t currently have a Particle device in your possession, try pre-ordering one of the newer options. At the time of writing, the Particle Cores are now all sold out! The demo below should still work on the newer devices, assuming that the NeoPixel library doesn’t have any compatibility issues with the Photon. My Photon is still in the mail, so I can’t check that just yet!

NeoPixels are a really neat brand of LED panel from Adafruit that can be hooked together in many different (and super colorful) ways. The NeoPixel grid I’ll be using is an 8×8 NeoMatrix grid.

What We’re Building

In this demo, we will be displaying a smiley face that will change depending on the mood sent to our Particle Core. If we send it a happy emotion, it will smile. If we send it a sad one, it will frown. We will send these emotions to it directly via very simple POST requests (you can replicate these by creating a form, AJAX site or server to initiate them, we will be keeping it simple, short and sweet by not defining one particular type of POST request method in this article).

The code and explanations for this demo assume you are familiar with your Particle Core, have set it up on your local Wi-Fi network and are familiar with how to flash code onto it via the Particle Build IDE. If you are new to the Particle Core and haven’t tried anything with it yet, head to the Particle docs and read through the explanation on flashing apps first. Try flashing a simple LED blinking app to make sure you are all set up and ready to go. Assuming your Wi-Fi connectivity is pretty good, this should be a pretty smooth process.

The Demo

Want to skip ahead and see the final code? It is all available right here on GitHub.

The Sketch

Our sketch for our cloud connected, Particle-powered NeoPixel looks like so:

A few important points when putting together the sketch above:

• We have a 4700μF, 10V capacitor (Adafruit recommends at least 1000 μF, 6.3V or higher). The one I used was from AdaFruit. They very strongly recommend placing one of these in your set up before connecting the power.
• There is also a 330 Ohm resistor between the data output pin and the input to the NeoPixel (Adafruit recommends somewhere between a 300 to 500 Ohm resistor). Whilst it might work without this, it is safest to include it!
• Adafruit also strongly discourage connecting the NeoPixels to a live circuit. At the very least, always connect ground first, 5V and then data. When disconnecting it – disconnect in the reverse order.
• We are powering the NeoPixels via a battery as the Particle Core does not provide the 5V power on its own that the NeoPixels need to light up. In this case, Adafruit recommends you power the pixels first, before powering the Particle Core.
• If you don’t have a battery pack but understand how to use a logic level shifter to get it up to 5V, you can do that instead. I don’t have a logic shifter to try this out!
• I am definitely not an electronics expert and strongly recommend reading up on NeoPixels via the NeoPixel Uberguide before putting the above sketch together. NeoPixels can be pretty easy to damage so be careful! All I can say with confidence is that the above sketch I made did not damage my own NeoPixels and theoretically should be okay. Make your own judgements first before trying it at home.

The Code

Everything we will be creating will be coded up within the Particle Build Web IDE that we use to flash code onto our Particle devices over Wi-Fi. It uses a similar simplifed version of C++ to Arduino along with the same software library called “Wiring” for common input/output functions. In other words, if you are an Arduino fan, you’ll be coding in pretty much the exact same way.

We start by creating a new app within the Build IDE and adding a rather important library to it. To add pre-existing libraries to your Particle apps, select the Libraries option which looks a bit like a bookmark in the bottom left corner.

From the screen that appears, choose the “Neopixel” library underneath “Community Libraries”, once it loads click the button that says “Include in App” to add it to the app we are creating.

That will add in the following lines to your app:

// This #include statement was automatically added by the Spark IDE.
#include "neopixel/neopixel.h"

Notice it says something about “Spark”? I mentioned it briefly at the start of the article but thought I’d point this out once more to avoid confusion. The name “Spark” will appear throughout the code as it was the old name for “Particle”. I’d say the name will fully change over soon but my demo still has the old name in it. I’m not quite sure if they’ve updated the inner workings of their API or not yet.

After that, we define three constants for our app. We define the pin the NeoPixel grid is connected to, the number of pixels in our grid and the type of NeoPixel we have.

#define PIXEL_PIN D7
#define PIXEL_COUNT 64
#define PIXEL_TYPE WS2812B

We then define our Adafruit_NeoPixel object with those three constants.

Adafruit_NeoPixel strip = Adafruit_NeoPixel(PIXEL_COUNT, PIXEL_PIN, PIXEL_TYPE);

The next chunk of code is a series of arrays of 1s and 0s that represent the face our NeoPixel grid will show for each emotion. For example, the first one that represents “waiting” looks like so:

int waiting[PIXEL_COUNT] = {
    0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 1, 0, 0, 1, 0, 0,
    0, 0, 1, 0, 0, 1, 0, 0,
    0, 0, 1, 0, 0, 1, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 1, 0, 0, 0, 0, 0,
    0, 0, 0, 1, 1, 0, 0, 0,
    0, 0, 0, 0, 0, 1, 0, 0
};

I won’t cover each one in detail there, you can check out the code for each specific face and add more in if you feel adventurous. Maybe add in the emotion of “adventurous” while you’re at it.

We set up an integer called currentFace which will hold a key value that represents which emotion we are displaying at the moment. I chose to use just numbers rather than comparing to strings of each emotion because it was much less complicated for this sort of simple demo. If you wanted to do something more complex, feel free to expand it out:

int currentFace = 0;

The setup() function runs when our Particle Core is ready to get started with some code. We start by preparing the data pin for our anticipated output using strip.begin() and then push an empty set of data to the NeoPixels to clear them at the start using strip.show(). The show() function is usually used to actually show colored NeoPixels, however using before we’ve got any pixel settings means we clear the display.

void setup() {
  strip.begin();
  strip.show();

Then, we define our publicly accessible Particle function called "setEmotion" and link it to an actual function in our code called setEmotion().

Spark.function("setEmotion", setEmotion);

Within our loop function, we call the function that will set what colors our NeoPixels will output.

void loop() {
  setPixels(20);
}

The aforementioned setPixels() function follows. It takes a parameter of wait which sets how long in millseconds it’ll be before we loop and update it again. Within that function, we iterate over all of our NeoPixels from left to right and set their colors. We then set the brightness of our pixels, set it to show the changes and delay the code using our wait value in milliseconds.

void setPixels(uint8_t wait) {
    uint16_t i;
  
    for (i=0; i<PIXEL_COUNT; i++) {
        // Our NeoPixel color definitions will be here
    }
    strip.setBrightness(30);
    strip.show();
    delay(wait);
}

Each option for coloring the NeoPixels is coded in a similar pattern. It just changes which pixels will come out white and which will come out a certain RGB color. Overall, each pattern is chosen by checking the value of currentFace. Then we check whether the pixel position in the matching emotion’s array contains a 1. If so, we set the pixel color to white using setPixelColor(i, 255, 255, 255). That function takes four parameters, the index of the pixel, the red value, the green value and the blue value. If the index in the array is not 1, then we set it to be a specific color for that emotion. I gave waiting the color orange. Mainly because I like orange. I am not quite sure what color “waiting” is represented by.

if (currentFace == 0) {
    if (waiting[i] == 1) {
        strip.setPixelColor(i, 255, 255, 255);
    } else {
        strip.setPixelColor(i, 255, 100, 0);
    }
}

Happy is green, sad is blue, confused is purple and angry is red.

Most importantly for our remote setting of the emotion for our NeoPixels, we need our setEmotion() function! This reads in an emotion passed to it and sets the currentFace index accordingly:

int setEmotion(String emotion) {
    if (emotion == "happy") {
        currentFace = 1;
    } else if (emotion == "sad") {
        currentFace = 2;
    } else if (emotion == "confused") {
        currentFace = 3;
    } else if (emotion == "angry") {
        currentFace = 4;
    } else {
        currentFace = 0;
    }
    
    return currentFace;
}

Having numbers here also helps with debugging as the Particle functions only return numbers. This way you can see in the resulting HTTP response which emotion it plans to use.

In Action

In order to try this out, flash that code onto your Particle Core and use your favorite method of sending a HTTP request. For this demo, I used SublimeHttpRequester, a HTTP client plugin for Sublime Text. It let me write in a HTTP request into my Sublime Text editor, highlight it, right click and perform that action. You can use any number of other methods of sending POST requests. You could even link it up to IFTTT and run the request after a rule is triggered on that service like in one of my previous articles on IFTTT.

Run the following POST request to update your Particle’s emotion, switching out the parameter of “happy” for whichever emotion you’d like to send through and including your own device id and access token:

POST https://api.particle.io/v1/devices/{yourdeviceidhere}/setEmotion?access_token={youraccesstokenhere}
Content-type: application/x-www-form-urlencoded
POST_BODY:
params=happy

Not sure where to find your device ID or access token? The device ID is found in the “Devices” section of the Particle Build IDE. It is the section with the crosshair icon. Your access token is in the settings, which is the gear icon.

If all runs successfully, your NeoPixels should change via the web!

Conclusion

You should now be ready to connect up a grid of NeoPixels to a Particle Core and control them via POST requests in your own wacky idea. Build this into a web app with POST requests that respond to actions your users make. Connect them to your logs and make them change color depending on the status of your site or service. Use IFTTT, your Pebble watch or any other bit of tech that can output POST requests to display on the NeoPixel grid! The power of the IoT is that you can connect almost anything.

If you do make something fun and shiny based upon this code, leave a note in the comments and share it around, I’d love to see it!