diff --git a/README.md b/README.md index f6b1651d..c96fd1f8 100644 --- a/README.md +++ b/README.md @@ -63,11 +63,6 @@ The following variables can be used to change the colors of the default UI eleme - `--esp-tools-button-color` - `--esp-tools-button-text-color` -- `--esp-tools-success-color` -- `--esp-tools-error-color` -- `--esp-tools-progress-color` -- `--esp-tools-log-background` -- `--esp-tools-log-text-color` ### Slots @@ -79,21 +74,6 @@ The following slots are available: | `unsupported` | Message to show when the browser is not supported | `not-allowed` | Message to show when not a secure context -## Events - -When the state of flashing changes, a `state-changed` event is fired. - -A `state-changed` event contains the following information: - -Field | Description --- | -- -state | The current [state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts) -message | A description of the current state -manifest | The loaded manifest -build | The manifest's build that was selected -chipFamily | The chip that was detected; "ESP32" \| "ESP8266" \| "ESP32-S2" \| "ESP32-C3" \| "Unknown Chip" -details | An optional extra field that is different [per state](https://github.com/esphome/esp-web-tools/blob/main/src/const.ts) - ## Development Run `script/develop`. This starts a server. Open it on http://localhost:5001. diff --git a/index.html b/index.html index cefda660..861fe59d 100644 --- a/index.html +++ b/index.html @@ -125,8 +125,6 @@
@@ -157,16 +155,15 @@
- A fast and feature-rich implementation of an ESP8266/ESP32 firmware to - control NeoPixel (WS2812B, WS2811, SK6812) LEDs or also SPI based - chipsets like the WS2801 and APA102. + Fast and feature-rich firmware to control NeoPixel (WS2812B, WS2811, + SK6812) LEDs and SPI based chipsets like the WS2801 and APA102.
- Alternative firmware for ESP8266 with easy configuration using webUI, - OTA updates, automation using timers or rules, expandability and - entirely local control over MQTT, HTTP, Serial or KNX. + Firmware with easy configuration using webUI, OTA updates, automation + using timers or rules, expandability and entirely local control over + MQTT, HTTP, Serial or KNX.
+ No-code platform for ESP devices. Uses ESP Web Tools in their + dashboard to install ESPHome on devices. +
++ Website +
+To add this to your own website, create a manifest and add the button to @@ -238,10 +248,6 @@
- Add the attribute erase-first
if you want to first fully
- erase the ESP prior to installation.
-
ESP Web Tools can also be integrated in your projects by installing it
via NPM:
@@ -299,24 +305,6 @@
TODO EXAMPLE VIDEO
-@@ -331,14 +319,6 @@
--esp-tools-button-color
--esp-tools-button-text-color
--esp-tools-success-color
--esp-tools-error-color
--esp-tools-progress-color
--esp-tools-log-background
--esp-tools-log-text-color
There are also some attributes that can be used for styling:
Added if installing firmware is not supported | -|
active |
- Added when flashing is active | -
- When you are using a custom button, you should disable it when the
- active
attribute is present.
-
You can replace both the activation button and the message that is shown @@ -371,8 +343,6 @@
<esp-web-install-button manifest="static/firmware_build/manifest.json" - show-log - erase-first > <button slot="activate">Custom install button</button> <span slot="unsupported">Ah snap, your browser doesn't work!</span> @@ -380,92 +350,6 @@-Replace the button and message with a custom one
</esp-web-install-button>
- By default there is a progress bar showing the state and progress of the
- flashing progress, you can change this progress bar to a log view with
- the show-log
attribute.
-
- You can also hide all progress indicators by adding the
- hide-progress
- attribute. This will hide both the progress bar and the log view. You
- can then implement your own progress elements using the
- state events.
-
- During the flash progress the button will fire
- state-changed
events for every step of the progress and to
- signal progress in the writing.
-
- With these events you can create your own progress UI or trigger certain
- actions. You can also find the current state as the
- state
property of the
- esp-web-install-button
element.
-
Events for the following states are fired:
-
- A state-changed
event contains the following information:
-
state |
- The current state; one of the above | -
message |
- A description of the current state | -
manifest |
- The loaded manifest | -
build |
- The manifest's build that was selected | -
chipFamily |
-
- The chip that was detected;
- "ESP32" | "ESP8266" | "ESP32-S2" | "Unknown Chip"
- |
-
details |
- - An optional extra field that is different - per state - | -
An example that logs all state events:
--<esp-web-install-button - manifest="static/firmware_build/manifest.json" -></esp-web-install-button> -<script> -const espWebInstallButton = document.querySelector("esp-web-install-button"); -espWebInstallButton.addEventListener( - "state-changed", (ev) => { console.log(ev.detail) } -); -</script> -
If the serial port is not showing up, your computer might be missing the diff --git a/static/logos/esphome.svg b/static/logos/esphome.svg new file mode 100644 index 00000000..14f49437 --- /dev/null +++ b/static/logos/esphome.svg @@ -0,0 +1 @@ +