Arduino Nano ESP32 - Webserver variable

Projects Programming
1

Hi all,

i'm stuck with a stubborn problem that i can't seem to get around. I have the board setup that when i have made a wifi connection, the board shows me a html page where i can put in some settings. Those settings are coming from the Preferences.h library and that works, but i can't seem to get the variables in the HTML.

I'm using AsyncWebServer with this a html :

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>Captive Portal Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  .field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}
.h1{
  color:orange;
  font-weight:700;
}
.container{
  padding-top:50px;
  margin: auto;
}
.inputfield
{
  font-size:20px;
}
  button.D{
    margin-top:20px;
    background-color:#dc3630
    font-size:25px;
    width:50%;
   
  }
  
  button:active{opacity:50% !important;cursor:wait;transition-delay: 0s}
</style>
</head><body>
  <div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">
  <h3>Wifi Settings</h3>
  <hr>
    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">

          <div class="form-group">
            <label class="col-md-4 control-label">Wifi SSID</label>
            <div class="col-md-6">
              <input class="inputfield" type="text" class="form-control" name="SSID" value="%SSID%">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">WiFi Password</label>
            <div class="col-md-6">
              <input class="inputfield" id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
          </div>
        
            <div class="col-md-6">
              <button class="D" type="submit">Save and reboot</button><br/>\n   </div>
          </div>
      </div>
    </div></form>
  </div>
</div>
</div>
</body></html>)rawliteral";

and then i have this :

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
      request->send_P(200, "text/html", index_html, processor); 
      Serial.println("Client Connected");
  });

String processor(const String& var)
  {
    if(var == "SSID")
      return "testSSID";
    return String();
  }

Whatever i try, i only see the %SSID% in my inputfield and not the 'testSSID'.

Am i missing something here?

thanks allot for any help.

2

You cannot modify a literal string declared as a constant and between us, that would also be a bad approach.

The best way is to make an AJAX call to asynchronously retrieve all the variable data from the micro like SSID, password and everything else.

3

I understand that i cannot modify it , but i've seen examples that should work using the processor function in the send_P function.

Anyway, for an ajax call to work i need jquery loaded, and i cannot upload files to a Arduino Nano ESP32 using the upload tool. it's a known issue that has not been resolved yet.

4

No, it is not like that at all.

AJAX and JQuery are two different things: the first is a data exchange technique with the server, the second is a Javascript library.

This could be a good example to start from (it's not mine, I found it by googling)

The page is created dynamically with Javascript (the hard job is done by the browser and therefore saving MCU resources).

There are 2 AJAX calls: the first associated with a checkbox to turn on and off a LED, while the second associated with the click on one of the dynamically created cells

5

If you declare the array not as constant, you can do it, but anyway it's not a good practice because you have to handle all such long string in SRAM before returning the HTML page to the client.

Any small change to the data to be displayed would require the same option again and the page would have to be reloaded with a very ugly and annoying "user experience".

6

Thank you very much for this ! I was indeed mistaken about the AJAX part, lack of sleep i guess haha. I'll give this solution a try and i'll come back with the results :slight_smile:

1 Like
7

I did manage to get it working this way , but be aware for anyone having the same problem :

The const char holding the HTML code will make your sketch impossible to compile after adding the < script > tags in it. I managed to get around this by moving that html declaration into a seperate html.h file and include it .

Thanks for all the help guys !

8

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