ChipChop Forum

REPLIES: 3

REPLY TO THIS POST

Savalio
16 Feb 2024

WebServer.h examples of input fields?

Hello,
I'm trying to make an Arduino web server with the WebServer.h, but I need to add input fields and read the parameters to assign them to, for example, variables, but I only found examples for ESPAsyncWebServer.h, and I don't want to switch since I have already put in so much work into the WebServer.h web server. And yes, the code for ESPAsyncWebServer.h is not compatible with WebServer.h. Here's an example for ESPAsyncWebServer.h I got from Random Nerd Tutorials:

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-input-data-html-form/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

#include <Arduino.h>
#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";

// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    input1: <input type="text" name="input1">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input2: <input type="text" name="input2">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input3: <input type="text" name="input3">
    <input type="submit" value="Submit">
  </form>
</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
    // GET input2 value on <ESP_IP>/get?input2=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_2)->value();
      inputParam = PARAM_INPUT_2;
    }
    // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                     + inputParam + ") with value: " + inputMessage +
                                     "<br><a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {
  
}

Here's some specifications for hardware I'm using if that is important:

Board: Seeed Studio Xiao ESP32-S3 Sense

8MB PSRAM

8MB Flash

Thank you in advance!

Gizmo
16 Feb 2024

ACCEPTED

Hi Savalio, good to see you here! Thank you for coming here from Reddit, I thought that your question is an interesting topic and I know some ChipChop users would like to follow this and learn from it.

Ok, so I've made a very basic server code for you. You definitely don't need the AsyncWebServer, it's complete bullshit as the WebServer.h has everything that you need and once you understand the basic syntax it's a powerful tool and it takes a lot less space on your chip.

Here is the code that when you connect to your ESP's WiFi hotspot and then go to http://192.168.0.1/ in the phone browser it will bring a simple form and when you submit it will print out in the Serial Monitor what you entered in the fields so you can do whatever logic you want with it.

#ifdef ESP32
     #include <WiFi.h>
     #include <WebServer.h>
     WebServer server(80);
#else
     #include <ESP8266WiFi.h>
     #include <ESP8266WebServer.h>
     ESP8266WebServer server(80);
#endif

//you can pre-set the IP address of your hotspot here 
//so you can later access your web pages like: http://192.168.0.1/test << you don't use .htm just the route name (like a folder) http://xxx.xxx.xxx.xxx/route_name
IPAddress apIP(192, 168, 0, 1);
IPAddress netMsk(255, 255, 255, 0);

String softAP_ssid = "My ESP hotspot"; //wifi hotspot name
String softAP_password = ""; // password if you need one

/** 
 * once you connect to the hotspot this is the function that will return a html page to the web browser
 * if you want to show other pages simply duplicate this and change the html string you want to send
 * don't forget to also declare it as a "route" in the start_hotspot() below
*/
void showRoot(){
     server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
     server.sendHeader("Pragma", "no-cache");
     server.sendHeader("Expires", "-1");

     const char index_html[] PROGMEM = R"rawliteral(
     <!DOCTYPE HTML><html><head>
     <title>ESP Input Form</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     </head><body>
     <form action="/form1">
     input1: <input type="text" name="input1"><br>
     input2: <input type="text" name="input2"><br>
     input3: <input type="text" name="input3"><br>
     <input type="submit" value="Submit">
     </form>
     </body></html>)rawliteral";

     server.send(200, "text/html", index_html);
     server.client().stop();  // Stop is needed because we sent no content length so it's an easy solution to send whatever size string you want
}

/** this is where you intercept what you submit through the html form 
 * you can make more of thse for each page that you want to receive form input like handleForm2(), processForm3() etc...
*/
void handleForm1() {
  String input1 = server.arg("input1");
  String input2 = server.arg("input2");
  String input3 = server.arg("input3");

  //do some logic with the form field values
  Serial.println(input1);
  Serial.println(input2);
  Serial.println(input3);

  //you can show a different page when the from is submitted or simply return the same "root" page
  //as the browser will go automatically to "/form1" so you need to send it something back
  //this redirects it back to root
  server.sendHeader("Location", "/",true);
  server.send(302, "text/plain", "");
  //or send a different page
  //showForm1ResponsePage() or something like that
}

void start_hotspot(){
     WiFi.mode(WIFI_AP_STA); //set the mode to station and softAP 
     WiFi.softAPConfig(apIP, apIP, netMsk);
     WiFi.softAP(softAP_ssid, softAP_password);

     // this is where you can define "routes" functions that will be called to display different pages 
     // so for example http://xxx.xxx.xxx.xxx/settings would call a function showSettings() where you can return some settings html page
     server.on("/", [](){ showRoot();}); //this is the "root" page that will be called when you just type the ip address
     //anything else you want, you just need to do like this and declare the functions same as showRoot() above
     // server.on("/settings", [](){ showSettings(); });

     //this is where you define the functions that will be called on form submit
     // the "route" here "/form1" is what you put in the html like <form action="/form1">
     server.on("/form1", [](){ handleForm1();});

     server.begin();  // start the Web server
}

void setup(){

     Serial.begin(115200);
     start_hotspot();

}

void loop(){

     // keep the server listening 
     server.handleClient();

}

I have included lots of comments to help you understand how it works so you can customise it for your needs.

There is of course a more advanced option using LittleFS to store proper HTML files in the flash with combination of Ajax instead of GET & POST and also using a dns server so it can bring the pages straight away after yo connect to the hotspot (WiFi Captive Portal). If you want to explore that at spome point just let me know and I will be happy to show you.

Let me know how it goes

Savalio
16 Feb 2024

Thank you Gizmo! This exactly answered my problem and I can continue my projects! Hope you have a nice day/night

Gizmo
16 Feb 2024

Pleasure :-) Shout if you need anything else.