NetBurner 3.5.6
PDF Version
HTMLVariables

HtmlVariables Example

Overview

This NetBurner example demonstrates how to create dynamic web content using HTML variables and function calls embedded directly in HTML pages. The application shows how to display real-time system information and execute C++ functions from web pages using special HTML tags.

Features

  • Dynamic variable display using VARIABLE tags
  • Function execution from HTML using CPPCALL tags
  • Real-time system information display
  • Parameter passing from HTML to C++ functions
  • Uptime counter that updates on page refresh

Project Structure

HtmlVariables/
├── src/
│ ├── htmlvar.h # Header file with variable and function declarations
│ ├── main.cpp # Main application with web server setup
│ └── htmldata.cpp # Auto-generated file from HTML content
├── html/
│ ├── index.html # Main web page with dynamic content
│ └── robots.txt # Web crawler instructions
└── makefile # Build configuration

Architecture

System Components

┌───────────────────────────────────────────────────────────────────────┐
│ NetBurner Web Server │
├───────────────────────────────────────────────────────────────────────┤
│ HTML Processing Engine │
│ ┌───────────────┐ ┌─────────────────┐ ┌─────────────────────┐ │
│ │ VARIABLE Tags │ │ CPPCALL Tags │ │ Function Parameters │ │
│ │ │ │ │ │ │ │
│ │ - TimeTick │ │ - Foo() │ │ - FooWithParameters │ │
│ │ - gIntVal │ │ │ │ │ │
│ │ - gStrVal │ │ │ │ │ │
│ └───────────────┘ └─────────────────┘ └─────────────────────┘ │
├───────────────────────────────────────────────────────────────────────┤
│ Application Layer │
│ ┌─────────────────┐ ┌─────────────────────────┐ │
│ │ Global Variables│ │ Callback Functions │ │
│ │ │ │ │ │
│ │ - gIntVal: 1234 │ <----------------- │ - Foo(fd, pUrl) │ │
│ │ - gStrVal: "Hi" │ │ - FooWithParameters │ │
│ └─────────────────┘ └─────────────────────────┘ │
└───────────────────────────────────────────────────────────────────────┘

Data Flow

Browser Request
│
V
┌─────────────┐ Parse HTML ┌─────────────────┐ Execute ┌──────────────┐
│ │ -----------------> │ │ -------------> │ │
│ Web Browser │ │ NetBurner HTML │ │ C++ Function │
│ │ <----------------- │ Tag Processor │ <------------- │ │
└─────────────┘ Send HTML └─────────────────┘ Return └──────────────┘
Response Result

Key Components

Header File (htmlvar.h)

The header file declares global variables accessible from HTML:

#ifndef HTMLVARS_H_
#define HTMLVARS_H_
#include <nbrtos.h> // For access to TimeTick
extern int gIntVal;
extern char gStrVal[];
const char *FooWithParameters(int fd, int v);
#endif /*HTMLVARS_H_*/

Exported Elements:**

  • extern int gIntVal - Integer value displayed on web page
  • extern char gStrVal[] - String value displayed on web page
  • const char *FooWithParameters(int fd, int v) - Function with parameters

Main Application (main.cpp)

Variable Initialization

const char *AppName = "HTML Variable Example";
int gIntVal = 1234;
char gStrVal[] = "Hello World";

System Startup

void UserMain(void *pd) {
init(); // Initialize network stack
EnableSystemDiagnostics(); // Enable debug output
StartHttp(); // Start web server, default port 80
WaitForActiveNetwork(); // Wait for DHCP address
while (1) {
OSTimeDly(TICKS_PER_SECOND);
}
}
TICKS_PER_SECOND
#define TICKS_PER_SECOND
System clock ticks per second.
Definition constants.h:49
StartHttp
void StartHttp(uint16_t port, bool RunConfigMirror)
Start the HTTP web server. Further documentation in the Initialization section Initialization - Syste...
init
void init()
System initialization. Ideally called at the beginning of all applications, since the easiest Recover...
EnableSystemDiagnostics
void EnableSystemDiagnostics()
Turn on the diagnostic reports from the config page.
WaitForActiveNetwork
bool WaitForActiveNetwork(uint32_t ticks_to_wait=120 *TICKS_PER_SECOND, int interface=-1)
Wait for an active network connection on at least one interface.

