Updating web page in AP mode

Chat freely about anything...
 Reply

User avatar

Updating web page in AP mode

By J.Silva
- Tue Jul 03, 2018 6:14 pm #76850 Hey there,

I'm using an ESP8266, to generate a webpage wtih a form,
after the form is submitted, I want to display another page,
saying for instance: "your data was submitted".

I've tried a coulpe of things:

sending a new html code to the web server I created after I get the data from the form with the handlers.
Doesn't work,

I also tried creating a new webServer after I get the data from the handlers, also not working

Can you help me with this?
:shock:
Code: Select all
String responseHTML = "<!DOCTYPE html>"
  "<html lang=\"en\">"
  "<head>"
    "<meta charset=\"utf-8\">"
    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
    "<title>CasaTemp</title>"
  "</head>"
  "<body bgcolor=\"#fafaeb\">"
"  <center>"
"<font face=\"Lucida Console\" >"
          "<br><br><br><br>"
         
          "<form action=\"\" method=\"post\">"
              "SSID: <input type=\"text\" name=\"SSID\"><br>"
              "PASS: <input type=\"text\" name=\"Password\"><br>"
              "NAME: <input type=\"text\" name=\"NAME\"><br>"
              "MAIL: <input type=\"text\" name=\"MAIL\"><br>"
              "<input type=\"submit\" value=\"Submit\">"
          "</form>"

          "<p><h1>Knowledge is Power!</h1></p>"
  "</font>"
 
  "</center>"         
 
 
  "</body>"
  "</html>";


  // configure access point
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("CasaTemp"); // WiFi name

 
  webServer.onNotFound([]() { webServer.send(200, "text/html", responseHTML);  });
  webServer.begin();
 
  char  clientSSID [50];
  char  clientPASS[50];
  char  clientModulo_name[50];
  char  clientMail[50];
  getClientSSID(clientSSID);
  getClientPASS(clientPASS);                                    These are the handler functions that get data from the form
  getClientNAME(clientModulo_name);
  getClientMAIL(clientMail);
  Serial.println(clientSSID);
  Serial.println(clientPASS);
  Serial.println(clientModulo_name);
  Serial.println(clientMail);

  internet(SSID,PASS);        This function simply connects the module to the internet
 

 
 
User avatar

Re: Updating web page in AP mode

By rudy
- Tue Jul 03, 2018 6:42 pm #76851 Take a look at this example.
Specifically

Code: Select all<form method="post" action="/save" >

/save webpage is called for when the form is submitted.

Code: Select all webserver.on("/save", handleSave);


Also this makes things nicer to read. You don't need to put in a bunch of escape characters.
Code: Select allstatic const char PROGMEM INDEX_HTML[] = R"rawliteral( 
Your html code here
)rawliteral";


The whole program.

Code: Select all//  http://www.esp8266.com/viewtopic.php?f=8&t=4897&start=5

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "esp-net";  //  your network SSID (name)
const char* password = "123456789";   // your network password

ESP8266WebServer webserver(80);

static const char PROGMEM INDEX_HTML[] = R"rawliteral( 
<!DOCTYPE html>
<html>
<head>
<title>Clock Settings</title>
</head>
<body>
<form method="post" action="/save" >
Turn on time:<br><input name="onTime" type="text" size="16" value="" ><br><br>
Turn off time:<br><input name="offTime" type="text" size="16" value="" ><br><br>
<input type="submit" name="clk_action" value="accept">
</form>
</body>
</html>
)rawliteral";


void handleRoot() {
  webserver.send(200, "text/html", INDEX_HTML);
}



void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

void handleSave() {
  String str = "Settings Saved ...\r\n";
 
  Serial.print("number of arguments ");
  Serial.println(webserver.args());                    // number of arguments
 
  if (webserver.args() > 0 ) {
    for ( uint8_t i = 0; i < webserver.args(); i++ ) {
      str += webserver.argName(i) + " = " + webserver.arg(i) + "\r\n";
     
      Serial.println("Arg "+ String(i)+"="+ webserver.argName(i));     
      Serial.println("Arg "+ String(i)+"="+ webserver.arg(i));
    }
  }
  webserver.send(200, "text/plain", str.c_str());
}

//===============================================
void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

 
  webserver.on("/", handleRoot);
  webserver.on("/save", handleSave);
  webserver.onNotFound(handleNotFound);
  webserver.begin();
  Serial.println("Web server has started");
}

//===============================================
void loop() {
  webserver.handleClient();
}
User avatar

Re: Updating web page in AP mode

By picstart
- Wed Jul 04, 2018 7:31 am #76859 Nice code I like it. Not having the error prone escape chars is lovely.
The code gets a dynamic ip from the router resolving the address via a web name and DNS within a local net may not be possible but it would be very nice.
Something along the lines of ArduinoOTA.setHostname("myHostesp8266") for OTA
Can it be done?
User avatar

Re: Updating web page in AP mode

By J.Silva
- Wed Jul 04, 2018 6:41 pm #76867 Thank you for helping,
took me about 4 hours to test this,

I'm having a problem integrating this in my program.

I have a class for this code.


void AP::handleSave(){
.....
}

then I have the function that generates the access point

void AP::access_point(){

.............
.............
.............

webServer.on("/save",handleSave);
webServer.begin();

}

It won't let me call handleSave like that,
it does work if everything is in the same file, meaning,
if there is no class associated to handleSave function, it will work,

but like this I get a message


AP.cpp:111: error: no matching function for call to 'ESP8266WebServer::on(const char [6], <unresolved overloaded function type>)'

webServer.on("/save",handleSave);


I have a lot of functions associated to AP class, I didn't want to put them in the .ino file :? :geek:
Any suggestion for this?


Thanks :D
 Reply
Return to General Discussions