Custom Web Config

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 C++ backend configuration management with a JavaScript/jQuery frontend. The system allows users to configure thermostat settings, email notifications, and other application-specific parameters through a web browser.

This example is an advanced version BasicWebConfig example that implements the content with JavaScript and jQuery. 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 they are stored so they are persist after the device has been power cycled. The web interface adds custom styling beyond the basic server presentation to view and set the values. The

Note

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

Features

• Modern Web Interface: Bootstrap-based responsive design with tabbed navigation
• 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: Bootstrap-based layout that adapts to different screen sizes
• Tabbed Interface: Separate tabs for Application Data, Boot Config, and Network Config
• Dynamic Form Generation: Forms are automatically generated from JSON configuration data
• Real-time Updates: Changes are immediately reflected in the configuration system

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)
• Bootstrap CSS framework
• jQuery JavaScript library

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 (Update Record button)

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