Serial connection

Baudrate:                             Status: Disconnected
Input: CR LF Echo   

Parser

Variables extracted from the serial stream          

# Variable Value   rate[/min] Stat.Q min 25% 50% 75% max   type
1 Empty - - - - - - - - - - -

Graphics

To populate Graphics: check the variables in the Parser tab, and press [Generate Gauges]

Help

Web Serial Terminal and Live Telemetry Dashboard

This page explains how to connect a device, send and receive serial data, inspect extracted variables, and build live gauges and charts from the incoming stream.

Browser support: Chrome, Edge, and Opera currently support the Web Serial API. See the MDN compatibility table for current details.

Quick Start

  1. Open the page in a browser that supports Web Serial and click [Sel.Port].
  2. Select your device, choose the required baud rate, and wait for the live stream to appear in the terminal.
  3. Use the Serial tab to send commands, upload a command file, or type directly into the focused terminal.
  4. Watch the Parser tab for extracted key-value pairs and let statistics build up for a few seconds.
  5. Click [Generate Gauges] to create the dashboard in the Graphics tab.

Serial Tab

  • The port is opened as 8 data bits, no parity, 1 stop bit. The selectable runtime setting is baud rate.
  • The Input field sends a complete line when you press [Send] or Enter. Use the CR and LF checkboxes to choose the line ending.
  • The [v] button opens the command history for recently sent strings.
  • When the terminal window is focused, each key is sent immediately to the serial port without waiting for a full string.
  • The Echo checkbox enables local echo so transmitted characters are shown in a separate color inside the terminal.
  • The Upload control sends a text file line by line. This is useful for command sequences, scripts, or device setup batches.
  • The terminal auto-scrolls as new data arrives and can be resized by dragging its lower-right corner.
  • [Pause] temporarily stops visual updates, while data collection continues in the background.

Parser Tab

  • The parser scans the serial stream for key-value pairs and builds a live variable list from matching patterns.
  • [Clear List] resets the collected variables, their statistics, and the generated dashboard state.
  • [Generate Gauges] becomes useful after enough values have been observed to estimate ranges and likely variable meanings.
  • The semantic classification is heuristic. It helps choose a suitable gauge type, but it is not guaranteed to identify every signal perfectly.
  • rate[/min] shows how often the variable is updated.
  • Stat.Q is a simple confidence indicator that improves as more samples are collected.
  • min, 25%, 50%, 75%, and max summarize the observed distribution. The 50% value is the median.
  • type shows the likely semantic class used when the dashboard chooses a gauge style.

Graphics Tab

  • The Graphics page creates instrument-style gauges and time-series charts from the variables selected in the Parser tab.
  • Ranges are estimated from the collected data and can be refined later as the stream evolves.
  • Click the small ⇲ control on a gauge card to adjust the gauge type, minimum, maximum, and chart bindings.
  • Charts can display multiple variables, and the update stream can be paused independently from the terminal view.
  • Save current, Restore saved, and Clear saved manage dashboard layout settings stored locally in the browser.
  • Download CSV data exports a time-based table with one row per second and the latest known value carried forward for each variable.

Example Input Formats

The parser is designed to detect common telemetry-style text patterns such as:

temp=24.5
rpm:1200
voltage 12.1
state=ON
angle=37
level:84

Consistent formatting makes automatic extraction and classification more reliable.

FAQ

Which browsers support the Web Serial API?

Chrome, Edge, and Opera on desktop currently offer the broadest support. The page works best in a secure context and depends on current browser support for the Web Serial API.

What format should the incoming serial stream use?

The parser is optimized for telemetry-style key-value text such as temp=24.5, rpm:1200, voltage 12.1, or similar repeated textual measurements.

Does data stay in the browser?

During normal use, serial parsing, dashboard generation, and CSV export happen in the browser. Saved dashboard layout preferences are stored locally with browser localStorage.

What does the CSV export contain?

The CSV export writes one row per second. The first column is the timestamp, and each variable gets its own column filled with the latest known value available for that second.

Troubleshooting

  • If the page cannot access serial ports, confirm that you are using a browser with Web Serial support and that the page is opened in a compatible secure context.
  • If the port opens but no data appears, verify the baud rate and confirm the device is already transmitting text over the selected serial interface.
  • If text appears in the terminal but the Parser tab stays empty, the incoming stream may not contain recognizable key-value pairs yet.
  • If only a few variables are found, keep the connection open longer so the parser can observe more fields and stronger statistics.
  • If the Graphics tab stays sparse or empty, return to the Parser tab and generate gauges again after more values have been collected.
  • If the serial device disconnects unexpectedly, refresh the page before starting a new session.

Acknowledgments

The parser is built with jslex, a JavaScript lexer by Jim R. Wilson (jimbojw).

The Levenshtein edit distance implementation is based on a Stack Overflow discussion and code example.

© 2025 Roustam Asimov
License: MIT