Key Functions:**

  • System and network initialization
  • HTTP server startup on port 80
  • Network activation wait
  • Continuous operation loop

Callback Functions

URL Display Function

void Foo(int fd, PCSTR pUrl) {
fdprintf(fd, "The URL value is: %s\r\n", pUrl);
}
fdprintf
int fdprintf(int fd, const char *format,...)
Print formatted output to a file descriptor.

Purpose:** Displays URL information on the web page

  • fd: Socket file descriptor from web server
  • pUrl: URL string from the HTTP request
  • Output: Writes URL information directly to the web page

Parameterized Function

const char *FooWithParameters(int fd, int v) {
fdprintf(fd, "This function was called with parameter v = %d\r\n", v);
return "\0"; // Return empty string to avoid additional output
}

Purpose:** Demonstrates parameter passing from HTML to C++

  • fd: Socket file descriptor from web server
  • v: Integer parameter passed from HTML page
  • Return: Empty string to avoid additional HTML output
  • Output: Writes parameter information to the web page

HTML Tag Processing

Tag Types and Usage

HTML Tag Processing Flow:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ VARIABLE Tags │ │ CPPCALL Tags │ │ Function Calls │
│ │ │ │ │ with Parameters │
│ - gIntVal │ │ - Foo() │ │ - FooWith │
│ - gStrVal │ --> │ │ --> │ Parameters │
│ - TimeTick/ │ │ │ │ (fd, gIntVal) │
│ TICKS_PER_SEC │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
V V V
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Direct Variable │ │ Function Call │ │ Parameterized │
│ Value Display │ │ with Standard │ │ Function Call │
│ │ │ Parameters │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘

VARIABLE Tags

Display C++ variables directly in HTML:

<!--VARIABLE gIntVal -->
<!--VARIABLE gStrVal -->
<!--VARIABLE TimeTick/TICKS_PER_SECOND -->

Features:**

  • Direct variable value insertion
  • Mathematical expressions (division)
  • Real-time value updates

CPPCALL Tags

Execute C++ functions without parameters:

<!--CPPCALL Foo -->

Features:**

  • Function execution with standard parameters (fd, pUrl)
  • Direct HTML output from function
  • Automatic parameter passing

VARIABLE with Parameters

Call functions with custom parameters:

<!--VARIABLE FooWithParameters(fd, gIntVal) -->

Features:**

  • Custom parameter passing
  • Mixed parameter types (file descriptor, variables)
  • Function return value handling

HTML Content Structure

Main Page (index.html)

<html>
<body>
<h1>HTML Variable Example</h1>
This example program uses the CPPCALL and VARIABLE tags to create dynamic content<br><br><br>
<h2>VARIABLE Tag</h2>
Number of seconds since system boot: <!--VARIABLE TimeTick/TICKS_PER_SECOND --><br>
The tag is: <pre> &lt;!--VARIABLE TimeTick/TICKS_PER_SECOND --&gt; </pre>
Application integer value: <!--VARIABLE gIntVal --><br>
Application string value: <!--VARIABLE gStrVal --><br>
<h2>Function Call with CPPCALL Tag</h2>
The CPPCALL tag passes the socket file descriptor and URL to a function in your application:<br>
<!--CPPCALL Foo --><br>
The tag is: <pre> &lt;!--CPPCALL Foo --&gt; </pre>
<h2>Function Call with Parameters Using the VARIABLE Tag</h2>
The VARIABLE tag can be used to call a function with a parameter.<br>
Number of time ticks since system boot: <!--VARIABLE FooWithParameters(fd, gIntVal) --><br>
The tag is: <pre> &lt;!--VARIABLE FooWithParameters( fd, gIntVal ) --&gt; </pre>
</body>
</html>

Dynamic Elements:**

  • System uptime calculation
  • Application variable display
  • URL information via function call
  • Parameterized function demonstration

Technical Implementation

HTML Tag Processing

