minimal-launchpad: Enhance user interface for the minimal launchpad (e…

…spressif#52) Co-authored-by: Rushikesh Patange <rushikesh.patange@espressif.com>
RushikeshPatange · Nov 10, 2023 · 34924ac · 34924ac
1 parent c2f6bd5
commit 34924ac
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/minimal-launchpad/index.html b/minimal-launchpad/index.html
@@ -19,7 +19,7 @@
 <body class="d-flex flex-column h-100" style="align-items: center">
     <!-- Modal for reset device starts-->
 
-    <div id="main" class="maincontainer">
+    <div id="main" class="maincontainer container">
         <!-- Responsive navbar-->
         <nav class="navbar navbar-expand-lg">
             <div class="container">
@@ -35,14 +35,14 @@ <h4 class="topic" data-target-tab-panel-id="about">
                 </div>
             </div>
         </div>
-        <div style="margin-top: auto">
+        <div style="position: absolute; top: 50%;">
             <button class="connectButton" id="connectButton" tabindex="0" type="button">Connect Your Device<span
                     class="span-svg"><svg class="svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
                         data-testid="EastIcon">
                         <path fill="#FFFFFF" d="m15 5-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7-7-7z"></path>
                     </svg></span></button>
         </div>
-        <div id="spinner" style="display: none">
+        <div id="spinner" style="display: none; position: absolute; top: 50%;">
             <div>
                 <div class="spinner-grow text-secondary bg-opacity-25" role="status">
                     <span class="sr-only"></span>
@@ -70,9 +70,10 @@ <h4 class="topic" data-target-tab-panel-id="about">
                                 </button>
                             </div>
                         </div>
-                        <div id="terminal"><span class="devicelog">Device logs</span></div>
+                        <div id="terminal"><span class="devicelog">Device Console</span></div>
                         <div id="commandForm" style="display: none;">
-                            <input type="text" autocomplete="off" class="form-control rounded-0 shadow-none" id="commandInput" placeholder="Type Your Command And Press Enter">
+                            <textarea rows="1" class="form-control rounded-0 shadow-none" autocomplete="off" id="commandInput"
+                                placeholder="Type your command and press enter" style="font-size: 14px; font-family: monospace;" disabled></textarea>
                         </div>
                 </div>
             </div>

diff --git a/minimal-launchpad/minimal_ui_index.js b/minimal-launchpad/minimal_ui_index.js
@@ -102,6 +102,9 @@ function MDtoHtml() {
                 terminalContainer.classList.remove("col-12", "fade-in");
                 terminalContainer.classList.add("col-6", "slide-right");
                 utilities.resizeTerminal(fitAddon);
+                setTimeout(() => {
+                    utilities.resizeTerminal(fitAddon);
+                }, 300)
             } else {
                 message.style.display = "none";
             }
@@ -129,7 +132,7 @@ async function buildMinimalLaunchpadUI() {
         xhr.onload = function () {
             if (xhr.status === 404) {
                 connectButton.disabled = true;
-                alertContainer.style.display = 'initial';
+                alertContainer.style.display = 'block';
                 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";
             }
@@ -140,7 +143,7 @@ async function buildMinimalLaunchpadUI() {
         }
     } else {
         connectButton.disabled = true;
-        alertContainer.style.display = 'initial';
+        alertContainer.style.display = 'block';
         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";
@@ -212,18 +215,24 @@ connectButton.onclick = async () => {
         if (chipDesc !== "default") {
             terminalContainer.classList.add("fade-in");
             if (config.portConnectionOptions?.length) {
-                commandForm.style.display = "initial";
+                commandForm.style.display = "block";
             }
-            terminalContainer.style.display = 'initial'
+            terminalContainer.style.display = 'block';
+            setTimeout(() => {
+                utilities.resizeTerminal(fitAddon);
+            }, 300)
             setImagePartsAndOffsetArray();
             await downloadAndFlash();
+            if (config.portConnectionOptions?.length) {
+                commandInput.disabled = false;
+            }
             consoleStartButton.disabled = false;
             MDtoHtml();
             setTimeout(() => {
                 productInfoContainer.classList.add("bounce");
             }, 2500)
         } else {
-            alertContainer.style.display = "initial";
+            alertContainer.style.display = "block";
             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(() => {
@@ -283,10 +292,15 @@ async function sendCommand() {
     let commandToSend;
     let textEncoder = new TextEncoder();
     if (!device.writable.locked) writer = device.writable.getWriter();
-    commandToSend = commandInput.value;
+    const cursorPosition = commandInput.selectionStart;
+    const textBeforeCursor = commandInput.value.substring(0, cursorPosition - 1);
+    const textAfterCursor = commandInput.value.substring(cursorPosition);
+    commandToSend = textBeforeCursor + textAfterCursor;
+    commandToSend = commandToSend.trim();
     commandHistory.unshift(commandToSend);
     historyIndex = -1;
     commandInput.value = "";
+    commandInput.style.height = null;
     commandToSend = commandToSend + "\r\n";
     await writer.write(textEncoder.encode(commandToSend));
     writer.releaseLock();
@@ -299,10 +313,11 @@ function getHistory(direction) {
     } else {
         commandInput.value = "";
     }
+    autoResize();
 }
 
 commandInput.addEventListener("keyup", async function (event) {
-    if (event.code === "Enter") {
+    if (event.code === "Enter" && !event.shiftKey) {
         await sendCommand();
     } else if (event.code === "ArrowUp") {
         getHistory(1);
@@ -311,7 +326,17 @@ commandInput.addEventListener("keyup", async function (event) {
     }
 });
 
+commandInput.addEventListener("input", autoResize);
+
+function autoResize() {
+    commandInput.style.height = "auto";
+    commandInput.style.height = commandInput.scrollHeight + "px";
+}
+
 $(window).resize(function () {
     clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => utilities.resizeTerminal(fitAddon), 300);
+    resizeTimeout = setTimeout(() => {
+        term.resize(utilities.getTerminalColumns(), 23);
+        utilities.resizeTerminal(fitAddon);
+    }, 300);
 });
diff --git a/minimal-launchpad/minimal_ui_styles.css b/minimal-launchpad/minimal_ui_styles.css
@@ -1,18 +1,15 @@
 .maincontainer {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
-  height: 50%;
 }
 
 .terminal {
   padding-left: 5px;
 }
 
-.productinfocontainer,
-.terminalcontainer {
-  max-height: 590px;
+.productinfocontainer {
+  max-height: 90vh;
   overflow-y: auto;
 }