tasmota-webserial-esptool 6.5.3 → 7.0.0

package/js/script.js

@@ -1,6 +1,6 @@
 let espStub;
 
-const baudRates = [2000000, 1500000, 921600, 460800, 230400, 153600, 128000, 115200];
+const baudRates = [2000000, 1500000, 921600, 500000, 460800, 230400, 153600, 128000, 115200];
 const bufferSize = 512;
 const colors = ["#00a7e9", "#f89521", "#be1e2d"];
 const measurementPeriodId = "0001";
@@ -12,11 +12,18 @@ const baudRate = document.getElementById("baudRate");
 const butClear = document.getElementById("butClear");
 const butErase = document.getElementById("butErase");
 const butProgram = document.getElementById("butProgram");
+const butReadFlash = document.getElementById("butReadFlash");
+const readOffset = document.getElementById("readOffset");
+const readSize = document.getElementById("readSize");
+const readProgress = document.getElementById("readProgress");
+const butReadPartitions = document.getElementById("butReadPartitions");
+const partitionList = document.getElementById("partitionList");
 const autoscroll = document.getElementById("autoscroll");
 const lightSS = document.getElementById("light");
 const darkSS = document.getElementById("dark");
 const darkMode = document.getElementById("darkmode");
 const debugMode = document.getElementById("debugmode");
+const showLog = document.getElementById("showlog");
 const firmware = document.querySelectorAll(".upload .firmware input");
 const progress = document.querySelectorAll(".upload .progress-bar");
 const offsets = document.querySelectorAll(".upload .offset");
