/setup web page fix

cotestatnt · Dec 25, 2023 · 1182d4f · 1182d4f
1 parent ec95e49
commit 1182d4f
Show file tree

Hide file tree

Showing 16 changed files with 1,957 additions and 931 deletions.
diff --git a/examples/customHTML/.vscode/arduino.json b/examples/customHTML/.vscode/arduino.json
@@ -0,0 +1,6 @@
+{
+    "configuration": "JTAGAdapter=default,PSRAM=disabled,FlashMode=qio,FlashSize=4M,LoopCore=1,EventsCore=1,USBMode=hwcdc,CDCOnBoot=default,MSCOnBoot=default,DFUOnBoot=default,UploadMode=default,PartitionScheme=default,CPUFreq=240,UploadSpeed=921600,DebugLevel=none,EraseFlash=none",
+    "board": "esp32:esp32:esp32s3",
+    "port": "COM3",
+    "sketch": "customHTML.ino"
+}
diff --git a/examples/customHTML/.vscode/c_cpp_properties.json b/examples/customHTML/.vscode/c_cpp_properties.json
diff --git a/examples/customHTML/customElements.h b/examples/customHTML/customElements.h
@@ -5,15 +5,18 @@
 * 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(
-<form class=form>
-  <div class=tf-wrapper>
-    <label for=httpmethod class=input-label>Method</label>
-    <select class='select' id='httpmethod'>
-      <option>GET</option>
-      <option>POST</option>
-    </select>
-    <label for=url class=input-label>Endpoint</label>
-    <input type=text placeholder='https://httpbin.org/' id=url value='https://httpbin.org/' />
+<form>
+  <div class="tf-wrapper left-align">
+    <div>
+      <label for=httpmethod class=input-label>Method</label>
+      <select class='select' id='httpmethod'>
+        <option>GET</option>
+        <option>POST</option>
+      </select>
+
+      <label for=url class=input-label>Endpoint</label>
+      <input type=text placeholder='https://httpbin.org/' id=url value='https://httpbin.org/'/>
+    </div>
   </div>
   <br>
   <a id=fetch class='btn'>
@@ -43,17 +46,8 @@ pre{
     min-height: 350px;
     font-size: 85%;
 }
-.select{
-  width: 25%;
-  height:40px;
-  padding-top: 10px;
-  padding-left: 20px;
-  border:1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px 0 rgba(220, 220, 230, 0.5);
-}
-.body{
-  background-color: cadetblue;
+.left-align{
+  align-items: baseline;
 }
 )EOF";
 

diff --git a/examples/customHTML/customHTML.ino b/examples/customHTML/customHTML.ino
@@ -63,21 +63,10 @@ FSWebServer myWebServer(FILESYSTEM, server);
 #include "customElements.h"
 
 ////////////////////////////////  Filesystem  /////////////////////////////////////////
-void startFilesystem() {
+void startFilesystem(){
   // FILESYSTEM INIT
-  if ( FILESYSTEM.begin()) {
-    File root = FILESYSTEM.open("/", "r");
-    File file = root.openNextFile();
-    while (file) {
-      const char* fileName = file.name();
-      size_t fileSize = file.size();
-      Serial.printf("FS File: %s, size: %lu\n", fileName, (long unsigned)fileSize);
-      file = root.openNextFile();
-    }
-    Serial.println();
-  }
-  else {
-    Serial.println(F("ERROR on mounting filesystem. It will be formmatted!"));
+  if ( !FILESYSTEM.begin()){
+    Serial.println("ERROR on mounting filesystem. It will be formmatted!");
     FILESYSTEM.format();
     ESP.restart();
   }
@@ -127,7 +116,7 @@ bool loadOptions() {
   return false;
 }
 
-//   Call this if you need to save parameters from the sketch side
+// Call this if you need to save parameters from the sketch side
 // bool saveOptions() {
 //   if (FILESYSTEM.exists(myWebServer.configFile())) {
 //     File file = FILESYSTEM.open(myWebServer.configFile(), "w");
@@ -208,7 +197,6 @@ void setup() {
     Serial.println(myIP);
     Serial.println(F("Open /setup page to configure optional parameters"));
     Serial.println(F("Open /edit page to view and edit files"));
-    Serial.println(F("Open /update page to upload firmware and filesystem updates\n\n"));
   }
 }
 

diff --git a/setup-ui/data/all.htm b/setup-ui/data/all.htm
diff --git a/setup-ui/data/all.htm.c b/setup-ui/data/all.htm.c
diff --git a/setup-ui/data/all.htm.gz b/setup-ui/data/all.htm.gz
diff --git a/setup-ui/data/app.js b/setup-ui/data/app.js
@@ -1,14 +1,13 @@
-svgLogo ='<svg width=128px height=128px viewBox="0 0 40 40"><path d="M 19.707,7.707 18.293,6.293 8.586,15.998 h 9.999 L 14.293,20.292 12,18 v 6 h 6 L 15.708,21.708 23.413,14 H 13.414 L 19.707,7.707 z M 15.999,0 C 7.164,0.002 0.002,7.164 0,15.999 0.002,24.837 7.164,31.999 15.999,32 24.837,31.998 31.999,24.837 32,15.999 31.999,7.164 24.837,0.002 15.999,0 z m 10.57,25.153 -4.861,-4.862 -1.417,1.417 4.862,4.861 c -2.454,2.127 -5.647,3.424 -9.154,3.43 C 8.267,29.986 2.015,23.733 2,15.999 2.007,12.494 3.304,9.3 5.432,6.847 l 3.861,3.86 1.413,-1.413 -3.86,-3.861 C 9.3,3.304 12.494,2.007 15.999,2 c 7.734,0.015 13.987,6.267 14,13.999 -0.006,3.506 -1.303,6.7 -3.43,9.154 z" /></svg>';
-const svgMenu = '<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>';
-const svgLock =  '<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>';
-const svgUnlock = '<svg height="16pt" viewBox="0 0 512 512"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"/><path d="m80 224c-8.832031 0-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16zm0 0"/></svg>';
-const svgScan = '<path d="M12 12C9.97 12 8.1 12.67 6.6 13.8L4.8 11.4C6.81 9.89 9.3 9 12 9S17.19 9.89 19.2 11.4L18.74 12C18.66 12 18.58 12 18.5 12C17.43 12 16.42 12.26 15.53 12.72C14.45 12.26 13.26 12 12 12M21 9L22.8 6.6C19.79 4.34 16.05 3 12 3S4.21 4.34 1.2 6.6L3 9C5.5 7.12 8.62 6 12 6S18.5 7.12 21 9M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L12.34 20.54C12.13 19.9 12 19.22 12 18.5C12 17.24 12.36 16.08 13 15.08C12.66 15.03 12.33 15 12 15M18 14.5C15.79 14.5 14 16.29 14 18.5S15.79 22.5 18 22.5C19.68 22.5 21.12 21.47 21.71 20H20C19.54 20.61 18.82 21 18 21C16.62 21 15.5 19.88 15.5 18.5S16.62 16 18 16C18.69 16 19.32 16.28 19.77 16.73L18 18.5H22V14.5L20.83 15.67C20.11 14.95 19.11 14.5 18 14.5Z" />';
-const svgConnect = '<path d="M12 6C8.62 6 5.5 7.12 3 9L1.2 6.6C4.21 4.34 7.95 3 12 3S19.79 4.34 22.8 6.6L21 9C18.5 7.12 15.38 6 12 6M16.84 13.41C17.18 13.27 17.55 13.17 17.92 13.1L19.2 11.4C17.19 9.89 14.7 9 12 9S6.81 9.89 4.8 11.4L6.6 13.8C8.1 12.67 9.97 12 12 12C13.78 12 15.44 12.5 16.84 13.41M12 15C10.65 15 9.4 15.45 8.4 16.2L12 21L13.04 19.61C13 19.41 13 19.21 13 19C13 17.66 13.44 16.43 14.19 15.43C13.5 15.16 12.77 15 12 15M23 19L20 16V18H16V20H20V22L23 19Z" />';
+const svgLogo = '<svg fill="brown" height=120px viewBox="0 0 24 24"><path d="M5 3C3.9 3 3 3.9 3 5S2.1 7 1 7V9C2.1 9 3 9.9 3 11S3.9 13 5 13H7V11H5V10C5 8.9 4.1 8 3 8C4.1 8 5 7.1 5 6V5H7V3M11 3C12.1 3 13 3.9 13 5S13.9 7 15 7V9C13.9 9 13 9.9 13 11S12.1 13 11 13H9V11H11V10C11 8.9 11.9 8 13 8C11.9 8 11 7.1 11 6V5H9V3H11M22 6V18C22 19.11 21.11 20 20 20H4C2.9 20 2 19.11 2 18V15H4V18H20V6H17.03V4H20C21.11 4 22 4.89 22 6Z" /></svg>'
+const svgLock =  '<svg height="16pt" viewBox="0 0 24 24"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>';
+const svgUnlock = '<svgheight="16pt" viewBox="0 0 24 24"><path d="M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.89 2 10V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V10C18 8.9 17.11 8 16 8H15V6C15 4.34 16.34 3 18 3C19.66 3 21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17C8.9 17 8 16.11 8 15C8 13.9 8.9 13 10 13Z" /></svg>';
+const svgScan = '<path d="M12 20L8.4 15.2C9.4 14.45 10.65 14 12 14S14.6 14.45 15.6 15.2L12 20M4.8 10.4L6.6 12.8C8.1 11.67 9.97 11 12 11S15.9 11.67 17.4 12.8L19.2 10.4C17.19 8.89 14.7 8 12 8S6.81 8.89 4.8 10.4M12 2C7.95 2 4.21 3.34 1.2 5.6L3 8C5.5 6.12 8.62 5 12 5S18.5 6.12 21 8L22.8 5.6C19.79 3.34 16.05 2 12 2M7 24H9V22H7V24M15 24H17V22H15V24M11 24H13V22H11V24Z" /></svg>';
+const svgConnect = '<path d="M12,6C8.6,6 5.5,7.1 3,9L1.2,6.6C4.2,4.3 8,3 12,3C16,3 19.8,4.3 22.8,6.6L21,9C18.5,7.1 15.4,6 12,6M13,19C13,17.7 13.4,16.4 14.2,15.4C13.5,15.2 12.8,15 12,15C10.7,15 9.4,15.5 8.4,16.2L12,21L13,19.6C13,19.4 13,19.2 13,19M16.8,13.4C17.1,13.3 17.5,13.2 17.9,13.1L19.2,11.4C17.2,9.9 14.7,9 12,9C9.3,9 6.8,9.9 4.8,11.4L6.6,13.8C8.1,12.7 10,12 12,12C13.8,12 15.4,12.5 16.8,13.4M16.5,22.6L17.2,19.8L15,17.9L17.9,17.7L19,15L20.1,17.6L23,17.8L20.8,19.7L21.5,22.5L19,21.1L16.5,22.6Z" /></svg>';
 const svgSave = '<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />';
-const svgRestart = '<path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" />';
+const svgRestart = '<path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" /></svg>';
 const svgEye = '<path d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z" />';
 const svgNoEye = '<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>';
-const svgCloseModal = '<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />';
+const svgMenu = '<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/>';
 
 var options = {};
 var configFile;
@@ -22,8 +21,6 @@ var newEl = function(el) {
 	return document.createElement(el);
 };
 
-
-
 function showHidePassword() {
   var inp = $("password");
   if (inp.type === "password") {
@@ -465,9 +462,8 @@ function handleSubmit() {
 
   let formData = new FormData();
   formData.set('update', fileElement.files[0]);
-  var fsize = fileElement.files[0].size;
   var req = new XMLHttpRequest();
-  req.open('POST', '/update?size=' + fsize);  
+  req.open('POST', '/update?size=' + fileElement.files[0].size);  
   req.onload = function(d) {
     loader.classList.add('hide');
     prg.classList.remove('active');
@@ -486,7 +482,32 @@ function handleSubmit() {
   req.send(formData);
 }
 
-$('update-btn').addEventListener('click', handleSubmit);
+async function uploadFolder(e) {
+  let listing = document.getElementById('listing');
+  for (let file of Array.from(e.target.files)) {
+    let path = file.webkitRelativePath;
+    let item = document.createElement('li');
+    item.textContent = path;
+    listing.appendChild(item);
+
+    // Save each file in the ESP flash
+    var reader = new FileReader();
+    reader.onload = function(event) {
+      // Remove default "data" from path
+      if (path.startsWith("data/"))
+        path = path.replace("data/", "");
+
+      var formData = new FormData();
+      formData.set("data", file, "/" + path);
+
+      // POST data using the Fetch API
+      fetch('/edit', {method: 'POST', body: formData})
+      .then(response => response.text())
+    };
+    reader.readAsText(file);
+  };
+}
+
 
 // Initializes the app.
 $('svg-menu').innerHTML = svgMenu;
@@ -496,9 +517,7 @@ $('svg-scan').innerHTML = svgScan;
 $('svg-connect').innerHTML = svgConnect;
 $('svg-save').innerHTML = svgSave;
 $('svg-restart').innerHTML = svgRestart;
-$('svg-close-modal').innerHTML = svgCloseModal;
-$('img-logo').innerHTML = svgLogo
-$('img-logo').setAttribute('title', 'Click to upload your logo file')
+$('img-logo').innerHTML = svgLogo;
 
 $('hum-btn').addEventListener('click', showMenu);
 $('scan-wifi').addEventListener('click', getWiFiList);
@@ -509,6 +528,12 @@ $('set-wifi').addEventListener('click', switchPage);
 $('set-update').addEventListener('click', switchPage);
 $('about').addEventListener('click', switchPage);
 $('restart').addEventListener('click', restartESP);
+$('picker').addEventListener('change', uploadFolder );
+$('update-btn').addEventListener('click', handleSubmit);
+$('file-input').addEventListener('change', () => {
+  $('fw-label').innerHTML = $('file-input').files.item(0).name +' (' + $('file-input').files.item(0).size + ' bytes)' ;
+  $('fw-label').style.background = 'brown';
+});
 
 window.addEventListener('load', getParameters);