jeans/esp-web-tools
jeans/esp-web-tools
1
0
Fork 0
mirror of https://github.com/esphome/esp-web-tools.git synced 2025-07-28 06:06:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to Material Web 1 (#474)

Browse Source 
* No port pick

* Use own components again

* Migrate circular progress

* Migrate Icon Button

* Move button labels to text nodes

* Use ew-list for dashboard

* Missed one interactive

* Migrate select

* Migrate textfield

* Migrate checkbox/formfield

* Remove unused ewt-button

* Migrate text field

* Divider + dashboard icons

* Migrate dialog

* Remove mwc components

* Clean up icons

* Remove old comment

* Update connect button

* Align top level dialog icon

* Avoid scrolling when dialog active

* Allow variable for border radius

* Cleanup

* Bump dependencies

* Bump esptool.js to 0.4.1

* Add new device types

* Update readme with new device types

* Tweak launch button look
This commit is contained in:
Paulus Schoutsen 2024-02-12 15:50:33 -05:00 committed by GitHub
parent e107f0f5b6
commit 7de3b6a521
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 2603 additions and 955 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@ -79,8 +79,10 @@
}
.screenshot img {
max-width: 100%;
box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
box-shadow:
rgb(0 0 0 / 20%) 0px 2px 1px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px,
rgb(0 0 0 / 12%) 0px 1px 3px 0px;
border-radius: 4px;
}
.screenshot i {
@ -172,7 +174,7 @@
device to your computer and hit the button:
</p>
<esp-web-install-button
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
>
<i slot="unsupported">
The demo is not available because your browser does not support Web
@ -266,9 +268,16 @@
</div>
<div class="name">Luciferin</div>
</a>
<a href="https://install.openepaperlink.de" target="_blank" class="project">
<a
href="https://install.openepaperlink.de"
target="_blank"
class="project"
>
<div class="logo">
<img src="static/logos/openepaperlink.png" alt="OpenEpaperLink logo" />
<img
src="static/logos/openepaperlink.png"
alt="OpenEpaperLink logo"
/>
</div>
<div class="name">OpenEpaperLink</div>
</a>
@ -366,7 +375,7 @@
</p>
<pre>
&lt;esp-web-install-button
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
>&lt;/esp-web-install-button></pre
>
<p>
@ -432,7 +441,8 @@ esptool --chip esp32 merge_bin \
Manifests describe the firmware that you want to offer the user to
install. It allows specifying different builds for the different types
of ESP devices. Current supported chip families are
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C3</code>,
<code>ESP8266</code>, <code>ESP32</code>, <code>ESP32-C2</code>,
<code>ESP32-C3</code>, <code>ESP32-C6</code>, <code>ESP32-H2</code>,
<code>ESP32-S2</code> and <code>ESP32-S3</code>. The correct build will
be automatically selected based on the type of the connected ESP device.
</p>
@ -526,6 +536,7 @@ button.overrides = {
<ul>
<li><code>--esp-tools-button-color</code></li>
<li><code>--esp-tools-button-text-color</code></li>
<li><code>--esp-tools-button-border-radius</code></li>
</ul>
<p>There are also some attributes that can be used for styling:</p>
<table>
@ -549,7 +560,7 @@ button.overrides = {
</p>
<pre>
&lt;esp-web-install-button
manifest="https://firmware.esphome.io/esphome-web/manifest.json"
manifest="https://firmware.esphome.io/esp-web-tools/manifest.json"
>
&lt;button slot="activate">Custom install button&lt;/button>
&lt;span slot="unsupported">Ah snap, your browser doesn't work!&lt;/span>

2021
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
package.json
View File

@ -12,28 +12,23 @@
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-json": "^6.0.1",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.5",
"@rollup/plugin-terser": "^0.4.4",
"@types/w3c-web-serial": "^1.0.3",
"prettier": "^3.0.0",
"rollup": "^4.3.0",
"serve": "^14.2.0",
"typescript": "^5.1.3"
"@rollup/plugin-typescript": "^11.1.6",
"@types/w3c-web-serial": "^1.0.6",
"prettier": "^3.2.5",
"rollup": "^4.10.0",
"serve": "^14.2.1",
"typescript": "^5.3.3"
},
"dependencies": {
"@material/mwc-button": "^0.27.0",
"@material/mwc-checkbox": "^0.27.0",
"@material/mwc-circular-progress": "^0.27.0",
"@material/mwc-dialog": "^0.27.0",
"@material/mwc-formfield": "^0.27.0",
"@material/mwc-icon-button": "^0.27.0",
"@material/mwc-textfield": "^0.27.0",
"esptool-js": "^0.3.2",
"@material/web": "^1.2.0",
"esptool-js": "^0.4.1",
"improv-wifi-serial-sdk": "^2.5.0",
"lit": "^2.8.0",
"lit": "^3.1.2",
"pako": "^2.1.0",
"tslib": "^2.5.3"
"tslib": "^2.6.2"
}
}

7
rollup.config.mjs
View File

@ -2,6 +2,7 @@ import nodeResolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";
import terser from "@rollup/plugin-terser";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
const config = {
input: "dist/install-button.js",
@ -12,7 +13,11 @@ const config = {
external: ["https://www.improv-wifi.com/sdk-js/launch-button.js"],
preserveEntrySignatures: false,
plugins: [
nodeResolve(),
commonjs(),
nodeResolve({
browser: true,
preferBuiltins: false,
}),
babel({
babelHelpers: "bundled",
plugins: ["@babel/plugin-proposal-class-properties"],

14
src/components/ew-checkbox.ts Normal file
View File

@ -0,0 +1,14 @@
import { Checkbox } from "@material/web/checkbox/internal/checkbox.js";
import { styles } from "@material/web/checkbox/internal/checkbox-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-checkbox": EwCheckbox;
}
}
export class EwCheckbox extends Checkbox {
static override styles = [styles];
}
customElements.define("ew-checkbox", EwCheckbox);

14
src/components/ew-circular-progress.ts Normal file
View File

@ -0,0 +1,14 @@
import { CircularProgress } from "@material/web/progress/internal/circular-progress.js";
import { styles } from "@material/web/progress/internal/circular-progress-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-circular-progress": EwCircularProgress;
}
}
export class EwCircularProgress extends CircularProgress {
static override styles = [styles];
}
customElements.define("ew-circular-progress", EwCircularProgress);

14
src/components/ew-dialog.ts Normal file
View File

@ -0,0 +1,14 @@
import { Dialog } from "@material/web/dialog/internal/dialog.js";
import { styles } from "@material/web/dialog/internal/dialog-styles.css";
declare global {
interface HTMLElementTagNameMap {
"ew-dialog": EwDialog;
}
}
export class EwDialog extends Dialog {
static override styles = [styles];
}
customElements.define("ew-dialog", EwDialog);

14
src/components/ew-divider.ts Normal file
View File

@ -0,0 +1,14 @@
import { Divider } from "@material/web/divider/internal/divider.js";
import { styles } from "@material/web/divider/internal/divider-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-divider": EwDivider;
}
}
export class EwDivider extends Divider {
static override styles = [styles];
}
customElements.define("ew-divider", EwDivider);

