NeoPixel ring colour picker from Mobile device through NodeMCU over WiFi using jQuery

Arduino Program

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif

#define PIN        D2

#define NUMPIXELS 16

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

#define DELAYVAL 500 // Time (in milliseconds) to pause between pixels

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

const char* htmlFile = "/index.html";
const char* ssid = "NodeMCU";
const char* password = "xxxxxxxxxxx";

int count = 0;

#define LED 2

ESP8266WebServer server(80);

void handleRoot()
{
  server.sendHeader("Location", "/index.html", true);
  server.send(302, "text/plane", "");
}

void getColor()
{
  String color = server.arg("color");
  Serial.print("Color code : ");
  Serial.println(color);
  int colorArray[6]; 

  for(int i=0;i<color.length();i++)
  {
    switch(color[i])
    {
      case '0':
        colorArray[i] = 0; 
        break;
        
      case '1':
        colorArray[i] = 1; 
        break;

      case '2':
        colorArray[i] = 2; 
        break;
        
      case '3':
        colorArray[i] = 3; 
        break;

      case '4':
        colorArray[i] = 4; 
        break;
        
      case '5':
        colorArray[i] = 5; 
        break;

      case '6':
        colorArray[i] = 6; 
        break;
        
      case '7':
        colorArray[i] = 7; 
        break;

      case '8':
        colorArray[i] = 8; 
        break;
        
      case '9':
        colorArray[i] = 9; 
        break;

      case 'a':
        colorArray[i] = 10; 
        break;
        
      case 'b':
        colorArray[i] = 11; 
        break;

      case 'c':
        colorArray[i] = 12; 
        break;
        
      case 'd':
        colorArray[i] = 13; 
        break;

      case 'e':
        colorArray[i] = 14; 
        break;
        
      case 'f':
        colorArray[i] = 15; 
        break;
        
      default:
        break;
    }
  }

  int Rvalue = (colorArray[0] * 16) + colorArray[1];
  int Gvalue = (colorArray[2] * 16) + colorArray[3];
  int Bvalue = (colorArray[4] * 16) + colorArray[5];  
  
  server.send(200, "text/plane", "");

  pixels.clear(); // Set all pixel colors to 'off'
  
  for(int i=0; i<NUMPIXELS; i++) 
  {
    pixels.setPixelColor(i, pixels.Color(Rvalue, Gvalue, Bvalue));
    pixels.show();   
  }
}

void handleWebRequests()
{
  if(loadFromSpiffs(server.uri())) return;

  String message = "File not detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";

  for(uint8_t i=0;i<server.args();i++)
  {
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  
  server.send(404, "text/plain", message);
  Serial.println(message);
}

void setup() {
  // put your setup code here, to run once:
  delay(1000);
  Serial.begin(115200); 
  Serial.println();

  #if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
  #endif

  pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
  pixels.clear();

  pinMode(LED, OUTPUT);
  SPIFFS.begin();
  Serial.println("File system initialized");
  WiFi.mode(WIFI_AP);
  //WiFi.begin(ssid, password);

  WiFi.softAP(ssid);
  Serial.println("");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/getColor", getColor);
  server.onNotFound(handleWebRequests);
  server.begin();
}

void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}

bool loadFromSpiffs(String path)
{
  String dataType = "text/plain";
  
  if(path.endsWith("/"))
    path += "index.htm";

  if(path.endsWith(".src"))
    path = path.substring(0, path.lastIndexOf("."));

  else if(path.endsWith(".html"))
    dataType = "text/html";

  else if(path.endsWith(".htm"))
    dataType = "text/html";

  else if(path.endsWith(".css"))
    dataType = "text/css";

  else if(path.endsWith(".js")) 
    dataType = "application/javascript";

  else if(path.endsWith(".png")) 
    dataType = "image/png";

  else if(path.endsWith(".gif")) 
    dataType = "image/gif";

  else if(path.endsWith(".jpg")) 
    dataType = "image/jpeg";

  else if(path.endsWith(".ico")) 
    dataType = "image/x-icon";

  else if(path.endsWith(".xml")) 
    dataType = "text/xml";

  else if(path.endsWith(".pdf")) 
    dataType = "application/pdf";

  else if(path.endsWith(".zip")) 
    dataType = "application/zip";

  File dataFile = SPIFFS.open(path.c_str(), "r");
  if(server.hasArg("download"))
    dataType = "application/octet-stream";
  if(server.streamFile(dataFile, dataType) != dataFile.size())
  {
  
  }

  dataFile.close();
  return true;
}

Download complete programs

Watch the video demonstration.

Video demonstration of Installing jQuery and CSS on NodeMCU

Published by

Leave a Reply

avatar
  Subscribe  
Notify of
X