esp32tool 1.2.0 → 1.3.0

package/index.html

@@ -83,6 +83,20 @@
         <label for="baudRate">Baud</label>
         <select id="baudRate"></select>
         
+        <label for="advanced">Advanced</label>
+        <div class="onoffswitch">
+          <input
+            type="checkbox"
+            name="advanced"
+            class="onoffswitch-checkbox"
+            id="advanced"
+          />
+          <label class="onoffswitch-label" for="advanced">
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+          </label>
+        </div>
+        
         <label for="showlog">Show Log</label>
         <div class="onoffswitch">
           <input
@@ -98,47 +112,72 @@
         </div>
 
         <span class="log-controls">
-          <label for="autoscroll">Autoscroll</label>
-          <div class="onoffswitch">
-            <input
-              type="checkbox"
-              name="autoscroll"
-              class="onoffswitch-checkbox"
-              id="autoscroll"
-            />
-            <label class="onoffswitch-label" for="autoscroll">
-              <span class="onoffswitch-inner"></span>
-              <span class="onoffswitch-switch"></span>
-            </label>
-          </div>
           <button id="butClear" type="button" class="small-btn">
             Clear
           </button>
         </span>
 
-        <label for="debugmode">Debug</label>
+        <label for="darkmode">Dark</label>
         <div class="onoffswitch">
           <input
             type="checkbox"
-            name="debugmode"
+            name="darkmode"
             class="onoffswitch-checkbox"
-            id="debugmode"
+            id="darkmode"
           />
-          <label class="onoffswitch-label" for="debugmode">
+          <label class="onoffswitch-label" for="darkmode">
             <span class="onoffswitch-inner"></span>
             <span class="onoffswitch-switch"></span>
           </label>
         </div>
-
-        <label for="darkmode">Dark</label>
+      </div>
+      
+      <div class="header-content advanced-row" style="display: none;">
+        <label for="chunkSize">Chunk</label>
+        <select id="chunkSize"></select>
+        <label for="blockSize">Block</label>
+        <select id="blockSize"></select>
+        <label for="maxInFlight">MaxInFlight</label>
+        <select id="maxInFlight"></select>
+        
+        <label for="autoscroll">Autoscroll</label>
         <div class="onoffswitch">
           <input
             type="checkbox"
-            name="darkmode"
+            name="autoscroll"
             class="onoffswitch-checkbox"
-            id="darkmode"
+            id="autoscroll"
+            checked
           />
-          <label class="onoffswitch-label" for="darkmode">
+          <label class="onoffswitch-label" for="autoscroll">
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+          </label>
+        </div>
+        
+        <label for="console">Console</label>
+        <div class="onoffswitch">
+          <input
+            type="checkbox"
+            name="console"
+            class="onoffswitch-checkbox"
+            id="console"
+          />
+          <label class="onoffswitch-label" for="console">
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+          </label>
+        </div>
+        
+        <label for="debugmode">Debug</label>
+        <div class="onoffswitch">
+          <input
+            type="checkbox"
+            name="debugmode"
+            class="onoffswitch-checkbox"
+            id="debugmode"
+          />
+          <label class="onoffswitch-label" for="debugmode">
             <span class="onoffswitch-inner"></span>
             <span class="onoffswitch-switch"></span>
           </label>
@@ -151,6 +190,7 @@
         Make sure you're running Chrome 89 or later (Desktop) or Chrome 61+ (Android with USB OTG).
       </div>
       <div id="app">
+        <div id="console-container" class="console-container hidden"></div>
         <div id="commands">
           <div class="upload">
             <label

package/js/console.js

