Skip to content

Commit 0ab7fbf

Browse files
fstasifstasi
authored
Implement serial plotter webapp using chart.js (#4)
* Initialize project using Create React App * first implementation * css & fonts * ws connection improvements * improved communication between components * added bourbon * removed prepare script * added action caching to speedup releases * improved dataset cleanup & data drop * offload message parsing to webworker * add serial port name and connection status * scrolling variable names * remove old dataset from chart * disable UI elements when disconnected + UI fixes to bottom panel * show cursor pointer when hovering a button
1 parent 5dfcdde commit 0ab7fbf

33 files changed

+21500
-0
lines changed

‎.github/workflows/publish.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
on: push
2+
3+
# push:
4+
# branches:
5+
# - main
6+
7+
jobs:
8+
publish:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v2
12+
- uses: actions/setup-node@v2
13+
with:
14+
node-version: 10
15+
- uses: actions/cache@v2
16+
with:
17+
path: ~/.npm
18+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
19+
- run: npm install
20+
# TODO: enable test as soon as they are implemented
21+
# - run: npm test
22+
- run: npm run build
23+
- uses: JS-DevTools/npm-publish@v1
24+
with:
25+
token: ${{ secrets.NPM_TOKEN }}

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎LICENSE.txt renamed to ‎LICENSE

File renamed without changes.

‎README.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Serial Plotter WebApp
2+
3+
This is a SPA that receives data points over WebSocket and prints graphs. The purpose is to provide a visual and live representation of data printed to the Serial Port.
4+
5+
The application is designed to be as agnostic as possible regarding how and where it runs. For this reason, it accepts different settings when it's launched in order to configure the look&feel and the connection parameters.
6+
7+
8+
## Main Tech/framework used
9+
10+
- React: as the backbone of the application
11+
- Chart.js: to display data
12+
- WebSockets: to provide a fast communication mechanism between a middle layer and the Serial Plotter (see section [How it works](#how-it-works))
13+
- Npm: as the registry
14+
15+
## How it works
16+
17+
- As soon as the application is bootstrapped it reads the [URL parameters](#config-parameters) and uses them to set the initial state and create the WebSocket connection
18+
- When the WebSocket connection is created, data points are collected, parsed, and printed to the chart
19+
- The app can also send messages back to the boards via WebSocket
20+
21+
### Config Parameters
22+
23+
The Serial Plotter Web App is initialized by passing a number of parameters in the URL, in the form of a QueryString (eg: http://localhost:3000?currentBaudrate=2400&baudrates=300,1200,2400,4800,9600,19200,38400,57600,74880,115200,230400,250000,500000,1000000,2000000&darkTheme=true&wsPort=5000&connected=true&interpolate=true&generate=true).
24+
25+
| Name | Description | Type (default) |
26+
|-|-|-|
27+
| `currentBaudrate` | currently selected baudrate | Number(9600)|
28+
| `currentLineEnding` | currently selected line ending | String("\r\n")|
29+
| `baudrates` | populate the baudrates menu | String[]/Comma separated strings ([])|
30+
| `darkTheme` | whether to use the dark version of the plotter | Boolean(false) |
31+
| `wsPort` | websocket port used for communication | Number(3030) |
32+
| `interpolate` | whether to smooth the graph or not | Boolean(false) |
33+
| `serialPort` | name of the serial port the data is coming from | String("") |
34+
| `connected` | whether if the serial port is connected or not| Boolean(false) |
35+
| `generate` | generate fake datapoints to print random charts (dev purposes only)| Boolean(false) |
36+
37+
It is possible to update the state of the serial plotter by sending the above parameters via WebSocket in the form of a JSON-stringified object, using the `MIDDLEWARE_CONFIG_CHANGED` [Command](#websocket-communication-protocol).
38+
39+
### Websocket Communication Protocol
40+
41+
Besides the initial configuration, which is passed in via URL parameters, the communication between the app and the middleware is implemented over WebSocket.
42+
43+
It's possible to send a JSON-stringified message from and to the Serial Plotter App, as long as it adheres to the following format:
44+
45+
```
46+
{
47+
"command": <a valid command, see below>,
48+
"data": <the value for the command>
49+
}
50+
```
51+
52+
The command/data fields follow the specification:
53+
54+
| Command Field | Data field format | Initiator | Description |
55+
|-|-|-|-|
56+
| "PLOTTER_SET_BAUDRATE" | number | Serial Plotter | request the middleware to change the baudrate |
57+
| "PLOTTER_SET_LINE_ENDING" | string | Serial Plotter| request the middleware to change the lineending for the messages sent from the middleware to the board |
58+
| "PLOTTER_SEND_MESSAGE" | text | Serial Plotter | send a message to the middleware. The message will be sent over to the board |
59+
| "PLOTTER_SET_INTERPOLATE" | boolean | Serial Plotter | send the interpolation flag to the Middleware |
60+
| "MIDDLEWARE_CONFIG_CHANGED" | Object (see [config parameters](#config-parameters) ) | Middleware | Send an updated configuration from the middleware to the Serial Plotter. Used to update the state, eg: changing the color theme at runtime |
61+
62+
Example of a message ready to be sent from the Serial Plotter App to the Middleware
63+
64+
```typescript
65+
const websocketMessage = JSON.stringify({command: "PLOTTER_SET_BAUDRATE", data: 9600})
66+
```
67+
68+
**NOTE: For performance sake, the raw data coming from the serial port that is sent by the middleware to the serial plotter has to be a stringified array of values, rather than the Command/Data object**
69+
70+
71+
## Development
72+
73+
- `npm i` to install dependencies
74+
- `npm start` to run the application in development mode @ [http://localhost:3000](http://localhost:3000)
75+
76+
## Deployment
77+
78+
Usually, there is no need to build the app manually: as soon as a new version of the `package.json` is merged into `main` branch, the CI runs and deploys the package to npm.
79+
80+
## Security
81+
82+
If you think you found a vulnerability or other security-related bug in this project, please read our [security policy](https://github.com/arduino/arduino-serial-plotter-webapp/security/policy) and report the bug to our Security Team 🛡️ Thank you!
83+
84+
e-mail contact: security@arduino.cc

0 commit comments

Comments
 (0)