There are 4 different messages that can be sent/received:

1. **Data Messages**: a message sent from the Middleware to the Serial Plotter App. This is the actual data received by the pluggable monitor that needs to be displayed in the Serial Plotter App.

example:
```
{
command: "", // empty
data: string[] // the data received from the pluggable monitor
}
```

2. **Middleware Commands**: a command sent from the server to the Serial Plotter App to communicate a change in the settings

example:
```
{
command: "ON_SETTINGS_DID_CHANGE",
data: Partial // see section below
}
```

3. **Client Commands - Send Message**: a command sent by the client to deliver a string to the connected board

example:
```
{
command: "SEND_MESSAGE",
data: string
}
```

4. **Client Commands - Change Settings**: a command sent by the client to change some settings in the UI or in the connected board

example:
```
{
command: "CHANGE_SETTINGS",
data: Partial // see section below
}
```

#### Monitor Settings

Settings changes, sent and received in the Serial Plotter App, must have the following object structure

```
Partial = {
pluggableMonitorSettings: PluggableMonitorSettings;
monitorUISettings: Partial;
}
```

That means a Setting Message can contain `pluggableMonitorSettings` and/or `monitorUISettings`.

Let's take a look at the difference between the two:

1. **pluggableMonitorSettings**: a map of settings specific for the board attached to the pluggable monitor. Since every board has different capabilities, the settings are different and the structure is a map of key/value pairs. The `value` is an object with the following structure:

```
{
// The setting identifier
readonly id?: string;
// A human-readable label of the setting (to be displayed on the GUI)
readonly label?: string;
// The setting type (at the moment only "enum" is available)
readonly type?: string;
// The values allowed on "enum" types
readonly values?: string[];
// The selected value
selectedValue: string;
}
```

example:
```
pluggableMonitorSettings: {
baudrate: {
id: "baudrate",
label: "Baudrate",
type: "enum",
values: ["300","9600", "115200"],
selectedValue: "9600"
},
otherSetting: {
id: "otherSetting",
label: "Other Setting",
type: "enum",
values: ["A","B", "C"],
selectedValue: "B"
}
}

```

2. **monitorUISettings**: settings that are used in the UIs of the Serial Plotter App.
These are sent to the middleware to be stored and propagated to other clients.

When a client connected to the same websocket change one of the following settings, the change should be stored in the backend (for future re-use) and immediately propagated to all connected clients in order to update their UIs.

`monitorUISettings` is an object with the following structure:
```
{
// used by the serial monitors to stick at the bottom of the window
autoscroll: boolean;
// used by the serial monitors to show the timestamp next to the actual data
timestamp: boolean;
// used by the clients to store the information about the last EOL used when sending a message to the board
lineEnding: EOL;
// used by the Serial Plotter App to interpolate the chart
interpolate: boolean;
// the theme the user choosed
darkTheme: boolean;
// the current websocket port where the communication happens
wsPort: number;
// the port the pluggable monitor in the middleware is connected to
serialPort: string;
// the connection status of the pluggable monitor to the actual board
connected: boolean;
}
```

## Development

- `npm i` to install dependencies
- `npm test` to run automated tests
- `npm start` to run the application in development mode @ [http://localhost:3000](http://localhost:3000)

## Deployment

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.

## Security

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!