HTML File Processing Flow:
┌─────────────┐ comphtml ┌─────────────┐ Compile ┌─────────────┐
│ │ --------------> │ │ ------------> │ │
│ index.html │ │ htmldata. │ │ Application │
│ │ │ cpp │ │ Binary │
└─────────────┘ └─────────────┘ └─────────────┘

Build Process Steps

  1. HTML Collection: comphtml tool processes all files in html/ directory
  2. Code Generation: Creates htmldata.cpp with embedded HTML content
  3. Compilation: Standard C++ compilation includes generated file
  4. Tag Resolution: Runtime processing replaces tags with dynamic content

Runtime Tag Resolution

Tag Processing Sequence:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Web Request │ │ HTML Content │ │ Tag │
│ Arrives │ --> │ Retrieved │ --> │ Identification │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
V V V
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Tag Processing │ │ Content │ │ Response │
│ and Execution │ --> │ Substitution │ --> │ Generation │
└─────────────────┘ └─────────────────┘ └─────────────────┘

When a web request arrives:

  1. Web server identifies HTML tags in content
  2. VARIABLE tags resolve to variable values or function returns
  3. CPPCALL tags execute functions with standard parameters (fd, pUrl)
  4. Results are inserted into HTML before sending response

Memory and Performance

Memory Layout:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Static HTML │ │ Global │ │ Function │
│ Content │ │ Variables │ │ Stack Space │
│ │ │ │ │ │
│ - Embedded in │ │ - gIntVal │ │ - Parameter │
│ Flash Memory │ │ - gStrVal │ │ Passing │
│ - Compile-time │ │ - Application │ │ - Local │
│ Generated │ │ State │ │ Variables │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Performance Characteristics:**

  • Static HTML content stored in flash memory
  • Dynamic tag processing occurs at request time
  • Minimal RAM usage for variable storage
  • Fast tag resolution through direct function calls

Setup Requirements

Include Path Configuration

For NBEclipse users, the auto-generated htmldata.cpp file requires access to htmlvar.h:

NBEclipse Configuration:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Right-click │ │ Navigate to │ │ Add Include │
│ Project │ --> │ "C/C++ Build" │ --> │ Path │
│ Select Props │ │ Options │ │ html/ folder │
└─────────────────┘ └─────────────────┘ └─────────────────┘

Configuration Steps:**

  1. Right-click project and select "Properties"
  2. Navigate to "C/C++ Build" options
  3. Select "GNU C++ Compiler" > "Directories"
  4. Add the project's "HtmlVariables\html" folder to include paths

Build Process

Automated Build Flow:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Source Files │ │ HTML Processing │ │ Final Binary │
│ │ --> │ │ --> │ │
│ - main.cpp │ │ - comphtml │ │ - Linked │
│ - htmlvar.h │ │ - htmldata.cpp │ │ Application │
└─────────────────┘ └─────────────────┘ └─────────────────┘

The build process automatically:

  • Processes HTML files with comphtml tool
  • Generates htmldata.cpp from HTML content
  • Links HTML content into the application binary

Web Interface

Dynamic Content Display

Web Page Content Layout:
┌─────────────────────────────────────────────────────────────┐
│ HTML Variable Example │
├─────────────────────────────────────────────────────────────┤
│ VARIABLE Tag Section: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ - System Uptime: [TimeTick/TICKS_PER_SECOND] seconds │ │
│ │ - Integer Value: [gIntVal = 1234] │ │
│ │ - String Value: [gStrVal = "Hello World"] │ │
│ └─────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ CPPCALL Tag Section: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ - URL Display: [Output from Foo() function] │ │
│ └─────────────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Function with Parameters Section: │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ - Parameter Demo: [FooWithParameters(fd, gIntVal)] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

The web page displays:

  • System Uptime: Real-time seconds since boot using TimeTick/TICKS_PER_SECOND
  • Application Variables: Current values of gIntVal and gStrVal
  • URL Information: Current request URL via Foo() function
  • Parameter Demo: Function call with gIntVal parameter

Page Update Behavior

