Config Generator for ESP/Arduino
Everyone with an ESP8266 lying around has an awesome idea what to do with it
- an editor to create a configuration UI (with live preview)
- a code generator that creates code from the created UI to host/load/save and configure an ESP via HTTP
Use the Demo
You can use the demo hosted on my website to create your UIs:
Clone this repository.
cd generator npm install npm run build # compile for prod -> use this to obtain dist/data/*.gz #or npm run start # run dev server
How to use the generated files
Create your UI and download the
config.json file to
generator/dist/data, then copy the data directory to
mkdir example/data cp generator/dist/data/* example/data/
example/ directory contains a platformio.org based Arduino project for the ESP8266.
From the copied
example/data directory create the SPIFFS image
cd example/ pio run --target buildfs
Connect your ESP8266 and upload the SPIFFS image:
pio run --target uploadfs
Create your own
src/config.h.example so the ESP can connect to your WiFi.
Compile the project and upload it to the ESP via the IDE.
Open the serial console and reset the ESP. Take note of the IP address and open the config page
- The generator is the editor as well as the source for the generated config site. They share the same components.
- The site is gzip compressed, to save space in SPIFFS. At the moment the page requires ~250kb (which gets aligned to your SPIFFS size when building the image)
config.jsoncontains the UI layout and data structure
- This project is based on Typescript, React, BulmaCSS (via BloomerJS)
- Take a look at the NPM scripts to see how to build/dev this package