WEBSERVER_LED_CONTROL/WEBSERVER_LED_CONTROL.ino

#if defined(ESP8266)
#include <ESP8266WiFi.h>
#else
#include <WiFi.h>
#endif

#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

// LED array
CRGB leds[NUM_LEDS];

// Web server
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
  AsyncWiFiManager wifiManager(&server,&dns);
  wifiManager.autoConnect("WEMOS D1 mini pro");
  Serial.println("WifiManager initialized");

  // Initialize 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("/", HTTP_GET, [](AsyncWebServerRequest *request){
      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() {
  
}

void notFound(AsyncWebServerRequest *request) {
    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>";

String getWebPage(){
  return htmlSiteHead+htmlSiteBody+htmlSiteJs1+WiFi.localIP().toString()+htmlSiteJs2;
}