From a8d41454a3256ef9fc6c5b83c123b0cc2d3ed1f2 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 10 Nov 2021 09:04:23 -0800 Subject: [PATCH] Update README + website --- README.md | 20 ----- index.html | 154 +++++---------------------------------- static/logos/esphome.svg | 1 + 3 files changed, 20 insertions(+), 155 deletions(-) create mode 100644 static/logos/esphome.svg 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 @@

ESP Web Tools

computer and hit the button:

@@ -157,16 +155,15 @@

ESP Web Tools

allowfullscreen > -

Projects using ESP Web Tools

+

Products using ESP Web Tools

WLED

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

WLED />

Tasmota

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

ESPEasy >

+
+ +

ESPHome

+

+ No-code platform for ESP devices. Uses ESP Web Tools in their + dashboard to install ESPHome on devices. +

+

+ Website +

+

Adding ESP Web Tools to your website

To add this to your own website, create a manifest and add the button to @@ -238,10 +248,6 @@

Adding ESP Web Tools to your website

>.

-

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

Wi-Fi provisioning

already installed devices and re-configure the wireless network settings.

-

TODO EXAMPLE VIDEO

-

Customizing the look and feel

@@ -331,14 +319,6 @@

Change colors

There are also some attributes that can be used for styling:

@@ -352,15 +332,7 @@

Change colors

- - - -
Added if installing firmware is not supported
activeAdded when flashing is active
-

- When you are using a custom button, you should disable it when the - active attribute is present. -

Replace the button and message with a custom one

You can replace both the activation button and the message that is shown @@ -371,8 +343,6 @@

Replace the button and message with a custom one

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

Show or hide the progress bar and log

-

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

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - -
stateThe current state; one of the above
messageA description of the current state
manifestThe loaded manifest
buildThe 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>
-

USB Serial Drivers

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