Captatve Portal for ESP12F

Hi,
I'm building a captive portal for ESP12 to get user input. I've come up with an HTML code, but I'm wondering how to associate it with the ESP. Really appreciate if someone could guide/ advice me on the libraries to use or any websites I could refer to get an idea on this.

Thanks a bunch!

Shainy

which particular ESP12 board do you have?
could you give some more details of the proposed project, e.g. do you wish ro run an Access Point on the device or just a webserver?
I assume you have loaded the ESP8266 libraries etc for the Arduino IDE
experiment with some of the code examples, e.g. click File>Examples to see a list of sample programs for the ESP8266. this should give you ideas where to start your project.

1 Like

ArduinoIDE>Examples>DNSServer>CaptivePortal

1 Like

Hi @horace ,
Sorry I didn't mention earlier. I'm working with an ESP12F devkit. I'm to develop a captive portal for the ESP to connect to WiFi based on the SSID and password given by the user. The ESP is required to run as both an AP and a station, but mostly as a station. So I've already created the HTML code and figured how to connect to WiFi using ESP8266WiFi.h library. I'm lost on how to connect the two parts; the HTML web page and the ESP12 code.

And yes, I have downloaded quite a few libraries such as ESPAsyncTCP.h and ESPAsyncWebServer.h. I've tried some different codes which take inputs from a web page and run based on it using these libraries, but unfortunately, it gives me an error saying "Error compiling for board NodeMCU 0.9 (ESP-12 Module)".

Really appreciate your advice and guidance!

Thank you so much @kolaha !! Will check on this example!

can you upload the code which gave you the error?

1 Like

Sure! By the way this is not my code. I took this from a website.

#include <AsyncHTTPRequest_Generic.h>
#include <AsyncHTTPRequest_Generic.hpp>

#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() {
  
}

compiles with a few warning on my PC then links and uploads OK
think the link given by @kolaha is probably what you are looking for

1 Like

Thank you @horace!

And yes @horace , @kolaha , I tried the "Captive Portal Advanced" example given for DNSServer. It's almost the code I've been looking for. Although, when I try to connect to a nearby WiFi through it, I'm not sure if the ESP12F has connected to it (the serial monitor stays blank), and I couldn't see any message that says I have connected to the nearby WiFi.

Explaining the scenario further on, after uploading the CaptivePortalAdvanced code to the ESP, through my computer (on the computer's Network & internet settings) I see a WiFi option named ESP_ap. And I assume the ESP acts as an AP here. When I enter the password given by the code itself, it redirects me to a webpage, which mentions:

"You are connected through the soft AP: ESP_ap. You may want to config wifi".

When I click on 'config wifi', it redirects me to a page which lets me enter a nearby WiFi's SSID and pw. And I assume this lets the ESP switch to act as a station. But when I submit the details of the WiFi, I can't figure out if the ESP is connected to the wifi or not, since the serial monitor nor the web page doesn't indicate that the ESP has connected to a WiFi net. I'm pretty confused about this, and I'm not sure if my assumptions are correct.

I really apologize for my lack of knowledge, but hope you could explain what how I could figure out if the ESP is connected to the WiFi.

Angry IP Scanner can help to find out IP from ESP
or router if you have access
or use your custom user.local

1 Like

if you have access to the WiFi router it should tell you what is connected, its IP, etc

1 Like

@horace @kolaha I tried with my phone's hotspot, and the ESP connects!!! Really grateful to you both for helping me out!!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.