Light up the sky

I recently added a WRGB LED strip to the top of my bookshelf using WS2811 LEDs or as my friends at Adafruit call them NeoPixels. I chose RGBW LEDs so I could get a nicer white and use less power than a traditional RGB strip.

Parts List:

Required:

Optional:

Setting up the Hardware

The first step will be to wire up the power and data pin to the LED strip. You can use a traditional breadboard or for a more permanent solution solder directly to a blank circuit board. I’m using a Grove Photon shield and Grove connector. I find this gives me the clean connections I’m looking for without requiring direct soldering onto the Photon.

Adafruit has put together a great guide on NeoPixels so I won’t be going into too much detail here. While the whole guide is great I particularly recommend the part on Powering NeoPixels which will help you determine how large a power supply you need and other safety concerns. 

I used D2 but any available data pin will work. Going to the strip the capacitor will be placed between the Ground and VCC ( + ). This makes sure that the strip doesn’t get too much power.

The resistor is placed between the D2 pin and the strip. Like the capacitor this prevents the board from getting too much power and overloading.

One important note is to make sure you are sharing the common ground between the Photon and the LED strip if you forget this step the strip won’t be able to be controlled by your board.

photon_LED_bb.png

Here’s what my final board looks like. With the Grove connector between the ground and data connections.

IMG_20170702_1713562

Here’s an image of the Photon. My particular device had its USB port snapped off (oops) so I used a Photon Power Shield to add back in the USB power. This also gives me the option of powering the device directly from my DC Power supply if I wish.

Photon

I also went ahead and added a connector to the end of the LED strip and shink wrapped the connections. This makes for a nice clean setup.

Setting up the Firmware

I am using the NeoPixel Library by Adafruit and the Particle Cloud API to send and receive data  to/from the strip. You’ll find the full code on GitHub.  You’ll want to flash this onto the Photon. Feel free to customize the firmware to meet your needs. The main things you may want to change are the defines at the top:

// Input pin for LED Strip
#define PIXEL_PIN 2

//Total number of pixels
#define PIXEL_COUNT 58

// Your Pixel Type (in my case RGBW)
#define PIXEL_TYPE SK6812RGBW

Web Interface

I wrote a custom web interface called MissionControl that I may write more on later which controls several IoT Devices in my home including the LED Strip. Here I’ll go over some of the basics as they pertain to the LED strip itself.

Screen Shot 2017-05-28 at 1.38.47 PM

Cloud Variables and Functions

I’m using two particle.functions ( POST )  and two particle.variables ( GET ). One for the color and one for the brightness.

Functions
hex  — Accepts an eight digit hex value (RGBW) to be used to set the color. For example: FF000000 is Red.
bri — Accepts an int value 0-255 where 0 is off and 255 is 100% bright.

You’ll also need to send your access_token  to make the POST request.

// POST Request URLS
https://api.particle.io/v1/devices/DEVICE_ID/hex/
https://api.particle.io/v1/devices/DEVICE_ID/bri/

Variables
curBri — Used to retrieve the value of bri returning a 0-255 value.
curHex — Returns the value of hex which is an 8 character string.

// GET Request URLs
https://api.particle.io/v1/devices/DEVICE_ID/curBri/
https://api.particle.io/v1/devices/DEVICE_ID/curHex/

Usage:

If you’re using jQuery like me your code may look something like this:

//Partical.io Photon setup
particleDeviceID = "1234567890";
particleDeviceSecret = "ABC123DEFG4567";
particleAPIServer = "https://api.particle.io/v1/devices";

function setLedColor(id,token,hexValue,successMessage){
  var postURL = particleAPIServer + "/" + id + "/hex/";

  $.ajax({
     type: 'POST',
     url: postURL,
     data: {
        args: hexValue,
        access_token: token
      },
     dataType: "json",
     success:(function(data){
        if (data['return_value'] == "1"){
          ajaxSuccess(successMessage);
        }
     }),
     error :(function (){ ajaxFailed();}),
     complete :(function(data){
        if (data['return_value'] == "1"){
           ajaxSuccess(successMessage);
      }
}),
  });
}

function setLedBrightness(id,token,brightness,successMessage){
  var postURL = particleAPIServer + "/" + id + "/bri/";

  $.ajax({
     type: 'POST',
     url: postURL,
     data: {
       args: brightness,
       access_token: token
},
     dataType: "json",
     success:(function(data){
       if (data['return_value'] == "1"){
         ajaxSuccess(successMessage);
       }
     }),
     error :(function (){ ajaxFailed();}),
     complete :(function(data){
       if (data['return_value'] == "1"){
         ajaxSuccess(successMessage);
       }
     }),
  });
}

function getLedBrightness(id,token){
  var getURL = particleAPIServer + "/" + id + "/curBri/?access_token=" + token;
  var result = "";
  $.ajax({
     type: 'GET',
     url: getURL,
     async: false,
     success:(function(data){
       result = data['result'];
     }),
     error :(function (){ ajaxFailed();}),
     });
  return result;
}
//returned on fail
function ajaxFailed() {
  $(".results").stop().fadeIn().html("Error Occured, Please Try Again.").removeClass().addClass("results alert-error").delay(3000).fadeOut(2000);
}
//returned on success
function ajaxSuccess(status){
  $(".results").fadeIn().html( status ).removeClass().addClass("results alert-success").delay(3000).fadeOut(2000);
}

Later in your JavaScript you’ll uses the above functions like the following:

GET the Brightness

startBrighness = parseInt(getLedBrightness(particleDeviceID,particleDeviceSecret));

SET the Brightness

startBrighness = parseInt(getLedBrightness(particleDeviceID,particleDeviceSecret));

SET the Color

setLedColor( particleDeviceID,particleDeviceSecret, '#FF000000' ),"Setting lights to: " + Red );

Hope that helps get you started and let me know if you have any questions in the commets 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s