diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..af8b5bc3 --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +index.html +firmware_build +demo diff --git a/index.html b/index.html index 464017dc..7525fdde 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,20 @@ - ESPHome Web + ESP Web Tools - - -

ESPHome Web is a set of tools to allow working with ESP devices in the browser.

-

To flash the ESPHome firmware, connect an ESP to your computer and hit the button:

- -

Note, this only works in desktop Chrome and Edge. Android support has not been implemented yet. -

- This works by combining Web Serial with a manifest which describes the firmware. It will automatically detect the type of the connected ESP device and find the right firmware files in the manifest. -

- + + +
+

ESP Web Tools

+

+ ESP Web Tools is a set of tools to allow working with ESP devices in the + browser. +

+

+ To flash the ESPHome firmware, connect an ESP to your computer and hit + the button: +

+ +

+ Note, this only works in desktop Chrome and Edge. Android support has + not been implemented yet. +

+

+ This works by combining Web Serial with a + manifest which describes the + firmware. It will automatically detect the type of the connected ESP + device and find the right firmware files in the manifest. +

+

+ To add this to your own website, create a manifest and add the button + pointing at it to your website: +

+ 
+<script
+  type="module"
+  src="https://unpkg.com/esp-web-tools@1.0.0/dist/web/install-button.js?module"
+></script>
+
+<esp-web-install-button
+  manifest="firmware_build/manifest.json"
+></esp-web-install-button>
+

+ Add the attribute erase-first if you want to first fully + erase the ESP prior to installation. +

+

+ Customize the button or unsupported message by using the + activate and unsupported slots: +

+ 
+<esp-web-install-button
+  manifest="firmware_build/manifest.json"
+  erase-first
+>
+  <button slot="activate">Custom install button</button>
+  <span slot="unsupported">Ah snap, your browser doesn't work!</span>
+</esp-web-install-button>
+
+
diff --git a/package-lock.json b/package-lock.json index 8094c46d..68895dac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "esphome-web", + "name": "esp-web-tools", "version": "0.0.1", "lockfileVersion": 2, "requires": true, diff --git a/package.json b/package.json index 21a1176a..71c2b0c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "esp-web-tools", - "version": "0.0.1", + "version": "1.0.0", "description": "Web tools for ESP devices", "main": "dist/install-button.js", "repository": "https://github.com/esphome/web", diff --git a/src/flash-log.ts b/src/flash-log.ts index a16713b7..a1b54c1a 100644 --- a/src/flash-log.ts +++ b/src/flash-log.ts @@ -9,7 +9,7 @@ interface Row { action?: boolean; } -@customElement("esphome-web-flash-log") +@customElement("esp-web-flash-log") class FlashLog extends LitElement { @state() _rows: Row[] = []; @@ -97,6 +97,6 @@ class FlashLog extends LitElement { declare global { interface HTMLElementTagNameMap { - "esphome-web-flash-log": FlashLog; + "esp-web-flash-log": FlashLog; } } diff --git a/src/start-flash.ts b/src/start-flash.ts index e5e4da0d..4ce0d6b8 100644 --- a/src/start-flash.ts +++ b/src/start-flash.ts @@ -27,7 +27,7 @@ export const startFlash = async ( // For debugging (window as any).esploader = esploader; - const logEl = document.createElement("esphome-web-flash-log"); + const logEl = document.createElement("esp-web-flash-log"); // logEl.esploader = esploader; logEl.addRow({ id: "initializing", content: "Initializing..." }); logParent.append(logEl);