added webflasher code and necessary files

SalamunKawlam · Dec 2, 2024 · 6e9a5ae · 6e9a5ae
1 parent e0eeec2
commit 6e9a5ae
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
-# firmware_webflasher
+# Improv Wi-Fi Demo
+
+This project demonstrates the use of <a href="https://www.improv-wifi.com/">Improv WiFi</a> via Serial communication. By clicking on the `Flash Firmware` button, the firmware of a simple webserver present in this repo will be installed in the ESP32 and the configuration to connect to the WiFi will be started. In case of the firmware is already present, you can change the WiFi settings without having to upload the firmware again.
+
+Open the [Web Flash](https://jnthas.github.io/improv-wifi-demo/) site and click in `Flash Firmware` to install a SimpleWebServer, during the installation or after that you will be able to configure your Wi-fi network.
diff --git a/config-wifi.html b/config-wifi.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Improv Wifi Demo - Config Wifi</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <style>
+        body,h1 {font-family: "Raleway", sans-serif}
+        body, html {height: 100%}
+        .bgimg {
+            background-image: url('bg.jpg');
+
+            min-height: 100%;
+            background-position: center;
+            background-size: cover;
+        }
+        img {
+            filter: grayscale(100%);
+        }
+    </style>
+    <script type="module" src="https://unpkg.com/[email protected]/dist/web/serial-launch-button.js?module"></script>
+</head>
+<body>
+
+<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
+  <div class="w3-display-topleft w3-padding-large w3-medium">
+    <a class="w3-button w3-transparent w3-border" href="https://github.com/jnthas/improv-wifi-demo">@JNTHAS</a>
+  </div>
+  <div class="w3-display-middle">
+    <h1 class="w3-jumbo w3-animate-top">ESP32 Improv Wi-fi Demo</h1>
+    <h4 class="w3-center">Via Serial</h4>
+
+    <div class="w3-center w3-padding-24">
+        <p>Use the following button to just configure wifi without flashing</p>
+        <improv-wifi-serial-launch-button>
+          <button slot='activate' class="w3-button w3-blue w3-round-xxlarge w3-padding-large">Configure Wifi</button>
+          <span slot='unsupported'>Your browser does not support provisioning.</span>
+        </improv-wifi-serial-launch-button>
+
+    </div>
+
+    <hr class="w3-border-grey" style="margin:auto;width:40%">
+    <p class="w3-large w3-center">Powered by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a></p>
+
+  </div>
+  <div class="w3-display-bottomleft w3-padding-large">
+    Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/firmware/app.bin b/firmware/app.bin
diff --git a/firmware/manifest.json b/firmware/manifest.json
@@ -0,0 +1,13 @@
+{
+    "name": "Sentinel RFID Scanner",
+    "version": "1.40",
+    "new_install_prompt_erase": true,
+    "builds": [
+      {
+        "chipFamily": "ESP32",
+        "parts": [
+          { "path": "app.bin", "offset": 0 }
+        ]
+      }
+    ]
+  }
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Improv Wi-Fi Demo</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+    <style>
+        body,h1 {font-family: "Raleway", sans-serif}
+        body, html {height: 100%}
+        .bgimg {
+        background-image: url('bg.jpg');
+        min-height: 100%;
+        background-position: center;
+        background-size: cover;
+        }
+    </style>
+    <script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js?module"></script>
+</head>
+<body>
+
+<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
+  <div class="w3-display-topleft w3-padding-large w3-medium">
+    <a class="w3-button w3-transparent w3-border" href="https://github.com/jnthas/improv-wifi-demo">@JNTHAS</a>
+  </div>
+  <div class="w3-display-middle">
+    <h1 class="w3-center w3-jumbo w3-animate-top">ESP32 Improv Wi-Fi Demo</h1>
+      <p class="w3-center">This project demonstrates the use of <a href="https://www.improv-wifi.com/">Improv WiFi</a> via Serial communication. By clicking on the button below, the firmware of a <a href="https://github.com/jnthas/improv-wifi-demo">simple webserver</a> will be installed in the ESP32 and the configuration to connect to the WiFi will be started.</p>
+
+    <div class="w3-center w3-padding-24">
+        <esp-web-install-button manifest="firmware/manifest.json">
+            <button slot="activate" class="w3-button w3-yellow w3-round-xxlarge w3-padding-large">Flash Firmware</button>
+            <span slot="unsupported">Ah snap, your browser doesn't work!</span>
+            <span slot="not-allowed">Ah snap, you are not allowed to use this on HTTP!</span>
+        </esp-web-install-button>
+    </div>
+
+    <hr class="w3-border-grey" style="margin:auto;width:40%">
+    <p class="w3-large w3-center">Powered by <a href="https://esphome.github.io/esp-web-tools/">ESP Web Tools</a></p>
+
+  </div>
+  <div class="w3-display-bottomleft w3-padding-large">
+    Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
+  </div>
+</div>
+
+</body>
+</html>