tasmota-esp-web-tools 8.1.0

package/src/components/ewt-console.ts

@@ -0,0 +1,163 @@
+import { ColoredConsole, coloredConsoleStyles } from "../util/console-color";
+import { sleep } from "../util/sleep";
+import { LineBreakTransformer } from "../util/line-break-transformer";
+import { Logger } from "../const";
+
+export class EwtConsole extends HTMLElement {
+  public port!: SerialPort;
+  public logger!: Logger;
+  public allowInput = true;
+
+  private _console?: ColoredConsole;
+  private _cancelConnection?: () => Promise<void>;
+
+  public logs(): string {
+    return this._console?.logs() || "";
+  }
+
+  public connectedCallback() {
+    if (this._console) {
+      return;
+    }
+    const shadowRoot = this.attachShadow({ mode: "open" });
+
+    shadowRoot.innerHTML = `
+      <style>
+        :host, input {
+          background-color: #1c1c1c;
+          color: #ddd;
+          font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+            monospace;
+          line-height: 1.45;
+          display: flex;
+          flex-direction: column;
+        }
+        form {
+          display: flex;
+          align-items: center;
+          padding: 0 8px 0 16px;
+        }
+        input {
+          flex: 1;
+          padding: 4px;
+          margin: 0 8px;
+          border: 0;
+          outline: none;
+        }
+        ${coloredConsoleStyles}
+      </style>
+      <div class="log"></div>
+      ${
+        this.allowInput
+          ? `<form>
+                >
+                <input autofocus>
+              </form>
+            `
+          : ""
+      }
+    `;
+
+    this._console = new ColoredConsole(this.shadowRoot!.querySelector("div")!);
+
+    if (this.allowInput) {
+      const input = this.shadowRoot!.querySelector("input")!;
+
+      this.addEventListener("click", () => {
+        // Only focus input if user didn't select some text
+        if (getSelection()?.toString() === "") {
+          input.focus();
+        }
+      });
+
+      input.addEventListener("keydown", (ev) => {
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this._sendCommand();
+        }
+      });
+    }
+
+    const abortController = new AbortController();
+    const connection = this._connect(abortController.signal);
+    this._cancelConnection = () => {
+      abortController.abort();
+      return connection;
+    };
+  }
+
+  private async _connect(abortSignal: AbortSignal) {
+    this.logger.debug("Starting console read loop");
+    try {
+      await this.port
+        .readable!.pipeThrough(new TextDecoderStream(), {
+          signal: abortSignal,
+        })
+        .pipeThrough(new TransformStream(new LineBreakTransformer()))
+        .pipeTo(
+          new WritableStream({
+            write: (chunk) => {
+              this._console!.addLine(chunk.replace("\r", ""));
+            },
+          })
+        );
+      if (!abortSignal.aborted) {
+        this._console!.addLine("");
+        this._console!.addLine("");
+        this._console!.addLine("Terminal disconnected");
+      }
+    } catch (e) {
+      this._console!.addLine("");
+      this._console!.addLine("");
+      this._console!.addLine(`Terminal disconnected: ${e}`);
+    } finally {
+      await sleep(100);
+      this.logger.debug("Finished console read loop");
+    }
+  }
+
+  private async _sendCommand() {
+    const input = this.shadowRoot!.querySelector("input")!;
+    const command = input.value;
+    const encoder = new TextEncoder();
+    const writer = this.port.writable!.getWriter();
+    await writer.write(encoder.encode(command + "\r\n"));
+    this._console!.addLine(`> ${command}\r\n`);
+    input.value = "";
+    input.focus();
+    try {
+      writer.releaseLock();
+    } catch (err) {
+      console.error("Ignoring release lock error", err);
+    }
+  }
+
+  public async disconnect() {
+    if (this._cancelConnection) {
+      await this._cancelConnection();
+      this._cancelConnection = undefined;
+    }
+  }
+
+  public async reset() {
+    this.logger.debug("Triggering reset.");
+    await this.port.setSignals({
+      dataTerminalReady: false,
+      requestToSend: true,
+    });
+    await this.port.setSignals({
+      dataTerminalReady: false,
+      requestToSend: false,
+    });
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+}
+
+customElements.define("ewt-console", EwtConsole);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-console": EwtConsole;
+  }
+}

package/src/components/ewt-dialog.ts

@@ -0,0 +1,22 @@
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { styles } from "@material/mwc-dialog/mwc-dialog.css";
+import { css } from "lit";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-dialog": EwtDialog;
+  }
+}
+
+export class EwtDialog extends DialogBase {
+  static override styles = [
+    styles,
+    css`
+      .mdc-dialog__title {
+        padding-right: 52px;
+      }
+    `,
+  ];
+}
+
+customElements.define("ewt-dialog", EwtDialog);

