Controlling an RGB LED on a Photon with a UWA Color Picker

The Particle Photon makes it easy to control the color of an RGB LED. There are a number of color picker controls you can use in Windows apps. I wanted to see how easy it was to hook a Photon RGB LED up to a Windows app color picker. It ended up being a snap by using the Particle cloud functions.

In this project I wrote a simple UWA that calls a Particle cloud function called “setRGB” on my targeted Photon whenever I change the selected value on the color picker. Then I implemented an event handler on that Photon’s firmware to handle that Particle cloud function. The event handler takes the value being passed and sets the color on the RGB LED. You can see the project being demoed in the video below.

Parts Used

• Particle Photon x 1
• RGB LED, Common Cathode x 1
• 1K Resistor x 3

Schematic

Photon Color UWA

This is a simple UWA. I used a ColorPicker control I found on Nugent. Make sure you update with your Photon device ID and your access token. I’m using a timer to ensure that the Particle function is called no more than once a sec (we don’t want to overwhelm Particle cloud). After the correctly formatted URL is constructed, all you need to do is make the POST request and the Particle function is called.

public sealed partial class MainPage : Page
{
    const string PHOTONDEVICEID = "{YOURDEVICEID}";
    const string ACCESS_TOKEN = "{YOURACCESSTOKEN}";
    DispatcherTimer timer;
    SolidColorBrush currentColor;
    public MainPage()
    {
        this.InitializeComponent();
        timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromSeconds(1);
        timer.Tick += Timer_Tick;
    }
    private void Timer_Tick(object sender, object e)
    {
        if (WriteColor())
        {
            timer.Stop();
        }
    }
    private void ColorPicker_SelectedColorChanged(object sender, EventArgs e)
    {
        if (!timer.IsEnabled)
        {
            WriteColor();
            timer.Start();
        }
    }
    private bool WriteColor()
    {
        SetRGB(colorPicker.SelectedColor);
        bool result = currentColor == colorPicker.SelectedColor;
        currentColor = colorPicker.SelectedColor;
        return result;
    }
    private async void SetRGB(SolidColorBrush rgb)
    {
        string url = String.Format("https://api.particle.io/v1/devices/{0}/setRGB?access_token={1}", PHOTONDEVICEID, ACCESS_TOKEN);
        var request = WebRequest.Create(url);
        var postData = "value=" + string.Format("{0},{1},{2}", rgb.Color.R, rgb.Color.G, rgb.Color.B);
        var data = Encoding.ASCII.GetBytes(postData);
        request.Method = "POST";
        request.ContentType = "application/x-www-form-urlencoded";
        using (var stream = await request.GetRequestStreamAsync())
        {
            stream.Write(data, 0, data.Length);
        }
        try
        {
            var response = await request.GetResponseAsync();
            var responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();
        }
        catch { }
    }
}

Photon RGB Multicolor Firmware

This is the Photon firmware. I’m using the rgb-controls library to handle the RGB LED PWM color functions. The particle cloud function is defined as “setRGB”. In the setRGB event handler, the command string parameter is expecting the RGB values to be in a comma separated RGB format. So we split the values apart, and pass in the new value using the Led.fadeOnce() function. This function transitions from one color to another color over the specified number of millisecs. In our case we’ll transition from the old color to the new color over a 500 millisec timespan.

// This #include statement was automatically added by the Particle IDE.
#include "rgb-controls/rgb-controls.h"
#define REDPIN D2
#define GREENPIN D1
#define BLUEPIN D0
using namespace RGBControls;

Led led(REDPIN, GREENPIN, BLUEPIN);
Color currentColor(255, 0, 0);

void setup() {
    bool success = Particle.function("setRGB", setRGB);
}

void loop() {
}

int setRGB(String command)
{
    //Color comes in the format "{R},{G},{B}"
    int commaIndex = command.indexOf(',');
    //Strip the red color from the string
    String red = command.substring(0,commaIndex);
    
    command = command.substring(commaIndex+1);
    commaIndex = command.indexOf(',');
    //Strip the green color from the string
    String green = command.substring(0,commaIndex);
    
    //Strip the blue color from the string
    String blue = command.substring(commaIndex+1);
    
    Color newColor(red.toInt(), green.toInt(), blue.toInt());
    //Fade once from old color to new color over 500mS
    led.fadeOnce(currentColor, newColor, 500);
    //What's new is old now
    currentColor = newColor;
    
    return 1;
}

The post Controlling an RGB LED on a Photon with a UWA Color Picker appeared first on Falafel Software Blog.