From 099661690735e39da05df0e3faf46c178f446955 Mon Sep 17 00:00:00 2001
From: rob040 <rob040@hotmail.nl>
Date: Mon, 8 Jan 2024 15:06:40 +0100
Subject: [PATCH 1/3] on setup page, fix missing save icon on Update tab, save
 configuration button, and align "Store wifi credentials" switch to left and
 look same as other input fields. app.js: duplicate svg-save ref to svg-save2,
 hide save button when no-dhcp is disabled; other deltas are whithespace/tabs
 setup.htm: duplicate svg-save ref to svg-save2,

---
 built-in-webpages/setup/app.js    | 56 +++++++++++++++----------------
 built-in-webpages/setup/setup.htm |  4 +--
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/built-in-webpages/setup/app.js b/built-in-webpages/setup/app.js
index adb42314..fd57a501 100644
--- a/built-in-webpages/setup/app.js
+++ b/built-in-webpages/setup/app.js
@@ -18,7 +18,7 @@ var lastBox;
 
 // Simple JQuery-like selector
 var $ = function(el) {
-	return document.getElementById(el);
+  return document.getElementById(el);
 };
 
 function newEl(element, attribute) {
@@ -71,13 +71,13 @@ function selectWifi(row) {
 function listWifiNetworks(elems) {
   const list = document.querySelector('#wifi-list');
   list.innerHTML = "";
-	elems.forEach((elem, idx) => {
+  elems.forEach((elem, idx) => {
     // Create a single row with all columns
     var row = newEl('tr');
     var id = 'wifi-' + idx;
     row.id = id;
     row.addEventListener('click', selectWifi);
-	  row.innerHTML  = `<td><input type="radio" name="select" id="select-${id}"></td>`;
+    row.innerHTML  = `<td><input type="radio" name="select" id="select-${id}"></td>`;
     row.innerHTML += `<td id="ssid-${id}">${elem.ssid}</td>`;
     row.innerHTML += '<td class="hide-tiny">' + elem.strength + ' dBm</td>';
     row.innerHTML += (elem.security) ? '<td>' + svgLock + '</td>' : '<td>' + svgUnlock + '</td>';
@@ -156,7 +156,7 @@ function addOptionsElement(opt) {
     obj[key] = opt[key];
     return obj;
   }, {});
-  
+
   if (Object.entries(bools).length !== 0) {
     var d  = newEl('div', {'class': 'row-wrapper'});
     Object.entries(bools).forEach(([key, value]) => {
@@ -174,20 +174,20 @@ function addOptionsElement(opt) {
     });
     lastBox.appendChild(d);
   }
-  
+
   const others = Object.keys(opt)
   .filter(key => typeof(opt[key]) !== "boolean")
   .reduce((obj, key) => {
     obj[key] = opt[key];
     return obj;
   }, {});
-  
+
   Object.entries(others).forEach(([key, value]) => {
     let lbl = newEl('label', {'class': 'input-label', 'label-for': key});
     lbl.textContent = key;
     let el = newEl('input',  {'class': 'opt-input', 'type': 'text', 'id': key});
     el.value = value;
-    
+
     if (typeof(value) === "number")
       el.setAttribute('type', 'number');
     if (typeof(value) === "object" ) {
@@ -223,7 +223,7 @@ function addOptionsElement(opt) {
       el.classList.add('hide');
     }
   });
-  
+
 }
 
 
@@ -233,7 +233,7 @@ function createNewBox(cont, lbl) {
   h.innerHTML = lbl;
   box.appendChild(h);
   $('main-box').appendChild(box);
-  
+
   // Add new voice in menu and relatvie listener
   var lnk = newEl('a', {'class': 'a-link', 'id': 'set-opt'+cont, 'data-box': 'option-box'+cont});
   lnk.innerHTML = lbl;
@@ -245,8 +245,8 @@ function createNewBox(cont, lbl) {
 async function createOptionsBox(raw) {
   var nest = {};
   var boxId = 'wifi-box';
-  lastBox =  $(boxId);  
-      
+  lastBox =  $(boxId);
+
   Object.entries(raw).forEach(([key, value], index) => {
     if (boxId === 'wifi-box') {
       $('no-dhcp').checked = raw.dhcp;
@@ -300,7 +300,7 @@ async function createOptionsBox(raw) {
       }
     }
   });
-  
+
   // Add last items
   if (Object.entries(nest).length !== 0) {
     addOptionsElement(nest);
@@ -351,7 +351,7 @@ function addInputListener(item) {
 function insertKey(key,value,obj,pos){
   return Object.keys(obj).reduce((ac,a,i) => {
     if(i === pos) ac[key] = value;
-    ac[a] = obj[a]; 
+    ac[a] = obj[a];
     return ac;
   },{});
 }
@@ -360,13 +360,13 @@ function saveParameters() {
   // Backward compatibility
   if(Object.keys(options)[0].startsWith('param-box')) {
     if(Object.keys(options)[0] === 'param-box0') {
-      options['param-box-0'] = options['wifi-box']; 
+      options['param-box-0'] = options['wifi-box'];
       options = {'dhcp': false, ...options};
     }
     else
       options = {'wifi-box': '', 'dhcp': false, ...options};
   }
-  
+
   options.dhcp = $('no-dhcp').checked;
   if ($('no-dhcp').checked) {
     options = insertKey('ip_address', $('ip').value, options, 2);
@@ -376,7 +376,7 @@ function saveParameters() {
     options["gateway"] = $('gateway').value;
     options["subnet"] = $('subnet').value;
   }
-  
+
   var myblob = new Blob([JSON.stringify(options, null, 2)], {
     type: 'application/json'
   });
@@ -417,7 +417,7 @@ function doConnection(e, f) {
     body: formdata,
     redirect: 'follow'
   };
-  
+
   $('loader').classList.remove('hide');
   var s;
   fetch('/connect', requestOptions)
@@ -434,13 +434,13 @@ function doConnection(e, f) {
       else
         openModalMessage('Connect to WiFi', data, restartESP);
     }
-    else 
+    else
       openModalMessage('Error!', data);
     $('loader').classList.add('hide');
   })
   .catch((error) => {
     openModalMessage('Connect to WiFi', error);
-    $('loader').classList.add('hide'); 
+    $('loader').classList.add('hide');
   });
 }
 
@@ -463,15 +463,13 @@ function switchPage(el) {
   if(el.target.id != 'set-wifi') {
     var fragment = document.createDocumentFragment();
     fragment.appendChild($('btn-hr'));
-	  fragment.appendChild($('btn-box'));
-	  const box = $(el.target.getAttribute("data-box"));
-	  box.appendChild(fragment);
-	  
-	  document.querySelectorAll('.raw-html').forEach(function(el) {
-	    if (el.getAttribute("data-box") === box.id)
+    fragment.appendChild($('btn-box'));
+    const box = $(el.target.getAttribute("data-box"));
+    box.appendChild(fragment);
+    document.querySelectorAll('.raw-html').forEach(function(el) {
+      if (el.getAttribute("data-box") === box.id)
         box.insertBefore(el,  $('btn-hr'));
     });
-    
     $('btn-box').classList.remove('hide');
     $('btn-hr').classList.remove('hide');
   }
@@ -529,11 +527,11 @@ function handleSubmit() {
   prg.classList.remove('hide');
   prg.classList.add('active')
   update.innerHTML = 'Update in progress';
-  
+
   let formData = new FormData();
   formData.set('update', fileElement.files[0]);
   var req = new XMLHttpRequest();
-  req.open('POST', '/update?size=' + fileElement.files[0].size);  
+  req.open('POST', '/update?size=' + fileElement.files[0].size);
   req.onload = function(d) {
     loader.classList.add('hide');
     prg.classList.remove('active');
@@ -579,6 +577,7 @@ $('svg-no-eye').innerHTML = svgNoEye;
 $('svg-scan').innerHTML = svgScan;
 $('svg-connect').innerHTML = svgConnect;
 $('svg-save').innerHTML = svgSave;
+$('svg-save2').innerHTML = svgSave;
 $('svg-restart').innerHTML = svgRestart;
 $('img-logo').innerHTML = svgLogo;
 
@@ -608,6 +607,7 @@ $('no-dhcp').addEventListener('change', function() {
   }
   else {
     el.classList.add('hide');
+    btn.classList.remove('hide');
   }
 });
 window.addEventListener('load', getParameters);
diff --git a/built-in-webpages/setup/setup.htm b/built-in-webpages/setup/setup.htm
index aea135e6..830482a6 100644
--- a/built-in-webpages/setup/setup.htm
+++ b/built-in-webpages/setup/setup.htm
@@ -79,7 +79,7 @@ <h2 class=heading-2>Connect to WiFi</h2>
                 </div>
                     
                 <div class=tf-wrapper>
-                  <label class="lbl-wifi toggle">
+                  <label class="input-label toggle">
                     <input id=persistent type=checkbox class="t-check" checked>
                     <div class=toggle-switch></div>
                     <span class=toggle-label>Store WiFi credentials</span>
@@ -97,7 +97,7 @@ <h2 class=heading-2>Connect to WiFi</h2>
                     <span>Connect to <span id=ssid-name>SSID</span></span>
                 </a>
                 <a id=save-wifi class="btn hide">
-                    <div class=svg><svg id=svg-save fill=currentColor viewBox="0 0 24 24"></svg></div>
+                    <div class=svg><svg id=svg-save2 fill=currentColor viewBox="0 0 24 24"></svg></div>
                     <span>Save configuration</span>
                 </a>
             </div>

From 2950b5c7cce1e648d0deb8975bb5240c19da8696 Mon Sep 17 00:00:00 2001
From: rob040 <rob040@hotmail.nl>
Date: Wed, 10 Jan 2024 11:28:57 +0100
Subject: [PATCH 2/3] Some typo's corrected and undo changes introduced by
 'setupPageFix', since they are already corrected in master.

---
 README.md                                     | 12 ++--
 built-in-webpages/setup/app.js                | 55 ++++++++++---------
 built-in-webpages/setup/setup.htm             |  2 +-
 examples/customHTML/customElements.h          |  4 +-
 examples/customHTML/customHTML.ino            | 29 +++++-----
 examples/customHTML/thingsboard.h             |  2 +-
 examples/customOptions/customOptions.ino      | 10 ++--
 examples/esp32-cam/esp32-cam.ino              |  6 +-
 examples/gpio_list/gpio_list.ino              |  4 +-
 examples/handleFormData/handleFormData.ino    |  6 +-
 examples/highcharts/highcharts.ino            |  6 +-
 examples/highcharts/readme.md                 | 10 ++--
 examples/remoteOTA/remoteOTA.ino              |  4 +-
 examples/simpleServer/simpleServer.ino        |  6 +-
 .../simpleServerCaptive.ino                   |  8 ++-
 examples/withWebSocket/readme.md              |  6 +-
 examples/withWebSocket/withWebSocket.ino      |  6 +-
 17 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/README.md b/README.md
index 2169edd2..9a556f8e 100644
--- a/README.md
+++ b/README.md
@@ -3,16 +3,16 @@ If you like this work, please consider [sponsoring this project!](https://paypal
 # async-esp-fs-webserver
 ESP32/ESP8266 WebServer, WiFi manager and ACE web editor Arduino library. Based on [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer) from @me-no-dev
 
-Thi is the equivalent to **esp-fs-webserver** Arduino library, but working with the very good **ESPAsyncWebServer** library instead default webserver library.
+This is the equivalent to **esp-fs-webserver** Arduino library, but working with the very good **ESPAsyncWebServer** library instead default webserver library.
 From some tests I have done, I have been able to observe that a webserver created with this library is much faster and more responsive, which is why I decided to develop this variant of the library.
 
 **Note**:
-Starting from version 2.0.0 ESP32 core for Aruino introduced the LittlsFS library like ESP8266. The examples in this library is written to work with this for both platform by default. Change according to your needs if you prefer other filesystems.
+Starting from version 2.0.0 ESP32 core for Arduino introduced the LittlsFS library like ESP8266. The examples in this library is written to work with this for both platform by default. Change according to your needs if you prefer other filesystems.
 
 ## WiFi, OTA firmware update and Options manager
-Thanks to the built-in page **/setup** (about 6.9Kb of program space) is possible scan and set the WiFi credentials and other freely configurable parameters.
+Thanks to the built-in page **/setup** (about 6.9Kb of program space) it is possible to scan and set the WiFi credentials and other freely configurable parameters.
 
-With **/setup** webpage is also possible perform remote firmware update. 
+With **/setup** webpage it is also possible to perform remote firmware update (OTA-update). 
 
 ![image](https://github.com/cotestatnt/async-esp-fs-webserver/assets/27758688/e16cf5cb-252a-42bb-b111-305387f9d0cc)
 
@@ -25,8 +25,8 @@ In the image below, for example, the HTML and Javascript code to provision the d
 
 
 ## ACE web file editor/browser
-Thanks to the built-in **/edit** page, is possible upload, delete and edit the HTML/CSS/JavaScript source files directly from browser and immediately displaying the changes introduced at runtime without having to recompile the device firmware.
-The page can be enabled at runtime using the method `enableFsCodeEditor()` and it occupy about 6.7Kb of program space.
+Thanks to the built-in **/edit** page, it is possible to upload, delete and edit the HTML/CSS/JavaScript source files directly from browser and immediately display the changes introduced at runtime without having to recompile the device firmware.
+The page can be enabled at runtime using the method `enableFsCodeEditor()` and it occupies about 6.7Kb of program space.
 
 ![image](https://github.com/cotestatnt/async-esp-fs-webserver/assets/27758688/668c0899-a060-4aed-956b-51311bf3fe13)
 
diff --git a/built-in-webpages/setup/app.js b/built-in-webpages/setup/app.js
index fd57a501..0e88fc88 100644
--- a/built-in-webpages/setup/app.js
+++ b/built-in-webpages/setup/app.js
@@ -18,7 +18,7 @@ var lastBox;
 
 // Simple JQuery-like selector
 var $ = function(el) {
-  return document.getElementById(el);
+	return document.getElementById(el);
 };
 
 function newEl(element, attribute) {
@@ -71,13 +71,13 @@ function selectWifi(row) {
 function listWifiNetworks(elems) {
   const list = document.querySelector('#wifi-list');
   list.innerHTML = "";
-  elems.forEach((elem, idx) => {
+	elems.forEach((elem, idx) => {
     // Create a single row with all columns
     var row = newEl('tr');
     var id = 'wifi-' + idx;
     row.id = id;
     row.addEventListener('click', selectWifi);
-    row.innerHTML  = `<td><input type="radio" name="select" id="select-${id}"></td>`;
+	  row.innerHTML  = `<td><input type="radio" name="select" id="select-${id}"></td>`;
     row.innerHTML += `<td id="ssid-${id}">${elem.ssid}</td>`;
     row.innerHTML += '<td class="hide-tiny">' + elem.strength + ' dBm</td>';
     row.innerHTML += (elem.security) ? '<td>' + svgLock + '</td>' : '<td>' + svgUnlock + '</td>';
@@ -156,7 +156,7 @@ function addOptionsElement(opt) {
     obj[key] = opt[key];
     return obj;
   }, {});
-
+  
   if (Object.entries(bools).length !== 0) {
     var d  = newEl('div', {'class': 'row-wrapper'});
     Object.entries(bools).forEach(([key, value]) => {
@@ -174,20 +174,20 @@ function addOptionsElement(opt) {
     });
     lastBox.appendChild(d);
   }
-
+  
   const others = Object.keys(opt)
   .filter(key => typeof(opt[key]) !== "boolean")
   .reduce((obj, key) => {
     obj[key] = opt[key];
     return obj;
   }, {});
-
+  
   Object.entries(others).forEach(([key, value]) => {
     let lbl = newEl('label', {'class': 'input-label', 'label-for': key});
     lbl.textContent = key;
     let el = newEl('input',  {'class': 'opt-input', 'type': 'text', 'id': key});
     el.value = value;
-
+    
     if (typeof(value) === "number")
       el.setAttribute('type', 'number');
     if (typeof(value) === "object" ) {
@@ -223,7 +223,7 @@ function addOptionsElement(opt) {
       el.classList.add('hide');
     }
   });
-
+  
 }
 
 
@@ -233,7 +233,7 @@ function createNewBox(cont, lbl) {
   h.innerHTML = lbl;
   box.appendChild(h);
   $('main-box').appendChild(box);
-
+  
   // Add new voice in menu and relatvie listener
   var lnk = newEl('a', {'class': 'a-link', 'id': 'set-opt'+cont, 'data-box': 'option-box'+cont});
   lnk.innerHTML = lbl;
@@ -245,8 +245,8 @@ function createNewBox(cont, lbl) {
 async function createOptionsBox(raw) {
   var nest = {};
   var boxId = 'wifi-box';
-  lastBox =  $(boxId);
-
+  lastBox =  $(boxId);  
+      
   Object.entries(raw).forEach(([key, value], index) => {
     if (boxId === 'wifi-box') {
       $('no-dhcp').checked = raw.dhcp;
@@ -300,7 +300,7 @@ async function createOptionsBox(raw) {
       }
     }
   });
-
+  
   // Add last items
   if (Object.entries(nest).length !== 0) {
     addOptionsElement(nest);
@@ -351,7 +351,7 @@ function addInputListener(item) {
 function insertKey(key,value,obj,pos){
   return Object.keys(obj).reduce((ac,a,i) => {
     if(i === pos) ac[key] = value;
-    ac[a] = obj[a];
+    ac[a] = obj[a]; 
     return ac;
   },{});
 }
@@ -360,13 +360,13 @@ function saveParameters() {
   // Backward compatibility
   if(Object.keys(options)[0].startsWith('param-box')) {
     if(Object.keys(options)[0] === 'param-box0') {
-      options['param-box-0'] = options['wifi-box'];
+      options['param-box-0'] = options['wifi-box']; 
       options = {'dhcp': false, ...options};
     }
     else
       options = {'wifi-box': '', 'dhcp': false, ...options};
   }
-
+  
   options.dhcp = $('no-dhcp').checked;
   if ($('no-dhcp').checked) {
     options = insertKey('ip_address', $('ip').value, options, 2);
@@ -376,7 +376,7 @@ function saveParameters() {
     options["gateway"] = $('gateway').value;
     options["subnet"] = $('subnet').value;
   }
-
+  
   var myblob = new Blob([JSON.stringify(options, null, 2)], {
     type: 'application/json'
   });
@@ -417,7 +417,7 @@ function doConnection(e, f) {
     body: formdata,
     redirect: 'follow'
   };
-
+  
   $('loader').classList.remove('hide');
   var s;
   fetch('/connect', requestOptions)
@@ -434,13 +434,13 @@ function doConnection(e, f) {
       else
         openModalMessage('Connect to WiFi', data, restartESP);
     }
-    else
+    else 
       openModalMessage('Error!', data);
     $('loader').classList.add('hide');
   })
   .catch((error) => {
     openModalMessage('Connect to WiFi', error);
-    $('loader').classList.add('hide');
+    $('loader').classList.add('hide'); 
   });
 }
 
@@ -463,13 +463,15 @@ function switchPage(el) {
   if(el.target.id != 'set-wifi') {
     var fragment = document.createDocumentFragment();
     fragment.appendChild($('btn-hr'));
-    fragment.appendChild($('btn-box'));
-    const box = $(el.target.getAttribute("data-box"));
-    box.appendChild(fragment);
-    document.querySelectorAll('.raw-html').forEach(function(el) {
-      if (el.getAttribute("data-box") === box.id)
+	  fragment.appendChild($('btn-box'));
+	  const box = $(el.target.getAttribute("data-box"));
+	  box.appendChild(fragment);
+	  
+	  document.querySelectorAll('.raw-html').forEach(function(el) {
+	    if (el.getAttribute("data-box") === box.id)
         box.insertBefore(el,  $('btn-hr'));
     });
+    
     $('btn-box').classList.remove('hide');
     $('btn-hr').classList.remove('hide');
   }
@@ -527,11 +529,11 @@ function handleSubmit() {
   prg.classList.remove('hide');
   prg.classList.add('active')
   update.innerHTML = 'Update in progress';
-
+  
   let formData = new FormData();
   formData.set('update', fileElement.files[0]);
   var req = new XMLHttpRequest();
-  req.open('POST', '/update?size=' + fileElement.files[0].size);
+  req.open('POST', '/update?size=' + fileElement.files[0].size);  
   req.onload = function(d) {
     loader.classList.add('hide');
     prg.classList.remove('active');
@@ -607,7 +609,6 @@ $('no-dhcp').addEventListener('change', function() {
   }
   else {
     el.classList.add('hide');
-    btn.classList.remove('hide');
   }
 });
 window.addEventListener('load', getParameters);
diff --git a/built-in-webpages/setup/setup.htm b/built-in-webpages/setup/setup.htm
index 830482a6..9f481cbb 100644
--- a/built-in-webpages/setup/setup.htm
+++ b/built-in-webpages/setup/setup.htm
@@ -79,7 +79,7 @@ <h2 class=heading-2>Connect to WiFi</h2>
                 </div>
                     
                 <div class=tf-wrapper>
-                  <label class="input-label toggle">
+                  <label class="lbl-wifi toggle">
                     <input id=persistent type=checkbox class="t-check" checked>
                     <div class=toggle-switch></div>
                     <span class=toggle-label>Store WiFi credentials</span>
diff --git a/examples/customHTML/customElements.h b/examples/customHTML/customElements.h
index 4651f32b..958126a1 100644
--- a/examples/customHTML/customElements.h
+++ b/examples/customHTML/customElements.h
@@ -1,7 +1,7 @@
 
 /*
 * This HTML code will be injected in /setup webpage using a <div></div> element as parent
-* The parent element will hhve the HTML id properties equal to 'raw-html-<id>'
+* The parent element will have the HTML id properties equal to 'raw-html-<id>'
 * where the id value will be equal to the id parameter passed to the function addHTML(html_code, id).
 */
 static const char custom_html[] PROGMEM = R"EOF(
@@ -25,7 +25,7 @@ static const char custom_html[] PROGMEM = R"EOF(
 * In this example, a style sections is added in order to render properly the new
 * <select> and <pre> elements introduced. Since this section will be added at the end of the body,
 * it is also possible to override the style of the elements already present:
-* for example the background color of body will be ovverrided with a different color
+* for example the background color of body will be overridden with a different color
 */
 static const char custom_css[] PROGMEM = R"EOF(
 pre{
diff --git a/examples/customHTML/customHTML.ino b/examples/customHTML/customHTML.ino
index 46076502..fb73cf58 100644
--- a/examples/customHTML/customHTML.ino
+++ b/examples/customHTML/customHTML.ino
@@ -22,7 +22,7 @@ uint32_t longVar = 1234567890;
 float floatVar = 15.5F;
 String stringVar = "Test option String";
 
-// ThingsBoard varaibles
+// ThingsBoard variables
 String tb_deviceName = "ESP Sensor";
 double tb_deviceLatitude = 41.88505;
 double tb_deviceLongitude = 12.50050;
@@ -49,8 +49,8 @@ uint16_t tb_port = 80;
 #define TB_SECRET_KEY "Provisioning secret key"
 
 // Timezone definition to get properly time from NTP server
-#define MYTZ "CET-1CEST,M3.5.0,M10.5.0/3"
-struct tm Time;
+//n.u. #define MYTZ "CET-1CEST,M3.5.0,M10.5.0/3"
+//n.u. struct tm Time;
 
 
 /*
@@ -58,7 +58,7 @@ struct tm Time;
 * HTML code will be injected according to the order of options declaration.
 * CSS and JavaScript will be appended to the end of body in order to work properly.
 * In this manner, is also possible override the default element styles
-* like for example background color, margins, paddings etc etc
+* like for example background color, margins, padding etc etc
 */
 #include "customElements.h"
 #include "thingsboard.h"
@@ -70,7 +70,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be reformatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -145,6 +145,9 @@ void handleLoadOptions(AsyncWebServerRequest *request) {
 }
 
 void setup() {
+#ifdef LED_BUILTIN
+  pinMode(LED_BUILTIN, OUTPUT);
+#endif
   Serial.begin(115200);
 
   // Load configuration (if not present, default will be created when webserver will start)
@@ -189,7 +192,7 @@ void setup() {
   // Add a new options box with custom code injected
   server.addOptionBox("Custom HTML");
   // How many times you need (for example one in different option box)
-  server.addHTML(custom_html, "fetch-test", /*overwite*/ false);
+  server.addHTML(custom_html, "fetch-test", /*overwrite*/ false);
 
   // Add a new options box
   server.addOptionBox("ThingsBoard");
@@ -201,20 +204,20 @@ void setup() {
   server.addOption(TB_DEVICE_KEY, tb_device_key);
   server.addOption(TB_SECRET_KEY, tb_secret_key);
   server.addOption(TB_DEVICE_TOKEN, tb_deviceToken);
-  server.addHTML(thingsboard_htm, "ts", /*overwite file*/ false);
+  server.addHTML(thingsboard_htm, "ts", /*overwrite file*/ false);
 
   // CSS will be appended to HTML head
-  server.addCSS(custom_css, "fetch", /*overwite file*/ false);
+  server.addCSS(custom_css, "fetch", /*overwrite file*/ false);
   // Javascript will be appended to HTML body
-  server.addJavascript(custom_script, "fetch", /*overwite file*/ false);
-  server.addJavascript(thingsboard_script, "ts", /*overwite file*/ false);
+  server.addJavascript(custom_script, "fetch", /*overwrite file*/ false);
+  server.addJavascript(thingsboard_script, "ts", /*overwrite file*/ false);
 
   // Add custom page title to /setup
-  server.setSetupPageTitle("Test setup page");
+  server.setSetupPageTitle("Custom HTML Web Server");
   // Add custom logo to /setup page with custom size
-  server.setLogoBase64(base64_logo, "128", "128", /*overwite file*/ false);
+  server.setLogoBase64(base64_logo, "128", "128", /*overwrite file*/ false);
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
   #ifdef ESP32
   server.setFsInfoCallback(getFsInfo);
diff --git a/examples/customHTML/thingsboard.h b/examples/customHTML/thingsboard.h
index 63217224..58939eed 100644
--- a/examples/customHTML/thingsboard.h
+++ b/examples/customHTML/thingsboard.h
@@ -87,7 +87,7 @@ function createNewDevice() {
     var token = $(TB_DEVICE_TOKEN);
     token.focus();
     token.value = obj.credentialsValue;
-    openModalMessage('Write device attributes', 'Device provisioned correctly.<br>Do you want set client attirbutes on ThingsBoard server?', setDeviceClientAttribute);
+    openModalMessage('Write device attributes', 'Device provisioned correctly.<br>Do you want to set client attributes on ThingsBoard server?', setDeviceClientAttribute);
   });
 }
 
diff --git a/examples/customOptions/customOptions.ino b/examples/customOptions/customOptions.ino
index a7b05311..d802a11c 100644
--- a/examples/customOptions/customOptions.ino
+++ b/examples/customOptions/customOptions.ino
@@ -26,7 +26,7 @@ String stringVar = "Test option String";
 // In order to show a dropdown list box in /setup page
 // we need a list of values and a variable to store the selected option
 #define LIST_SIZE  7
-const char* dropdownList[LIST_SIZE] = 
+const char* dropdownList[LIST_SIZE] =
 {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"};
 String dropdownSelected;
 
@@ -75,7 +75,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be reformatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -172,10 +172,10 @@ void setup() {
   server.addOption(STRING_LABEL, stringVar);
   server.addDropdownList(DROPDOWN_LABEL, dropdownList, LIST_SIZE);
 
-  server.addHTML(save_btn_htm, "buttons", /*overwite*/ false);
-  server.addJavascript(button_script, "js", /*overwite*/ false);
+  server.addHTML(save_btn_htm, "buttons", /*overwrite*/ false);
+  server.addJavascript(button_script, "js", /*overwrite*/ false);
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
   #ifdef ESP32
   server.setFsInfoCallback(getFsInfo);
diff --git a/examples/esp32-cam/esp32-cam.ino b/examples/esp32-cam/esp32-cam.ino
index 5d2c63a0..7faefe17 100644
--- a/examples/esp32-cam/esp32-cam.ino
+++ b/examples/esp32-cam/esp32-cam.ino
@@ -50,7 +50,7 @@ void setup() {
   /*
    Init onboard SD filesystem (format if necessary)
    SD_MMC.begin(const char * mountpoint, bool mode1bit, bool format_if_mount_failed, int sdmmc_frequency, uint8_t maxOpenFiles)
-   To avoid led glowindg, set mode1bit = true (SD HS_DATA1 is tied to GPIO4, the same of on-board flash led)
+   To avoid led glowing, set mode1bit = true (SD HS_DATA1 is tied to GPIO4, the same of on-board flash led)
   */
   if (!SD_MMC.begin("/sdcard", true, true, SDMMC_FREQ_HIGHSPEED, 5)) {
     Serial.println("\nSD Mount Failed.\n");
@@ -64,7 +64,7 @@ void setup() {
   }
   listDir(getFolder, 1);
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
   server.setFsInfoCallback([](fsInfo_t* fsInfo) {
     fsInfo->totalBytes = SD_MMC.totalBytes();
@@ -85,7 +85,7 @@ void setup() {
     "Open /edit page to view, edit or upload example or your custom webserver source files."
   ));
 
-  // Init the camera module (accordind the camera_config_t defined)
+  // Init the camera module (according the camera_config_t defined)
   init_camera();
 }
 
diff --git a/examples/gpio_list/gpio_list.ino b/examples/gpio_list/gpio_list.ino
index bf495605..d476f7a9 100644
--- a/examples/gpio_list/gpio_list.ino
+++ b/examples/gpio_list/gpio_list.ino
@@ -156,9 +156,9 @@ void setup() {
   }
 
   // Try to connect to flash stored SSID, start AP if fails after timeout
-  IPAddress myIP = server.startWiFi(15000, "ESP8266_AP", "123456789" );
+  IPAddress myIP = server.startWiFi(15000, "ESP_AP", "123456789" );
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
 
   /*
diff --git a/examples/handleFormData/handleFormData.ino b/examples/handleFormData/handleFormData.ino
index 76e78f45..30b2344f 100644
--- a/examples/handleFormData/handleFormData.ino
+++ b/examples/handleFormData/handleFormData.ino
@@ -75,7 +75,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-      Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+      Serial.println("ERROR on mounting filesystem. It will be reformatted!");
       FILESYSTEM.format();
       ESP.restart();
   }
@@ -87,7 +87,7 @@ void setup(){
   Serial.begin(115200);
 
   // Try to connect to stored SSID, start AP if fails after timeout
-  IPAddress myIP = server.startWiFi(15000, "ESP8266_AP", "123456789" );
+  IPAddress myIP = server.startWiFi(15000, "ESP_AP", "123456789" );
 
   // FILESYSTEM INIT
   startFilesystem();
@@ -97,7 +97,7 @@ void setup(){
   server.on("/setForm1", HTTP_POST, handleForm1);
   server.on("/setForm2", HTTP_POST, handleForm2);
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
   /*
   * Getting FS info (total and free bytes) is strictly related to
diff --git a/examples/highcharts/highcharts.ino b/examples/highcharts/highcharts.ino
index 117cc75b..3cd4a659 100644
--- a/examples/highcharts/highcharts.ino
+++ b/examples/highcharts/highcharts.ino
@@ -90,7 +90,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be reformatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -107,9 +107,9 @@ void setup() {
   startFilesystem();
 
   // Try to connect to flash stored SSID, start AP if fails after timeout
-  IPAddress myIP = server.startWiFi(15000, "ESP8266_AP", "123456789" );
+  IPAddress myIP = server.startWiFi(15000, "ESP_AP", "123456789" );
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
 
   /*
diff --git a/examples/highcharts/readme.md b/examples/highcharts/readme.md
index ea3dde5e..f96bd235 100644
--- a/examples/highcharts/readme.md
+++ b/examples/highcharts/readme.md
@@ -3,15 +3,15 @@ This example is the most advanced since now.
 
 With the help of WebSocket technology, we can send message from server-to-clients or from client-to-server in a **full-duplex communication channels over a single TCP connection.**
 
-We use the **WebSocket client** to populate asynchronously an _"area chart"_ with real time datas from ESP regarding the **total size of heap memory** and size of **max contiguos block of memory**.
+We use the **WebSocket client** to populate asynchronously an _"area chart"_ with real time datas from ESP regarding the **total size of heap memory** and size of **max contiguous block of memory**.
 
-Off course, on the ESP MCU we will run also a WebSocket server togheter to the web server.
-I've used this library [arduinoWebSockets](https://github.com/Links2004/arduinoWebSockets), so it is needed to compile, but you can choice wich you prefer.
+Off course, on the ESP MCU we will run also a WebSocket server together to the web server.
+I've used this library [arduinoWebSockets](https://github.com/Links2004/arduinoWebSockets), so it is needed to compile, but you can choose which you prefer.
 
 >N.B. 
-This example will run only if an internet connection is avalaible because [Highcharts](https://www.highcharts.com/) Javascript resources is necessary 
+This example will run only if an internet connection is available because [Highcharts](https://www.highcharts.com/) Javascript resources is necessary 
 (to run offline in AP mode, you can download all the used js files, put it in the flash memory (better if gzipped to speed-up page loading) and edit the [index.htm](https://github.com/cotestatnt/esp-fs-webserver/blob/main/examples/highcharts/data/index.htm))
 
-In this example, web page CSS and JavaScript source file is stored in a separeted file inside the folder **/app**
+In this example, web page CSS and JavaScript source file is stored in a separated file inside the folder **/app**
 
 ![image](https://user-images.githubusercontent.com/27758688/123048782-135e4b00-d3ff-11eb-84d5-45e2f164e0f7.png)
diff --git a/examples/remoteOTA/remoteOTA.ino b/examples/remoteOTA/remoteOTA.ino
index f37c3894..94e63af3 100644
--- a/examples/remoteOTA/remoteOTA.ino
+++ b/examples/remoteOTA/remoteOTA.ino
@@ -122,7 +122,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be reformatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -187,7 +187,7 @@ void setup(){
   // FILESYSTEM INIT
   startFilesystem();
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
 
   /*
diff --git a/examples/simpleServer/simpleServer.ino b/examples/simpleServer/simpleServer.ino
index ce3c6be4..8055bc23 100644
--- a/examples/simpleServer/simpleServer.ino
+++ b/examples/simpleServer/simpleServer.ino
@@ -9,7 +9,7 @@ float testFloat = 123.456;
 #ifndef LED_BUILTIN
 #define LED_BUILTIN 2
 #endif
-uint8_t ledPin = LED_BUILTIN;
+const uint8_t ledPin = LED_BUILTIN;
 
 
 // FILESYSTEM INIT
@@ -24,7 +24,7 @@ bool startFilesystem(){
       return true;
   }
   else {
-      Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+      Serial.println("ERROR on mounting filesystem. It will be reformatted!");
       LittleFS.format();
       ESP.restart();
   }
@@ -85,7 +85,7 @@ void setup() {
     server.addOption("Test float variable", testFloat);
     server.setSetupPageTitle("Simple Async ESP FS WebServer");
 
-    // Enable ACE FS file web editor and add FS info callback fucntion
+    // Enable ACE FS file web editor and add FS info callback function
     server.enableFsCodeEditor();
     #ifdef ESP32
     server.setFsInfoCallback(getFsInfo);
diff --git a/examples/simpleServerCaptive/simpleServerCaptive.ino b/examples/simpleServerCaptive/simpleServerCaptive.ino
index 687903f8..878b176c 100644
--- a/examples/simpleServerCaptive/simpleServerCaptive.ino
+++ b/examples/simpleServerCaptive/simpleServerCaptive.ino
@@ -8,7 +8,7 @@ bool captiveRun = false;
 #ifndef LED_BUILTIN
 #define LED_BUILTIN 2
 #endif
-uint8_t ledPin = LED_BUILTIN;
+const int ledPin = LED_BUILTIN;
 
 ////////////////////////////////  Filesystem  /////////////////////////////////////////
 bool startFilesystem() {
@@ -17,7 +17,7 @@ bool startFilesystem() {
     return true;
   }
   else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be formatted!");
     LittleFS.format();
     ESP.restart();
   }
@@ -49,6 +49,8 @@ void handleLed(AsyncWebServerRequest *request) {
   String reply = "LED is now ";
   reply += value ? "ON" : "OFF";
   request->send(200, "text/plain", reply);
+  Serial.print("handleLed:");
+  Serial.println(reply);
 }
 
 
@@ -77,7 +79,7 @@ void setup() {
     // Set a custom /setup page title
     server.setSetupPageTitle("Simple Async FS Captive Web Server");
 
-    // Enable ACE FS file web editor and add FS info callback fucntion
+    // Enable ACE FS file web editor and add FS info callback function
     server.enableFsCodeEditor();
     #ifdef ESP32
     server.setFsInfoCallback(getFsInfo);
diff --git a/examples/withWebSocket/readme.md b/examples/withWebSocket/readme.md
index c4697a17..38fd87fa 100644
--- a/examples/withWebSocket/readme.md
+++ b/examples/withWebSocket/readme.md
@@ -1,10 +1,10 @@
 ## esp-fs-webserver
 This example is a little bit more advanced respect to the [simpleServer](https://github.com/cotestatnt/esp-fs-webserver/tree/main/examples/simpleServer) example.
 
-Basically is the same HTML code like simpleServer, but with the adddition of a **WebSocket client** inside the webpage.
+Basically is the same HTML code like simpleServer, but with the addition of a **WebSocket client** inside the webpage.
 
-Off course, on the ESP MCU we will run also a **WebSocket server** togheter to the web server.
-I've used the library [arduinoWebSockets](https://github.com/Links2004/arduinoWebSockets), so it is needed to compile, but you can choice wich you prefer.
+Off course, on the ESP MCU we will run also a **WebSocket server** together to the web server.
+I've used the library [arduinoWebSockets](https://github.com/Links2004/arduinoWebSockets), so it is needed to compile, but you can choose which you prefer.
 
 With the help of WebSocket technology, we can send message from server-to-clients or from client-to-server in a **full-duplex communication channels over a single TCP connection.**
 
diff --git a/examples/withWebSocket/withWebSocket.ino b/examples/withWebSocket/withWebSocket.ino
index 1940a922..8df531be 100644
--- a/examples/withWebSocket/withWebSocket.ino
+++ b/examples/withWebSocket/withWebSocket.ino
@@ -117,7 +117,7 @@ bool startFilesystem() {
     listDir(LittleFS, "/", 1);
     return true;
   } else {
-    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
+    Serial.println("ERROR on mounting filesystem. It will be reformatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -161,7 +161,7 @@ bool loadApplicationConfig() {
 void setup() {
   pinMode(LED_BUILTIN, OUTPUT);
   pinMode(BOOT_BUTTON, INPUT_PULLUP);
-  
+
   Serial.begin(115200);
   delay(1000);
 
@@ -201,7 +201,7 @@ void setup() {
     request->send(200, "text/html", homepage);
   });
 
-  // Enable ACE FS file web editor and add FS info callback fucntion
+  // Enable ACE FS file web editor and add FS info callback function
   server.enableFsCodeEditor();
   /*
   * Getting FS info (total and free bytes) is strictly related to

From 6719d32259e0717d761fa0cdc82d22618a90507e Mon Sep 17 00:00:00 2001
From: rob040 <rob040@hotmail.nl>
Date: Wed, 10 Jan 2024 12:40:12 +0100
Subject: [PATCH 3/3] Some more typo's corrected

---
 src/AsyncFsWebServer.cpp | 10 +++++-----
 src/AsyncFsWebServer.h   |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/AsyncFsWebServer.cpp b/src/AsyncFsWebServer.cpp
index 33bc354d..92b41426 100644
--- a/src/AsyncFsWebServer.cpp
+++ b/src/AsyncFsWebServer.cpp
@@ -509,13 +509,13 @@ void AsyncFsWebServer::doWifiConnection(AsyncWebServerRequest *request) {
             #if defined(ESP8266)
                 struct station_config stationConf;
                 wifi_station_get_config_default(&stationConf);
-                // Clear previuos configuration
+                // Clear previous configuration
                 memset(&stationConf, 0, sizeof(stationConf));
                 wifi_station_set_config(&stationConf);
             #elif defined(ESP32)
                 wifi_config_t stationConf;
                 esp_wifi_get_config(WIFI_IF_STA, &stationConf);
-                // Clear previuos configuration
+                // Clear previous configuration
                 memset(&stationConf, 0, sizeof(stationConf));
                 esp_wifi_set_config(WIFI_IF_STA, &stationConf);
             #endif
@@ -526,7 +526,7 @@ void AsyncFsWebServer::doWifiConnection(AsyncWebServerRequest *request) {
             #if defined(ESP8266)
                 struct station_config stationConf;
                 wifi_station_get_config_default(&stationConf);
-                // Clear previuos configuration
+                // Clear previous configuration
                 memset(&stationConf, 0, sizeof(stationConf));
                 os_memcpy(&stationConf.ssid, ssid.c_str(), ssid.length());
                 os_memcpy(&stationConf.password, pass.c_str(), pass.length());
@@ -535,7 +535,7 @@ void AsyncFsWebServer::doWifiConnection(AsyncWebServerRequest *request) {
             #elif defined(ESP32)
                 wifi_config_t stationConf;
                 esp_wifi_get_config(WIFI_IF_STA, &stationConf);
-                // Clear previuos configuration
+                // Clear previous configuration
                 memset(&stationConf, 0, sizeof(stationConf));
                 memcpy(&stationConf.sta.ssid, ssid.c_str(), ssid.length());
                 memcpy(&stationConf.sta.password, pass.c_str(), pass.length());
@@ -785,7 +785,7 @@ void AsyncFsWebServer::handleFileEdit(AsyncWebServerRequest *request) {
 
 /*
     Return the list of files in the directory specified by the "dir" query string parameter.
-    Also demonstrates the use of chuncked responses.
+    Also demonstrates the use of chunked responses.
 */
 void AsyncFsWebServer::handleFileList(AsyncWebServerRequest *request)
 {
diff --git a/src/AsyncFsWebServer.h b/src/AsyncFsWebServer.h
index 25b3ad00..da17fc27 100644
--- a/src/AsyncFsWebServer.h
+++ b/src/AsyncFsWebServer.h
@@ -69,7 +69,7 @@ class AsyncFsWebServer : public AsyncWebServer
     void update_first(AsyncWebServerRequest *request, String filename, size_t index, uint8_t *data, size_t len, bool final);
     void update_second(AsyncWebServerRequest *request);
 
-        // edit page, in usefull in some situation, but if you need to provide only a web interface, you can disable
+        // edit page, in useful in some situation, but if you need to provide only a web interface, you can disable
 #ifdef INCLUDE_EDIT_HTM
     void deleteFolderContent(File& root) ;
     void handleFileDelete(AsyncWebServerRequest *request);
@@ -139,7 +139,7 @@ class AsyncFsWebServer : public AsyncWebServer
     }
 
     /*
-      Start webserver aand bind a websocket event handler (optional)
+      Start webserver and bind a websocket event handler (optional)
     */
     bool init(AwsEventHandler wsHandle = nullptr);