I hadn’t used the Particle API JS from a web page yet, so I made a little circuit and little sample web page to test it out. It worked well for me and I thought others might find it useful for tips and tricks. For example, it shows how to do authentication without storing the username and password in the Javascript code and saving the access token so you don’t need to enter your username and password every time without any server-side code, other than the Particle cloud, of course.
Here’s the circuit for it. There’s a switch connected between D0 and GND. That’s it.
When you hit the button, the D7 blue LED toggles on and off. That’s not a big deal, but it also uses publish to let the web page know when the LED state changes. The web page has a button that can also toggle the LED using a Particle function. And a Particle variable lets the web page get the initial state, so it knows the LED is already on when you open the page, for example. It’s pretty fast, basically instantaneous.
Here’s the Particle code. Just copy and paste it and flash it to your device.
#include "Particle.h"
// Prototypes
int setLed(String arg);
// Globals
unsigned long lastClick = 0;
bool lowIsNew = true;
int ledValue = 0;
void setup() {
Particle.function("setled", setLed);
Particle.variable("led", ledValue);
pinMode(D0, INPUT_PULLUP);
pinMode(D7, OUTPUT);
}
void loop() {
if (digitalRead(D0) == LOW) {
if (lowIsNew && millis() - lastClick > 500) {
ledValue = !ledValue;
digitalWrite(D7, ledValue ? HIGH :LOW);
Particle.publish("led", (ledValue ? "1" : "0"), PRIVATE);
lastClick = millis();
lowIsNew = false;
}
}
else {
lowIsNew = true;
}
}
int setLed(String arg) {
ledValue = (arg.toInt() != 0);
digitalWrite(D7, ledValue ? HIGH :LOW);
return 0;
}
The web site Javascript and HTML code has a lot of comments so it should be self-explanatory. Also, you should run it with your browser’s Javascript console open, because it outputs a lot of useful information there, like the contents of the objects returned by the API. Obviously this is for debugging and if you use this code for real, you should take those console.log calls out!
And it works almost as well on the Electron. It takes a tiny bit longer, but probably still under a half of a second. Quite impressive.
You can run it directly here. When it asks for your username and password, that data is passed directly to the Particle API (using https). It doesn’t go to github or my server. But by all means view the source and verify.
http://rickkas7.github.io/particlejs/
Or git clone or download to your own server and run it there. Since it doesn’t have any server-side code you can run it on any web server on any platform. Actually, you don’t even need a web server, you can just download and extract the zip file and double click the html file to open it in your browser as a file:/// URL and it even works that way!