ESP Web Tools
- ESP Web Tools is a set of tools to allow working with ESP devices in the - browser. + ESP Web Tools is a set of open source tools to allow working with ESP + devices in the browser. + The code is available on GitHub.
- To install the ESPHome firmware, connect an ESP to your computer and hit - the button: + To try it out and install + 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. + Note, this only works in desktop Chrome and Edge. Android support + should be possible but 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.
+Using ESP Web Tools on your website
- 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: + To add this to your own website, create a manifest and add the button to + your website. Make sure you update the manifest attribute to point at + your manifest.
<script @@ -70,13 +90,76 @@ manifest="firmware_build/manifest.json" ></esp-web-install-button>+
+ Your website needs to be served over https://. If your
+ manifest is hosted on another server, make sure you configure
+ the CORS-headers
+ for your manifest and firmware files such that your website is allowed
+ to fetch those files by adding the header
+ Access-Control-Allow-Origin: https://domain-of-your-website.com.
+
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 Tools can also be integrated in your projects by installing it
+ via NPM:
+ npm install --save esp-web-tools
+
Creating your manifest
++ ESP Web Tools manifest describe the firmware that you want to install. + It allows specifying different builds for the different types of ESP + devices. Current supported devices are ESP8266, ESP32 and ESP32-S2. The + correct build will be automatically selected based on the type of the + ESP device we detect via the serial port. +
+
+{
+ "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 }
+ ]
+ }
+ ]
+}
+ + Each build contains a list of parts to be flashed to the ESP device. + Each part consists of a path to the file and an offset on the flash + where it should be installed. Part paths are resolved relative to the + path of the manifest, but can also be URLs to other hosts. +
++ Each build also allows you to specify if it supports + the Improv WiFi standard. If + it does, the user will be offered to configure the WiFi after flashing + is done. +
+Customizing the look and feel
+
+ You can customize both the activation button and the message that is
+ shown when the user uses an unsupported browser. This can be done using
+ the activate and unsupported slots:
<esp-web-install-button
@@ -88,6 +171,18 @@
</esp-web-install-button>
+