Added post endpoint functionality

WEBSERVER_LED_CONTROL.ino

@@ -1,10 +1,17 @@
+#if defined(ESP8266)
 #include <ESP8266WiFi.h>
-#include <WiFiClient.h>
+#else
-#include <ESP8266WebServer.h>
+#include <WiFi.h>
-#include <ESP8266mDNS.h>
+#endif
-#include <WiFiManager.h> 
+
+#include <ESPAsyncWebServer.h>     //Local WebServer used to serve the configuration portal
+#include <ESPAsyncWiFiManager.h>          //https://github.com/tzapu/WiFiManager WiFi Configuration Magic
+
 #include <FastLED.h>
 
+#include "AsyncJson.h"
+#include "ArduinoJson.h"
+
 // LED count and control pin
 #define NUM_LEDS 8
 #define DATA_PIN D3
@@ -13,57 +20,165 @@
 CRGB leds[NUM_LEDS];
 
 // Web server
-ESP8266WebServer server(80);
+AsyncWebServer server(80);
+DNSServer dns;
 
+bool blink = false;
 
+CRGB singleColor = CRGB::Red;
+
+int brightness_size = 6;
+int brightness_index = 5;
+int brightness[7] = {20,60,120,160,200,255};
+
+int ledSpeed_size = 6;
+int ledSpeed_index = 2;
+int ledSpeed[] = {10,20,50,100};
+
+bool power = true;
+
+int mode = 0;
 
 void setup() {
 
+  // Initialize serial
+  Serial.begin(9600);
+  while (!Serial) ;
+  Serial.println("Serial initialized");
+  
   // Initialize onboard LED
   pinMode(LED_BUILTIN, OUTPUT);
+  digitalWrite(LED_BUILTIN, HIGH);
+  Serial.println("Built in LED initialized");
   
   // Initialize Wifi, start AP if no saved Wifi in range
-  WiFiManager wifiManager;
+  AsyncWiFiManager wifiManager(&server,&dns);
   wifiManager.autoConnect("WEMOS D1 mini pro");
+  Serial.println("WifiManager initialized");
 
   // Initialize LEDs
-  FastLED.addLeds<WS2812B, DATA_PIN, RGB>(leds, NUM_LEDS);
+  FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
+  for(int i=0;i<NUM_LEDS;i++){
+    leds[i] = singleColor;
+    FastLED.show();
+  }
+  Serial.println("LED strip initialized");
 
   // Define web server Handlers
-  server.on("/", handleRoot);
+  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
-  server.onNotFound(handleNotFound);
+      request->send(200, "text/html", getWebPage());
+  });
+  server.onNotFound(notFound);
+  Serial.println("Webserver request handlers created");
+
+  server.onRequestBody([](AsyncWebServerRequest * request, uint8_t *data, size_t len, size_t index, size_t total) {
+    Serial.println("Running");
+
+    if(request->url() == "/power"){
+      // Set mode to 0(single color)
+      if(power){
+        power = false;
+        mode = 0;
+        FastLED.clear(true);
+      }
+      power = false;
+      mode = 0;
+      request->send(200, "text/plain", "done");
+    }
+
+    if(request->url() == "/reset"){
+      ESP.restart();
+      request->send(200, "text/plain", "done");
+    }
+
+    if(request->url() == "/brightness"){
+      Serial.println(getValue((const char*) data));
+      setBrightness(getValue((const char*) data).toInt());
+      request->send(200, "text/plain", "done");
+    }
+    
+    if(request->url() == "/speed"){
+      Serial.println(getValue((const char*) data));
+      request->send(200, "text/plain", "done");
+    }
+
+    if(request->url() == "/color"){
+      String value = getValue((const char*) data).substring(1);
+      Serial.println(value);
+      long color = strtol(value.c_str(), NULL, 16);
+      Serial.println(value.c_str());
+      Serial.println(color);
+      setColor(color);
+      request->send(200, "text/plain", "done");
+    }
+
+    if(request->url() == "/mode"){
+      Serial.println(getValue((const char*) data));
+      request->send(200, "text/plain", "done");
+    }
+  });
 
   // Start webserver
   server.begin();
+  Serial.println("Webserver started");
+}
 
+String getValue(const char* data){
+  DynamicJsonBuffer jsonBuffer;
+  JsonObject& root = jsonBuffer.parseObject((const char*)data);
+  if (root.success()) {
+    if (root.containsKey("value")) {
+      return root["value"].asString();
+    }
+  }
+}
 
