How to render html select dropdown filled with items dynamically in ESP8266 ?

Projects Programming
1

I have managed to web page rendered and access point also working but I am trying to fill the dropdown with wifi hotspots returned by the getWifiHotspot() function.

#include <Arduino.h>
#include <Hash.h>
#include "ESP8266WiFi.h"
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

const char* ap_ssid     = "access_point_webpage ";
const char* ap_password = "0123456789";

// Create AsyncWebServer object on port 8080
AsyncWebServer ap_server(80);


const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 1.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
  </style>
</head>
<body>
  <h2>Connect to a Wifi Networks</h2>
  <p>
    <form action="#">
  <label for="wifi">Choose a hotspot to connect:</label>
  <select name="wifi" id="wifi">
    <option value="hotspot">None</option>
  </select>

  <label for="wifi">Enter password:</label>
  <input type="text"></input>
  


  <input type="button" value="Rescan">
  <input type="submit" value="Connect">
  </form>
  </p>
</body>

</script>
</html>)rawliteral";

String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(1.1);
  }
  else if(var == "HUMIDITY"){
    return String(1.2);
  }
  return String();
}


void setup() {
  Serial.begin(115200);  
  Serial.print("Setting AP (Access Point)…");
  // Remove the password parameter, if you want the AP (Access Point) to be open
  WiFi.softAP(ap_ssid, ap_password);

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);

  // Print ESP8266 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  ap_server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/html", index_html, processor);
  });

  // Start server
  ap_server.begin();
}

String* getWifiHotspots() {
//  String* arr = new String[];
  String arr[100];
  Serial.print("Scan start ... ");
  int n = WiFi.scanNetworks();
  for (int i = 0; i < n; i++)
  {
    arr[i] = WiFi.SSID(i).c_str();
  }
  return arr;
}

void loop() {
  // put your main code here, to run repeatedly:
}

currently processor function returns a String but I need to updated html's select tag with wifi hotspots as options !

2

You need to read them (correctly...) and generate the HTML dynamically for this part either directly (split your existing HTML array into two when the pop up menu définition goes) or Alternatively you can generate a static web page as you do with a placeholder and an AJAX request that triggers automatically upon load of your page so that the web browser sends you a request and you send back to your JavaScript the list of hotspot and the JavaScript function inserts them in the DOM)

The first option is easier to go with but requires a full page refresh if you just want to refresh the list