15
src/components/ew-filled-select.ts Normal file
View File

@ -0,0 +1,15 @@
import { FilledSelect } from "@material/web/select/internal/filled-select.js";
import { styles } from "@material/web/select/internal/filled-select-styles.css.js";
import { styles as sharedStyles } from "@material/web/select/internal/shared-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-filled-select": EwFilledSelect;
}
}
export class EwFilledSelect extends FilledSelect {
static override styles = [sharedStyles, styles];
}
customElements.define("ew-filled-select", EwFilledSelect);

17
src/components/ew-filled-text-field.ts Normal file
View File

@ -0,0 +1,17 @@
import { styles as filledStyles } from "@material/web/textfield/internal/filled-styles.css.js";
import { FilledTextField } from "@material/web/textfield/internal/filled-text-field.js";
import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles.css.js";
import { literal } from "lit/static-html.js";
declare global {
interface HTMLElementTagNameMap {
"ew-filled-text-field": EwFilledTextField;
}
}
export class EwFilledTextField extends FilledTextField {
static override styles = [sharedStyles, filledStyles];
protected override readonly fieldTag = literal`md-filled-field`;
}
customElements.define("ew-filled-text-field", EwFilledTextField);

15
src/components/ew-icon-button.ts Normal file
View File

@ -0,0 +1,15 @@
import { IconButton } from "@material/web/iconbutton/internal/icon-button.js";
import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles.css.js";
import { styles } from "@material/web/iconbutton/internal/standard-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-icon-button": EwIconButton;
}
}
export class EwIconButton extends IconButton {
static override styles = [sharedStyles, styles];
}
customElements.define("ew-icon-button", EwIconButton);