package/src/components/ewt-formfield.ts

@@ -0,0 +1,14 @@
+import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
+import { styles } from "@material/mwc-formfield/mwc-formfield.css";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-formfield": EwtFormfield;
+  }
+}
+
+export class EwtFormfield extends FormfieldBase {
+  static override styles = [styles];
+}
+
+customElements.define("ewt-formfield", EwtFormfield);

package/src/components/ewt-icon-button.ts

@@ -0,0 +1,14 @@
+import { IconButtonBase } from "@material/mwc-icon-button/mwc-icon-button-base";
+import { styles } from "@material/mwc-icon-button/mwc-icon-button.css";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-icon-button": EwtIconButton;
+  }
+}
+
+export class EwtIconButton extends IconButtonBase {
+  static override styles = [styles];
+}
+
+customElements.define("ewt-icon-button", EwtIconButton);

package/src/components/ewt-list-item.ts

@@ -0,0 +1,14 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-list-item": EwtListItem;
+  }
+}
+
+export class EwtListItem extends ListItemBase {
+  static override styles = [styles];
+}
+
+customElements.define("ewt-list-item", EwtListItem);

package/src/components/ewt-select.ts

@@ -0,0 +1,23 @@
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { styles } from "@material/mwc-select/mwc-select.css";
+import { css } from "lit";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-select": EwtSelect;
+  }
+}
+
+export class EwtSelect extends SelectBase {
+  static override styles = [
+    styles,
+    // rem -> em conversion
+    css`
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+  ];
+}
+
+customElements.define("ewt-select", EwtSelect);

package/src/components/ewt-textfield.ts

@@ -0,0 +1,23 @@
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { css } from "lit";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ewt-textfield": EwtTextfield;
+  }
+}
+
+export class EwtTextfield extends TextFieldBase {
+  static override styles = [
+    styles,
+    // rem -> em conversion
+    css`
+      .mdc-floating-label {
+        line-height: 1.15em;
+      }
+    `,
+  ];
+}
+
+customElements.define("ewt-textfield", EwtTextfield);

package/src/components/svg.ts

@@ -0,0 +1,27 @@
+import { svg } from "lit";
+
+export const closeIcon = svg`
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path
+      d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+    />
+  </svg>
+`;
+
+export const firmwareIcon = svg`
+  <svg viewBox="0 0 24 24" title="Software">
+    <path
+      fill="currentColor"
+      d="M9.5,8.5L11,10L8,13L11,16L9.5,17.5L5,13L9.5,8.5M14.5,17.5L13,16L16,13L13,10L14.5,8.5L19,13L14.5,17.5M21,2H3A2,2 0 0,0 1,4V20A2,2 0 0,0 3,22H21A2,2 0 0,0 23,20V4A2,2 0 0,0 21,2M21,20H3V6H21V20Z"
+    />
+  </svg>
+`;
+
+export const chipIcon = svg`
+  <svg viewBox="0 0 24 24" title="Chipset">
+    <path
+      fill="currentColor"
+      d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z"
+    />
+  </svg>
+`;

package/src/connect.ts

@@ -0,0 +1,42 @@
+import type { InstallButton } from "./install-button.js";
+import "./install-dialog.js";
+
+export const connect = async (button: InstallButton) => {
+  let port: SerialPort | undefined;
+  try {
+    port = await navigator.serial.requestPort();
+  } catch (err: any) {
+    if ((err as DOMException).name === "NotFoundError") {
+      import("./no-port-picked/index").then((mod) =>
+        mod.openNoPortPickedDialog(() => connect(button))
+      );
+      return;
+    }
+    alert(`Error: ${err.message}`);
+    return;
+  }
+
+  if (!port) {
+    return;
+  }
+
+  try {
+    await port.open({ baudRate: 115200 });
+  } catch (err: any) {
+    alert(err.message);
+    return;
+  }
+
+  const el = document.createElement("ewt-install-dialog");
+  el.port = port;
+  el.manifestPath = button.manifest || button.getAttribute("manifest")!;
+  el.overrides = button.overrides;
+  el.addEventListener(
+    "closed",
+    () => {
+      port!.close();
+    },
+    { once: true }
+  );
+  document.body.appendChild(el);
+};

package/src/const.ts

@@ -0,0 +1,101 @@
+export interface Logger {
+  log(msg: string, ...args: any[]): void;
+  error(msg: string, ...args: any[]): void;
+  debug(msg: string, ...args: any[]): void;
+}
+
+export interface Build {
+  chipFamily: "ESP32" | "ESP8266" | "ESP32-S2" | "ESP32-S3" | "ESP32-C3";
+  parts: {
+    path: string;
+    offset: number;
+  }[];
+}
+
+export interface Manifest {
+  name: string;
+  version: string;
+  home_assistant_domain?: string;
+  funding_url?: string;
+  /** @deprecated use `new_install_prompt_erase` instead */
+  new_install_skip_erase?: boolean;
+  new_install_prompt_erase?: boolean;
+  /* Time to wait to detect Improv Wi-Fi. Set to 0 to disable. */
+  new_install_improv_wait_time?: number;
+  builds: Build[];
+}
+
+export interface BaseFlashState {
+  state: FlashStateType;
+  message: string;
+  manifest?: Manifest;
+  build?: Build;
+  chipFamily?: Build["chipFamily"] | "Unknown Chip";
+}
+
+export interface InitializingState extends BaseFlashState {
+  state: FlashStateType.INITIALIZING;
+  details: { done: boolean };
+}
+
+export interface ManifestState extends BaseFlashState {
+  state: FlashStateType.MANIFEST;
+  details: { done: boolean };
+}
+
+export interface PreparingState extends BaseFlashState {
+  state: FlashStateType.PREPARING;
+  details: { done: boolean };
+}
+
+export interface ErasingState extends BaseFlashState {
+  state: FlashStateType.ERASING;
+  details: { done: boolean };
+}
+
+export interface WritingState extends BaseFlashState {
+  state: FlashStateType.WRITING;
+  details: { bytesTotal: number; bytesWritten: number; percentage: number };
+}
+
+export interface FinishedState extends BaseFlashState {
+  state: FlashStateType.FINISHED;
+}
+
+export interface ErrorState extends BaseFlashState {
+  state: FlashStateType.ERROR;
+  details: { error: FlashError; details: string | Error };
+}
+
+export type FlashState =
+  | InitializingState
+  | ManifestState
+  | PreparingState
+  | ErasingState
+  | WritingState
+  | FinishedState
+  | ErrorState;
+
+export const enum FlashStateType {
+  INITIALIZING = "initializing",
+  MANIFEST = "manifest",
+  PREPARING = "preparing",
+  ERASING = "erasing",
+  WRITING = "writing",
+  FINISHED = "finished",
+  ERROR = "error",
+}
+
+export const enum FlashError {
+  FAILED_INITIALIZING = "failed_initialize",
+  FAILED_MANIFEST_FETCH = "fetch_manifest_failed",
+  NOT_SUPPORTED = "not_supported",
+  FAILED_FIRMWARE_DOWNLOAD = "failed_firmware_download",
+  WRITE_FAILED = "write_failed",
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    "state-changed": CustomEvent<FlashState>;
+  }
+}

package/src/flash.ts

@@ -0,0 +1,240 @@
+import { ESPLoader, Logger } from "tasmota-webserial-esptool";
+import {
+  Build,
+  FlashError,
+  FlashState,
+  Manifest,
+  FlashStateType,
+} from "./const";
+import { getChipFamilyName } from "./util/chip-family-name";
+import { sleep } from "./util/sleep";
+
+export const flash = async (
+  onEvent: (state: FlashState) => void,
+  port: SerialPort,
+  logger: Logger,
+  manifestPath: string,
+  eraseFirst: boolean
+) => {
+  let manifest: Manifest;
+  let build: Build | undefined;
+  let chipFamily: ReturnType<typeof getChipFamilyName>;
+
+  const fireStateEvent = (stateUpdate: FlashState) =>
+    onEvent({
+      ...stateUpdate,
+      manifest,
+      build,
+      chipFamily,
+    });
+
+  const manifestURL = new URL(manifestPath, location.toString()).toString();
+  const manifestProm = fetch(manifestURL).then(
+    (resp): Promise<Manifest> => resp.json()
+  );
+
+  const esploader = new ESPLoader(port, logger);
+
+  // For debugging
+  (window as any).esploader = esploader;
+
+  fireStateEvent({
+    state: FlashStateType.INITIALIZING,
+    message: "Initializing...",
+    details: { done: false },
+  });
+
+  try {
+    await esploader.initialize();
+  } catch (err: any) {
+    logger.error(err);
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message:
+        "Failed to initialize. Try resetting your device or holding the BOOT button while clicking INSTALL.",
+      details: { error: FlashError.FAILED_INITIALIZING, details: err },
+    });
+    if (esploader.connected) {
+      await esploader.disconnect();
+    }
+    return;
+  }
+
+  chipFamily = getChipFamilyName(esploader);
+
+  fireStateEvent({
+    state: FlashStateType.INITIALIZING,
+    message: `Initialized. Found ${chipFamily}`,
+    details: { done: true },
+  });
+  fireStateEvent({
+    state: FlashStateType.MANIFEST,
+    message: "Fetching manifest...",
+    details: { done: false },
+  });
+
+  try {
+    manifest = await manifestProm;
+  } catch (err: any) {
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message: `Unable to fetch manifest: ${err}`,
+      details: { error: FlashError.FAILED_MANIFEST_FETCH, details: err },
+    });
+    await esploader.disconnect();
+    return;
+  }
+
+  build = manifest.builds.find((b) => b.chipFamily === chipFamily);
+
+  fireStateEvent({
+    state: FlashStateType.MANIFEST,
+    message: `Found manifest for ${manifest.name}`,
+    details: { done: true },
+  });
+
+  if (!build) {
+    fireStateEvent({
+      state: FlashStateType.ERROR,
+      message: `Your ${chipFamily} board is not supported.`,
+      details: { error: FlashError.NOT_SUPPORTED, details: chipFamily },
+    });
+    await esploader.disconnect();
+    return;
+  }
+
+  fireStateEvent({
+    state: FlashStateType.PREPARING,
+    message: "Preparing installation...",
+    details: { done: false },
+  });
+
+  const filePromises = build.parts.map(async (part) => {
+    const url = new URL(part.path, manifestURL).toString();
+    const resp = await fetch(url);
+    if (!resp.ok) {
+      throw new Error(
+        `Downlading firmware ${part.path} failed: ${resp.status}`
+      );
+    }
+    return resp.arrayBuffer();
+  });
+
+  // Run the stub while we wait for files to download
+  const espStub = await esploader.runStub();
+
+  const files: ArrayBuffer[] = [];
+  let totalSize = 0;
+
+  for (const prom of filePromises) {
+    try {
+      const data = await prom;
+      files.push(data);
+      totalSize += data.byteLength;
+    } catch (err: any) {
+      fireStateEvent({
+        state: FlashStateType.ERROR,
+        message: err.message,
+        details: {
+          error: FlashError.FAILED_FIRMWARE_DOWNLOAD,
+          details: err.message,
+        },
+      });
+      await esploader.disconnect();
+      return;
+    }
+  }
+
+  fireStateEvent({
+    state: FlashStateType.PREPARING,
+    message: "Installation prepared",
+    details: { done: true },
+  });
+
+  if (eraseFirst) {
+    fireStateEvent({
+      state: FlashStateType.ERASING,
+      message: "Erasing device...",
+      details: { done: false },
+    });
+    await espStub.eraseFlash();
+    fireStateEvent({
+      state: FlashStateType.ERASING,
+      message: "Device erased",
+      details: { done: true },
+    });
+  }
+
+  let lastPct = 0;
+
+  fireStateEvent({
+    state: FlashStateType.WRITING,
+    message: `Writing progress: ${lastPct}%`,
+    details: {
+      bytesTotal: totalSize,
+      bytesWritten: 0,
+      percentage: lastPct,
+    },
+  });
+
+  let totalWritten = 0;
+
+  for (const part of build.parts) {
+    const file = files.shift()!;
+    try {
+      await espStub.flashData(
+        file,
+        (bytesWritten: number) => {
+          const newPct = Math.floor(
+            ((totalWritten + bytesWritten) / totalSize) * 100
+          );
+          if (newPct === lastPct) {
+            return;
+          }
+          lastPct = newPct;
+          fireStateEvent({
+            state: FlashStateType.WRITING,
+            message: `Writing progress: ${newPct}%`,
+            details: {
+              bytesTotal: totalSize,
+              bytesWritten: totalWritten + bytesWritten,
+              percentage: newPct,
+            },
+          });
+        },
+        part.offset,
+        true
+      );
+    } catch (err: any) {
+      fireStateEvent({
+        state: FlashStateType.ERROR,
+        message: err.message,
+        details: { error: FlashError.WRITE_FAILED, details: err },
+      });
+      await esploader.disconnect();
+      return;
+    }
+    totalWritten += file.byteLength;
+  }
+
+  fireStateEvent({
+    state: FlashStateType.WRITING,
+    message: "Writing complete",
+    details: {
+      bytesTotal: totalSize,
+      bytesWritten: totalWritten,
+      percentage: 100,
+    },
+  });
+
+  await sleep(100);
+  console.log("DISCONNECT");
+  await esploader.disconnect();
+  console.log("HARD RESET");
+  await esploader.hardReset();
+
+  fireStateEvent({
+    state: FlashStateType.FINISHED,
+    message: "All done!",
+  });
+};