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
- (the load/save config part is still TODO)
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
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 compress, to save space in SPIFFS. At the moment the page requires ~120kb (which gets aligned to your SPIFFS size when building the image)
- The load/saving of the configuration still needs to be done. Please help me out with this
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