14
src/components/ew-list-item.ts Normal file
View File

@ -0,0 +1,14 @@
import { ListItemEl as ListItem } from "@material/web/list/internal/listitem/list-item.js";
import { styles } from "@material/web/list/internal/listitem/list-item-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-list-item": EwListItem;
}
}
export class EwListItem extends ListItem {
static override styles = [styles];
}
customElements.define("ew-list-item", EwListItem);

14
src/components/ew-list.ts Normal file
View File

@ -0,0 +1,14 @@
import { List } from "@material/web/list/internal/list.js";
import { styles } from "@material/web/list/internal/list-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-list": EwList;
}
}
export class EwList extends List {
static override styles = [styles];
}
customElements.define("ew-list", EwList);

14
src/components/ew-select-option.ts Normal file
View File

@ -0,0 +1,14 @@
import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles.css.js";
import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option.js";
declare global {
interface HTMLElementTagNameMap {
"ew-select-option": EwSelectOption;
}
}
export class EwSelectOption extends SelectOptionEl {
static override styles = [styles];
}
customElements.define("ew-select-option", EwSelectOption);

15
src/components/ew-text-button.ts Normal file
View File

@ -0,0 +1,15 @@
import { styles as sharedStyles } from "@material/web/button/internal/shared-styles.css.js";
import { TextButton } from "@material/web/button/internal/text-button.js";
import { styles as textStyles } from "@material/web/button/internal/text-styles.css.js";
declare global {
interface HTMLElementTagNameMap {
"ew-text-button": EwTextButton;
}
}
export class EwTextButton extends TextButton {
static override styles = [sharedStyles, textStyles];
}
customElements.define("ew-text-button", EwTextButton);

25
src/components/ewt-button.ts
View File

@ -1,25 +0,0 @@
import { css } from "lit";
import { ButtonBase } from "@material/mwc-button/mwc-button-base";
import { styles } from "@material/mwc-button/styles.css";
declare global {
interface HTMLElementTagNameMap {
"ewt-button": EwtButton;
}
}
export class EwtButton extends ButtonBase {
static override styles = [
styles,
css`
.mdc-button {
min-width: initial;
}
:host([text-left]) .mdc-button__label {
text-align: left;
}
`,
];
}
customElements.define("ewt-button", EwtButton);

14
src/components/ewt-checkbox.ts
View File

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

14
src/components/ewt-circular-progress.ts
View File

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

14
src/components/ewt-formfield.ts
View File

@ -1,14 +0,0 @@
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);

14
src/components/ewt-icon-button.ts
View File

@ -1,14 +0,0 @@
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);

14
src/components/ewt-list-item.ts
View File

@ -1,14 +0,0 @@
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);

23
src/components/ewt-select.ts
View File

@ -1,23 +0,0 @@
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);

23
src/components/ewt-textfield.ts
View File

@ -1,23 +0,0 @@
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);

61
src/components/svg.ts
View File

