Página inicial Explorar Ajuda
Registrar Entrar
oleg
/
esp-web-tools
mirror de https://github.com/esphome/esp-web-tools.git
1
0
Fork 0
Arquivos Issues 0 Wiki
Ver código fonte

Migrate to Material Web 1 (#474)

* 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
Paulus Schoutsen 1 ano atrás
pai
e107f0f5b6
commit
7de3b6a521
32 arquivos alterados com 1446 adições e 786 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 20 9
      index.html
  2. 678 97
      package-lock.json
  3. 12 17
      package.json
  4. 6 1
      rollup.config.mjs
  5. 14 0
      src/components/ew-checkbox.ts
  6. 14 0
      src/components/ew-circular-progress.ts
  7. 14 0
      src/components/ew-dialog.ts
  8. 14 0
      src/components/ew-divider.ts
  9. 15 0
      src/components/ew-filled-select.ts
  10. 17 0
      src/components/ew-filled-text-field.ts
  11. 15 0
      src/components/ew-icon-button.ts
  12. 14 0
      src/components/ew-list-item.ts
  13. 14 0
      src/components/ew-list.ts
  14. 14 0
      src/components/ew-select-option.ts
  15. 15 0
      src/components/ew-text-button.ts
  16. 0 25
      src/components/ewt-button.ts
  17. 0 14
      src/components/ewt-checkbox.ts
  18. 0 14
      src/components/ewt-circular-progress.ts
  19. 0 14
      src/components/ewt-formfield.ts
  20. 0 14
      src/components/ewt-icon-button.ts
  21. 0 14
      src/components/ewt-list-item.ts
  22. 0 23
      src/components/ewt-select.ts
  23. 0 23
      src/components/ewt-textfield.ts
  24. 40 15
      src/components/svg.ts
  25. 9 1
      src/const.ts
  26. 5 4
      src/flash.ts
  27. 5 12
      src/install-button.ts
  28. 382 349
      src/install-dialog.ts
  29. 106 109
      src/no-port-picked/no-port-picked-dialog.ts
  30. 0 4
      src/pages/ewt-page-message.ts
  31. 5 6
      src/pages/ewt-page-progress.ts
  32. 18 21
      src/styles.ts

+ 20 - 9
index.html
Ver arquivo 

@@ -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>

Diferenças do arquivo suprimidas por serem muito extensas
+ 678 - 97
package-lock.json


+ 12 - 17
package.json
Ver arquivo 

@@ -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"
 
   }
 
 }

+ 6 - 1
rollup.config.mjs
Ver arquivo 

@@ -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 - 0
src/components/ew-checkbox.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-circular-progress.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-dialog.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-divider.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-filled-select.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-filled-text-field.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-icon-button.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-list-item.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-list.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-select-option.ts
Ver arquivo 

@@ -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 - 0
src/components/ew-text-button.ts
Ver arquivo 

@@ -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);

+ 0 - 25
src/components/ewt-button.ts
Ver arquivo 

@@ -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);

+ 0 - 14
src/components/ewt-checkbox.ts
Ver arquivo 

@@ -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);

+ 0 - 14
src/components/ewt-circular-progress.ts
Ver arquivo 

@@ -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);

+ 0 - 14
src/components/ewt-formfield.ts
Ver arquivo 

@@ -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);

+ 0 - 14
src/components/ewt-icon-button.ts
Ver arquivo 

@@ -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);

+ 0 - 14
src/components/ewt-list-item.ts
Ver arquivo 

@@ -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);

+ 0 - 23
src/components/ewt-select.ts
Ver arquivo 

@@ -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);

+ 0 - 23
src/components/ewt-textfield.ts
Ver arquivo 

@@ -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);

+ 40 - 15
src/components/svg.ts
Ver arquivo 

@@ -3,34 +3,59 @@ 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">
 
+export const refreshIcon = svg`
 
+  <svg viewBox="0 0 24 24">
 
     <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"
 
+      d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
 
     />
 
   </svg>
 
 `;
 
 
-export const chipIcon = svg`
 
-  <svg viewBox="0 0 24 24" title="Chipset">
 
-    <path
 
-      fill="currentColor"
 
-      d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z"
 
-    />
 
+export const listItemInstallIcon = svg`
 
+  <svg slot="start" viewBox="0 0 24 24">
 
+    <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
 
   </svg>
 
 `;
 
 
-export const refreshIcon = svg`
 
-  <svg viewBox="0 0 24 24">
 
-    <path
 
-      fill="currentColor"
 
-      d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
 
-    />
 
+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>
 
 `;

+ 9 - 1
src/const.ts
Ver arquivo 

@@ -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;

+ 5 - 4
src/flash.ts
Ver arquivo 

@@ -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",

+ 5 - 12
src/install-button.ts
Ver arquivo 

@@ -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 &&

Diferenças do arquivo suprimidas por serem muito extensas
+ 382 - 349
src/install-dialog.ts


+ 106 - 109
src/no-port-picked/no-port-picked-dialog.ts
Ver arquivo 

@@ -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>
 
+                  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>
 
-                  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
 
+                  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
 
                   >
 
-                  You may need to log out & back in or reboot to activate the
 
-                  new group access.
 
+                  <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);
 
   }

+ 0 - 4
src/pages/ewt-page-message.ts
Ver arquivo 

@@ -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);

+ 5 - 6
src/pages/ewt-page-progress.ts
Ver arquivo 

@@ -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;
 
     }
 
   `;

+ 18 - 21
src/styles.ts
Ver arquivo 

@@ -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;
 
 
-  a {
 
-    color: var(--improv-primary-color, #03a9f4);
 
+    --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.button {
 
-    text-decoration: none;
 
+  a {
 
+    color: var(--md-sys-color-primary);
 
   }
 
 `;

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff