Added segment picker for firmware selection

Added segment picker to allow users to select and flash different products' firmware
SalamunKawlam · Dec 12, 2024 · 249f886 · 249f886
1 parent e2cc442
commit 249f886
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,4 @@
 
 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.
+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/firmware/hid.bin b/firmware/hid.bin
diff --git a/firmware/hid.json b/firmware/hid.json
@@ -0,0 +1,14 @@
+{
+    "name": "Sentinel HID (RFID To Excel)",
+    "version": "2.10",
+    "new_install_prompt_erase": true,
+    "new_install_improv_wait_time": 0,
+    "builds": [
+      {
+        "chipFamily": "ESP32",
+        "parts": [
+          { "path": "hid.bin", "offset": 0 }
+        ]
+      }
+    ]
+  }
diff --git a/firmware/proximity.bin b/firmware/proximity.bin
diff --git a/firmware/proximity.json b/firmware/proximity.json
@@ -0,0 +1,14 @@
+{
+    "name": "Sentinel RFID & Proximity Scanner",
+    "version": "0.97",
+    "new_install_prompt_erase": true,
+    "new_install_improv_wait_time": 0,
+    "builds": [
+      {
+        "chipFamily": "ESP32",
+        "parts": [
+          { "path": "proximity.bin", "offset": 0 }
+        ]
+      }
+    ]
+  }
diff --git a/firmware/Sentinel_RFID_Scanner.bin → firmware/rfid.bin b/firmware/Sentinel_RFID_Scanner.bin → firmware/rfid.bin
diff --git a/firmware/manifest.json → firmware/rfid.json b/firmware/manifest.json → firmware/rfid.json
@@ -1,13 +1,13 @@
 {
     "name": "Sentinel RFID Scanner",
     "version": "1.40",
-    "new_install_prompt_erase": false,
+    "new_install_prompt_erase": true,
     "new_install_improv_wait_time": 0,
     "builds": [
       {
         "chipFamily": "ESP32",
         "parts": [
-          { "path": "Sentinel_RFID_Scanner.bin", "offset": 0 }
+          { "path": "rfid.bin", "offset": 0 }
         ]
       }
     ]

diff --git a/index.html b/index.html
@@ -38,6 +38,7 @@
             }
 
             .subheading {
+                display: none;
                 margin: 0;
                 text-align: center;
             }
@@ -55,29 +56,102 @@
             .btn:hover {
                 background-color: #196136;
             }
+
+            /* Segment Picker Styles */
+            .segment-picker {
+                display: none;
+                background: #eee;
+                border-radius: 100px;
+                overflow: hidden;
+                padding: 4px;
+                gap: 4px;
+                max-width: 100%;
+            }
+
+            .segment-picker input[type="radio"] {
+                display: none;
+            }
+
+            .segment-picker label {
+                display: flex;
+                border-radius: 100px;
+                flex: 1;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                padding: 12px 8px;
+                font-size: 16px;
+                font-weight: 500;
+                cursor: pointer;
+                background: transparent;
+                color: #555;
+                /* transition: background-color 0.3s, color 0.3s; */
+            }
+
+            .segment-picker input[type="radio"]:checked + label {
+                background: #fff;
+                color: #333;
+                /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); */
+            }
+
+            .segment-picker label:hover {
+                background: #ddd;
+            }
         </style>
     </head>
 
     <body>
-        <div class="main">
+        <div class="main" id="main">
             <h1 class="heading">Sentinel Companion Webflasher</h1>
-            <p class="subheading">Make sure to close anything using your devices com port (e.g. Serial monitor)</p>
+            <p class="subheading" id="subheading">Make sure to close anything using your devices com port (e.g. Serial monitor)</p>
+        </div>
+
+        <div class="segment-picker" id="segment-picker">
+            <input type="radio" id="rfid" name="firmware" value="firmware/rfid.json" checked>
+            <label for="rfid">RFID Scanner</label>
+            <input type="radio" id="proximity" name="firmware" value="firmware/proximity.json">
+            <label for="proximity">Proximity Scanner</label>
+            <input type="radio" id="hid" name="firmware" value="firmware/hid.json">
+            <label for="hid">HID (RFID To Excel)</label>
         </div>
-        
+
         <div class="esp-web-tool">
-            <esp-web-install-button manifest="firmware/manifest.json">
+            <esp-web-install-button id="webInstallButton" manifest="firmware/rfid.json">
                 <button slot="activate" class="btn">Connect</button>
-                <span slot="unsupported" class="browser-error">Ah snap, your browser doesn't work!</span>
-                <span slot="not-allowed" class="http-error">Ah snap, you are not allowed to use this on HTTP!</span>
+                <span slot="unsupported" class="browser-error">Your browser does not support webflashing</span>
+                <span slot="not-allowed" class="http-error">Webflashing is not allowed on HTTP</span>
             </esp-web-install-button>
         </div>
 
         <script>
             window.addEventListener('load', function() {
                 // Wait for the page to load completely, then show the button
-                const button = document.querySelector('.btn');
+                const button        = document.querySelector('.btn');
+                const subheading    = document.getElementById('subheading');
+                const segment       = document.getElementById('segment-picker');
+
                 if (button) {
-                    button.style.display = 'block';
+                    button.style.display        = 'block';
+                    subheading.style.display    = 'block';
+                    segment.style.display       = 'flex';
+                }
+
+                // Change manifest dynamically based on radio input
+                const radios            = document.querySelectorAll('input[name="firmware"]');
+                const webInstallButton  = document.getElementById('webInstallButton');
+
+                radios.forEach(radio => {
+                    radio.addEventListener('change', function() {
+                        if (radio.checked) {
+                            webInstallButton.setAttribute('manifest', radio.value);
+                        }
+                    });
+                });
+
+                const main = document.getElementById('main');
+
+                if (main && segment) {
+                    segment.style.width = `${main.offsetWidth}px`;
                 }
             });
         </script>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		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.
		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.