While working on a CO2 sensor I needed to manage the device without any human interface or additional connectors. Fortunately, the ESP8266 devices include the WiFi interface and it was obvious step to use it for device management.

For the Arduino platform, there is a very nice project ConfigManager by Nicholas Wiersma. While being the very well developed and supported project it has two drawbacks important for me:

• You need to perform some special action to put the device into configuration mode, i.e. push the button or disconnect the power for some time.
• Configuration parameters should be defined in two places - in the firmware itself and in the user interface HTML file.

On the other hand, ESP8266 boards have 4M of a flash drive and 1M could be used as a local file system for storing user files. The solution looked clear - implement universal configuration frontend using HTML+JavaScript and move all the configuration to the backend. And, of course, make the configurator asynchronous.

For the frontend application, I decided to use VueJS - popular JavaScript framework. The components were styled with Tailwind CSS framework and it allowed to easily remove everything unused from the resulting CSS file. The HTML + JS + CSS code was compressed and merged into a single file to reduce the overall size of the frontend application.

Configuration for the frontend is requested with OPTION call which returns a list of available field groups and their configuration. Based on this information the user interface is built.

The library can be installed from the PlatformIO repository.

Usage is simple:

#include <Arduino.h>

#include <WiFiConfig.h>

struct Config
{
    char name[20] = {0};
    bool enabled = false;
    int hour = 0;
} config;

ConfigManager configManager;

void setup()
{
    Serial.begin(115200);

    configManager.setAPName("Config Demo");
    configManager.setAPFilename("/index.html");

    configManager.addParameterGroup("app", new Metadata("Application", "Example of application properties"))
        .addParameter("name", config.name, 20, new Metadata("Name"))
        .addParameter("enabled", &config.enabled, new Metadata("Enabled"))
        .addParameter("hour", &config.hour, new Metadata("Hour"));

    configManager.begin(config);
}

void loop()
{
    configManager.loop();

    delay(1000);
}

Afterward, the index.html file should be uploaded to the root of the device’s SPIFFS.