Ajax Graph

NetBurner AJAX Graph Application

Overview

This application demonstrates how to create a dynamic web-based graph using a NetBurner embedded device. The system continuously logs sensor data from multiple sources and serves this data to a web interface through AJAX calls, allowing real-time visualization of sensor readings.

Features

• Real-time Data Logging: Continuously logs data from two simulated sensors with different sampling periods
• Web-based Visualization: Serves sensor data through HTTP for dynamic graph generation
• AJAX Integration: Provides JSON and CSV data formats for web consumption
• Ring Buffer Implementation: Efficient circular buffer for data storage with configurable size
• Multiple Data Export Formats: Supports both JSON (for AJAX) and CSV (for data export)

System Architecture

Core Components

1. Data Generator (datagenerator.cpp/h)
   • Simulates two sensors with different characteristics
   • Sensor 1: Period of 13 ticks, initial value 44.23
   • Sensor 2: Period of 11 ticks, initial value -10.0
   • Generates realistic sensor readings using sine wave variations with random noise
2. Data Logger (datalog.cpp/h)
   • Implements a thread-safe ring buffer for efficient data storage
   • Supports up to 1000 data points by default
   • Provides serialization methods for different output formats
   • Automatic overwriting of old data when buffer is full
3. Web Server Interface (main.cpp)
   • HTTP server integration for serving web pages and data
   • AJAX endpoints for real-time data retrieval
   • Support for both JSON and CSV data formats

Data Structure

Each logged data point contains:

• sensorID: Identifier for the sensor (1 or 2)
• timeStamp: System tick when the reading was taken
• value: The actual sensor reading (floating-point)

Web Interface Integration

The application provides several web endpoints:

AJAX Endpoints

• Data Retrieval: getSensorData() function serves sensor data in JSON format

  {
    "entries": [
      {"id": 1, "timeStamp": 12345, "value": 44.2567},
      {"id": 2, "timeStamp": 12346, "value": -9.8734},
      ...
    ]
  }

• Time Synchronization: getHTMLTicks() provides current system tick for time alignment

HTML Integration Points

The web interface uses the following integration methods:

• <!--FUNCTIONCALL getHTMLTicks --> - Embeds current system time
• <!--CPPCALL getSensorData() --> - Retrieves sensor data via AJAX
• JavaScript in index.html handles the dynamic graph generation

Configuration

Sensor Settings

#define LOG_SIZE 1000           // Maximum number of data points stored
#define SENSOR_1_PERIOD 13      // Sensor 1 sampling period (ticks)
#define SENSOR_2_PERIOD 11      // Sensor 2 sampling period (ticks)
#define SENSOR_1_INIT 44.23     // Sensor 1 initial value
#define SENSOR_2_INIT -10.0     // Sensor 2 initial value

System Requirements

• NetBurner embedded platform with NNDK
• Network connectivity for web server functionality
• Sufficient RAM for data logging buffer (configurable)

Application Flow

1. Initialization
   • Network stack initialization
   • HTTP server startup on port 80
   • DHCP address acquisition
   • Data log seeding with initial random data
2. Runtime Operation
   • Continuous sensor data generation at different periods
   • Real-time logging to ring buffer
   • Web server handles AJAX requests for data retrieval
   • Optional console output for debugging (press any key)
3. Data Management
   • Automatic buffer management with oldest data overwritten
   • Efficient serialization for web delivery
   • Support for both real-time streaming and historical data export

Usage

Deployment

1. Compile and flash the application to a NetBurner device
2. Ensure network connectivity (DHCP or static IP)
3. Access the web interface through the device's IP address
4. The graph will automatically update with real-time sensor data

Development

The modular design allows for easy customization:

• Adding Sensors: Modify the data generator to support additional sensors
• Changing Sampling Rates: Adjust period constants for different update frequencies
• Buffer Size: Modify LOG_SIZE for different memory/history requirements
• Data Formats: Add new serializer functions for different export formats

Technical Notes

• The ring buffer implementation ensures O(1) insertion and efficient memory usage
• Sensor data generation uses mathematical functions to create realistic, varying readings
• The web server integration is designed to handle multiple concurrent AJAX requests
• All timing is based on the NetBurner system tick counter for precision

File Structure

main.cpp           # Main application and web server endpoints
datalog.cpp/h      # Ring buffer implementation for data storage
datagenerator.cpp/h # Sensor simulation and data generation
readme.txt         # Original project documentation