Voor gebruikers is ESP Web Tools dus een handige manier om firmware te installeren, maar wat moet de ontwikkelaar ervoor doen die zijn firmware op deze manier wil aanbieden? Ontwikkel je je firmware met ESPHome, dan is de gemakkelijkste manier om een nieuwe GitHub-repository te genereren op basis van het ESPHome Project Template. Dit bevat een voorbeeldconfiguratie en GitHub-workflow die automatisch je firmware bouwt en via GitHub Pages op een webpagina met ESP Web Tools plaatst zodat gebruikers je firmware zo kunnen installeren.
Om dit te testen, heb ik mijn bestaande ESPHome-project omgezet naar dit sjabloon: M5Stack-Air-Quality-ESPHome. Het resultaat is te zien op de bijbehorende GitHub Pages-url van het project. In het YAML-bestand is het belangrijk dat je improv_serial: of esp32_improv: zet voor gebruik van Improv Wi-Fi via Web Serial of Web Bluetooth. Dit laatste werkte bij mijn ESPHome-configuratie niet omdat de BLE-component zoveel geheugen gebruikte dat de wificomponent niet correct geïnitialiseerd raakte.
Met GitHub Actions publiceert het project een bin-bestand met de firmware en een bestand manifest.json in de branch gh-pages van de repository. Genereer je firmware voor meerdere chipfamilies (ESP8266, ESP32, ESP32-C3, ESP32-S2 of ESP32-S3), dan wordt er voor elke familie een map aangemaakt met het firmwarebestand en manifest. Er wordt ook een globaal manifest aangemaakt met informatie over alle firmwarebestanden. Dat ziet er bijvoorbeeld als volgt uit:
{ "name": "M5Stack Air Quality ESPHome", "version": "", "home_assistant_domain": "esphome", "new_install_skip_erase": false, "builds": [ { "chipFamily": "ESP32", "parts": [ { "path": "m5stack-air-quality-kit-esp32/m5stack-air-quality-kit-esp32.bin", "offset": 0 } ] } ] }
Dit ESPHome-project is specifiek ontworpen voor één bordje van M5Stack met een ESP32. Als je firmware voor meerdere chipfamilies aanbiedt, komt er voor elke chipfamilie in dit globale manifest een extra build. ESP Web Tools zal automatisch op basis van de chipfamilie in het microcontrollerbordje dat je aansluit de juiste firmware uploaden.
Uiteindelijk moet je dan alleen nog maar in je html-bestand, of je Markdown-bestand voor GitHub Pages, de volgende html-elementen opnemen:
<esp-web-install-button manifest="./manifest.json"></esp-web-install-button>
<script type="module" src="https://unpkg.com/esp-web-tools@8.0.3/dist/web/install-button.js?module"></script>
Het element esp-web-install-button toont de knop 'Connect' waarmee alle functionaliteit van ESP Web Tools wordt gestart. Het attribuut 'manifest' laat je verwijzen naar de locatie van het bestand manifest.json.