Hello all!
I have been working on this bit of code (shown below) as part of a larger project and the end goal is to connect to an ESP-32's wi-fi network and set up my wi-fi network through a captive web portal. This seems like a simple concept but despite hours of research, I cannot get anything to work. I know that there are GitHub projects related to this idea but I could not get any of them to work either.
Please be warned that the code is made up of bits of tutorials that I have cobbled together and edited to try and get the functionality I need. It is not properly commented. I am not a professional/expert programmer or anything close to that, but I am very keen to learn.
So far I have got the ESP32 access point to appear on my phone and when I tap on it, the HTML form appears. The part which I am struggling with is getting the information from the form, once it has been submitted, and using it in my program. It seems very simple, and I can find ways to do it when the HTML page is hosted on a separate web server but not when hosted on the ESP32 itself.
I would really appreciate any help that you can offer.
Many thanks,
Sean
#include <WiFi.h>
#include <DNSServer.h>
const byte DNS_PORT = 53;
IPAddress apIP(8,8,4,4); // The default android DNS
DNSServer dnsServer;
WiFiServer server(80);
char* wifiSSID = "input1";
char* wifiPass = "input2";
char* devName = "input3";
char* emailAdd = "input4";
char* userName = "input5";
String responseHTML = R"rawliteral(
<!DOCTYPE HTML><html><head>
<title>Device Setup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{color:white; background-color:#141414; font-family: Helvetica, Verdana, Arial, sans-serif}
h1{text-align:center;}
p{text-align:center;}
div{margin: 5%; background-color:#242424; padding:10px; border-radius:8px;}
br{display: block; margin: 10px 0; line-height:22px; content: " ";}
label{text-align:left; padding:2%;}
input{border-radius: 4px; border: 2px solid #0056a8; width:90%; padding:10px; display:block; margin-right:auto; margin-left:auto;}
input[type="submit"]{font-size: 25px; background-color:#0056a8; color:white; border-radius:8px; height:50px; width:95%;}
</style>
</head><body>
<div>
<h1>Device Setup</h1>
<p>Please enter the following details to setup your device:</p>
<form action="/get">
<label>Wi-Fi Details</label>
<br>
<input type="text" name="wifissid" id="wifissid" placeholder="Wi-Fi SSID">
<br>
<input type="password" name="wifipass" id="wifipass" placeholder="Wi-Fi Password">
<br>
<label for="devname">Device Name</label>
<br>
<input type="text" name="devname" id="devname">
<br>
<label for="emailadd">Email Address</label>
<br>
<input type="email" name="emailadd" id="emailadd">
<br>
<label for="username">Your Name</label>
<br>
<input type="text" name="username" id="username">
<br>
<input type="submit" value="Submit">
</form><br>
</div>
</body></html>)rawliteral";
void setup() {
WiFi.mode(WIFI_AP);
WiFi.softAP("Smart System");
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
// if DNSServer is started with "*" for domain name, it will reply with
// provided IP to all DNS request
dnsServer.start(DNS_PORT, "*", apIP);
server.begin();
}
void loop() {
dnsServer.processNextRequest();
WiFiClient client = server.available(); // listen for incoming clients
if (client) {
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print(responseHTML);
break;
} else {
currentLine = "";
}
}
}
}
client.stop();
}
}