mirror of
https://github.com/esphome/esp-web-tools.git
synced 2025-07-28 06:06:36 +00:00
Offer troubleshooting if no port selected (#190)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
3448bc17ab
commit
edd3b9e133
@ -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}`);
|
||||
|
||||
@ -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);
|
||||
|
||||
10
src/no-port-picked/index.ts
Normal file
10
src/no-port-picked/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import "./no-port-picked-dialog";
|
||||
|
||||
export const openNoPortPickedDialog = async (
|
||||
doTryAgain?: () => void
|
||||
): Promise<boolean> => {
|
||||
const dialog = document.createElement("ewt-no-port-picked-dialog");
|
||||
dialog.doTryAgain = doTryAgain;
|
||||
document.body.append(dialog);
|
||||
return true;
|
||||
};
|
||||
106
src/no-port-picked/no-port-picked-dialog.ts
Normal file
106
src/no-port-picked/no-port-picked-dialog.ts
Normal file
@ -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`
|
||||
<ewt-dialog
|
||||
open
|
||||
heading="No port selected"
|
||||
scrimClickAction
|
||||
@closed=${this._handleClose}
|
||||
>
|
||||
<div>
|
||||
If you didn't select a port because you didn't see your device listed,
|
||||
try the following steps:
|
||||
</div>
|
||||
<ol>
|
||||
<li>
|
||||
Make sure that the device is connected to this computer (the one
|
||||
that runs the browser that shows this website)
|
||||
</li>
|
||||
<li>
|
||||
Most devices have a tiny light when it is powered on. If yours has
|
||||
one, make sure it is on.
|
||||
</li>
|
||||
<li>
|
||||
Make sure you have the right drivers installed. Below are the
|
||||
drivers for common chips used in ESP devices:
|
||||
<ul>
|
||||
<li>
|
||||
CP2102 (square chip):
|
||||
<a
|
||||
href="https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>driver</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
CH341:
|
||||
<a
|
||||
href="https://github.com/nodemcu/nodemcu-devkit/tree/master/Drivers"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>driver</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
${this.doTryAgain
|
||||
? html`
|
||||
<ewt-button
|
||||
slot="primaryAction"
|
||||
dialogAction="close"
|
||||
label="Try Again"
|
||||
@click=${this.doTryAgain}
|
||||
></ewt-button>
|
||||
|
||||
<ewt-button
|
||||
no-attention
|
||||
slot="secondaryAction"
|
||||
dialogAction="close"
|
||||
label="Cancel"
|
||||
></ewt-button>
|
||||
`
|
||||
: html`
|
||||
<ewt-button
|
||||
slot="primaryAction"
|
||||
dialogAction="close"
|
||||
label="Close"
|
||||
></ewt-button>
|
||||
`}
|
||||
</ewt-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
17
src/styles.ts
Normal file
17
src/styles.ts
Normal file
@ -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);
|
||||
}
|
||||
`;
|
||||
Loading…
x
Reference in New Issue
Block a user