Hello!
I am new to using an Electron, and it is really great learning new stuff.
I have a lot of experience using and programming arduinos, but not with interfacing with the web.
I have successfully got my Electron communicating with the WS2801 LED’s over SPI using the library. So there are 25 LEDs working well.
I would like to create a web interface to turn these LED’s on and off using radio buttons and check boxes. Ideally I would have one page where you check certain boxes and mark radio buttons, then press a “submit” button on the bottom and the LED statuses are updated, and the webpage stays on the same page (doesn’t go to a different page), showing the current configuration.
I have experimented a bunch with some of the tutorials, I will post the code below, but I can’t get it to do exactly what I want yet.
I really appreciate all help!
Electron Code:
/* ========================== Application.cpp =========================== */
#include "application.h"
#include "WS2801.h"
/*****************************************************************************
Example sketch for driving Adafruit WS2801 pixels on the Spark Core!
Designed specifically to work with the Adafruit RGB Pixels!
12mm Bullet shape ----> https://www.adafruit.com/products/322
12mm Flat shape ----> https://www.adafruit.com/products/738
36mm Square shape ----> https://www.adafruit.com/products/683
These pixels use SPI to transmit the color data, and have built in
high speed PWM drivers for 24 bit color per pixel
2 pins are required to interface
Adafruit invests time and resources providing this open source code,
please support Adafruit and open-source hardware by purchasing
products from Adafruit!
Written by Limor Fried/Ladyada for Adafruit Industries.
BSD license, all text above must be included in any redistribution
*****************************************************************************/
// The colors of the wires may be totally different so
// BE SURE TO CHECK YOUR PIXELS TO SEE WHICH WIRES TO USE!
// SPARK CORE SPI PINOUTS
// http://docs.spark.io/#/firmware/communication-spi
// A5 (MOSI) Yellow wire on Adafruit Pixels
// A3 (SCK) Green wire on Adafruit Pixels
// Don't forget to connect the ground wire to Arduino ground,
// and the +5V wire to a +5V supply$
const int numPixel = 25;
//const int numPixelX = 10;
//const int numPixelY = 10;
uint8_t dataPin = A5; // Yellow wire on Adafruit Pixels
uint8_t clockPin = A3; // Green wire on Adafruit Pixels
// Set the argument to the NUMBER of pixels.
Adafruit_WS2801 strip = Adafruit_WS2801(numPixel);
//Adafruit_WS2801 strip = Adafruit_WS2801(numPixelX, numPixelY);
// For 36mm LED pixels: these pixels internally represent color in a
// different format. Either of the above constructors can accept an
// optional extra parameter: WS2801_RGB is 'conventional' RGB order
// WS2801_GRB is the GRB order required by the 36mm pixels. Other
// than this parameter, your code does not need to do anything different;
// the library will handle the format change. Example:
//Adafruit_WS2801 strip = Adafruit_WS2801(25, WS2801_GRB);
//Setup LED constants. This will be the index for which LED is which. Note first LED is 0, not 1
const int LED0 = 0;
const int LED1 = 1;
const int LED2 = 2;
const int LED3 = 3;
void setup() {
//Spark.function("color", color);
strip.begin();
colorWipe(Color(0, 0, 0), 0);
// We are also going to declare a Particle.function so that we can turn the LED on and off from the cloud.
Particle.function("led",ledToggle);
// This is saying that when we ask the cloud for the function "led", it will employ the function ledToggle() from this app.
}
void loop() {
/*Since we're waiting for input through the cloud this time,
we don't actually need to put anything in the loop */
// Some example procedures showing how to display to the pixels
//colorWipe(Color(255, 0, 0), 50);
//colorWipe(Color(0, 255, 0), 50);
//colorWipe(Color(0, 0, 255), 50);
//rainbow(20);
//rainbowCycle(20);
//strip.setPixelColor(0,Color(255,255,255));
//strip.show();
}
int ledToggle(String command) {
/* Particle.functions always take a string as an argument and return an integer.
Since we can pass a string, it means that we can give the program commands on how the function should be used.*/
if (command=="LED0"){
strip.setPixelColor(LED0,Color(0,255,0));
strip.setPixelColor(LED1,Color(0,0,0));
strip.show();
//return 1;
}
else if (command=="LED1"){
strip.setPixelColor(LED0,Color(0,0,0));
strip.setPixelColor(LED1,Color(255,0,0));
strip.show();
//return 0;
}
if (command=="LED2"){
strip.setPixelColor(LED2,Color(255,120,0));
strip.show();
//return 2;
}
if (command=="LED3"){
strip.setPixelColor(LED3,Color(0,0,255));
strip.show();
//return 3;
}
if (command=="AllOff"){
colorWipe(Color(0, 0, 0), 0);
//return 3;
}
else{
return -1;
}
}
void rainbow(uint8_t wait) {
int i, j;
for (j=0; j < 256; j++) { // 3 cycles of all 256 colors in the wheel
for (i=0; i < strip.numPixels(); i++) {
strip.setPixelColor(i, Wheel( (i + j) % 255));
}
strip.show(); // write all the pixels out
delay(wait);
}
}
// Slightly different, this one makes the rainbow wheel equally distributed
// along the chain
void rainbowCycle(uint8_t wait) {
int i, j;
for (j=0; j < 256 * 5; j++) { // 5 cycles of all 25 colors in the wheel
for (i=0; i < strip.numPixels(); i++) {
// tricky math! we use each pixel as a fraction of the full 96-color wheel
// (thats the i / strip.numPixels() part)
// Then add in j which makes the colors go around per pixel
// the % 96 is to make the wheel cycle around
strip.setPixelColor(i, Wheel( ((i * 256 / strip.numPixels()) + j) % 256) );
}
strip.show(); // write all the pixels out
delay(wait);
}
}
// fill the dots one after the other with said color
// good for testing purposes
void colorWipe(uint32_t c, uint8_t wait) {
int i;
for (i=0; i < strip.numPixels(); i++) {
strip.setPixelColor(i, c);
strip.show();
delay(wait);
}
}
/* Helper functions */
// Create a 24 bit color value from R,G,B
uint32_t Color(byte r, byte g, byte b)
{
uint32_t c;
c = r;
c <<= 8;
c |= g;
c <<= 8;
c |= b;
return c;
}
//Input a value 0 to 255 to get a color value.
//The colours are a transition r - g -b - back to r
uint32_t Wheel(byte WheelPos)
{
if (WheelPos < 85) {
return Color(WheelPos * 3, 255 - WheelPos * 3, 0);
} else if (WheelPos < 170) {
WheelPos -= 85;
return Color(255 - WheelPos * 3, 0, WheelPos * 3);
} else {
WheelPos -= 170;
return Color(0, WheelPos * 3, 255 - WheelPos * 3);
}
}
And here is the HTML code:
<!-- Replace your-device-ID-goes-here with your actual device ID
and replace your-access-token-goes-here with your actual access token-->
<!DOCTYPE>
<html>
<body>
<Left>
<br>
<br>
<br>
<form action="https://api.particle.io/v1/devices/******/led?access_token=*****" method="POST">
<font size="6"><strong>LED Application</font><br>
<br>
Category 1</strong><br>
<input type="radio" name="arg" value="LED0">Item1
<input type="radio" name="arg" value="LED1">Item2
<br>
<input type="checkbox" name="arg1" value="LED2">Item3
<br>
<input type="checkbox" name="arg2" value="LED3">Item4
<br>
<br>
<br>
<strong>Clear All</strong><br>
<input type="checkbox" name="arg3" value="AllOff">Turn Off All Lights
<br>
<br>
<input type="submit" value="Update LEDs" >
</form>
</Left>
</body>
</html>
” then you probably do not need a third party service in the mix.
That's not to say there shouldn't be examples, but rather that every Web Dev tutorial is potentially applicable. 