Particle Photon RGB Cloud Remote Control ⋆ Kasper Kamperman

I’ve developed this demo to demonstrate the communication speed of the Particle Cloud. This is fast but not always fast enough for realtime communication. In the Particle Photon Local Remote Control article I explain how you can speed up communication by bypassing the Particle Cloud. We do that by running a simple web server on the Photon.

Particle Photon RGB remote control (over the cloud or local)

Watch this video on YouTube.

Techniques used in Web App

Doing AJAX GET and POST requests with the native ( Vanilla JS) XMLHttpRequest function.
Different checks (404, Particle.connected).
Rate limit (throttle) requests.
Passing values as a comma separated string.
Parsing received JSON data.
Calculating performance of the Particle Function.
Material Design Lite as framework.

Techniques used on the Photon

Using Particle Function and Particle Variable
Implemented HSB to RGB conversion and brightness correction LUT.
Parsing a comma separated string.
Formatting a JSON string.
Control the RGB led on the Photon.

What happens

In this example we send 4 values (hue, saturation, brightness and time) as a comma separated string to a Particle Function. The function will return the same time again as an integer (a Particle Function can only receive strings and return integers). By checking the difference between the time and the current time, we know how much time this roundtrip took. If we get the result of the function (the integer with the time), we do another call to a Particle.variable, which will give us the red, green and blue values as a JSON string. We don’t measure the time of round-trip, because you cannot pass data if you request a variable.

To limit the amount of data send to the Particle Cloud I’ve implemented a Throttle/rate limit function (check out this good visualisation). By default 2 messages a second are sent to the cloud (actually 4 because we call both the Particle Function and the Particle Variable). If you remove the rate limit, you see that communication slows down because Particle rate limits requests and most browsers only support up to 7 open requests.

Flow

At start-up check if the device is connected by doing a call to the device and look for the connected variable.
When you move a slider or press the button we submit the Hue, Saturation and Brightness (and time) as a comma separated String to the setHSB Particle.function.
The Photon will display the color and the function will return the send time as an integer.
When we receive the response we calculated the time it took and display that in the durationChip.
We do a call to the getRGB Particle.variable to get the calculated red, green and blue values.
The Photon will return a JSON formatted string with r,g,b variables.
We change the title background based on the received values.

Known limitations/problems

You need to set your deviceId and accessToken in the JavaScript code. It’s not smart to publish this on the internet, because then anyone can take ownership if your Photon. Just use this code on a private network or from your own computer. If you want a more sophisticated way to connect to your Photon (with username/pass), then this excellent Particle API JS tutorial of Rickkas7 will help you to get started.

The HTML5 range-slider input type is used. I’ve found that it doesn’t work good on Touch devices. There are several solutions. I’ve added rangetouch.js, however that doesn’t seem to have much effect right now. Maybe it conflict with the Material Design Light code.

The Material Design Lite framework is not actively developed anymore. However I liked the well-designed user interface elements for this demo.

Design choices

You might wonder why I use a comma-separated string to send data from JavaScript to the Photon and why I use a JSON formatted string to send data the other way round. I decided that it was best to use the parsing strengths of each platform. Sending a lot of data to an embedded platform is not a smart idea (although processors get faster), the less data the better. A comma-separated string feels like a balance between shortness and human-readability. It simpler than JSON, because you don’t pass the variable names. In case you would like to parse some JSON, this Arduino JSON library might be a good library to start.

I’ve decided to send a JSON string back from the Photon. Actually this is just more out of laziness, because parsing JSON is already build in JavaScript. I’ve kept the string as short as possible (so using r,g,b instead of red, green, blue).

As you can read you need both a Particle Function and a Particle Variable. The Particle Function to send a string to the Photon and the Particle variable to receive a string. Unfortunately there isn’t a type that receives a string and can pass back as string. (You could encode the rgb value in the integer if you really want, this seemed unnecessary for this demo).

In my other demo that communicates with the localhost and send data back and forth in one step by using a POST request. We send a comma-separated string and we receive a JSON string back. You’ll notice it goes a lot faster, because we only need one call and more important because it stays on the local network.

Check the code and Quickstart on GitHub