Reserved space in String page. Re-adjusted size of chuncks.

Added print statements for monitoring size of chunks etc. Novice improvents to HTML and variable names.
esp8266 · mcspr · May 8, 2022 · Apr 21, 2020 · Apr 22, 2020 · Apr 22, 2020
commit 6755a5b0f0fc596d4d2a0a012fb295fcdc7ca466
diff --git a/libraries/DNSServer/examples/NAPTCaptivePortal/WifiHttp.h b/libraries/DNSServer/examples/NAPTCaptivePortal/WifiHttp.h
@@ -88,33 +88,16 @@ static const char configHead2[] PROGMEM = R"EOF(
   text-align: right;
 }
 
-@media screen and (orientation: portrait) {
-  #inner {
-    display: block;
-    margin: 0 auto;
-    max-width: 400px;
-    min-width: 350px;
-    text-align: left;
-  }
-
-  #outer {
-    width:100%
-  }
+#outer {
+  width:100%
+  overflow-y: auto;
 }
-
-@media screen and (orientation: landscape) {
-  #inner {
-    display: block;
-    margin: 0 auto;
-    width: 400px;
-    text-align: left;
-  }
-
-  #outer {
-    width:100%
-  }
+#inner {
+  margin: .75em auto;
+  max-width: 500px;
+  min-width: 428px;
+  text-align: left;
 }
-
 </style>
 </head>
 
@@ -152,7 +135,7 @@ function cs(i){
 -->
 )EOF";
 #else
-static const char configHead2[] PROGMEM = R"EOF(<style>.left{text-align:left}.center{text-align:center}.right{text-align:right}@media screen and (orientation: portrait){#inner{display:block;margin:0 auto;max-width:400px;min-width:350px;text-align:left}#outer{width:100%}}@media screen and (orientation: landscape){#inner{display:block;margin:0 auto;width:400px;text-align:left}#outer{width:100%}}</style></head><body onload='ol()'> <script>function ge(i){return document.getElementById(i);} function pv(){let e=ge('p');if(e.type==='password'){e.type='text';}else{e.type='password';} e.focus();} function cs(i){ge('s').value=i.innerText;let e=ge('p');e.type='password';e.value='';e.focus();e.scrollIntoView();}</script>)EOF";
+static const char configHead2[] PROGMEM = R"EOF(<style>.left{text-align:left}.center{text-align:center}.right{text-align:right}#outer{width:100% overflow-y: auto}#inner{margin: .75em auto;max-width:500px;min-width:428px;text-align:left}</style></head><body onload='ol()'> <script>function ge(i){return document.getElementById(i);} function pv(){let e=ge('p');if(e.type==='password'){e.type='text';}else{e.type='password';} e.focus();} function cs(i){ge('s').value=i.innerText;let e=ge('p');e.type='password';e.value='';e.focus();e.scrollIntoView();}</script>)EOF";
 #endif
 
 #ifdef DEBUG_VIEW
@@ -195,7 +178,7 @@ static const char configConnection[] PROGMEM = R"EOF(<div id='outer'><div id='in
 #endif
 
 #ifdef DEBUG_VIEW
-static const char configInfo[] PROGMEM = R"EOF(
+static const char configAPInfo[] PROGMEM = R"EOF(
 <!--
 {s} - SSDI of Network
 {i} - IP address on that Network, WiFi.softAPIP or WiFi.localIP
@@ -213,11 +196,11 @@ static const char configInfo[] PROGMEM = R"EOF(
 -->
 )EOF";
 #else
-static const char configInfo[] PROGMEM = R"EOF(<br /><h2>SoftAP Details</h2><table><tr><td>SSI</td><td>{s}</td></tr><tr><td>BSSID&nbsp;</td><td>{b}</td></tr><tr><td>IP</td><td>{i}</td></tr><tr><td>STA</td><td>Count: {a}</td></tr></table>)EOF";
+static const char configAPInfo[] PROGMEM = R"EOF(<br /><h2>SoftAP Details</h2><table><tr><td>SSI</td><td>{s}</td></tr><tr><td>BSSID&nbsp;</td><td>{b}</td></tr><tr><td>IP</td><td>{i}</td></tr><tr><td>STA</td><td>Count: {a}</td></tr></table>)EOF";
 #endif
 
 #ifdef DEBUG_VIEW
