Help & Documentation

Complete guide to using Oscilloscope Online V2 for serial data visualization

Quick Start Guide

1
Setup Configuration

Navigate to the Setup page to configure your serial communication parameters, chart settings, and graph options.

Configure baud rate, data separator, axis types, and graph colors
2
Connect Device

Go to the Plotter page and click "Connect" to select your serial port. Ensure your device is connected and transmitting data.

Requires a browser with Web Serial API support (Chrome, Edge)
3
Start Plotting

Click "Start Plotting" to begin real-time data visualization. Use the interactive controls to pause, clear, or export your data.

Data will automatically update based on your configuration
Pro Tip

Save your configuration using the Export button on the setup page to quickly reuse settings for different projects.

Data Format Guide

Expected Serial Data Format
value1/value2/value3/valueN\n
  • Numeric values separated by configured break character (default: /)
  • Each data packet terminated with newline (\n)
  • Supports integer and floating-point numbers
  • Invalid values are treated as NaN and handled gracefully
Arduino Example Code
void setup() {
  Serial.begin(115200);
}

void loop() {
  float sensor1 = analogRead(A0) * 0.01;
  float sensor2 = analogRead(A1) * 0.02;
  float sensor3 = random(0, 100) / 10.0;
  
  Serial.print(sensor1);
  Serial.print("/");
  Serial.print(sensor2);
  Serial.print("/");
  Serial.println(sensor3);
  
  delay(100);
}

Configuration Options

Serial Settings
Break Character Data value separator (default: /)
CLS Command Clear screen trigger (default: %)
Export Commands CSV (@), PNG (&), JSON ($)
Chart Settings
X-Axis Types Linear or Time-based
Y-Axis Types Linear, Log10, Log2
Auto Scaling Automatic or manual range
Time Formats ms, s.ms, m:s, h:m:s, d-h:m
Visual Options
Graph Count Unlimited graphs per plot
Colors Custom color for each graph
Points Show/hide data points
Fill Area under curve filling

Export & Import Features

Export Formats
CSV Export
Excel-compatible format with timestamps and data values
PNG Export
High-quality raster image for presentations
SVG Export
Scalable vector graphics with customizable styling
JSON Export
Raw data and metadata for further analysis
Import Capabilities
CSV Import

Import previously exported CSV files to visualize historical data. The imported data will replace the current chart data.

Configuration Import

Load saved configuration files to quickly apply previously used settings for different projects or devices.

MCU Export Commands

Your microcontroller can trigger exports by sending special characters:

  • @ - Trigger CSV export
  • & - Trigger PNG export
  • $ - Trigger JSON export
  • % - Clear current data

Browser Compatibility

Web Serial API Support

Oscilloscope Online V2 requires the Web Serial API, which is currently supported in:

Google Chrome
✓ Fully Supported (v89+)
Microsoft Edge
✓ Fully Supported (v89+)
Mozilla Firefox
✗ Not Supported
Safari
✗ Not Supported
Security Note

Web Serial API requires HTTPS for security. This application uses HTTPS in both development and production modes.

Troubleshooting

  • Serial port not detected: Ensure your device is properly connected and drivers are installed
  • Connection fails: Try different baud rates and check if another application is using the port
  • Inconsistent connection: Some devices require multiple connection attempts - this is a known issue being worked on
  • Web Serial API not detected: Use Chrome or Edge browser with the latest version

  • No data appearing: Check data format matches expected pattern (values separated by break character)
  • Incorrect number of graphs: Ensure the number of values per line matches your graph count configuration
  • Strange scaling: Try switching between auto and manual scaling options
  • Performance issues: Reduce update rate or limit the number of data points for better performance

  • PNG export not working: Ensure the chart is fully loaded and visible before exporting
  • CSV file is empty: Collect some data points before attempting to export
  • SVG export formatting: Check SVG configuration settings on the SVG page
  • Import fails: Ensure the CSV file format matches the expected structure

Advanced Features

Time-Based Plotting

When using time-based X-axis, you can choose between:

  • Automatic time: Uses elapsed time since connection
  • Manual time: First value in each data packet is treated as timestamp
Logarithmic Scaling

For data spanning multiple orders of magnitude:

  • Log10: Base-10 logarithmic scale
  • Log2: Base-2 logarithmic scale
Interactive Controls

The chart supports mouse interactions:

  • Zoom: Mouse wheel or pinch gestures
  • Pan: Click and drag to move around
  • Reset: Double-click to reset view
Real-time Performance

Optimize performance by:

  • Limiting maximum data points
  • Adjusting update rate
  • Using auto-update mode for better efficiency

Support & Resources


GitHub Repository
Source code, issues, and contributions

Report Issues
Bug reports and feature requests
Enjoying Oscilloscope Online V2?

Consider starring the repository on GitHub to support the project and help others discover this tool.

Star on GitHub