Setting Variables from Webpage hosted on ESP32

Projects Programming
1

Hi there!
I am attempting to control SK6812 LEDs by using an ESP32. I am pretty familiar with the Neopixel library but I am attempting to blend that library into another project that uses a web server on the same ESP32.

So, I want the simple webpage on the ESP32 to control the LEDs. I can create buttons that set the LEDs to a predefined color, but I am hoping to have an input box for each channel (R, G, B, and W), then have an Apply button that sets the LEDs to whatever color has been defined.

My problem is: how to I retrieve the value from the HTML input boxes and set the variables to those values? Once those variables are set, I can pass them into the function that controls the LEDs.

Lines 209 - 215 contain the HTML code that builds the input boxes.

            //################################## RGBW Inputs
            client.println("<p><label for='RedValue'>Red Value:</label><input type='text' id='RedValue' name='RedValue' value='0'></p>");
            client.println("<p><label for='GreenValue'>Green Value:</label><input type='text' id='GreenValue' name='GreenValue' value='0'></p>");
            client.println("<p><label for='BlueValue'>Blue Value:</label><input type='text' id='BlueValue' name='BlueValue' value='0'></p>");
            client.println("<p><label for='WhiteValue'>White Value:</label><input type='text' id='WhiteValue' name='WhiteValue' value='0'></p>");
            
            client.println("<p><a href=\"/rgbw/apply\"><button class=\"button\">Apply RGBW Settings</button></a></p>");

Lines 174 - 182 contain the logic where I would like to assign the variables to the input box values.

            } else if (header.indexOf("GET /rgbw/apply") >= 0) {
              Serial.println("Applying RGBW settings");
              int redAmt = 0;
              int greenAmt = 128;
              int blueAmt = 128;
              int whiteAmt = 0;
              Serial.print("The Red Amount is:");
              Serial.println("");
              set_entire_strip_color_dynamic(10, redAmt, greenAmt, blueAmt, whiteAmt);

Lines 310 - 318 contains the function that controls the LEDs

void set_entire_strip_color_dynamic(int wait, uint32_t redAmt, uint32_t greenAmt, uint32_t blueAmt, uint32_t whiteAmt)
{
  for(int i=0; i<strip.numPixels(); i++) 
  {
    strip.setPixelColor(i, redAmt, greenAmt, blueAmt, whiteAmt);   
    strip.show();
    delay(wait);
  }
}

The full, raw code is here.

Thanks for taking a look!

2

Using GitHub - me-no-dev/ESPAsyncWebServer: Async Web Server for ESP8266 and ESP32 should make your life easy

Have a look at that example

3

You can do it without any problem with standard webserver too (without async).
I am using it in my project of WiFi thermostat where I can pass values via HTML form using GET or POST method. I can set hysteresis and target temperature. Standard webserver for ESP32 have API that you can use for checking arguments in request (if exists, and if yes then do action, save it there etc...). After datas were submitted by submit button of HTML form I can do some one-time actions like: overwrite values in emulated EEPROM at ofsets that I am using for permanent save for these datas.

image
image1266×573 99.6 KB

4

Hi there!
Thanks for pointing me to this example. It took me a little while to figure out exactly what the code is doing, but I was able to accomplish what I set out to do.
I appreciate the assistance!

5

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.