ESP Web Tools
Allow flashing ESPHome or other ESP-based firmwares via the browser. Will automatically detect the board type and select a supported firmware.
<esp-web-install-button
manifest="firmware_esphome/manifest.json"
></esp-web-install-button>
Manifest definition:
{
"name": "ESPHome",
"builds": [
{
"chipFamily": "ESP32",
"improv": true,
"parts": [
{ "path": "bootloader.bin", "offset": 4096 },
{ "path": "partitions.bin", "offset": 32768 },
{ "path": "ota.bin", "offset": 57344 },
{ "path": "firmware.bin", "offset": 65536 }
]
},
{
"chipFamily": "ESP8266",
"parts": [
{ "path": "esp8266.bin", "offset": 0 },
]
}
]
}
Allows for optionally passing an attribute to trigger an erase before installation.
<esp-web-install-button
manifest="firmware_esphome/manifest.json"
erase-first
></esp-web-install-button>
All attributes can also be set via properties (manifest, eraseFirst)
Styling
Attributes
The following attributes are automatically added to <esp-web-install-button> and can be used for styling:
| Attribute | Description |
|---|---|
install-supported |
Added if installing firmware is supported |
install-unsupported |
Added if installing firmware is not supported |
active |
Added when flashing is active |
You can add the following attributes or properties to change the UI elements:
| Attribute | Property | Description |
|---|---|---|
show-log |
showLog |
Show a log style view of the progress instead of a progress bar |
hide-progress |
hideProgress |
Hides all progress UI elements |
CSS custom properties (variables)
The following variables can be used to change the colors of the default UI elements:
--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
The following slots are available:
| Slot name | Description |
|---|---|
activate |
Button to start the flash progress |
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 |
| 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 |
Development
Run script/develop. This starts a server. Open it on http://localhost:5000.
![[Feature] allow serial speed to be increased](https://avatars.githubusercontent.com/u/593340?v=4)
1 Dec 10, 2021
15 Dec 3, 2022
4 Apr 6, 2022
2 Feb 14, 2022
2.7k Jan 3, 2023
1 May 12, 2022
376 Dec 14, 2022
5 Jun 28, 2022
20 Sep 29, 2022
2 Oct 12, 2021
31 Nov 1, 2022
1 Feb 15, 2022
12 May 8, 2022
4 Oct 12, 2022
5 Jan 24, 2022
22 Oct 18, 2022
35 Dec 19, 2022
52 Mar 15, 2022
1 Dec 13, 2021