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.
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.
- 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.
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.
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.Was this article useful to you? Buy me a coffee!