Elia Alghazal
← Back

Web Bluetooth Medical Dashboard

Browser-native BLE dashboard streaming live physiological data from medical devices

GitHub ↗
THE PROBLEM

Viewing live data from BLE medical fitness devices typically requires a native app, which means installation, platform-specific code, and app store friction. This dashboard does it entirely in the browser, with no installation, using the Web Bluetooth API.

SYSTEM DESIGN
BLE DeviceWeb Bluetooth APICircular BufferChart.jsBrowser DisplayCSV Export
ENGINEERING DECISIONS
Web Bluetooth instead of a native app
A native app means two codebases, app store review, and device-specific BLE stack handling per platform. The Web Bluetooth API handles BLE directly from a browser tab with nothing to install. The constraint is browser support — Chrome and Edge only with no Safari — but the clinical desktop context this was built for made that an acceptable tradeoff.
Notifications instead of polling
BLE GATT characteristics support notifications. The device pushes a reading when it has one rather than waiting to be asked. Polling at fixed intervals wastes device battery and introduces artificial latency between a real measurement and its display. The dashboard updates exactly when new data exists, not before and not after.
Circular buffer for the live chart
Appending every reading to the chart dataset without a limit causes rendering performance to degrade linearly with session length. A fixed-size circular buffer holding the last 60 seconds of readings keeps the chart responsive regardless of how long the session runs. Older data goes to a downloadable export. The live view exists for real-time monitoring, not retrospective analysis.
Chart.js instead of D3
D3 gives maximum control but requires manually managing SVG elements, scales, and transitions for every interaction. For a live line chart updating at roughly 1Hz, Chart.js's update method with animations disabled does the job efficiently with far less code. D3 would have been worth the overhead if the chart type or interaction model required something Chart.js could not handle. It did not.
OUTCOMES
  1. 01Zero-install BLE device monitoring from any Chromium browser
  2. 02Real-time chart updates via GATT characteristic notifications
  3. 03Session export to downloadable CSV
  4. 04Circular buffer maintaining smooth performance across arbitrarily long sessions
STACK

JavaScript · Web Bluetooth API · React · Chart.js