Hey. I am making a webserver application on my ESP32 device. I want to display the list of WIFI networks available on the internet then be able to select one and connect to it. I have already thought about how everything is going to work but I have got stuck on the html part of coding since I do not have any prior html knowledge.
Currently, my html index page looks like that:
and my ESP32 code ( just showing the parts that handle server)
I have created 2 global varialbes.
String list_strings[10];//holds data about wifi names
String list_strings_RSSI[10];//holds data about signal strnegth
1.
When I request the index page on my browser, I immediately trigger the processor function and fill the data that index has requested. That part works fine because as you can see from the image above, I can display the 3 nearby wifi networks and their signal strenghts.
However, What I want to do, instead of hardcoding the number of wifi networks to display which in my case I have hardcoded 3. Display all nearby wifi networks detected. But I could not find how to change my index.html code to take in a parameter as input which would tell how many wifi networks have been detected and then dynamically create an input form .
2.When I select one of the networks from the list on the browser, I want the Selected Network text input form to automatically populate with whatever I have selected.
Currently, my html index page looks like that:
Code:
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Networks detected(2.4Ghz):</h1>
<form action="/action_page">
<div class="wifi">
<input type="radio" id="wifi1" name="wifi" value=%WIFI1%>
<label for="wifi1"> %WIFI1%(%RSSI1%dB)</label><br>
<input type="radio" id="wifi2" name="wifi" value=%WIFI2%>
<label for="wifi2"> %WIFI2%(%RSSI2%dB)</label><br>
<input type="radio" id="wifi3" name="wifi" value=%WIFI3%>
<label for="wifi3"> %WIFI3%(%RSSI3%dB)</label><br>
</div>
<div class="input">
<label for="Network_ID">Selected Network:</label>
<input type="text" id="Network_ID" name="Network_ID"><br>
<label for="Network_pass">Password:</label>
<input type="text" id="Network_pass" name="Network_pass"><br>
</div>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>and my ESP32 code ( just showing the parts that handle server)
I have created 2 global varialbes.
String list_strings[10];//holds data about wifi names
String list_strings_RSSI[10];//holds data about signal strnegth
Code:
void handle_access_point() {
Serial.println("WiFi Failed!");
WiFi.mode(WIFI_AP);
WiFi.softAPdisconnect (true);
WiFi.softAP("ESPNOW123", nullptr, 3);
Serial.print("MAC address of this node is ");
Serial.println(WiFi.softAPmacAddress());
Serial.println();
Serial.print("IP address: ");
Serial.println(WiFi.softAPIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/index.html", String(), false, processor);
Serial.println("executing index page");
});
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(SPIFFS, "/style.css", "text/css");
});
server.on("/action_page", HTTP_GET, [](AsyncWebServerRequest * request) {
Serial.println("executing action page");
request->send(SPIFFS, "/action_page.html");
});
server.begin();
}
String processor(const String& var){
Serial.println(var);
if (var == "WIFI1"){
Serial.println("PROCESSOR WIFI1 TRIGGERED");
return list_strings[0];
}
if (var == "WIFI2"){
Serial.println("PROCESSOR WIFI2 TRIGGERED");
return list_strings[1];
}
if (var == "WIFI3"){
Serial.println("PROCESSOR WIFI3 TRIGGERED");
return list_strings[2];
}
if (var == "RSSI1"){
Serial.println("PROCESSOR RSSI1 TRIGGERED");
return list_strings_RSSI[0];
}
if (var == "RSSI2"){
Serial.println("PROCESSOR RSSI2 TRIGGERED");
return list_strings_RSSI[1];
}
if (var == "RSSI3"){
Serial.println("PROCESSOR RSSI3 TRIGGERED");
return list_strings_RSSI[2];
}
}1.
When I request the index page on my browser, I immediately trigger the processor function and fill the data that index has requested. That part works fine because as you can see from the image above, I can display the 3 nearby wifi networks and their signal strenghts.
However, What I want to do, instead of hardcoding the number of wifi networks to display which in my case I have hardcoded 3. Display all nearby wifi networks detected. But I could not find how to change my index.html code to take in a parameter as input which would tell how many wifi networks have been detected and then dynamically create an input form .
2.When I select one of the networks from the list on the browser, I want the Selected Network text input form to automatically populate with whatever I have selected.
