- optimize UI design

- implement baudrate auto update when port opened and baudrate selector changed
- implement port auto change when port opened and port selector changed

src/base.js

@@ -94,9 +94,9 @@ ipcRenderer.on("main-cmd", (event, arg) => {
       document.getElementById("port-switch").click();
       break;
     case "ClearLog&SwitchPort": {
-      let switcher = document.getElementById("port-switch");
-      switcher.click();
-      if (true == switcher.checked) {
+      let portSwitch = document.getElementById("port-switch");
+      portSwitch.click();
+      if (true == portSwitch.checked) {
         clipboard.writeText(editor.getModel().getValue());
         document.getElementById("clear-btn").click();
       }
@@ -576,50 +576,41 @@ document.getElementById("bar-color-tail").oninput = (e) => {
 };
 
 document.getElementById("issue").onclick = (e) => {
-  console.log("licence click", e);
   e.preventDefault();
   shell.openExternal(e.target.href);
 };
 
 document.getElementById("introduction").onclick = (e) => {
-  console.log("licence click", e);
   e.preventDefault();
   shell.openExternal(e.target.href);
 };
 
 document.getElementById("comnglang").onclick = (e) => {
-  console.log("licence click", e);
   e.preventDefault();
   shell.openExternal(e.target.href);
 };
 
 document.getElementById("baud-select").onchange = (e) => {
-  configUpdate("baudIndex", e.target.selectedIndex);
-};
+  let ele = e.target;
 
-// document.getElementById("path-input").addEventListener(
-//   "click",
-//   e => {
-//     console.log("path select add event");
-//     if (e.isTrusted === false) return;
-//     console.log("path x");
-//     e.stopPropagation();
-//     // portUpdate();
-//     setTimeout(() => {
-//       try {
-//         let evt = document.createEvent("Event");
-//         evt.initEvent("click", true, true);
-//         document.getElementById("path-select").dispatchEvent(evt);
-//       } catch (e) {
-//         console.error(e);
-//       }
-//     }, 5000);
-//   },
-//   true
-// );
+  configUpdate("baudIndex", ele.selectedIndex);
+  if (port === undefined || port.isOpen === false) return;
+
+  let baudRate = parseInt(ele.options[ele.selectedIndex].text);
+  if (isNaN(baudRate) === true) baudRate = 115200;
+  port.update({ baudRate: baudRate }, (e) => {
+    if (e !== null) console.error(e);
+  });
+};
 
 document.getElementById("path-select").onchange = (e) => {
   configUpdate("pathIndex", e.target.selectedIndex);
+  if (port === undefined || port.isOpen === false) return;
+
+  port.close();
+  setTimeout(() => {
+    document.getElementById("port-switch").click();
+  }, 400);
 };
 
 document.getElementById("refresh-btn").onclick = portUpdate;

src/index.css

@@ -298,19 +298,13 @@ input {
 }
 
 #refresh-btn {
-  transform: scale(0.6);
+  transform: scale(0.62);
   transform-origin: left;
-  line-height: 24px;
 }
 
 #downward-btn {
-  transform: scale(0.4);
+  transform: scale(0.62);
   transform-origin: left;
-  line-height: 24px;
-}
-
-#clear-btn {
-  line-height: 24px;
 }
 
 #baud-input,

src/index.html

@@ -445,19 +445,19 @@
         </div>
 
         <div class="col s1">
-          <a class="waves-effect btn-floating" id="refresh-btn"
+          <a class="waves-effect btn-floating btn-small" id="refresh-btn"
             ><i class="material-icons">refresh</i></a
           >
         </div>
 
-        <div class="col s4">
-          <div class="col s3">
-            <a class="waves-effect btn-floating" id="downward-btn"
-              ><i class="material-icons">arrow_downward</i></a
+        <div class="col s1">
+          <a class="waves-effect btn-floating btn-small" id="downward-btn"
+            ><i class="material-icons">trending_down</i></a
           >
         </div>
 
         <div class="col s3">
+          <div class="col s6">
             <a class="waves-effect btn-floating btn-small red" id="clear-btn"
               ><i class="material-icons">delete</i></a
             >

src/serialport.js

@@ -127,7 +127,7 @@ function serialGetOptions() {
 }
 
 function toast(text) {
-  mcss.toast({ html: text, displayLength: 2000 });
+  mcss.toast({ html: text, displayLength: 1000 });
   // alert(text)
 }