qcn-classdemo

A lightweight, real-time web UI for plotting live accelerometer data from a USB ONavi seismic sensor. Displays X, Y, and Z acceleration with automatic scaling, baseline subtraction, and smooth animation.

Features

• Live streaming charts – Real-time 3-axis acceleration plots (X, Y, Z) using Chart.js
• Hardware + Simulator modes – Auto-detects ONavi USB device; falls back to synthetic simulator
• Automatic scaling – Charts auto-scale with data; manual scale selection available (±0.5g, ±1g, ±2g)
• Baseline removal – Z-axis baseline subtraction and X/Y calibration during startup
• Smooth animation – 250-point rolling window with 30 FPS chart updates for fluid rendering
• Cross-platform – Serial auto-detection on macOS, Linux, Windows

Hardware Requirements

• ONavi USB accelerometer (CDC device, 9-byte polled frames at ~50 Hz)
• USB cable connected to computer

If no hardware is available, the simulator generates synthetic data automatically.

Installation

git clone <repo-url> qcn-classdemo
cd qcn-classdemo
npm install

Usage

Start the server

npm start

Server listens on http://localhost:3000

Open in browser

Navigate to http://localhost:3000 in your web browser. The page will:

1. Connect to the server via Socket.IO
2. Auto-detect or simulate accelerometer data
3. Plot live X, Y, Z acceleration data
4. Display status and calibration progress
5. Allow scale mode selection (Auto / Fixed)

Expected behavior

• Startup (first 3 seconds): "Calibrating zero offsets..." message; X/Y baseline is computed
• After calibration: Charts show real-time acceleration with automatic scaling
• No freezing: Charts update smoothly at 30 FPS; memory is bounded (max 250 points per chart)

Configuration

Edit server.js to modify:

• Poll interval: pollIntervalMs = 20 (50 Hz default)
• Serial baud rate: baudRate: 115200
• Simulator enable: Remove startSimulator() fallback to disable sim mode

API & Debug Endpoints

• GET / – Serves the web UI
• GET /debug/stats – JSON object with frame counts, client connection status
• GET /debug/recent – Last 10 emitted samples (for debugging)
• Socket.IO accel – Real-time acceleration events {t, x, y, z}

Example:

curl http://localhost:3000/debug/stats
curl http://localhost:3000/debug/recent

Performance & Smoothness

• Chart update throttle: 33ms (30 FPS max)
• Autoscale check: Every 2 seconds to avoid excessive recalculation
• Max data points: 250 per chart (bounded memory)
• Message history: 50 most recent frames stored in window._lastMsgs

File Structure

qcn-classdemo/
├── package.json          # Dependencies and scripts
├── server.js             # Node.js server (serial, Socket.IO)
├── public/
│   ├── index.html        # HTML layout and Chart.js setup
│   └── app.js            # Client-side plotting and controls
├── README.md             # This file
└── .gitignore            # Ignore node_modules, etc.

Troubleshooting

No data appears on charts

• Check browser console (DevTools → Console) for errors
• Verify serial device is connected: ls /dev/tty.* | grep -i usb
• Server should print "Auto-detected serial device: ..." on startup
• If no device found, simulator will activate

Charts freeze after running a while

• Should not happen with current version (memory is bounded at 250 points, autoscale throttled to 2s)
• If freezing occurs, check: browser console for errors, terminal for server errors

Simulator data instead of hardware

• USB device may not be detected; check server.js serial detection logic
• Device may require different baud rate or vendor/product ID codes
• Try unplugging and replugging the device

Development Notes

• X/Y calibration: First 3 seconds, raw X/Y values are collected; baseline is computed as mean
• Z baseline: Slow low-pass filter (alpha = 0.005) removes drift
• Autoscaling: Looks at most recent 150 points; applies 20% padding + minimum floor (0.05g)
• Chart.js settings: Uses suggestedMin/suggestedMax (not hard limits) for flexible scaling

License

MIT

Contributing

For issues or improvements, open a GitHub issue or pull request.