-static const char configInfo2[] PROGMEM = R"EOF(
+static const char configWLANInfo[] PROGMEM = R"EOF(
 <!--
 {s} - SSDI of Network
 {b} - BSSID
@@ -248,9 +231,24 @@ static const char configInfo2[] PROGMEM = R"EOF(
 -->
 )EOF";
 #else
-static const char configInfo2[] PROGMEM = R"EOF(<br /><h2>WLAN Details</h2><table><tr><td>SSID</td><td>{s}</td></tr><tr><td>BSSID&nbsp;</td><td>{b}</td></tr><tr><td>CH</td><td>{c}</td></tr><tr><td>PHY</td><td>{p}</td></tr><tr><td>RSSI</td><td>{r}</td></tr><tr><td>IP</td><td>{i}</td></tr><tr><td>GW</td><td>{g}</td></tr><tr><td>Mask</td><td>{m}</td></tr><tr><td>DNS1</td><td>{1}</td></tr><tr><td>DNS2</td><td>{2}</td></tr></table>)EOF";
+static const char configWLANInfo[] PROGMEM = R"EOF(<br /><h2>WLAN Details</h2><table><tr><td>SSID</td><td>{s}</td></tr><tr><td>BSSID&nbsp;</td><td>{b}</td></tr><tr><td>CH</td><td>{c}</td></tr><tr><td>PHY</td><td>{p}</td></tr><tr><td>RSSI</td><td>{r}</td></tr><tr><td>IP</td><td>{i}</td></tr><tr><td>GW</td><td>{g}</td></tr><tr><td>Mask</td><td>{m}</td></tr><tr><td>DNS1</td><td>{1}</td></tr><tr><td>DNS2</td><td>{2}</td></tr></table>)EOF";
+#endif
+
+
+#ifdef DEBUG_VIEW
+static const char configWLANOffline[] PROGMEM = R"EOF(
+<!--
+-->
+<br />
+<h2>WLAN - offline</h2>
+<!--
+-->
+)EOF";
+#else
+static const char configWLANOffline[] PROGMEM = R"EOF(<br /><h2>WLAN - offline</h2>)EOF";
 #endif
 
+
 #ifdef DEBUG_VIEW
 static const char configList[] PROGMEM = R"EOF(
 <!--
@@ -315,6 +313,17 @@ static const char configEnd[] PROGMEM = R"EOF(
 <input id='s' class='lg' type='text' size=32 maxlength=32 placeholder='Network Name/SSID' name='n' spellcheck='false' data-gramm_editor='false'/>
 <br /><br />
 <input id='p' class='lg' type='password' size=32 maxlength=64 placeholder='password' name='p' spellcheck='false' data-gramm_editor='false'/>
+<!--
+-->
+)EOF";
+#else
+static const char configEnd[] PROGMEM = R"EOF(</table> <br /><form method='POST' action='wifisave'><h4>Connect to Network:</h4> <input id='s' class='lg' type='text' size=32 maxlength=32 placeholder='Network Name/SSID' name='n' spellcheck='false' data-gramm_editor='false'/> <br /><br /> <input id='p' class='lg' type='password' size=32 maxlength=64 placeholder='password' name='p' spellcheck='false' data-gramm_editor='false'/> )EOF";
+#endif
+
+#ifdef DEBUG_VIEW
+static const char configEnd2[] PROGMEM = R"EOF(
+<!--
+-->
 &nbsp;&nbsp;<a class='lg' onclick='pv();'>&#x1f441;</a>
 <br /><br /><input type='submit' value='Connect/Disconnect'/>
 </form>
@@ -329,7 +338,7 @@ static const char configEnd[] PROGMEM = R"EOF(
 -->
 )EOF";
 #else
