Fix : UI,favicon and flashConfigURL parameter related bugfixes (#34)

Co-authored-by: Rushikesh Patange <rushikesh.patange@espressif.com>
RushikeshPatange · Aug 4, 2023 · 1089cfa · 1089cfa
1 parent 411a6d8
commit 1089cfa
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -430,18 +430,5 @@ <h4 class=" mb-4" style="color: #e63f36;"><b>Publish your own firmware apps</b><
         <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
         <!-- Core theme JS-->
         <script src="js/scripts.js"></script>
-
-        <script>
-            // Safari 3.0+ "[object HTMLElementConstructor]"
-            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
-
-            var isFirefox = typeof InstallTrigger !== 'undefined';
-
-            if(isSafari || isFirefox)
-            {
-                document.getElementById("unsupportedBrowserErr").style.display = "inline";
-                document.getElementById("main").style.display = "none";
-            }
-        </script>
     </body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -26,6 +26,12 @@ import * as esptooljs from "../node_modules/esptool-js/bundle.js";
 const ESPLoader = esptooljs.ESPLoader;
 const Transport = esptooljs.Transport;
 
+if (utilities.isWebUSBSerialSupported()) {
+    document.getElementById("unsupportedBrowserErr").style.display = "inline";
+    document.getElementById("main").style.display = "none";
+    throw new Error('Unsupported Browser');
+}
+
 const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
 
 let term = new Terminal({cols: utilities.getTerminalColumns(mainContainer), rows: 23, fontSize: 14, scrollback: 9999999});

diff --git a/js/utils.js b/js/utils.js
@@ -88,6 +88,21 @@ export function handleFileSelect(evt) {
     reader.readAsBinaryString(file);
 }
 
+export function isWebUSBSerialSupported() {
+    let isSafari =
+        /constructor/i.test(window.HTMLElement) ||
+        (function (p) {
+            return p.toString() === "[object SafariRemoteNotification]";
+        })(
+            !window["safari"] ||
+            (typeof safari !== "undefined" && window["safari"].pushNotification)
+        );
+
+    let isFirefox = typeof InstallTrigger !== "undefined";
+
+    return (isSafari || isFirefox);
+}
+
 // unused functions
 function convertUint8ArrayToBinaryString(u8Array) {
     var i, len = u8Array.length, b_str = "";

diff --git a/minimal-launchpad/index.html b/minimal-launchpad/index.html
@@ -7,6 +7,8 @@
     <meta name="description" content="" />
     <meta name="author" content="" />
     <title>ESP Launchpad</title>
+    <!-- Favicon-->
+    <link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="../css/styles.css" rel="stylesheet" />
     <link href="../css/custom.css" rel="stylesheet" />
@@ -103,25 +105,6 @@ <h4 class="topic" data-target-tab-panel-id="about">
     <script src="../js/jquery.min.js"></script>
     <script src="../js/bootstrap.bundle.min.js"></script>
     <script src="../js/qrcode.min.js"></script>
-    <script>
-        // Safari 3.0+ "[object HTMLElementConstructor]"
-        var isSafari =
-            /constructor/i.test(window.HTMLElement) ||
-            (function (p) {
-                return p.toString() === "[object SafariRemoteNotification]";
-            })(
-                !window["safari"] ||
-                (typeof safari !== "undefined" && window["safari"].pushNotification)
-            );
-
-        var isFirefox = typeof InstallTrigger !== "undefined";
-
-        if (isSafari || isFirefox) {
-            document.getElementById("unsupportedBrowserErr").style.display =
-                "inline";
-            document.getElementById("main").style.display = "none";
-        }
-    </script>
 </body>
 
 </html>
diff --git a/minimal-launchpad/minimal_ui_index.js b/minimal-launchpad/minimal_ui_index.js
@@ -13,6 +13,12 @@ import * as esptooljs from "../node_modules/esptool-js/bundle.js";
 const ESPLoader = esptooljs.ESPLoader;
 const Transport = esptooljs.Transport;
 
+if (utilities.isWebUSBSerialSupported()) {
+    document.getElementById("unsupportedBrowserErr").style.display = "inline";
+    document.getElementById("main").style.display = "none";
+    throw new Error('Unsupported Browser');
+}
+
 let term = new Terminal({ cols: utilities.getTerminalColumns(), rows: 23, fontSize: 14, scrollback: 9999999 });
 let fitAddon = new FitAddon.FitAddon();
 term.loadAddon(fitAddon);
@@ -101,14 +107,28 @@ async function buildMinimalLaunchpadUI() {
     } else {
         tomlFileURL = urlParams.get(parameter);
     }
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', tomlFileURL, true);
-    xhr.send();
-    xhr.onload = function () {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-            config = toml.parse(xhr.responseText);
-            return config;
+    if (tomlFileURL) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', tomlFileURL, true);
+        xhr.send();
+        xhr.onload = function () {
+            if (xhr.status === 404) {
+                connectButton.disabled = true;
+                alertContainer.style.display = 'initial';
+                lblConnTo.innerHTML = `<b style='text-align:center'><span style='color:red;'>Unable to access the TOML file. Please ensure that you have provided the correct TOML file link to the flashConfigURL parameter.</span></b>`;
+                lblConnTo.style.display = "block";
+            }
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                config = toml.parse(xhr.responseText);
+                return config;
+            }
         }
+    } else {
+        connectButton.disabled = true;
+        alertContainer.style.display = 'initial';
+        lblConnTo.innerHTML = `<b><span style='color:red;'>Please provide a TOML link supported by the minimal launchpad in flashConfigURL as shown below</span></b>
+        <br /><code style="color:#664d03">https://espressif.github.io/esp-launchpad/minimal-launchpad/?flashConfigURL=&ltYOUR_TOML_FILE_LINK&gt</code>`;
+        lblConnTo.style.display = "block";
     }
 }
 
@@ -176,17 +196,17 @@ connectButton.onclick = async () => {
             }, 2500)
         } else {
             alertContainer.style.display = "initial";
-            lblConnTo.innerHTML = "<b><span style='color:red'>Unable to detect device. Please ensure the device is not connected in another application</span></b>";
+            lblConnTo.innerHTML = "<b><span style='color:red'>Unable to connect device. Please ensure the device is not connected in another application</span></b>";
             lblConnTo.style.display = "block";
             setTimeout(() => {
                 alertContainer.style.display = "none";
-                connectButton.style.display = "initial";
+                connectButton.style.display = "inline-flex";
                 connected = false;
             }, 5000)
         }
     } catch (error) {
         if (error.message === "Failed to execute 'requestPort' on 'Serial': No port selected by the user.") {
-            connectButton.style.display = "initial";
+            connectButton.style.display = "inline-flex";
         }
     }
 

diff --git a/minimal-launchpad/minimal_ui_styles.css b/minimal-launchpad/minimal_ui_styles.css
@@ -43,11 +43,14 @@
     Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   padding: 6px 16px;
   border-radius: 4px;
-  background-color: rgb(0, 113, 227);
+  background-color: rgb(0, 113, 225);
   width: 350px;
-  color: rgb(255, 255, 255);
+  color: var(--bs-white);
 }
 
+.connectButton:disabled {
+ background: rgba(0, 0, 0, 0.2);
+}
 .span-svg {
   display: inherit;
   margin-right: -4px;