@ -3,29 +3,12 @@ import { svg } from "lit";
export const closeIcon = svg`
<svg width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentColor"
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>
`;
export const refreshIcon = svg`
<svg viewBox="0 0 24 24">
<path
@ -34,3 +17,45 @@ export const refreshIcon = svg`
/>
</svg>
`;
export const listItemInstallIcon = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg>
`;
export const listItemWifi = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" />
</svg>
`;
export const listItemConsole = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z" />
</svg>
`;
export const listItemVisitDevice = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
`;
export const listItemHomeAssistant = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="m12.151 1.5882c-.3262 0-.6523.1291-.8996.3867l-8.3848 8.7354c-.0619.0644-.1223.1368-.1807.2154-.0588.0789-.1151.1638-.1688.2534-.2593.4325-.4552.9749-.5232 1.4555-.0026.018-.0076.0369-.0094.0548-.0121.0987-.0184.1944-.0184.2857v8.0124a1.2731 1.2731 0 001.2731 1.2731h7.8313l-3.4484-3.593a1.7399 1.7399 0 111.0803-1.125l2.6847 2.7972v-10.248a1.7399 1.7399 0 111.5276-0v7.187l2.6702-2.782a1.7399 1.7399 0 111.0566 1.1505l-3.7269 3.8831v2.7299h8.174a1.2471 1.2471 0 001.2471-1.2471v-8.0375c0-.0912-.0059-.1868-.0184-.2855-.0603-.4935-.2636-1.0617-.5326-1.5105-.0537-.0896-.1101-.1745-.1684-.253-.0588-.079-.1191-.1513-.181-.2158l-8.3848-8.7363c-.2473-.2577-.5735-.3866-.8995-.3864" />
</svg>
`;
export const listItemEraseUserData = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />
</svg>
`;
export const listItemFundDevelopment = svg`
<svg slot="start" viewBox="0 0 24 24">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
</svg>
`;

10
src/const.ts
View File

@ -5,7 +5,15 @@ export interface Logger {
}
export interface Build {
chipFamily: "ESP32" | "ESP8266" | "ESP32-S2" | "ESP32-S3" | "ESP32-C3";
chipFamily:
| "ESP32"
| "ESP32-C2"
| "ESP32-C3"
| "ESP32-C6"
| "ESP32-H2"
| "ESP32-S2"
| "ESP32-S3"
| "ESP8266";
parts: {
path: string;
offset: number;

9
src/flash.ts
View File

@ -44,6 +44,7 @@ export const flash = async (
transport,
baudrate: 115200,
romBaudrate: 115200,
enableTracing: false,
});
// For debugging
@ -56,8 +57,8 @@ export const flash = async (
});
try {
await esploader.main_fn();
await esploader.flash_id();
await esploader.main();
await esploader.flashId();
} catch (err: any) {
console.error(err);
fireStateEvent({
@ -166,7 +167,7 @@ export const flash = async (
message: "Erasing device...",
details: { done: false },
});
await esploader.erase_flash();
await esploader.eraseFlash();
fireStateEvent({
state: FlashStateType.ERASING,
message: "Device erased",
@ -187,7 +188,7 @@ export const flash = async (
let totalWritten = 0;
try {
await esploader.write_flash({
await esploader.writeFlash({
fileArray,
flashSize: "keep",
flashMode: "keep",

17
src/install-button.ts
View File

@ -12,12 +12,12 @@ export class InstallButton extends HTMLElement {
position: relative;
cursor: pointer;
font-size: 14px;
padding: 8px 28px;
font-weight: 500;
padding: 10px 24px;
color: var(--esp-tools-button-text-color, #fff);
background-color: var(--esp-tools-button-color, #03a9f4);
border: none;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
border-radius: var(--esp-tools-button-border-radius, 9999px);
}
button::before {
content: " ";
@ -27,10 +27,7 @@ export class InstallButton extends HTMLElement {
left: 0;
right: 0;
opacity: 0.2;
border-radius: 4px;
}
button:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12), 0 3px 1px -1px rgba(0,0,0,.2);
border-radius: var(--esp-tools-button-border-radius, 9999px);
}
button:hover::before {
background-color: rgba(255,255,255,.8);
@ -51,10 +48,6 @@ export class InstallButton extends HTMLElement {
cursor: unset;
pointer-events: none;
}
improv-wifi-launch-button {
display: block;
margin-top: 16px;
}
.hidden {
display: none;
}`;
@ -101,7 +94,7 @@ export class InstallButton extends HTMLElement {
slot.name = "activate";
const button = document.createElement("button");
button.innerText = "CONNECT";
button.innerText = "Connect";
slot.append(button);
if (
"adoptedStyleSheets" in Document.prototype &&

805
src/install-dialog.ts
View File

File diff suppressed because it is too large Load Diff

215
src/no-port-picked/no-port-picked-dialog.ts
View File

@ -1,7 +1,8 @@
import { LitElement, html, css, svg } from "lit";
import { customElement } from "lit/decorators.js";
import "../components/ewt-dialog";
import "../components/ewt-button";
import "../components/ew-dialog";
import "../components/ew-text-button";
import { dialogStyles } from "../styles";
import { getOperatingSystem } from "../util/get-operating-system";
@ -34,120 +35,116 @@ class EwtNoPortPickedDialog extends LitElement {
const OS = getOperatingSystem();
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 that the USB cable you use can be used for data and is not
a power-only cable.
</li>
${OS === "Linux"
? html`
<ew-dialog open @closed=${this._handleClose}>
<div slot="headline">No port selected</div>
<div slot="content">
<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 that the USB cable you use can be used for data and is
not a power-only cable.
</li>
${OS === "Linux"
? html`
<li>
If you are using a Linux flavor, make sure that your user is
part of the <code>dialout</code> group so it has permission
to access the device.
<code class="block"
>sudo usermod -a -G dialout YourUserName</code
>
You may need to log out & back in or reboot to activate the
new group access.
</li>
`
: ""}
<li>
Make sure you have the right drivers installed. Below are the
drivers for common chips used in ESP devices:
<ul>
<li>
If you are using a Linux flavor, make sure that your user is
part of the <code>dialout</code> group so it has permission to
access the device.
<code class="block"
>sudo usermod -a -G dialout YourUserName</code
CP2102 drivers:
<a
href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers"
target="_blank"
rel="noopener"
>Windows & Mac</a
>
You may need to log out & back in or reboot to activate the
new group access.
</li>
<li>
CH342, CH343, CH9102 drivers:
<a
href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
target="_blank"
rel="noopener"
>Windows</a
>,
<a
href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
target="_blank"
rel="noopener"
>Mac</a
>
<br />
(download via blue button with ${cloudDownload} icon)
</li>
<li>
CH340, CH341 drivers:
<a
href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
target="_blank"
rel="noopener"
>Windows</a
>,
<a
href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
target="_blank"
rel="noopener"
>Mac</a
>
<br />
(download via blue button with ${cloudDownload} icon)
</li>
</ul>
</li>
</ol>
</div>
<div slot="actions">
${this.doTryAgain
? html`
<ew-text-button @click=${this.close}>Cancel</ew-text-button>
<ew-text-button @click=${this.tryAgain}>
Try Again
</ew-text-button>
`
: ""}
<li>
Make sure you have the right drivers installed. Below are the
drivers for common chips used in ESP devices:
<ul>
<li>
CP2102 drivers:
<a
href="https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers"
target="_blank"
rel="noopener"
>Windows & Mac</a
>
</li>
<li>
CH342, CH343, CH9102 drivers:
<a
href="https://www.wch.cn/downloads/CH343SER_ZIP.html"
target="_blank"
rel="noopener"
>Windows</a
>,
<a
href="https://www.wch.cn/downloads/CH34XSER_MAC_ZIP.html"
target="_blank"
rel="noopener"
>Mac</a
>
<br />
(download via blue button with ${cloudDownload} icon)
</li>
<li>
CH340, CH341 drivers:
<a
href="https://www.wch.cn/downloads/CH341SER_ZIP.html"
target="_blank"
rel="noopener"
>Windows</a
>,
<a
href="https://www.wch.cn/downloads/CH341SER_MAC_ZIP.html"
target="_blank"
rel="noopener"
>Mac</a
>
<br />
(download via blue button with ${cloudDownload} icon)
</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>
: html`
<ew-text-button @click=${this.close}>Close</ew-text-button>
`}
</div>
</ew-dialog>
`;
}
private tryAgain() {
this.close();
this.doTryAgain?.();
}
private close() {
this.shadowRoot!.querySelector("ew-dialog")!.close();
}
private async _handleClose() {
this.parentNode!.removeChild(this);
}

4
src/pages/ewt-page-message.ts
View File

@ -1,6 +1,5 @@
import { LitElement, html, css, TemplateResult } from "lit";
import { property } from "lit/decorators.js";
import "../components/ewt-circular-progress";
class EwtPageMessage extends LitElement {
@property() icon!: string;
@ -25,9 +24,6 @@ class EwtPageMessage extends LitElement {
line-height: 80px;
color: black;
}
ewt-circular-progress {
margin-bottom: 16px;
}
`;
}
customElements.define("ewt-page-message", EwtPageMessage);

11
src/pages/ewt-page-progress.ts
View File

@ -1,6 +1,6 @@
import { LitElement, html, css, TemplateResult } from "lit";
import { property } from "lit/decorators.js";
import "../components/ewt-circular-progress";
import "../components/ew-circular-progress";
class EwtPageProgress extends LitElement {
@property() label!: string | TemplateResult;
@ -10,14 +10,13 @@ class EwtPageProgress extends LitElement {
render() {
return html`
<div>
<ewt-circular-progress
<ew-circular-progress
active
?indeterminate=${this.progress === undefined}
.progress=${this.progress !== undefined
.value=${this.progress !== undefined
? this.progress / 100
: undefined}
density="8"
></ewt-circular-progress>
></ew-circular-progress>
${this.progress !== undefined ? html`<div>${this.progress}%</div>` : ""}
</div>
${this.label}
@ -30,7 +29,7 @@ class EwtPageProgress extends LitElement {
flex-direction: column;
text-align: center;
}
ewt-circular-progress {
ew-circular-progress {
margin-bottom: 16px;
}
`;

39
src/styles.ts
View File

@ -6,29 +6,26 @@ 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;
font-size: 16px;
--mdc-typography-headline6-font-size: 1.25em;
--mdc-typography-headline6-line-height: 2em;
--mdc-typography-body1-font-size: 1em;
--mdc-typography-body1-line-height: 1.5em;
--mdc-typography-button-font-size: 0.875em;
--mdc-typography-button-line-height: 2.25em;
--mdc-typography-subtitle1-font-size: 1em;
--mdc-typography-subtitle1-line-height: 1.75em;
--roboto-font: Roboto, system-ui;
--text-color: rgba(0, 0, 0, 0.6);
--danger-color: #db4437;
--md-sys-color-primary: #03a9f4;
--md-sys-color-on-primary: #fff;
--md-ref-typeface-brand: var(--roboto-font);
--md-ref-typeface-plain: var(--roboto-font);
--md-sys-color-surface: #fff;
--md-sys-color-surface-container: #fff;
--md-sys-color-surface-container-high: #fff;
--md-sys-color-surface-container-highest: #f5f5f5;
--md-sys-color-secondary-container: #e0e0e0;
--md-sys-typescale-headline-font: var(--roboto-font);
--md-sys-typescale-title-font: var(--roboto-font);
}
a {
color: var(--improv-primary-color, #03a9f4);
}
a.button {
text-decoration: none;
color: var(--md-sys-color-primary);
}
`;