Live UI Dashboard

Written By Tim Harvey

The Live UI tab displays a real-time interactive dashboard driven entirely by your running firmware. Your firmware sends URL-encoded commands over the Active Debug Port channel, and the Live UI tab renders them as visual widgets — gauges, LEDs, text readouts, progress bars, and a battery indicator — that update live as data arrives.

This gives your embedded firmware a rich graphical display on your PC with no GUI framework, no RTOS dependency, and no display hardware on the embedded side. Just a few calls to ACTIVEText() or ACTIVEprintf().

How It Works

The Live UI is driven by special URL-encoded command strings embedded in your firmware's Active Debug Port output. When your firmware calls ACTIVEText(channel, "?cmd=gauge1&color=blue"), the application detects the URL-encoded command format, parses it, and configures that channel to display as a gauge widget with blue coloring.

After the widget type is configured, subsequent ACTIVEValue() calls on the same channel update the widget's displayed value. For text-based widgets, subsequent ACTIVEText() calls with plain (non-command) strings update the displayed text.

Widget state is recorded. Live UI widget states are captured in the timeline alongside all other data. When you open a saved capture and move the Current Cursor to a past point in time, the Live UI tab reflects what the dashboard looked like at that moment.

Accessing the Live UI Tab

Click the Live UI tab in the right-side panel, or use View > Show Live UI from the menu bar. During live capture, the tab updates in real time. During navigation of a saved capture, the tab shows the widget state at the Current Cursor position.

Firmware Command Reference

Widget Type Configuration Command

All widget type and color configuration is done by sending a URL-encoded string as the text on an Active Debug Port channel. The format is:

?cmd=<widget_type>&color=<color>

Send this string once to configure the channel as a specific widget type. The application remembers the widget type for that channel for the entire capture session.

Example in C firmware:

ACTIVEText(0, "?cmd=gauge1&color=blue");    // Configure channel 0 as gauge style 1, blue
ACTIVEText(1, "?cmd=led1&color=green");     // Configure channel 1 as LED style 1, green
ACTIVEText(2, "?cmd=text1&color=orange");   // Configure channel 2 as text style 1, orange

Commands are case-insensitive. ?cmd=LED1 and ?cmd=led1 both work.

Numeric Widget Types (Updated with ACTIVEValue)

These widget types display a numeric value. Update them by calling ACTIVEValue(channel, value).

Gauges — gauge1 through gauge5

Five gauge styles are available, each with a different visual appearance:

Widget cmd Background Needle
gauge1 Black Black needle
gauge2 White Black needle
gauge3 White Black needle (variant)
gauge4 Dark White needle
gauge5 White Black needle (variant)

Each gauge displays the needle position, the current numeric value, and the minimum and maximum values seen so far. Gauges auto-scale — the range is automatically set to the smallest and largest values received on that channel. There is no need to pre-set a range.

Example:

ACTIVEText(3, "?cmd=gauge1&color=red");   // Initialize once
// In control loop:
ACTIVEValue(3, motor_speed_rpm);

Progress Bars — progress1 through progress5

Horizontal progress bar displays. The value is shown as a percentage fill from 0 to 100.

Widget cmd Bar color
progress1 Dark blue
progress2 Light grey
progress3 Dim grey
progress4 Yellow
progress5 Lime green

Example:

ACTIVEText(4, "?cmd=progress1&color=blue");
ACTIVEValue(4, battery_percent);   // 0.0 to 100.0

Battery Indicator — battery

A battery-shaped indicator showing a percentage fill in lime green. The battery graphic fills proportionally to the value (0–100).

Example:

ACTIVEText(5, "?cmd=battery&color=green");
ACTIVEValue(5, battery_percent);

Text Widget Types (Updated with ACTIVEText)

These widget types display a text string. Configure them with a ?cmd=... string, then send subsequent plain text strings to update the displayed text.

Text Labels — text1 through text5

Five text display styles, each with a progressively larger font size.