-static const char configEnd[] PROGMEM = R"EOF(</table> <br /><form method='POST' action='wifisave'><h4>Connect to Network:</h4> <input id='s' class='lg' type='text' size=32 maxlength=32 placeholder='Network Name/SSID' name='n' spellcheck='false' data-gramm_editor='false'/> <br /><br /> <input id='p' class='lg' type='password' size=32 maxlength=64 placeholder='password' name='p' spellcheck='false' data-gramm_editor='false'/> &nbsp;&nbsp;<a class='lg' onclick='pv();'>&#x1f441;</a> <br /><br /><input type='submit' value='Connect/Disconnect'/></form> <br /><p>You may want to <a href='/'>return to the home page</a>.</p><p></p></div></div></body></html>)EOF";
+static const char configEnd2[] PROGMEM = R"EOF(&nbsp;&nbsp;<a class='lg' onclick='pv();'>&#x1f441;</a> <br /><br /><input type='submit' value='Connect/Disconnect'/></form> <br /><p>You may want to <a href='/'>return to the home page</a>.</p><p></p></div></div></body></html>)EOF";
 #endif
 
 #endif
diff --git a/libraries/DNSServer/examples/NAPTCaptivePortal/handleHttp.ino b/libraries/DNSServer/examples/NAPTCaptivePortal/handleHttp.ino
@@ -97,6 +97,16 @@ void handleWifi() {
 
   String page;
 
+  // Just do max on some of the visually larger HTML chunks that will be loaded
+  // into page and add a little for growth when substituting values in.
+  size_t thisMany = std::max(sizeof(configWLANInfo), std::max(sizeof(configList), sizeof(configEnd))) + 200;
+  CONSOLE_PRINTLN2("sizeof(configWLANInfo): ", (sizeof(configWLANInfo)));
+  CONSOLE_PRINTLN2("sizeof(configList): ", (sizeof(configList)));
+  CONSOLE_PRINTLN2("sizeof(configEnd): ", (sizeof(configEnd)));
+  CONSOLE_PRINTLN2("sizeof(configEnd2): ", (sizeof(configEnd2)));
+  CONSOLE_PRINTLN2("page reserve size: ", (thisMany));
+  page.reserve(thisMany);
+
   page = FPSTR(configPresetInput);
   /*
     Set previously used/entered credentials as a default entries.
@@ -119,7 +129,7 @@ void handleWifi() {
   */
   sendIfOver(page);
 
-  page += FPSTR(configInfo);
+  page += FPSTR(configAPInfo);
   {
     uint8_t sta_cnt = wifi_softap_get_station_num();
     page.replace("{s}", String(softAP_ssid));
@@ -146,7 +156,7 @@ void handleWifi() {
   sendIfOver(page, 0);
 
   if (WiFi.localIP().isSet()) {
-    page += FPSTR(configInfo2);
+    page += FPSTR(configWLANInfo);
     page.replace("{s}", String(ssid));
     page.replace("{b}", macToString(bssid));
     page.replace("{c}", String(WiFi.channel()));
@@ -159,7 +169,7 @@ void handleWifi() {
     page.replace("{2}", WiFi.dnsIP(1).toString());
     sendIfOver(page, 0);
   } else {
-    page += F("<br /><h2>WLAN - offline</h2>");
+    page += FPSTR(configWLANOffline); //F("<br /><h2>WLAN - offline</h2>");
   }
 
   page += FPSTR(configList);
@@ -183,10 +193,13 @@ void handleWifi() {
     page += FPSTR(configNoAPs);
     sendIfOver(page);
   }
+  sendIfOver(page, 0); // send what we have buffered before next direct send.
+
+  // No changes to this chunk, no need to use Strings class. Send asis.
+  server.sendContent_P(configEnd);
+  server.sendContent_P(configEnd2);
 
-  page += FPSTR(configEnd);
-  page.replace("<p></p>", String(F("<p>MAX String memory used: ")) + (maxPage) + F("</p>"));
-  server.sendContent(page);
+  CONSOLE_PRINTLN2("MAX String memory used: ", (maxPage));
   server.chunkedResponseFinalize();
 }