+void setColor(CRGB color){
+  for(int i=0;i<NUM_LEDS;i++){
+    leds[i] = color;
+    FastLED.show();
+  }
+}
+
+void setColor(long color){
+  for(int i=0;i<NUM_LEDS;i++){
+    leds[i] = color;
+    FastLED.show();
+  }
+}
+
+void setBrightness(int brightnessFlag){
+  if(brightnessFlag == 1){
+    if(brightness_index < brightness_size - 1){
+      brightness_index++;
+      applyBrightness();
+    }
+  }else{
+    if(brightness_index > 0){
+      brightness_index--;
+      applyBrightness();
+    }
+  }
+}
+
+void applyBrightness(){
+  FastLED.setBrightness(brightness[brightness_index]);
+  FastLED.show();
 }
 
 void loop() {
-  server.handleClient();
+  
 }
 
-void handleRoot() {
+void notFound(AsyncWebServerRequest *request) {
-  server.send(200, "text/plain", "hello from esp8266!");
+    request->send(404, "text/plain", "Not found");
+    blink = true;
 }
+String htmlSiteHead = "<!DOCTYPE html><html><head> <title>LED Control</title> <style>button{position:absolute;}</style></head>";
+String htmlSiteBody = "<body> <button id=\"btn-power\" onclick=\"sendValue('power',0)\" style=\"top:0%;left:0%;right:80%;width: 80%;height: 25%\">Power</button> <button id=\"btn-reset\" onclick=\"sendValue('reset',0)\" style=\"top:0%;left:80%;right:0%;width: 20%;height: 25%\">Reset</button> <button id=\"btn-brightup\" onclick=\"sendValue('brightness',1)\" style=\"top:25%;left:0%;right:75%;width: 25%;height: 25%\">BrightnessUp</button> <button id=\"btn-brightdown\" onclick=\"sendValue('brightness',0)\" style=\"top:25%;left:25%;right:50%;width: 25%;height: 25%\">BrightnessDown</button> <button id=\"btn-speedup\" onclick=\"sendValue('speed',1)\" style=\"top:25%;left:50%;right:25%;width: 25%;height: 25%\">SpeedUp</button> <button id=\"btn-speeddown\" onclick=\"sendValue('speed',0)\" style=\"top:25%;left:75%;right:0%;width: 25%;height: 25%\">SpeedDown</button> <input type=\"color\" id=\"selColor\" style=\"position: absolute;top:50%;left:0%;right:75%;width: 75%;height: 25%\"> <button id=\"btn-color\" onclick=\"sendColor()\" style=\"top:50%;left:75%;right:0%;width: 25%;height: 25%\">Set color</button> <button id=\"btn-mode10\" onclick=\"sendValue('mode',10)\" style=\"top:75%;left:0%;right:33%;width: 33%;height: 25%\">Mode 10</button> <button id=\"btn-mode11\" onclick=\"sendValue('mode',11)\" style=\"top:75%;left:33%;right:6%;width: 33%;height: 25%\">Mode 11</button> <button id=\"btn-mode12\" onclick=\"sendValue('mode',12)\" style=\"top:75%;left:66%;right:100%;width: 33%;height: 25%\">Mode 12</button>"; 
+String htmlSiteJs1 = "<script>function sendValue(endpoint, value){fetch('http://";
+String htmlSiteJs2 = "/'+endpoint,{method: 'post', body: JSON.stringify({'value':value})});}function sendColor(){sendValue('color',document.getElementById(\"selColor\").value);}</script></body></html>";
 
-void handleNotFound() {
+String getWebPage(){
-  server.send(404, "text/plain", "404 File Not Found");
+  return htmlSiteHead+htmlSiteBody+htmlSiteJs1+WiFi.localIP().toString()+htmlSiteJs2;
-  blinkLEDs();
-}
-
-void blinkLEDs(){
-  digitalWrite(LED_BUILTIN, LOW);
-  for(int i=0;i<8;i++){
-    leds[i] = CRGB::Red;
-    FastLED.show();
-    delay(20);
-  }
-  delay(500);
-  for(int i=0;i<8;i++){
-    leds[i] = CRGB::Black;
-    FastLED.show();
-    delay(20);
-  }
-  digitalWrite(LED_BUILTIN, HIGH);
 }