Merge pull request #1 from cotestatnt/master

update from upstream repo

built-in-webpages/readme.md

@@ -1,5 +1,13 @@
 If you want customize **/setup** webpage (headers, logo etc etc):
 * edit the source files as your needs (setup.htm, app.js, style.css)
-* open a terminal in *build_setup* folder and run `npm i` to install all nodejs modules needed
+* open a terminal in ***build_setup*** folder and run `npm i` to install all nodejs modules needed
 * run `node minify.js`
-* overwrite the content of *setup_htm.h* in src folder with the new generated file
+* overwrite the content of `setup_htm.h` inside `/src` folder with the new generated file
+
+
+#
+As alternative on Windows system, is possible to use the tool [SEGGER Bin2C](https://www.segger.com/free-utilities/bin2c/).
+
+`all.htm.gz` file need to be prepared manually (for example you could use online tools for minify CSS, JavaScript and HTML)
+
+This Bin2C program will create a file named `all.htm.c`, simply copy & past the content and overwrite `setup_htm.h` file

built-in-webpages/setup/build_setup/readme.md

@@ -1,5 +1,13 @@
 If you want customize **/setup** webpage (headers, logo etc etc):
 * edit the source files as your needs (setup.htm, app.js, style.css)
-* open a terminal in *build_setup* folder and run `npm i` to install all nodejs modules needed
+* open a terminal in ***build_setup*** folder and run `npm i` to install all nodejs modules needed
 * run `node minify.js`
-* overwrite the content of *setup_htm.h* in src folder with the new generated file
+* overwrite the content of `setup_htm.h` inside `/src` folder with the new generated file
+
+
+#
+As alternative on Windows system, is possible to use the tool [SEGGER Bin2C](https://www.segger.com/free-utilities/bin2c/).
+
+`all.htm.gz` file need to be prepared manually (for example you could use online tools for minify CSS, JavaScript and HTML)
+
+This Bin2C program will create a file named `all.htm.c`, simply copy & past the content and overwrite `setup_htm.h` file

built-in-webpages/setup/build_setup/stringConverter.js

@@ -36,10 +36,11 @@ module.exports = {
 
     var dataLength = data.byteLength;
     console.log('actualDataLength: ' + dataLength);
-
-    var resultString = '#define SETUP_HTML_SIZE ';
-    resultString += dataLength + '\n'
-    resultString += 'static const unsigned char SETUP_HTML[] PROGMEM = {\n  ';
+
+	// Changed array name to match SEGGER Bin2C output
+    var resultString = 'static const unsigned char _acall_htm[';
+	resultString += dataLength;
+	resultString += ' + 1] = {\n  ';
     resultString += stringConverter.convert(dataLength, 1, true, 16, data);
     resultString += '\n};';
     return resultString;

built-in-webpages/setup/setup.htm

@@ -47,18 +47,37 @@ <h2 class=heading-2>Connect to WiFi</h2>
                       <input type=password placeholder="Enter your WiFi password"
                         id=password autocomplete=current-password data-ms-member="password">
                       <span class=show-hide-wrap id=show-hide-password>
-                        <a class="show-hide w--current" id=show-pass>
+                        <a class="show-hide hide" id=show-pass>
                             <div class=svg><svg class=svg-e id=svg-eye viewBox="0 0 24 24"></svg></div>
                         </a>
                         <a class="show-hide" id=hide-pass>
                             <div class=svg><svg class=svg-e id=svg-no-eye viewBox="0 0 24 24"></svg></div>
                         </a>
                       </span>  
                     </div>
-
-
-
                 </div>
+                <div class="tf-wrapper">
+                  <label class="input-label toggle">
+                    <input id=no-dhcp type=checkbox class="t-check">
+                    <div class=toggle-switch></div>
+                    <span class=toggle-label>Manual configuration (no DHCP)</span>
+                  </label>
+                </div>
+                <div class=hide id=conf-wifi> 
+                  <div class="tf-wrapper">
+                      <label for=ip class=input-label>IP Address</label>
+                      <input type=text placeholder="IP Address" id=ip value=192.168.0.10>
+                  </div>
+                  <div class="tf-wrapper">
+                      <label for=gateway class=input-label>Gateway</label>
+                      <input type=text placeholder="Gateway address" id=gateway value=192.168.0.1>
+                  </div>
+                  <div class="tf-wrapper">
+                      <label for=subnet class=input-label>Subnet</label>
+                      <input type=text placeholder="Subnet mask" id=subnet value="255.255.255.0">
+                  </div>
+                </div>
+
                 <div class=tf-wrapper>
                   <label class="lbl-wifi toggle">
                     <input id=persistent type=checkbox class="t-check" checked>
@@ -77,6 +96,10 @@ <h2 class=heading-2>Connect to WiFi</h2>
                     <div class=svg><svg id=svg-connect fill=currentColor viewBox="0 0 24 24"></svg></div>
                     <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>
+                    <span>Save configuration</span>
+                </a>
             </div>
         </div>
 

built-in-webpages/setup/style.css

@@ -12,7 +12,7 @@ input[type='checkbox']{box-sizing:border-box;padding:0;}
 input[type='text'], input[type='number'], input[type='password'], select {
   height:40px;
   width:90%;
-  padding: 0px 0 0 20px;
+  padding: 0 0 0 20px;
   border:1px solid #ccc;
   border-radius: 6px;
   font-size: 16px;
@@ -55,12 +55,12 @@ select {width:92.5%}
 
 .progress-wrap {text-align: center; position: relative; width: 60%; height: 25px; margin: 20px auto;background: #9e9e9e7d;font-size: 20px;transition: all 0.4s ease;}
 .progress-wrap:not(.active) {cursor: pointer;background:#9e9e9e00}
-.progress-wrap .progress {width: 0%;z-index: 5;	background: #9e9e9ea1;opacity: 0;	transition: all 0.3s ease;}
+.progress-wrap .progress {width: 0;z-index: 5;	background: #9e9e9ea1;opacity: 0;	transition: all 0.3s ease;}
 .progress-wrap.active .progress {	opacity: 1;	animation: progress-anim 10s ease 0s;}
 .progress-wrap[data-progress-style='fill-back'] .progress {position: absolute;left: 0;top: 0;	right: 0;	bottom: 0;}
 .d-modal{
-  border-radius: 10px; border-style: solid;border-width: 1px;border-color: #3333336e;background-color: hsl(199.53deg 18.3% 46.08% / 90%);
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);flex-direction: column;
+  width: 70%; border-radius: 10px; border-style: solid;border-width: 1px;border-color: #3333336e;background-color: hsl(199.53deg 18.3% 46.08% / 90%);
+  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);flex-direction: column;
 }
 .d-modal-title{color:#111827;padding:1.5em;position:relative;width:calc(100% - 4.5em);}
 .d-modal-content{border-top:1px solid #e0e0e0;padding:1.5em;overflow:auto;}
@@ -70,7 +70,7 @@ select {width:92.5%}
 .topnav a.active{background-color:#56c080;color:white;}
 .topnav .icon{display:none;}
 .logo{width: 100%;}
-.lbl-wifi {text-align: center;}
+.lbl-wifi {align-self: flex-end;}
 .table{width:90%;margin:auto;border-collapse:collapse;border-spacing:0;}
 .svg{display:flex;width:20px;margin-right:10px;}
 .svg-e{margin-top: 5px;}
@@ -102,8 +102,8 @@ select {width:92.5%}
 .btn-bar{display:flex;padding:20px;justify-content:center;flex-wrap:wrap;grid-column-gap:30px;grid-row-gap:20px; order:998;}
 .tf-wrapper{display:flex;margin-bottom:10px;flex-direction:column;align-items:center;}
 .heading{margin-right:10px;margin-left:10px;}
-.hide,.show-hide.w--current{display:none;}
-.toggle{cursor: pointer;display: block; padding: 4px; width: fit-content; margin: 0px 0px 18px -10px;}
+.hide{display:none;}
+.toggle{cursor: pointer;display: block; padding: 4px; width: fit-content; margin: 0 0 18px -10px;}
 .toggle-label{margin: 0 20px 0 20px;position: relative;top: 2px;}
 .toggle-switch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:32px;position:relative;vertical-align:middle;transition:background .25s;}
 .toggle-switch:before,.toggle-switch:after{content:"";}
@@ -119,7 +119,7 @@ select {width:92.5%}
 .firmware{display: flex;flex-direction: column;align-items: center;}
 .fw-upload {display: inline-block;padding: 12px 20px;cursor: pointer;border-radius: 5px;margin-bottom: 20px;background: dimgray;color: #fff;}
 .fw-upload:hover {filter: brightness(85%);}
-.btn, .submit { min-width: 30%; }
+.btn, .submit { min-width: 25%; }
 
 #about {color: lightgray}
 

examples/customHTML/.vscode/arduino.json

@@ -1,4 +1,6 @@
 {
-    "board": "esp32:esp32:esp32s3",
-    "port": "COM3"
+    "board": "esp8266:esp8266:d1_mini",
+    "port": "COM16",
+    "sketch": "customHTML.ino",
+    "configuration": "xtal=80,vt=flash,exception=disabled,stacksmash=disabled,ssl=all,mmu=3232,non32xfer=fast,eesz=4M2M,ip=lm2f,dbg=Disabled,lvl=None____,wipe=none,baud=921600"
 }