From edd3b9e133939f8ee86df64ecf60932a23d5189e Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 7 Mar 2022 23:42:32 -0800 Subject: [PATCH] Offer troubleshooting if no port selected (#190) --- src/connect.ts | 3 + src/install-dialog.ts | 125 ++++++++++---------- src/no-port-picked/index.ts | 10 ++ src/no-port-picked/no-port-picked-dialog.ts | 106 +++++++++++++++++ src/styles.ts | 17 +++ 5 files changed, 197 insertions(+), 64 deletions(-) create mode 100644 src/no-port-picked/index.ts create mode 100644 src/no-port-picked/no-port-picked-dialog.ts create mode 100644 src/styles.ts diff --git a/src/connect.ts b/src/connect.ts index 5181654..0be4e19 100644 --- a/src/connect.ts +++ b/src/connect.ts @@ -7,6 +7,9 @@ export const connect = async (button: InstallButton) => { 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}`); diff --git a/src/install-dialog.ts b/src/install-dialog.ts index 0fbd678..3dca2f1 100644 --- a/src/install-dialog.ts +++ b/src/install-dialog.ts @@ -23,6 +23,7 @@ import { textDownload } from "./util/file-download"; import { fireEvent } from "./util/fire-event"; import { sleep } from "./util/sleep"; import { downloadManifest } from "./util/manifest"; +import { dialogStyles } from "./styles"; const ERROR_ICON = "⚠️"; const OK_ICON = "🎉"; @@ -789,70 +790,66 @@ class EwtInstallDialog extends LitElement { await client.close(); } - static styles = css` - :host { - --mdc-dialog-max-width: 390px; - --mdc-theme-primary: var(--improv-primary-color, #03a9f4); - --mdc-theme-on-primary: var(--improv-on-primary-color, #fff); - --improv-danger-color: #db4437; - --improv-text-color: rgba(0, 0, 0, 0.6); - --mdc-theme-text-primary-on-background: var(--improv-text-color); - --mdc-dialog-content-ink-color: var(--improv-text-color); - text-align: left; - } - ewt-icon-button { - position: absolute; - right: 4px; - top: 10px; - } - table { - border-spacing: 0; - color: var(--improv-text-color); - margin-bottom: 16px; - } - table svg { - width: 20px; - margin-right: 8px; - } - ewt-textfield { - display: block; - margin-top: 16px; - } - .dashboard-buttons { - margin: 0 0 -16px -8px; - } - .dashboard-buttons div { - display: block; - margin: 4px 0; - } - a.has-button { - text-decoration: none; - } - .error { - color: var(--improv-danger-color); - } - .danger { - --mdc-theme-primary: var(--improv-danger-color); - --mdc-theme-secondary: var(--improv-danger-color); - } - button.link { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - text-align: left; - text-decoration: underline; - cursor: pointer; - } - :host([state="LOGS"]) ewt-dialog { - --mdc-dialog-max-width: 90vw; - } - ewt-console { - width: calc(80vw - 48px); - height: 80vh; - } - `; + static styles = [ + dialogStyles, + css` + :host { + --mdc-dialog-max-width: 390px; + } + ewt-icon-button { + position: absolute; + right: 4px; + top: 10px; + } + table { + border-spacing: 0; + color: var(--improv-text-color); + margin-bottom: 16px; + } + table svg { + width: 20px; + margin-right: 8px; + } + ewt-textfield { + display: block; + margin-top: 16px; + } + .dashboard-buttons { + margin: 0 0 -16px -8px; + } + .dashboard-buttons div { + display: block; + margin: 4px 0; + } + a.has-button { + text-decoration: none; + } + .error { + color: var(--improv-danger-color); + } + .danger { + --mdc-theme-primary: var(--improv-danger-color); + --mdc-theme-secondary: var(--improv-danger-color); + } + button.link { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + text-align: left; + text-decoration: underline; + cursor: pointer; + } + :host([state="LOGS"]) ewt-dialog { + --mdc-dialog-max-width: 90vw; + } + ewt-console { + width: calc(80vw - 48px); + height: 80vh; + } + `, + ]; } customElements.define("ewt-install-dialog", EwtInstallDialog); diff --git a/src/no-port-picked/index.ts b/src/no-port-picked/index.ts new file mode 100644 index 0000000..3a781ae --- /dev/null +++ b/src/no-port-picked/index.ts @@ -0,0 +1,10 @@ +import "./no-port-picked-dialog"; + +export const openNoPortPickedDialog = async ( + doTryAgain?: () => void +): Promise => { + const dialog = document.createElement("ewt-no-port-picked-dialog"); + dialog.doTryAgain = doTryAgain; + document.body.append(dialog); + return true; +}; diff --git a/src/no-port-picked/no-port-picked-dialog.ts b/src/no-port-picked/no-port-picked-dialog.ts new file mode 100644 index 0000000..cf09ee2 --- /dev/null +++ b/src/no-port-picked/no-port-picked-dialog.ts @@ -0,0 +1,106 @@ +import { LitElement, html, css } from "lit"; +import { customElement } from "lit/decorators.js"; +import "../components/ewt-dialog"; +import "../components/ewt-button"; +import { dialogStyles } from "../styles"; + +@customElement("ewt-no-port-picked-dialog") +class EwtNoPortPickedDialog extends LitElement { + public doTryAgain?: () => void; + + public render() { + return html` + +
+ If you didn't select a port because you didn't see your device listed, + try the following steps: +
+
    +
  1. + Make sure that the device is connected to this computer (the one + that runs the browser that shows this website) +
    2. +
  2. + Most devices have a tiny light when it is powered on. If yours has + one, make sure it is on. +
    3. +
  3. + Make sure you have the right drivers installed. Below are the + drivers for common chips used in ESP devices: +
      +
    • + CP2102 (square chip): + driver +
      • +
    • + CH341: + driver +
      • +
    +
    4. +
+ ${this.doTryAgain + ? html` + + + + ` + : html` + + `} + + `; + } + + private async _handleClose() { + this.parentNode!.removeChild(this); + } + + static styles = [ + dialogStyles, + css` + li + li, + li > ul { + margin-top: 8px; + } + ol { + margin-bottom: 0; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ewt-no-port-picked-dialog": EwtNoPortPickedDialog; + } +} diff --git a/src/styles.ts b/src/styles.ts new file mode 100644 index 0000000..716fddd --- /dev/null +++ b/src/styles.ts @@ -0,0 +1,17 @@ +import { css } from "lit"; + +export const dialogStyles = css` + :host { + --mdc-theme-primary: var(--improv-primary-color, #03a9f4); + --mdc-theme-on-primary: var(--improv-on-primary-color, #fff); + --improv-danger-color: #db4437; + --improv-text-color: rgba(0, 0, 0, 0.6); + --mdc-theme-text-primary-on-background: var(--improv-text-color); + --mdc-dialog-content-ink-color: var(--improv-text-color); + text-align: left; + } + + a { + color: var(--improv-primary-color, #03a9f4); + } +`;