tasmota-webserial-esptool 6.0.1

package/js/script.js

@@ -0,0 +1,447 @@
+let espStub;
+
+const baudRates = [921600, 115200, 230400, 460800];
+
+const bufferSize = 512;
+const colors = ["#00a7e9", "#f89521", "#be1e2d"];
+const measurementPeriodId = "0001";
+
+const maxLogLength = 100;
+const log = document.getElementById("log");
+const butConnect = document.getElementById("butConnect");
+const baudRate = document.getElementById("baudRate");
+const butClear = document.getElementById("butClear");
+const butErase = document.getElementById("butErase");
+const butProgram = document.getElementById("butProgram");
+const autoscroll = document.getElementById("autoscroll");
+const lightSS = document.getElementById("light");
+const darkSS = document.getElementById("dark");
+const darkMode = document.getElementById("darkmode");
+const firmware = document.querySelectorAll(".upload .firmware input");
+const progress = document.querySelectorAll(".upload .progress-bar");
+const offsets = document.querySelectorAll(".upload .offset");
+const appDiv = document.getElementById("app");
+
+document.addEventListener("DOMContentLoaded", () => {
+  butConnect.addEventListener("click", () => {
+    clickConnect().catch(async (e) => {
+      console.error(e);
+      errorMsg(e.message || e);
+      if (espStub) {
+        await espStub.disconnect();
+      }
+      toggleUIConnected(false);
+    });
+  });
+  butClear.addEventListener("click", clickClear);
+  butErase.addEventListener("click", clickErase);
+  butProgram.addEventListener("click", clickProgram);
+  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);
+  }
+  autoscroll.addEventListener("click", clickAutoscroll);
+  baudRate.addEventListener("change", changeBaudRate);
+  darkMode.addEventListener("click", clickDarkMode);
+  window.addEventListener("error", function (event) {
+    console.log("Got an uncaught error: ", event.error);
+  });
+  if ("serial" in navigator) {
+    const notSupported = document.getElementById("notSupported");
+    notSupported.classList.add("hidden");
+  }
+
+  initBaudRate();
+  loadAllSettings();
+  updateTheme();
+  logMsg("ESP Web Flasher loaded.");
+});
+
+function initBaudRate() {
+  for (let rate of baudRates) {
+    var option = document.createElement("option");
+    option.text = rate + " Baud";
+    option.value = rate;
+    baudRate.add(option);
+  }
+}
+
+function logMsg(text) {
+  log.innerHTML += text + "<br>";
+
+  // Remove old log content
+  if (log.textContent.split("\n").length > maxLogLength + 1) {
+    let logLines = log.innerHTML.replace(/(\n)/gm, "").split("<br>");
+    log.innerHTML = logLines.splice(-maxLogLength).join("<br>\n");
+  }
+
+  if (autoscroll.checked) {
+    log.scrollTop = log.scrollHeight;
+  }
+}
+
+function debugMsg(...args) {
+  function getStackTrace() {
+    let stack = new Error().stack;
+    //console.log(stack);
+    stack = stack.split("\n").map((v) => v.trim());
+    stack.shift();
+    stack.shift();
+
+    let trace = [];
+    for (let line of stack) {
+      line = line.replace("at ", "");
+      trace.push({
+        func: line.substr(0, line.indexOf("(") - 1),
+        pos: line.substring(line.indexOf(".js:") + 4, line.lastIndexOf(":")),
+      });
+    }
+
+    return trace;
+  }
+
+  let stack = getStackTrace();
+  stack.shift();
+  let top = stack.shift();
+  let prefix =
+    '<span class="debug-function">[' + top.func + ":" + top.pos + "]</span> ";
+  for (let arg of args) {
+    if (arg === undefined) {
+      logMsg(prefix + "undefined");
+    } else if (arg === null) {
+      logMsg(prefix + "null");
+    } else if (typeof arg == "string") {
+      logMsg(prefix + arg);
+    } else if (typeof arg == "number") {
+      logMsg(prefix + arg);
+    } else if (typeof arg == "boolean") {
+      logMsg(prefix + (arg ? "true" : "false"));
+    } else if (Array.isArray(arg)) {
+      logMsg(prefix + "[" + arg.map((value) => toHex(value)).join(", ") + "]");
+    } else if (typeof arg == "object" && arg instanceof Uint8Array) {
+      logMsg(
+        prefix +
+          "[" +
+          Array.from(arg)
+            .map((value) => toHex(value))
+            .join(", ") +
+          "]"
+      );
+    } else {
+      logMsg(prefix + "Unhandled type of argument:" + typeof arg);
+      console.log(arg);
+    }
+    prefix = "";  // Only show for first argument
+  }
+}
+
+function errorMsg(text) {
+  logMsg('<span class="error-message">Error:</span> ' + text);
+  console.error(text);
+}
+
+/**
+ * @name updateTheme
+ * Sets the theme to dark mode. Can be refactored later for more themes
+ */
+function updateTheme() {
+  // Disable all themes
+  document
+    .querySelectorAll("link[rel=stylesheet].alternate")
+    .forEach((styleSheet) => {
+      enableStyleSheet(styleSheet, false);
+    });
+
+  if (darkMode.checked) {
+    enableStyleSheet(darkSS, true);
+  } else {
+    enableStyleSheet(lightSS, true);
+  }
+}
+
+function enableStyleSheet(node, enabled) {
+  node.disabled = !enabled;
+}
+
+function formatMacAddr(macAddr) {
+  return macAddr
+    .map((value) => value.toString(16).toUpperCase().padStart(2, "0"))
+    .join(":");
+}
+
+/**
+ * @name clickConnect
+ * Click handler for the connect/disconnect button.
+ */
+async function clickConnect() {
+  if (espStub) {
+    await espStub.disconnect();
+    await espStub.port.close();
+    toggleUIConnected(false);
+    espStub = undefined;
+    return;
+  }
+
+  const esploaderMod = await window.esptoolPackage;
+
+  const esploader = await esploaderMod.connect({
+    log: (...args) => logMsg(...args),
+    debug: (...args) => debugMsg(...args),
+    error: (...args) => errorMsg(...args),
+  });
+  try {
+    await esploader.initialize();
+
+    logMsg("Connected to " + esploader.chipName);
+    logMsg("MAC Address: " + formatMacAddr(esploader.macAddr()));
+
+    espStub = await esploader.runStub();
+    toggleUIConnected(true);
+    toggleUIToolbar(true);
+    espStub.addEventListener("disconnect", () => {
+      toggleUIConnected(false);
+      espStub = false;
+    });
+  } catch (err) {
+    await esploader.disconnect();
+    throw err;
+  }
+}
+
+/**
+ * @name changeBaudRate
+ * Change handler for the Baud Rate selector.
+ */
+async function changeBaudRate() {
+  saveSetting("baudrate", baudRate.value);
+  if (espStub) {
+    let baud = parseInt(baudRate.value);
+    if (baudRates.includes(baud)) {
+      await espStub.setBaudrate(baud);
+    }
+  }
+}
+
+/**
+ * @name clickAutoscroll
+ * Change handler for the Autoscroll checkbox.
+ */
+async function clickAutoscroll() {
+  saveSetting("autoscroll", autoscroll.checked);
+}
+
+/**
+ * @name clickDarkMode
+ * Change handler for the Dark Mode checkbox.
+ */
+async function clickDarkMode() {
+  updateTheme();
+  saveSetting("darkmode", darkMode.checked);
+}
+
+/**
+ * @name clickErase
+ * Click handler for the erase button.
+ */
+async function clickErase() {
+  if (
+    window.confirm("This will erase the entire flash. Click OK to continue.")
+  ) {
+    baudRate.disabled = true;
+    butErase.disabled = true;
+    butProgram.disabled = true;
+    try {
+      logMsg("Erasing flash memory. Please wait...");
+      let stamp = Date.now();
+      await espStub.eraseFlash();
+      logMsg("Finished. Took " + (Date.now() - stamp) + "ms to erase.");
+    } catch (e) {
+      errorMsg(e);
+    } finally {
+      butErase.disabled = false;
+      baudRate.disabled = false;
+      butProgram.disabled = getValidFiles().length == 0;
+    }
+  }
+}
+
+/**
+ * @name clickProgram
+ * Click handler for the program button.
+ */
+async function clickProgram() {
+  const readUploadedFileAsArrayBuffer = (inputFile) => {
+    const reader = new FileReader();
+
+    return new Promise((resolve, reject) => {
+      reader.onerror = () => {
+        reader.abort();
+        reject(new DOMException("Problem parsing input file."));
+      };
+
+      reader.onload = () => {
+        resolve(reader.result);
+      };
+      reader.readAsArrayBuffer(inputFile);
+    });
+  };
+
+  baudRate.disabled = true;
+  butErase.disabled = true;
+  butProgram.disabled = true;
+  for (let i = 0; i < 4; i++) {
+    firmware[i].disabled = true;
+    offsets[i].disabled = true;
+  }
+  for (let file of getValidFiles()) {
+    progress[file].classList.remove("hidden");
+    let binfile = firmware[file].files[0];
+    let contents = await readUploadedFileAsArrayBuffer(binfile);
+    try {
+      let offset = parseInt(offsets[file].value, 16);
+      const progressBar = progress[file].querySelector("div");
+      await espStub.flashData(
+        contents,
+        (bytesWritten, totalBytes) => {
+          progressBar.style.width =
+            Math.floor((bytesWritten / totalBytes) * 100) + "%";
+        },
+        offset
+      );
+      await sleep(100);
+    } catch (e) {
+      errorMsg(e);
+    }
+  }
+  for (let i = 0; i < 4; i++) {
+    firmware[i].disabled = false;
+    offsets[i].disabled = false;
+    progress[i].classList.add("hidden");
+    progress[i].querySelector("div").style.width = "0";
+  }
+  butErase.disabled = false;
+  baudRate.disabled = false;
+  butProgram.disabled = getValidFiles().length == 0;
+  logMsg("To run the new firmware, please reset your device.");
+}
+
+function getValidFiles() {
+  // Get a list of file and offsets
+  // This will be used to check if we have valid stuff
+  // and will also return a list of files to program
+  let validFiles = [];
+  let offsetVals = [];
+  for (let i = 0; i < 4; i++) {
+    let offs = parseInt(offsets[i].value, 16);
+    if (firmware[i].files.length > 0 && !offsetVals.includes(offs)) {
+      validFiles.push(i);
+      offsetVals.push(offs);
+    }
+  }
+  return validFiles;
+}
+
+/**
+ * @name checkProgrammable
+ * Check if the conditions to program the device are sufficient
+ */
+async function checkProgrammable() {
+  butProgram.disabled = getValidFiles().length == 0;
+}
+
+/**
+ * @name checkFirmware
+ * Handler for firmware upload changes
+ */
+async function checkFirmware(event) {
+  let filename = event.target.value.split("\\").pop();
+  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;
+    }
+    icon.classList.add("hidden");
+  } else {
+    label.innerHTML = "Choose a file&hellip;";
+    icon.classList.remove("hidden");
+  }
+
+  await checkProgrammable();
+}
+
+/**
+ * @name clickClear
+ * Click handler for the clear button.
+ */
+async function clickClear() {
+  reset();
+}
+
+function convertJSON(chunk) {
+  try {
+    let jsonObj = JSON.parse(chunk);
+    return jsonObj;
+  } catch (e) {
+    return chunk;
+  }
+}
+
+function toggleUIToolbar(show) {
+  isConnected = show;
+  for (let i = 0; i < 4; i++) {
+    progress[i].classList.add("hidden");
+    progress[i].querySelector("div").style.width = "0";
+  }
+  if (show) {
+    appDiv.classList.add("connected");
+  } else {
+    appDiv.classList.remove("connected");
+  }
+  butErase.disabled = !show;
+}
+
+function toggleUIConnected(connected) {
+  let lbl = "Connect";
+  if (connected) {
+    lbl = "Disconnect";
+  } else {
+    toggleUIToolbar(false);
+  }
+  butConnect.textContent = lbl;
+}
+
+function loadAllSettings() {
+  // Load all saved settings or defaults
+  autoscroll.checked = loadSetting("autoscroll", true);
+  baudRate.value = loadSetting("baudrate", 115200);
+  darkMode.checked = loadSetting("darkmode", false);
+}
+
+function loadSetting(setting, defaultValue) {
+  let value = JSON.parse(window.localStorage.getItem(setting));
+  if (value == null) {
+    return defaultValue;
+  }
+
+  return value;
+}
+
+function saveSetting(setting, value) {
+  window.localStorage.setItem(setting, JSON.stringify(value));
+}
+
+function ucWords(text) {
+  return text
+    .replace("_", " ")
+    .toLowerCase()
+    .replace(/(?<= )[^\s]|^./g, (a) => a.toUpperCase());
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/js/utilities.js

@@ -0,0 +1,148 @@
+/**
+ * @name toByteArray
+ * Convert a string to a byte array
+ */
+function toByteArray(str) {
+  let byteArray = [];
+  for (let i = 0; i < str.length; i++) {
+    let charcode = str.charCodeAt(i);
+    if (charcode <= 0xFF) {
+      byteArray.push(charcode);
+    }
+  }
+  return byteArray;
+}
+
+function fromByteArray(byteArray) {
+  return String.fromCharCode.apply(String, byteArray);
+}
+
+function crc32(data, value=0) {
+  if (data instanceof Array) {
+    data = fromByteArray(data);
+  }
+  let table = [];
+  for(let entry, c = 0; c < 256; c++) {
+    entry = c;
+    for(let k = 0; k < 8; k++) {
+      entry = 1 & entry ? 3988292384^entry >>> 1 : entry >>> 1;
+    }
+    table[c] = entry;
+  }
+  let n = -1 - value;
+  for(let t = 0; t < data.length; t++) {
+    n = n >>> 8^table[255 & (n^data.charCodeAt(t))];
+  }
+  return (-1 ^ n) >>> 0;
+}
+
+function zipLongest() {
+    var args = [].slice.call(arguments);
+    var longest = args.reduce(function(a,b){
+        return a.length > b.length ? a : b
+    }, []);
+
+    return longest.map(function(_,i){
+        return args.map(function(array){return array[i]})
+    });
+}
+
+class struct {
+    static lut = {
+      "b": {u: DataView.prototype.getInt8, p: DataView.prototype.setInt8, bytes: 1},
+      "B": {u: DataView.prototype.getUint8, p: DataView.prototype.setUint8, bytes: 1},
+      "h": {u: DataView.prototype.getInt16, p: DataView.prototype.setInt16, bytes: 2},
+      "H": {u: DataView.prototype.getUint16, p: DataView.prototype.setUint16, bytes: 2},
+      "i": {u: DataView.prototype.getInt32, p: DataView.prototype.setInt32, bytes: 4},
+      "I": {u: DataView.prototype.getUint32, p: DataView.prototype.setUint32, bytes: 4},
+      "q": {u: DataView.prototype.getInt64, p: DataView.prototype.setInt64, bytes: 8},
+      "Q": {u: DataView.prototype.getUint64, p: DataView.prototype.setUint64, bytes: 8},
+    }
+
+    static pack(...args) {
+        let format = args[0];
+        let pointer = 0;
+        let data = args.slice(1);
+        if (format.replace(/[<>]/, '').length != data.length) {
+            throw("Pack format to Argument count mismatch");
+            return;
+        }
+        let bytes = [];
+        let littleEndian = true;
+        for (let i = 0; i < format.length; i++) {
+            if (format[i] == "<") {
+                littleEndian = true;
+            } else if (format[i] == ">") {
+                littleEndian = false;
+            } else {
+                pushBytes(format[i], data[pointer]);
+                pointer++;
+            }
+        }
+
+        function pushBytes(formatChar, value) {
+            if (!(formatChar in struct.lut)) {
+                throw("Unhandled character '" + formatChar + "' in pack format");
+            }
+            let dataSize = struct.lut[formatChar].bytes;
+            let view = new DataView(new ArrayBuffer(dataSize));
+            let dataViewFn = struct.lut[formatChar].p.bind(view);
+            dataViewFn(0, value, littleEndian);
+            for (let i = 0; i < dataSize; i++) {
+                bytes.push(view.getUint8(i));
+            }
+        }
+
+        return bytes;
+    };
+
+    static unpack(format, bytes) {
+        let pointer = 0;
+        let data = [];
+        let littleEndian = true;
+
+        for (let c of format) {
+            if (c == "<") {
+                littleEndian = true;
+            } else if (c == ">") {
+                littleEndian = false;
+            } else {
+                pushData(c);
+            }
+        }
+
+        function pushData(formatChar) {
+            if (!(formatChar in struct.lut)) {
+                throw("Unhandled character '" + formatChar + "' in unpack format");
+            }
+            let dataSize = struct.lut[formatChar].bytes;
+            let view = new DataView(new ArrayBuffer(dataSize));
+            for (let i = 0; i < dataSize; i++) {
+              view.setUint8(i, bytes[pointer + i] & 0xFF);
+            }
+            let dataViewFn = struct.lut[formatChar].u.bind(view);
+            data.push(dataViewFn(0, littleEndian));
+            pointer += dataSize;
+        }
+
+        return data;
+    };
+
+    static calcsize(format) {
+        let size = 0;
+        for (let i = 0; i < format.length; i++) {
+            if (format[i] != "<" && format[i] != ">") {
+                size += struct.lut[format[i]].bytes;
+            }
+        }
+
+        return size;
+    }
+}
+
+function* makeFileIterator(content) {
+    for (let line of content.split(/\r?\n/)) {
+        yield line.trim();
+    }
+    return '';
+}

package/license.md

@@ -0,0 +1,12 @@
+MIT License
+
+Copyright (c) 2023 Johann Obermeier
+Copyright (c) 2021 Nabu Casa
+Copyright (c) 2020 Melissa LeBlanc-Williams for Adafruit Industries
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "tasmota-webserial-esptool",
+  "version": "6.0.1",
+  "description": "Flash ESP devices using WebSerial",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Jason2866/WebSerial_ESPTool.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Johann Obermeier",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "prepublishOnly": "script/build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/pako": "^2.0.0",
+    "@types/w3c-web-serial": "^1.0.3",
+    "prettier": "^2.8.8",
+    "rollup": "^3.23.0",
+    "serve": "^14.2.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@types/node": "^20.2.3",
+    "pako": "^2.1.0",
+    "tslib": "^2.5.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,27 @@
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import json from "@rollup/plugin-json";
+import terser from "@rollup/plugin-terser";
+
+const config = {
+  input: "dist/index.js",
+  output: {
+    dir: "dist/web",
+    format: "module",
+  },
+  // preserveEntrySignatures: false,
+  plugins: [nodeResolve(), json()],
+};
+
+if (process.env.NODE_ENV === "production") {
+  config.plugins.push(
+    terser({
+      ecma: 2019,
+      toplevel: true,
+      output: {
+        comments: false,
+      },
+    })
+  );
+}
+
+export default config;

package/script/build

@@ -0,0 +1,8 @@
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+rm -rf dist
+NODE_ENV=production npm exec -- tsc
+NODE_ENV=production npm exec -- rollup -c

package/script/develop

@@ -0,0 +1,17 @@
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+rm -rf dist
+
+# Quit all background tasks when script exits
+trap "kill 0" EXIT
+
+# Run tsc once as rollup expects those files
+npm exec -- tsc || true
+
+npm exec -- serve -p 5004 &
+npm exec -- tsc --watch &
+npm exec -- rollup -c --watch &
+wait