Widget cmd Font size Use case
text1 Small (8 pt) Dense data, many channels
text2 Medium-small (10 pt) General purpose
text3 Medium (12 pt) Important readings
text4 Medium-large (14 pt) Highlighted values
text5 Large (16 pt) Critical status, alarms

Example:

ACTIVEText(6, "?cmd=text2&color=cyan");         // Initialize once
ACTIVEprintf(6, "STATE: %s", state_names[current_state]);  // Update during operation

LED Indicator Types (Updated with ACTIVEText)

Named LED Styles — led1 through led5

Five LED image styles. The LED visually illuminates in the specified color. To change the LED color, resend the configuration command with the new color.

Example:

ACTIVEText(7, "?cmd=led3&color=red");
// To change color:
if (fault_active)
    ACTIVEText(7, "?cmd=led3&color=red");
else
    ACTIVEText(7, "?cmd=led3&color=green");

Simple Colored LED — led

A simpler LED command with a fixed set of named colors and optional blinking:

?cmd=led&color=<named_color>[&blink=<interval_ms>]

Available named colors: red, orange, yellow, green, blue, cyan, magenta, white, black

Optional blink parameter: interval in milliseconds. Omit for steady illumination.

Example:

ACTIVEText(8, "?cmd=led&color=green");          // Solid green
ACTIVEText(8, "?cmd=led&color=red&blink=500");  // Blinking red at 500 ms

Channel Label Command — label

Sets the display name (label) of an Active Debug Port channel. Equivalent to calling ACTIVELabel() in the firmware library.

?cmd=label&label=<channel_name>

Example:

ACTIVEText(0, "?cmd=label&label=Motor Speed");

System Commands

These commands trigger actions in the application from your firmware.

Command Description
?cmd=beep Plays a system beep on the PC. Useful as an audible alert when a fault or threshold is crossed.
?cmd=stop Stops the current capture. Use this for triggered capture — stop automatically when the bug appears.
?cmd=zoomall Zooms the waveform display to show all captured data.
?cmd=restart Stops the current capture and immediately starts a new one.
?cmd=email&to=<address>&msg=<text> Sends an email alert. Requires email configuration in the application.

Use ?cmd=stop for triggered capture. Configure your firmware to call ACTIVEText(ch, "?cmd=stop") when a specific fault or condition occurs. The capture stops at the exact moment of the event, with all the waveform data from before the trigger still in the capture.

Complete Widget Setup Example

A typical firmware initialization sequence configures all widgets once at startup:

void active_debug_init(void)
{
    ACTIVEText(0, "?cmd=label&label=Motor RPM");
    ACTIVEText(0, "?cmd=gauge1&color=blue");

    ACTIVEText(1, "?cmd=label&label=Supply V");
    ACTIVEText(1, "?cmd=gauge2&color=green");

    ACTIVEText(2, "?cmd=label&label=Status");
    ACTIVEText(2, "?cmd=text2&color=white");

    ACTIVEText(3, "?cmd=label&label=Fault");
    ACTIVEText(3, "?cmd=led&color=green");

    ACTIVEText(4, "?cmd=label&label=Battery");
    ACTIVEText(4, "?cmd=battery&color=green");

    ACTIVEText(5, "?cmd=label&label=CPU Load");
    ACTIVEText(5, "?cmd=progress3&color=grey");
}

void active_debug_update(void)   // Call once per control loop
{
    ACTIVEValue(0, motor_rpm);
    ACTIVEValue(1, supply_voltage);
    ACTIVEprintf(2, "STATE: %s", state_name);
    ACTIVEText(3, fault_active ? "?cmd=led&color=red" : "?cmd=led&color=green");
    ACTIVEValue(4, battery_percent);
    ACTIVEValue(5, cpu_load_percent);
}

Tips

One widget per channel. A channel can only display one widget type at a time. If you send a new ?cmd=... configuration on a channel, the widget type changes immediately.

The color parameter for led1–led5 and gauge1–gauge5 accepts any CSS-format color string (named colors like blue, red, lime, and hex values like #FF8800).

Tim Harvey
Previous

Current Analyzer
Next

Troubleshooting