@@ -0,0 +1,269 @@
+import { ColoredConsole, coloredConsoleStyles } from "./util/console-color.js";
+import { LineBreakTransformer } from "./util/line-break-transformer.js";
+
+export class ESP32ToolConsole {
+  constructor(port, containerElement, allowInput = true) {
+    this.port = port;
+    this.containerElement = containerElement;
+    this.allowInput = allowInput;
+    this.console = null;
+    this.cancelConnection = null;
+  }
+
+  logs() {
+    return this.console?.logs() || "";
+  }
+
+  async init() {
+    // Create console HTML
+    this.containerElement.innerHTML = `
+      <style>
+        .esp32tool-console-wrapper {
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          line-height: 1.45;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          border: 1px solid #333;
+          border-radius: 4px;
+        }
+        .esp32tool-console-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 12px;
+          background-color: #2a2a2a;
+          border-bottom: 1px solid #333;
+        }
+        .esp32tool-console-header h3 {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 600;
+          order: 2;
+        }
+        .esp32tool-console-controls {
+          display: flex;
+          gap: 8px;
+          order: 1;
+        }
+        .esp32tool-console-controls button {
+          padding: 4px 12px;
+          font-size: 12px;
+          background-color: #444;
+          color: #ddd;
+          border: 1px solid #555;
+          border-radius: 3px;
+          cursor: pointer;
+        }
+        .esp32tool-console-controls button:hover {
+          background-color: #555;
+        }
+        .esp32tool-console-form {
+          display: flex;
+          align-items: center;
+          padding: 0 8px 0 16px;
+          background-color: #1c1c1c;
+          border-top: 1px solid #333;
+        }
+        .esp32tool-console-input {
+          flex: 1;
+          padding: 8px;
+          margin: 4px 8px;
+          border: 0;
+          outline: none;
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          font-size: 12px;
+        }
+        ${coloredConsoleStyles}
+        .esp32tool-console-wrapper .log {
+          flex: 1;
+          margin: 0;
+          border-radius: 0;
+        }
+      </style>
+      <div class="esp32tool-console-wrapper">
+        <div class="esp32tool-console-header">
+          <div class="esp32tool-console-controls">
+            <button id="console-clear-btn">Clear</button>
+            <button id="console-reset-btn">Reset Device</button>
+            <button id="console-close-btn">Close Console</button>
+          </div>
+          <h3>ESP Console</h3>
+        </div>
+        <div class="log"></div>
+        ${
+          this.allowInput
+            ? `<form class="esp32tool-console-form">
+                  <input class="esp32tool-console-input" autofocus placeholder="Type command and press Enter...">
+                </form>`
+            : ""
+        }
+      </div>
+    `;
+
+    this.console = new ColoredConsole(
+      this.containerElement.querySelector(".log")
+    );
+
+    // Setup event listeners
+    const clearBtn = this.containerElement.querySelector("#console-clear-btn");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => this.clear());
+    }
+
+    const resetBtn = this.containerElement.querySelector("#console-reset-btn");
+    if (resetBtn) {
+      resetBtn.addEventListener("click", () => this.reset());
+    }
+
+    const closeBtn = this.containerElement.querySelector("#console-close-btn");
+    if (closeBtn) {
+      closeBtn.addEventListener("click", () => {
+        // Dispatch close event to parent
+        this.containerElement.dispatchEvent(
+          new CustomEvent("console-close", { bubbles: true })
+        );
+      });
+    }
+
+    if (this.allowInput) {
+      const input = this.containerElement.querySelector(".esp32tool-console-input");
+
+      this.containerElement.addEventListener("click", () => {
+        // Only focus input if user didn't select some text
+        if (getSelection()?.toString() === "") {
+          input.focus();
+        }
+      });
+
+      const form = this.containerElement.querySelector("form");
+      if (form) {
+        form.addEventListener("submit", (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        });
+      }
+
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        }
+      });
+    }
+
+    // Start connection
+    const abortController = new AbortController();
+    const connection = this._connect(abortController.signal);
+    this.cancelConnection = () => {
+      abortController.abort();
+      return connection;
+    };
+  }
+
+  async _connect(abortSignal) {
+    console.log("Starting console read loop");
+
+    // Check if port.readable is available
+    if (!this.port.readable) {
+      this.console.addLine("");
+      this.console.addLine("");
+      this.console.addLine(
+        `Terminal disconnected: Port readable stream not available`
+      );
+      console.error(
+        "Port readable stream not available - port may need to be reopened at correct baudrate"
+      );
+      return;
+    }
+
+    try {
+      await this.port.readable
+        .pipeThrough(new TextDecoderStream(), {
+          signal: abortSignal,
+        })
+        .pipeThrough(new TransformStream(new LineBreakTransformer()))
+        .pipeTo(
+          new WritableStream({
+            write: (chunk) => {
+              const cleaned = chunk.replace(/\r\n$/, "\n");
+              this.console.addLine(cleaned);
+            },
+          })
+        );
+      if (!abortSignal.aborted) {
+        this.console.addLine("");
+        this.console.addLine("");
+        this.console.addLine("Terminal disconnected");
+      }
+    } catch (e) {
+      // Only log disconnect errors if the abort was NOT intentional
+      if (!abortSignal.aborted && !(e instanceof DOMException && e.name === 'AbortError')) {
+        this.console.addLine("");
+        this.console.addLine("");
+        this.console.addLine(`Terminal disconnected: ${e}`);
+      }
+    } finally {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      console.log("Finished console read loop");
+    }
+  }
+
+  async _sendCommand() {
+    const input = this.containerElement.querySelector(".esp32tool-console-input");
+    const command = input.value;
+    if (!this.port.writable) {
+      this.console.addLine("Terminal disconnected: port not writable");
+      return;
+    }
+    const encoder = new TextEncoder();
+    let writer;
+    try {
+      writer = this.port.writable.getWriter();
+      await writer.write(encoder.encode(command + "\r\n"));
+      this.console.addLine(`> ${command}`);
+    } catch (err) {
+      this.console.addLine(`Write failed: ${err}`);
+    } finally {
+      if (writer) {
+        try {
+          writer.releaseLock();
+        } catch (err) {
+          console.error("Ignoring release lock error", err);
+        }
+      }
+    }
+    input.value = "";
+    input.focus();
+  }
+
+  clear() {
+    const logElement = this.containerElement.querySelector(".log");
+    if (logElement) {
+      logElement.innerHTML = "";
+    }
+  }
+
+  async reset() {
+    console.log("Reset device requested from console");
+    // Don't use addLine here as stream might already be closed
+    // This will be called from script.js with proper reset logic
+    const event = new CustomEvent("console-reset");
+    this.containerElement.dispatchEvent(event);
+  }
+
+  async disconnect() {
+    if (this.cancelConnection) {
+      await this.cancelConnection();
+      this.cancelConnection = null;
+    }
+  }
+}