Browser Based Serial Dashboard

Did you know most modern browsers support Serial Communication? Don't worry, neither did I until I was working on a project and "out grew" the Arduino serial monitor . Here is a simple(ish) browser based serial monitoring, command, and dashboard tool I built serialdashboard.com.

[NOTE]: This is most certainly beta software (alpha if you want to be a jerk ;). It is super helpful for me so I decided to make it public. I would LOVE if folks found it helpful or wanted to contribute.

Features

• Monitor incoming messages over serial: e.g. from an arduino or esp32 board.
• Send messages over serial: e.g. send command messages
• Monitor Metrics: track and plot metrics over time
• Build Customizable Dashboards:

Performance:

I did enough optimization on this project to solve my needs. Be warned It does bog down after 100s of thousands of metrics

• Solidjs: AWESOME, fast, performant JavaScript UI library using fine-grained reactivity.
• uplot: A small fast chart for time series, lines, areas, ohlc & bars.

Usability

• Building control panels sucks...
  • You essentially have to hand sculpt json
• Your control panel is saved in local storage and also downloadable. When I start a new arduion project I just create a new serial-dahsboard.json config file (or files)...that grow with the project.
• When in doubt refresh, there are some issues around hot reloading the config

Screen Shots

Hello World

The most basic example; a simple echo application. Whatever you send over serial gets sent right back by the connected arduino.

With Metrics

Here we extend the dashboard to show metrics.

A very simple Control Panel

Here we add a control panel to do a better job displaying metrics and giving buttons.

Metrics

TODO: Make this functionality better

Serial Dashboard interprets incoming serial data that starts with ">" as a metric.

All metrics follow the form key:value, all metrics are interpreted as floats and metric names may not include special characters.

Examples

>metric-key:metric-value
>temp-1:212
>humidity-2:98.1

Once metrics are detected they will be available in the metrics view and are useable within your control panel.

Building Control Panels

TODO: Make this functionality less terrible

• Serial dashboard is built using bootstrap, we give you access to use bootstrap's class when building control panels.
• In order to build control panels you must (currently) edit json directly. The json is of the format:

{
    "type": "container",
    "class": "container w-100",
    "children": [
      {
        "type": "section",
        "name": "Basic Controls",
        "children": [
          {
            "type": "chart",
            "name": "Leg Position",
            "class": "col",
            "dataSets": [
              {
                "name": "Sin",
                "key": "sin"
              }, ...
            ]
          },
          {
            "type": "container",
            "class": "row",
            "children": [
              {
                "name": "Say Hi :)",
                "onMouseDown": "Hello!"
              },...
            ]
          }
        ]
      }
    ]
  }

There are 5 "Component Types"

• container: A group of components.
  • children: Component[]
  • class: string (bootstrap classes)
• section: A collapsable group of components:
  • children: Component[]
• chart: A graph to render one or more metrics
  • metrics: {name: string, key: string}[]
• button: no explanation necessary
  • onMouseDown: string (serial command to send)
  • onMouseUp: string (serial command to send)
  • class: string (bootstrap classes)
• metric: Display a single metric Value
  • metric: {name: string, key: string}[]

TODO:

• Add Help Section to website
• Improve designs....its a tad ugly

INSTALLATION

>> git clone https://github.com/smartfastlabs/serial-dashboard.git
>> cd serial-dashboard
>> npm install
>> npm run dev

LICENSE: AGPLv3