Update installer2.html

alf45tar · Aug 17, 2024 · e78145f · e78145f
1 parent 87fe243
commit e78145f
Showing 1 changed file with 89 additions and 11 deletions.
diff --git a/installer2.html b/installer2.html
@@ -1,17 +1,87 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Firmware Dropdown Generator</title>
-</head>
-<body>
+<html lang="en" class="">
+  <head>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
+    <title>Install PedalinoMini™</title>
+    <style>
+      div,fieldset,input,select{padding:5px;font-size:1em;}
+      fieldset{background:#4f4f4f;}
+      p{margin:0.5em 0;}
+      input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background:#dddddd;color:#000000;}
+      input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}
+      input[type=range]{width:99%;}
+      select{width:100%;background:#dddddd;color:#000000;}
+      textarea{resize:vertical;width:98%;height:318px;padding:5px;overflow:auto;background:#1f1f1f;color:#65c115;}
+      body{text-align:center;font-family:verdana,sans-serif;background:#252525;}
+      td{padding:0px;}
+      button{border:0;border-radius:0.3rem;background:#1fa3ec;color:#faffff;line-height:2.4rem;font-size:1.2rem;width:100%;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;}
+      button:hover{background:#0e70a4;}
+      .bred{background:#d43535;}
+      .bred:hover{background:#931f1f;}
+      .bgrn{background:#47c266;}
+      .bgrn:hover{background:#5aaf6f;}
+      a{color:#1fa3ec;text-decoration:none;}
+      .p{float:left;text-align:left;}
+      .q{float:right;text-align:right;}
+      .r{border-radius:0.3em;padding:2px;margin:6px 2px;}
+      .pick-variant{margin-bottom:16px;}
+    </style>
+    <script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"></script>
+    <script type="module" src="https://www.improv-wifi.com/sdk-js/launch-button.js"></script>
+  </head>
+  <body>
+    <div style='display:inline-block;color:#eaeaea;min-width:340px;'>
+
+    <h1>PedalinoMini™ Installer</h1>
+
+    <div class="pick-variant">
+      <ol style='text-align:left'>
+        <li>Connect the ESP device to your computer</br>using USB or serial-to-USB adapter</li></br>
+        <li>Select the firmware variant suitable for</br>your device</li></br>
+        <li>Hit "Connect" and select the correct port</br>or find help if <a href="https://tasmota.github.io/docs/Getting-Started/" target='_blank' style='color:#aaa;'>no device found</a></li>
+      </ol>
+      </br>
 
 <select id="firmware-select">
     <!-- Options will be dynamically populated here -->
 </select>
-
-<script>
+</br></br>
+      <p>
+        <esp-web-install-button id="inst">
+          <button slot='activate'>Connect via USB</button>
+          <i slot="unsupported">
+            Your browser does not support Web Serial.</br>Open this page in Google Chrome or</br>Microsoft Edge instead
+            <span class="not-supported-i hidden">(but not on your iOS device)</span>.
+          </i>
+        </esp-web-install-button>
+       </p>
+       <p>or</p>
+       <p>
+        <improv-wifi-launch-button>
+          <button slot='activate'>Connect via Bluetooth LE</button>
+          <i slot="unsupported">
+            Your browser does not support Web Bluetooth.</br>Visit this page with Google Chrome or<br>Microsoft Edge
+            <span class="not-supported-i hidden">(but not on your iOS device)</span>.
+          </i>
+        </improv-wifi-launch-button>
+      </p>
+      <p>Events:</p>
+      <pre id="events"></pre>
+      <script>
+        document.querySelectorAll("improv-wifi-launch-button").forEach((button) =>
+          button.addEventListener("state-changed", (ev) => {
+            document.querySelector("pre").innerText +=
+              JSON.stringify(ev.detail) + "\n";
+          })
+        );
+      </script>
+    </div>
+    <div style='text-align:right;font-size:11px;'>
+      <hr/>
+      <a href="https://esphome.github.io/esp-web-tools/" target='_blank' style='color:#aaa;'>PedalinoMini™ Installer powered by ESP Web Tools</a>
+    </div>
+    <script>
     const GITHUB_REPO = "alf45tar/PedalinoMini";
     const GITHUB_API_URL = `https://github.com/gitapi/repos/${GITHUB_REPO}/git/refs/tags`;
 
@@ -75,7 +145,15 @@
     }
 
     generateDropdown();
-</script>
+    </script>
+    <script>
+      const selectEl = document.querySelector(".pick-variant select");
+      const installEl = document.querySelector("esp-web-install-button");
+      installEl.manifest = selectEl.value;
+      selectEl.addEventListener("change", () => {
+        installEl.manifest = selectEl.value;
+      });
 
-</body>
+    </script>
+  </body>
 </html>