Custom Web Config

Example Path: examples/Configuration/Web/CustomWebConfig

Custom Web Config System

Overview

This is an advanced embedded web configuration system built for NetBurner devices. It provides a modern, responsive web interface for managing device configuration objects, combining a C++ configuration backend with a plain-JavaScript (fetch) frontend. The system lets users configure thermostat settings, email notifications, and other application-specific parameters through a web browser.

This example is an advanced version of the BasicWebConfig example that builds the interface in JavaScript using the browser's fetch() API. It also demonstrates how to store and display custom application data in the AppData section.

Configuration objects are created when the device first boots, then stored so they persist after the device has been power cycled. The page styles the values with the self-contained, modern stylesheet (plain CSS, no framework or CDN) beyond the basic config-server presentation.

Note

Because we are only processing the config object, we avoid writing the custom POST handler used in other examples. If you add more to your web interface than is provided here, a post handler may be required.

Features

• Modern Web Interface: plain-CSS responsive card-based design, no framework or CDN
• Persistent Configuration: Configuration objects are stored and persist after power cycles
• Real-time Updates: Dynamic form generation from JSON configuration data
• Multiple Configuration Types: Support for various data types including integers, strings, booleans, IP addresses, and dropdown selections
• Serial Port Interface: Command-line interface for local configuration management
• Automatic Network Setup: DHCP support with automatic IP configuration

Architecture

Backend (C++)

The application is built around a hierarchical configuration system using C++ classes:

Configuration Object Types

• config_obj - Base container object for organizing other configuration objects
• config_bool - Boolean values
• config_int - Integer values
  
• config_double - Double precision floating point values
• config_string - String values
• config_chooser - Multiple choice dropdown options
• config_pass - Password fields
• config_IPADDR4 - IPv4 addresses
• config_IPADDR6 - IPv6 addresses
• config_MACADR - MAC addresses

Application Classes

Thermostat1 Class**

• m_maxTemp - Maximum temperature setting (default: 100)
• m_setTemp - Target temperature setting (default: 30)
• m_minTemp - Minimum temperature setting (default: 10)
• m_powerMax - Maximum power setting (default: 200)

• m_active - Thermostat active status (default: true)

  Thermostat2 Class** (extends Thermostat1)

• Inherits all Thermostat1 properties
• m_tempRec1 - Temperature record 1 (default: 101)

• m_tempRec2 - Temperature record 2 (default: 102)

  EmailNotify Class**

• m_normal - Normal notification email address
• m_emergency - Emergency notification email address
• m_choose - Action chooser (Alert, TurnOff, Crash options)

Frontend (HTML/JavaScript)

The web interface features:

• Responsive Design: plain-CSS layout that adapts to different screen sizes
• Card Layout: Separate cards for Application Data, Boot Config, and Network Config
• Dynamic Form Generation: Forms are generated from the JSON configuration data with the browser's fetch() API and vanilla DOM - no jQuery
• Round-trip Editing: Edited values are posted back as JSON and re-read to confirm what was stored

Serial Port Commands

The application provides a command-line interface through the serial port:

• C - Show complete configuration tree
• E - Show email notification settings
• F - Show and modify email normal contact address
• N - Show IP address for first network interface
• S - Show and modify global string setting
• T - Show thermostat 1 settings
• V - Show and modify global integer value
• 2 - Show thermostat 2 settings
• 6 - Show all interface IP addresses and system time
• ? - Display command list

Web Interface Usage

1. Access the Interface: Navigate to the device's IP address in a web browser
2. Application Data Tab: Configure thermostat settings, email notifications, and custom application parameters
3. Boot Config Tab: Modify system boot configuration parameters
4. Network Config Tab: View and configure network interface settings (some fields are read-only)
5. Update Records: Click "Update Record" button to save changes to persistent storage

Configuration Data Flow

1. Initialization: Configuration objects are created with default values on first boot
2. Storage: Configuration data is automatically saved to persistent storage
3. Web Access: HTTP server provides JSON endpoints for configuration data
4. Form Generation: JavaScript dynamically creates forms based on JSON structure
5. Updates: Form submissions update the JSON data and save to persistent storage

Technical Requirements

• NetBurner embedded device with network capability
• HTTP server support
• Serial port interface (115200 baud)
• Self-contained stylesheet (style.css) - no external CSS/JS dependencies

Network Configuration

The system automatically configures network settings:

• DHCP client for automatic IP assignment
• HTTP server on port 80
• AutoIP support for link-local addressing
• Gateway and DNS configuration

Security Considerations

• Password fields are automatically detected and masked in the web interface
• Some network configuration fields are read-only to prevent accidental network disconnection
• Configuration changes require explicit user action (the Update Record button)
• The config-mirror endpoints are open in this example. On a real product, protect them behind an access group / the config user and password so only authorized clients can read or change settings.
• Saving writes to flash, which has finite endurance. Changes are batched into one save per Update Record (not saved on every keystroke) to limit flash wear.

Customization

To extend the system:

1. Create new configuration classes inheriting from appropriate base types
2. Add objects to the global configuration tree
3. Ensure each object has a unique name
4. The web interface will automatically generate forms for new configuration objects

Build Information

The application displays build timestamp and provides network status information including:

• Primary IP address
• AutoIP address
• Gateway address
• System uptime

Try It From the Command Line

Replace 10.1.1.x with your device's IP address. The config mirror serves each section as JSON.

Read the application config:

curl http://10.1.1.x/Config/AppData

Read the network config:

curl http://10.1.1.x/Config/Sys/NetIf

Write a value back. The object must keep the same top-level section key the GET returned (AppData here), so the config server can match the leaf; the page posts the whole edited section the same way. This minimal body updates a single field:

curl -X POST -H "Content-Type: application/json" \
     --data "{\"AppData\":{\"Thermostat1\":{\"SetTemp\":42}}}" \
     http://10.1.1.x/Config/AppData

Re-read Config/AppData (or reload the page) to confirm the new, flash-persisted value.