https://github.com/piotrpdev/realtime-serial-graph
Web Serial API realtime data graph
https://github.com/piotrpdev/realtime-serial-graph
api arduino graph plot real-time realtime serial web
Last synced: about 1 month ago
JSON representation
Web Serial API realtime data graph
- Host: GitHub
- URL: https://github.com/piotrpdev/realtime-serial-graph
- Owner: piotrpdev
- License: mit
- Created: 2024-05-08T18:23:07.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T16:26:31.000Z (about 2 years ago)
- Last Synced: 2025-10-08T21:06:10.614Z (9 months ago)
- Topics: api, arduino, graph, plot, real-time, realtime, serial, web
- Language: TypeScript
- Homepage: https://serial.piotrp.dev
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Realtime Serial Graph
Website that reads realtime data from a device (e.g. Arduino) using the [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API)
and displays it nicely using [Dygraphs](https://github.com/danvk/dygraphs) and [PaperCSS](https://github.com/papercss/papercss).
## Serial Data Format
The TypeScript code uses a custom [`Transformer`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream/TransformStream#transformer) that extracts an [integer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt) inside two chevrons (`"<"`, `">"`). If you don't want to make your own custom `Transformer` just send your serial data like this:
```cpp
Serial.print("<" + String(analogRead(A0)) + ">");
```
An example Arduino sketch is provided in [`./Heart_Rate_Display_Arduino/`](./Heart_Rate_Display_Arduino/), here is the source:
```txt
Heart_Rate_Display.ino
Demo Program for AD8232 Heart Rate sensor.
Casey Kuhns @ SparkFun Electronics
6/27/2014
https://github.com/sparkfun/AD8232_Heart_Rate_Monitor
```