From 3c4eacbc654ef9467b675af94993a19f3e2128b5 Mon Sep 17 00:00:00 2001
From: Rushikesh Patange <90703337+RushikeshPatange@users.noreply.github.com>
Date: Thu, 9 May 2024 17:45:08 +0530
Subject: [PATCH] Support: Add support for console baudrate selection (#60)

Co-authored-by: Rushikesh Patange <rushikesh.patange@espressif.com>
---
 index.html  | 56 ++++++++++++++++++++++++++++++++++++++---------------
 js/index.js | 28 +++++++++++++++++++++------
 2 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 07e89f2..0c60834 100644
--- a/index.html
+++ b/index.html
@@ -309,25 +309,49 @@ <h5 class="pt-4 pb-2 lh-lg">Choose your own built firmware image from the local
             <div class="row">
                 <div class="col-xs-12 ">
                     <div class="form">
-                        <div id="baudRateSetting" class="lh-lg">
-                            <span><b>Change the Baudrate to set the serial communication speed:</b></span>
+                        <div id="baudRateSettings" class="lh-lg">
+                            <span><b>Configure the baudrate's for serial communication as per your application:</b></span>
                         </div>
                         <hr/>
-                        <div class="field-container">
-                            <label>
-                                Baudrate
-                            </label>
-                            <div class="field" id="baudSettings">
-                                <select name="baudrates" id="baudrates">
-                                    <option value="921600">921600</option>
-                                    <option value="460800">460800</option>
-                                    <option value="230400">230400</option>
-                                    <option value="115200">115200</option>
-                                </select>
+                        <div class="d-flex justify-content-around">
+                            <div class="field-container">
+                                <label>
+                                    Flashing Baudrate
+                                </label>
+                                <div class="field" id="flashingBaudrateSettings">
+                                    <select name="flashingBaudrateSelect" id="flashingBaudrateSelect">
+                                        <option value="921600">921600</option>
+                                        <option value="460800">460800</option>
+                                        <option value="230400">230400</option>
+                                        <option value="115200">115200</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="field-container">
+                                <label>
+                                    Console Baudrate
+                                </label>
+                                <div class="field" id="consoleBaudrateSettings">
+                                    <select name="consoleBaudrateSelect" id="consoleBaudrateSelect">
+                                        <option value="115200">115200</option>
+                                        <option value="74880">74880</option>
+                                    </select>
+                                </div>
                             </div>
                         </div>
-                        <div id="settingsWarning" style="display:none">
-                            <span><i> ** Settings cannot be changed for a connected device. Please disconnect the device and then change the settings.</i></span>
+                        <div id="settingsWarning" style="display:none" class="mt-3">
+                            <div class="mb-1">
+                                <i>
+                                    ** Flashing baudrate cannot be changed for a connected device. Please disconnect the device and then change the flashing baudrate.
+                                </i>
+                            </div>
+                            <div>
+                                <i>
+                                    ** If you haven't configured the console baudrate in the TOML file as mentioned
+                                    <a href="https://github.com/espressif/esp-launchpad/blob/main/config/config.toml" target="_blank">here</a>
+                                     or are using DIY mode, you can change it in between device resets.
+                                </i>
+                            </div>
                         </div>
                     </div>     
                 </div>
@@ -428,7 +452,7 @@ <h4 class=" mb-4" style="color: #e63f36;"><b>Publish your own firmware apps</b><
 
         <footer class="mt-auto py-3">
             <div class="container text-center">
-                <span class="text-muted">Copyright © 2023 Espressif Systems</span>
+                <span class="text-muted">Copyright © 2024 Espressif Systems</span>
             </div>
         </footer>
         <!-- Third party libraries-->
diff --git a/js/index.js b/js/index.js
index 1dbf157..111e297 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,4 +1,5 @@
-const baudrates = document.getElementById("baudrates");
+const flashingBaudrateSelect = document.getElementById("flashingBaudrateSelect");
+const consoleBaudrateSelect = document.getElementById("consoleBaudrateSelect");
 const connectButton = document.getElementById("connectButton");
 const disconnectButton = document.getElementById("disconnectButton");
 const resetButton = document.getElementById("resetButton");
@@ -66,6 +67,8 @@ let android_app_url = "";
 let setup_payload_logo_url = "";
 let setup_qrcode_payload = "";
 let markdown_payload_url = "";
+let isFlashByDIYMode = false;
+let isFlashByQuickTryMode = false;
 
 disconnectButton.style.display = "none";
 eraseButton.style.display = "none";
@@ -267,7 +270,7 @@ async function connectToDevice() {
     try {
         const loaderOptions = {
             transport,
-            baudrate: parseInt(baudrates.value),
+            baudrate: parseInt(flashingBaudrateSelect.value),
             terminal: espLoaderTerminal
         };
         esploader = new ESPLoader(loaderOptions);
@@ -286,14 +289,14 @@ function postConnectControls() {
         lblConnTo.innerHTML = "<b><span style='color:#17a2b8'>Connected to device: </span>" + chipDesc + "</b>";
         $("#programButton").prop("disabled", false);
         $("#programwrapper").tooltip().attr("data-bs-original-title","This will flash the firmware image on your device");
-        $("#baudrates").prop("disabled", true);
+        $("#flashingBaudrateSelect").prop("disabled", true);
         $("#flashButton").prop("disabled", false);
         $("#flashWrapper").tooltip().attr('data-bs-original-title', "This will download and flash the firmware image on your device");
         $("#consoleStartButton").prop("disabled", false);
         $("#eraseButton").prop("disabled", false);
 
         ensureConnect.style.display = "none";
-        settingsWarning.style.display = "initial";
+        settingsWarning.style.display = "block";
         connectButton.style.display = "none";
         disconnectButton.style.display = "initial";
         eraseButton.style.display = "initial";
@@ -317,6 +320,8 @@ connectButton.onclick = async () => {
 
 
 resetButton.onclick = async () => {
+    let consoleBaudrate;
+
     postFlashClick();
     consoleStartButton.disabled = false;
     $('#closeResetModal').click();
@@ -328,7 +333,12 @@ resetButton.onclick = async () => {
             await device.close();
         }
     }
-    await transport.connect(consoleBaudrateFromToml);
+    if (isFlashByQuickTryMode || isFlashByDIYMode) { // Handle the case of resetting the device after flashing through one of the two modes.
+        consoleBaudrate = isFlashByQuickTryMode && consoleBaudrateFromToml ? consoleBaudrateFromToml : parseInt(consoleBaudrateSelect.value);
+    } else {
+        consoleBaudrate = parseInt(consoleBaudrateSelect.value); // Handle the case of resetting the device without flashing through any mode.
+    }
+    await transport.connect(consoleBaudrate);
     await transport.setDTR(false);
     await new Promise(resolve => setTimeout(resolve, 100));
     await transport.setDTR(true);
@@ -405,6 +415,8 @@ function cleanUp() {
     transport = undefined;
     chip = "default";
     reader = undefined;
+    isFlashByDIYMode = false;
+    isFlashByQuickTryMode = false;
 }
 
 disconnectButton.onclick = async () => {
@@ -419,7 +431,7 @@ disconnectButton.onclick = async () => {
     terminalContainer.style.display = "none";
     term.clear();
     connected = false;
-    $("#baudrates").prop("disabled", false);
+    $("#flashingBaudrateSelect").prop("disabled", false);
     $("#flashButton").prop("disabled", true);
     $("#flashWrapper").tooltip().attr('data-bs-original-title', "Click on 'Connect' button in top Menu");
     $("#programwrapper").tooltip().attr("data-bs-original-title","Click on 'Connect' button in top Menu");
@@ -510,6 +522,8 @@ programButton.onclick = async () => {
         fileArr.push({data:fileObj.data, address:offset});
     }
     clearAppInfoHistory();
+    isFlashByDIYMode = true;
+    isFlashByQuickTryMode = false;
     $('#v-pills-console-tab').click();
     try {
         const flashOptions = {
@@ -697,6 +711,8 @@ flashButton.onclick = async () => {
         cleanUpOldFlashHistory();
         clearAppInfoHistory();
         postFlashClick();
+        isFlashByDIYMode = false;
+        isFlashByQuickTryMode = true;
         await downloadAndFlash(file_server_url + flashFile);
 
         if (markdown_payload_url) {