@@ -36,19 +43,57 @@ document.addEventListener("DOMContentLoaded", () => {
   butClear.addEventListener("click", clickClear);
   butErase.addEventListener("click", clickErase);
   butProgram.addEventListener("click", clickProgram);
+  butReadFlash.addEventListener("click", clickReadFlash);
+  butReadPartitions.addEventListener("click", clickReadPartitions);
   for (let i = 0; i < firmware.length; i++) {
     firmware[i].addEventListener("change", checkFirmware);
   }
   for (let i = 0; i < offsets.length; i++) {
     offsets[i].addEventListener("change", checkProgrammable);
   }
+  
+  // Initialize upload rows visibility - only show first row
+  updateUploadRowsVisibility();
+  
   autoscroll.addEventListener("click", clickAutoscroll);
   baudRate.addEventListener("change", changeBaudRate);
   darkMode.addEventListener("click", clickDarkMode);
   debugMode.addEventListener("click", clickDebugMode);
+  showLog.addEventListener("click", clickShowLog);
   window.addEventListener("error", function (event) {
     console.log("Got an uncaught error: ", event.error);
   });
+  
+  // Header auto-hide functionality
+  const header = document.querySelector(".header");
+  const main = document.querySelector(".main");
+  
+  // Show header on mouse enter at top of page
+  main.addEventListener("mousemove", (e) => {
+    if (e.clientY < 5 && header.classList.contains("header-hidden")) {
+      header.classList.remove("header-hidden");
+      main.classList.remove("no-header-padding");
+    }
+  });
+  
+  // Keep header visible when mouse is over it
+  header.addEventListener("mouseenter", () => {
+    header.classList.remove("header-hidden");
+    main.classList.remove("no-header-padding");
+  });
+  
+  // Hide header when mouse leaves (only if connected)
+  header.addEventListener("mouseleave", () => {
+    if (espStub && header.classList.contains("header-hidden") === false) {
+      setTimeout(() => {
+        if (!header.matches(":hover")) {
+          header.classList.add("header-hidden");
+          main.classList.add("no-header-padding");
+        }
+      }, 1000);
+    }
+  });
+  
   if ("serial" in navigator) {
     const notSupported = document.getElementById("notSupported");
     notSupported.classList.add("hidden");
@@ -57,7 +102,7 @@ document.addEventListener("DOMContentLoaded", () => {
   initBaudRate();
   loadAllSettings();
   updateTheme();
-  logMsg("ESP Web Flasher loaded.");
+  logMsg("WebSerial ESPTool loaded.");
 });
 
 function initBaudRate() {
@@ -206,6 +251,12 @@ async function clickConnect() {
     toggleUIConnected(true);
     toggleUIToolbar(true);
     
+    // Set detected flash size in the read size field
+    if (espStub.flashSize) {
+      const flashSizeBytes = parseInt(espStub.flashSize) * 1024 * 1024; // Convert MB to bytes
+      readSize.value = "0x" + flashSizeBytes.toString(16);
+    }
+    
     // Set the selected baud rate
     let baud = parseInt(baudRate.value);
     if (baudRates.includes(baud)) {
@@ -262,6 +313,35 @@ async function clickDebugMode() {
   logMsg("Debug mode " + (debugMode.checked ? "enabled" : "disabled"));
 }
 
+/**
+ * @name clickShowLog
+ * Change handler for the Show Log checkbox.
+ */
+async function clickShowLog() {
+  saveSetting("showlog", showLog.checked);
+  updateLogVisibility();
+}
+
+/**
+ * @name updateLogVisibility
+ * Update log and log controls visibility
+ */
+function updateLogVisibility() {
+  const logControls = document.querySelector(".log-controls");
+  
+  if (showLog.checked) {
+    log.classList.remove("hidden");
+    if (logControls) {
+      logControls.classList.remove("hidden");
+    }
+  } else {
+    log.classList.add("hidden");
+    if (logControls) {
+      logControls.classList.add("hidden");
+    }
+  }
+}
+
 /**
  * @name clickErase
  * Click handler for the erase button.
@@ -312,7 +392,7 @@ async function clickProgram() {
   baudRate.disabled = true;
   butErase.disabled = true;
   butProgram.disabled = true;
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < firmware.length; i++) {
     firmware[i].disabled = true;
     offsets[i].disabled = true;
   }
@@ -336,7 +416,7 @@ async function clickProgram() {
       errorMsg(e);
     }
   }
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < firmware.length; i++) {
     firmware[i].disabled = false;
     offsets[i].disabled = false;
     progress[i].classList.add("hidden");
@@ -354,7 +434,7 @@ function getValidFiles() {
   // and will also return a list of files to program
   let validFiles = [];
   let offsetVals = [];
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < firmware.length; i++) {
     let offs = parseInt(offsets[i].value, 16);
     if (firmware[i].files.length > 0 && !offsetVals.includes(offs)) {
       validFiles.push(i);
@@ -381,11 +461,7 @@ async function checkFirmware(event) {
   let label = event.target.parentNode.querySelector("span");
   let icon = event.target.parentNode.querySelector("svg");
   if (filename != "") {
-    if (filename.length > 17) {
-      label.innerHTML = filename.substring(0, 14) + "&hellip;";
-    } else {
-      label.innerHTML = filename;
-    }
+    label.innerHTML = filename;
     icon.classList.add("hidden");
   } else {
     label.innerHTML = "Choose a file&hellip;";
@@ -393,6 +469,358 @@ async function checkFirmware(event) {
   }
 
   await checkProgrammable();
+  updateUploadRowsVisibility();
+}
+
+/**
+ * @name updateUploadRowsVisibility
+ * Show/hide upload rows dynamically - only for flash write section
+ */
+function updateUploadRowsVisibility() {
+  const uploadRows = document.querySelectorAll(".upload");
+  let lastFilledIndex = -1;
+  
+  // Find the last filled row
+  for (let i = 0; i < firmware.length; i++) {
+    if (firmware[i].files.length > 0) {
+      lastFilledIndex = i;
+    }
+  }
+  
+  // Show rows up to lastFilledIndex + 1 (next empty row), minimum 1 row
+  for (let i = 0; i < uploadRows.length; i++) {
+    if (i <= lastFilledIndex + 1) {
+      uploadRows[i].style.display = "flex";
+    } else {
+      uploadRows[i].style.display = "none";
+    }
+  }
+}
+
+/**
+ * @name clickReadFlash
+ * Click handler for the read flash button.
+ */
+async function clickReadFlash() {
+  const offset = parseInt(readOffset.value, 16);
+  const size = parseInt(readSize.value, 16);
+
+  if (isNaN(offset) || isNaN(size) || size <= 0) {
+    errorMsg("Invalid offset or size value");
+    return;
+  }
+
+  // Prompt user for filename
+  const defaultFilename = `flash_0x${offset.toString(16)}_0x${size.toString(16)}.bin`;
+  const filename = prompt(`Enter filename for flash data:`, defaultFilename);
+
+  // User cancelled
+  if (filename === null) {
+    return;
+  }
+
+  // User entered empty string
+  if (filename.trim() === "") {
+    errorMsg("Filename cannot be empty");
+    return;
+  }
+
+  baudRate.disabled = true;
+  butErase.disabled = true;
+  butProgram.disabled = true;
+  butReadFlash.disabled = true;
+  readOffset.disabled = true;
+  readSize.disabled = true;
+  readProgress.classList.remove("hidden");
+
+  try {
+    const progressBar = readProgress.querySelector("div");
+
+    const data = await espStub.readFlash(
+      offset,
+      size,
+      (packet, progress, totalSize) => {
+        progressBar.style.width =
+          Math.floor((progress / totalSize) * 100) + "%";
+      }
+    );
+
+    logMsg(`Successfully read ${data.length} bytes from flash`);
+
+    // Create a download link with user-specified filename
+    const blob = new Blob([data], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    logMsg(`Flash data downloaded as "${filename}"`);
+  } catch (e) {
+    errorMsg("Failed to read flash: " + e);
+  } finally {
+    readProgress.classList.add("hidden");
+    readProgress.querySelector("div").style.width = "0";
+    butErase.disabled = false;
+    baudRate.disabled = false;
+    butProgram.disabled = getValidFiles().length == 0;
+    butReadFlash.disabled = false;
+    readOffset.disabled = false;
+    readSize.disabled = false;
+  }
+}
+
+/**
+ * @name clickReadPartitions
+ * Click handler for the read partitions button.
+ */
+async function clickReadPartitions() {
+  const PARTITION_TABLE_OFFSET = 0x8000;
+  const PARTITION_TABLE_SIZE = 0x1000; // Read 4KB to get all partitions
+
+  butReadPartitions.disabled = true;
+  butErase.disabled = true;
+  butProgram.disabled = true;
+  butReadFlash.disabled = true;
+
+  try {
+    logMsg("Reading partition table from 0x8000...");
+    
+    const data = await espStub.readFlash(PARTITION_TABLE_OFFSET, PARTITION_TABLE_SIZE);
+    
+    const partitions = parsePartitionTable(data);
+    
+    if (partitions.length === 0) {
+      errorMsg("No valid partition table found");
+      return;
+    }
+
+    logMsg(`Found ${partitions.length} partition(s)`);
+    
+    // Display partitions
+    displayPartitions(partitions);
+    
+  } catch (e) {
+    errorMsg("Failed to read partition table: " + e);
+  } finally {
+    butReadPartitions.disabled = false;
+    butErase.disabled = false;
+    butProgram.disabled = getValidFiles().length == 0;
+    butReadFlash.disabled = false;
+  }
+}
+
+/**
+ * Parse partition table from binary data
+ */
+function parsePartitionTable(data) {
+  const PARTITION_MAGIC = 0x50aa;
+  const PARTITION_ENTRY_SIZE = 32;
+  const partitions = [];
+
+  for (let i = 0; i < data.length; i += PARTITION_ENTRY_SIZE) {
+    const magic = data[i] | (data[i + 1] << 8);
+    
+    if (magic !== PARTITION_MAGIC) {
+      break; // End of partition table
+    }
+
+    const type = data[i + 2];
+    const subtype = data[i + 3];
+    const offset = data[i + 4] | (data[i + 5] << 8) | (data[i + 6] << 16) | (data[i + 7] << 24);
+    const size = data[i + 8] | (data[i + 9] << 8) | (data[i + 10] << 16) | (data[i + 11] << 24);
+    
+    // Read name (16 bytes, null-terminated)
+    let name = "";
+    for (let j = 12; j < 28; j++) {
+      if (data[i + j] === 0) break;
+      name += String.fromCharCode(data[i + j]);
+    }
+
+    const flags = data[i + 28] | (data[i + 29] << 8) | (data[i + 30] << 16) | (data[i + 31] << 24);
+
+    // Get type names
+    const typeNames = { 0x00: "app", 0x01: "data" };
+    const appSubtypes = {
+      0x00: "factory", 0x10: "ota_0", 0x11: "ota_1", 0x12: "ota_2",
+      0x13: "ota_3", 0x14: "ota_4", 0x15: "ota_5", 0x20: "test"
+    };
+    const dataSubtypes = {
+      0x00: "ota", 0x01: "phy", 0x02: "nvs", 0x03: "coredump",
+      0x04: "nvs_keys", 0x05: "efuse", 0x81: "fat", 0x82: "spiffs"
+    };
+
+    const typeName = typeNames[type] || `0x${type.toString(16)}`;
+    let subtypeName = "";
+    if (type === 0x00) {
+      subtypeName = appSubtypes[subtype] || `0x${subtype.toString(16)}`;
+    } else if (type === 0x01) {
+      subtypeName = dataSubtypes[subtype] || `0x${subtype.toString(16)}`;
+    } else {
+      subtypeName = `0x${subtype.toString(16)}`;
+    }
+
+    partitions.push({
+      name,
+      type,
+      subtype,
+      offset,
+      size,
+      flags,
+      typeName,
+      subtypeName
+    });
+  }
+
+  return partitions;
+}
+
+/**
+ * Display partitions in the UI
+ */
+function displayPartitions(partitions) {
+  partitionList.innerHTML = "";
+  partitionList.classList.remove("hidden");
+  
+  // Hide the Read Partition Table button after successful read
+  butReadPartitions.classList.add("hidden");
+
+  const table = document.createElement("table");
+  table.className = "partition-table-display";
+  
+  // Header
+  const thead = document.createElement("thead");
+  const headerRow = document.createElement("tr");
+  ["Name", "Type", "SubType", "Offset", "Size", "Action"].forEach(text => {
+    const th = document.createElement("th");
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // Body
+  const tbody = document.createElement("tbody");
+  partitions.forEach(partition => {
+    const row = document.createElement("tr");
+    
+    // Name
+    const nameCell = document.createElement("td");
+    nameCell.textContent = partition.name;
+    row.appendChild(nameCell);
+    
+    // Type
+    const typeCell = document.createElement("td");
+    typeCell.textContent = partition.typeName;
+    row.appendChild(typeCell);
+    
+    // SubType
+    const subtypeCell = document.createElement("td");
+    subtypeCell.textContent = partition.subtypeName;
+    row.appendChild(subtypeCell);
+    
+    // Offset
+    const offsetCell = document.createElement("td");
+    offsetCell.textContent = `0x${partition.offset.toString(16)}`;
+    row.appendChild(offsetCell);
+    
+    // Size
+    const sizeCell = document.createElement("td");
+    sizeCell.textContent = formatSize(partition.size);
+    row.appendChild(sizeCell);
+    
+    // Action
+    const actionCell = document.createElement("td");
+    const downloadBtn = document.createElement("button");
+    downloadBtn.textContent = "Download";
+    downloadBtn.className = "partition-download-btn";
+    downloadBtn.onclick = () => downloadPartition(partition);
+    actionCell.appendChild(downloadBtn);
+    row.appendChild(actionCell);
+    
+    tbody.appendChild(row);
+  });
+  table.appendChild(tbody);
+  
+  partitionList.appendChild(table);
+}
+
+/**
+ * Download a partition
+ */
+async function downloadPartition(partition) {
+  // Prompt user for filename
+  const defaultFilename = `${partition.name}_0x${partition.offset.toString(16)}.bin`;
+  const filename = prompt(
+    `Enter filename for partition "${partition.name}":`,
+    defaultFilename
+  );
+
+  // User cancelled
+  if (filename === null) {
+    return;
+  }
+
+  // User entered empty string
+  if (filename.trim() === "") {
+    errorMsg("Filename cannot be empty");
+    return;
+  }
+
+  const partitionProgress = document.getElementById("partitionProgress");
+  const progressBar = partitionProgress.querySelector("div");
+
+  try {
+    partitionProgress.classList.remove("hidden");
+    progressBar.style.width = "0%";
+
+    logMsg(
+      `Downloading partition "${partition.name}" (${formatSize(partition.size)})...`
+    );
+
+    const data = await espStub.readFlash(
+      partition.offset,
+      partition.size,
+      (packet, progress, totalSize) => {
+        const percent = Math.floor((progress / totalSize) * 100);
+        progressBar.style.width = percent + "%";
+      }
+    );
+
+    // Create download with user-specified filename
+    const blob = new Blob([data], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    logMsg(`Partition "${partition.name}" downloaded as "${filename}"`);
+  } catch (e) {
+    errorMsg(`Failed to download partition: ${e}`);
+  } finally {
+    partitionProgress.classList.add("hidden");
+    progressBar.style.width = "0%";
+  }
+}
+
+/**
+ * Format size in human-readable format
+ */
+function formatSize(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(2)} KB`;
+  } else {
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+  }
 }
 
 /**
@@ -415,7 +843,7 @@ function convertJSON(chunk) {
 
 function toggleUIToolbar(show) {
   isConnected = show;
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < progress.length; i++) {
     progress[i].classList.add("hidden");
     progress[i].querySelector("div").style.width = "0";
   }
@@ -425,14 +853,27 @@ function toggleUIToolbar(show) {
     appDiv.classList.remove("connected");
   }
   butErase.disabled = !show;
+  butReadFlash.disabled = !show;
+  butReadPartitions.disabled = !show;
 }
 
 function toggleUIConnected(connected) {
   let lbl = "Connect";
+  const header = document.querySelector(".header");
+  const main = document.querySelector(".main");
+  
   if (connected) {
     lbl = "Disconnect";
+    // Auto-hide header after connection
+    setTimeout(() => {
+      header.classList.add("header-hidden");
+      main.classList.add("no-header-padding");
+    }, 2000); // Hide after 2 seconds
   } else {
     toggleUIToolbar(false);
+    // Show header when disconnected
+    header.classList.remove("header-hidden");
+    main.classList.remove("no-header-padding");
   }
   butConnect.textContent = lbl;
 }
@@ -443,6 +884,10 @@ function loadAllSettings() {
   baudRate.value = loadSetting("baudrate", 1500000);
   darkMode.checked = loadSetting("darkmode", false);
   debugMode.checked = loadSetting("debugmode", true);
+  showLog.checked = loadSetting("showlog", false);
+  
+  // Apply show log setting
+  updateLogVisibility();
 }
 
 function loadSetting(setting, defaultValue) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tasmota-webserial-esptool",
-  "version": "6.5.3",
-  "description": "Flash ESP devices using WebSerial",
+  "version": "7.0.0",
+  "description": "Flash & Read ESP devices using WebSerial",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
@@ -20,16 +20,16 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@types/pako": "^2.0.4",
     "@types/w3c-web-serial": "^1.0.7",
-    "prettier": "^3.6.2",
-    "rollup": "^4.46.3",
+    "prettier": "^3.7.3",
+    "rollup": "^4.53.3",
     "serve": "^14.2.4",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.10.1",
     "pako": "^2.1.0",
     "tslib": "^2.8.1"
   }