Update Cycle:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Page Refresh │ │ Tag Processing │ │ Updated Content │
│ Request │ --> │ Re-execution │ --> │ Display │
└─────────────────┘ └─────────────────┘ └─────────────────┘
^ │
│ │
└───────────────────────────────────────────────┘
Continuous Loop

Update Characteristics:**

  • Content updates on each page refresh
  • System uptime increments in real-time
  • Function calls execute with each page load
  • Variables display current application state

Build Configuration

Makefile Structure

NAME = HtmlVariables
CPP_SRC += src/main.cpp
# Auto-generated targets
CREATEDTARGS += src/htmldata.cpp
CPP_SRC += src/htmldata.cpp
src/htmldata.cpp : $(wildcard html/*.*)
comphtml html -osrc/htmldata.cpp
include $(NNDK_ROOT)/make/boilerplate.mk

Build Components:**

  • NAME: Project identifier and output binary name
  • CPP_SRC: C++ source files including generated HTML data
  • CREATEDTARGS: Files automatically created during build
  • HTML Rule: Automatic processing of HTML directory contents

Usage Instructions

Web Interface Testing

Access and Verification

Testing Workflow:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Open Browser │ │ Navigate to │ │ Verify Dynamic │
│ Connect to │ --> │ Device IP │ --> │ Content │
│ Network │ │ Port 80 │ │ Display │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
V V V
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Check Network │ │ Load Main Page │ │ Test Variable │
│ Configuration │ │ index.html │ │ Updates │
└─────────────────┘ └─────────────────┘ └─────────────────┘
  1. Access main page:
    • Open browser to http://<device_ip>/
    • Verify HTML Variable Example page loads
  2. Test dynamic content:
    • Check system uptime display (should increment)
    • Verify integer value shows 1234
    • Confirm string value shows "Hello World"
    • Observe URL display from Foo() function
  3. Verify real-time updates:
    • Refresh page multiple times
    • Confirm uptime counter increases
    • Check that all dynamic content updates properly

Expected Output Examples

Web Page Display

HTML Variable Example
VARIABLE Tag
Number of seconds since system boot: 42
Application integer value: 1234
Application string value: Hello World
Function Call with CPPCALL Tag
The URL value is: /
Function Call with Parameters Using the VARIABLE Tag
This function was called with parameter v = 1234

Dependencies

Required NetBurner system libraries:

Development Notes

Performance Considerations

  • Uses NetBurner RTOS timing functions (TimeTick, TICKS_PER_SECOND)
  • Implements standard NetBurner web server initialization
  • Application runs in continuous loop with 1-second intervals
  • Web server handles automatic HTML tag processing and variable substitution

Production Recommendations

  • System diagnostics enabled for development (consider disabling for production)
  • Static memory allocation for predictable performance
  • Minimal processing overhead for tag resolution
  • Flash-based storage for HTML content

Debugging and Monitoring

  • Serial console output available at 115200 baud
  • System diagnostics provide detailed operational information
  • Web server status monitoring through RTOS functions
  • Network connectivity verification through standard NetBurner tools

Learning Objectives

This example teaches:

  • Dynamic HTML content generation: Creating interactive web pages with embedded C++ integration
  • Tag-based web development: Using custom HTML tags for dynamic content insertion
  • Real-time data display: Showing live system information through web interfaces
  • Function integration: Calling C++ functions directly from HTML pages
  • Parameter passing: Transferring data between HTML and C++ application layers
  • Web server integration: Understanding NetBurner HTTP server capabilities

Advanced Usage Patterns

Custom Variable Types

Extend the system with additional variable types:

// In htmlvar.h
extern float gFloatVal;
extern bool gBoolVal;
// In main.cpp
float gFloatVal = 3.14159;
bool gBoolVal = true;

Complex Function Parameters

Create functions with multiple parameter types:

const char *ComplexFunction(int fd, int intParam, const char *strParam) {
fdprintf(fd, "Int: %d, String: %s", intParam, strParam);
return "\0";
}

Real-time Data Sources

Integrate with hardware sensors or system monitoring:

extern int gTemperature; // Updated by sensor reading task
extern int gCpuUsage; // Updated by system monitoring