The webpage should have an address like this - mysite.com/data/index.html - and look like this:
<!DOCTYPE HTML><html><head>
<title>HTML Form to Input Data</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Times New Roman; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem; color: #FF0000;}
</style>
</head><body>
<h2>HTML Form to Input Data</h2>
<form action="/get">
Enter a string: <input type="text" name="input_string">
<input type="submit" value="Submit">
</form><br>
<form action="/get">
Enter an integer: <input type="text" name="input_integer">
<input type="submit" value="Submit">
</form><br>
<form action="/get">
Enter a floating value: <input type="text" name="input_float">
<input type="submit" value="Submit">
</form>
</body></html>
In this page you should enter different types of text which can be treated as text, int or float.
I need to get these values entered into my website using an ESP32 connected to my home modem.
I took inspiration from the internet, in particular here:
https://microcontrollerslab.com/esp32-esp8266-web-server-input-data-html-forms/
This example (given in the link) would suit me just fine, but sadly it works in local.
Instead I need to make the ESP32 pull data from my web page on the net.
My knowledge in this field is very limited if not almost none.
I need help adapting the code below (taken from the link in question) to point to my site's page.
For convenience I have copied the code below.
#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);
const char* ssid = "Your_SSID";
const char* password = "Your_Password";
const char* input_parameter1 = "input_string";
const char* input_parameter2 = "input_integer";
const char* input_parameter3 = "input_float";
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
<title>HTML Form to Input Data</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Times New Roman; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem; color: #FF0000;}
</style>
</head><body>
<h2>HTML Form to Input Data</h2>
<form action="/get">
Enter a string: <input type="text" name="input_string">
<input type="submit" value="Submit">
</form><br>
<form action="/get">
Enter an integer: <input type="text" name="input_integer">
<input type="submit" value="Submit">
</form><br>
<form action="/get">
Enter a floating value: <input type="text" name="input_float">
<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("Connecting...");
return;
}
Serial.println();
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
String input_message;
String input_parameter;
if (request->hasParam(input_parameter1)) {
input_message = request->getParam(input_parameter1)->value();
input_parameter = input_parameter1;
}
else if (request->hasParam(input_parameter2)) {
input_message = request->getParam(input_parameter2)->value();
input_parameter = input_parameter2;
}
else if (request->hasParam(input_parameter3)) {
input_message = request->getParam(input_parameter3)->value();
input_parameter = input_parameter3;
}
else {
input_message = "No message sent";
input_parameter = "none";
}
Serial.println(input_message);
request->send(200, "text/html", "HTTP GET request sent to your ESP on input field ("+ input_parameter + ") with value: " + input_message + "<br><a href=\"/\">Return to Home Page</a>");
});
server.onNotFound(notFound);
server.begin();
}
void loop() {
}
Thanks in advance