Serial Studio offers three flexible operation modes to visualize and organize data from your devices: Quick Plot Mode, JSON Project File Mode, and Device-defined Dashboard. Each mode provides different levels of customization, allowing you to choose the method that best fits your project. These modes are supported regardless of the data source (Serial, BLE, or Network Sockets).

You can switch between these modes by clicking on the radio buttons in the setup panel:

• Quick Plot Mode: Best for fast and simple real-time plotting, perfect for quick sensor data visualization.
• JSON Project File Mode: Opt for this when you need full control over the dashboard layout and customization, with the device sending only sensor data.
• No Parsing (Device Sends JSON Data): Use this mode when you want your device to define both the data and the dashboard layout dynamically.

Quick Plot Mode is the simplest and fastest way to get started with Serial Studio. It automatically generates a dashboard with real-time plots based on comma-separated values (CSV) received from your device. This mode is perfect for users who want an Arduino-style plotting tool without needing to define any specific project files or configurations.

• Your device sends data as a CSV string (e.g., value1,value2,value3,...) over any data source, such as serial, BLE, or network sockets (TCP/UDP).
• Serial Studio automatically parses this data and plots each value on a separate graph.
• As soon as the data is received and parsed, the software automatically switches to the Dashboard View.

This mode is ideal for quick visualization of sensor data from microcontrollers (such as Arduino or ESP32), where the data format is consistent and simple.

If your device sends this CSV string over any supported input method:

1023, 512, 850, 300, 45

Quick Plot Mode will generate a dashboard with 5 separate plots, each displaying the corresponding values in real-time.

1. Select your data source (Serial, Network, or BLE) in the Setup Panel.
2. Ensure your device is sending CSV-formatted data.
3. Click Connect to begin visualizing the data.
4. The dashboard will be automatically populated with plots based on the number of comma-separated values.

For a step-by-step guide, refer to the Quick Plot Mode tutorial in the Getting Started section.

JSON Project File Mode provides the highest level of customization. In this mode, you manually create a JSON Project File using Serial Studio's Project Editor. The project file defines the layout of the dashboard, the widgets, and how data from your device should be processed and displayed.

Unlike Device-defined Dashboard mode, your device only needs to send the sensor values, while the dashboard structure is predefined in the project file.

• You create or load a JSON Project File that defines the dashboard structure, groups, datasets, and widgets.
• Your device sends only the sensor values as a CSV string (e.g., value1,value2,value3,...) over any supported input method (Serial, BLE, or Network).
• Serial Studio maps the values to the datasets defined in the project file and updates the dashboard in real-time based on the incoming frame data.
• The device can send a start delimiter and end delimiter to indicate where a frame begins and ends:
  • Start Delimiter: Customizable (configured by the user in the project file, e.g., "/*").
  • End Delimiter: Customizable (configured by the user in the project file, e.g., "*/").

📝 Note: If needed, you can disable the use of start and end delimiters by selecting the “No Delimiters” option in the Project Editor. Keep in mind that this may impact frame parsing reliability, especially at higher data frequencies or with larger frames. Alternatively, you can choose to use only an end delimiter (defaulted to \n in the Project Editor), which is often sufficient for most applications and simplifies frame processing compared to using both start and end delimiters.

Your device might send the following data frame:

/*1023,512,850,300,45*/

In this example:

• Start Delimiter: /*
• End Delimiter: */
• Separator: ,

The frame data (1023, 512, 850, 300, 45) will be mapped to the appropriate datasets in the project file by using the index of each value in the array.

This mode is ideal when you need full control over the dashboard’s design and data mapping, but want to keep the data being transmitted by your device simple (e.g., just sensor values). It is also useful for projects where the data format is consistent, but the dashboard layout needs to be pre-configured and tailored to specific requirements.

1. Open the Project Editor from the Serial Studio toolbar.

2. Create or load a JSON Project File that defines your dashboard layout, data mapping, start delimiter, end delimiter, and separator sequence. You can find more information about using the Project Editor here.

   

3. Select your data source (Serial, Network, or BLE) in the Setup Panel.

4. Click Connect to start visualizing your custom dashboard.

In No Parsing (Device Sends JSON Data) mode, your device sends not only the sensor values but also a complete JSON structure that defines how the dashboard should look. This mode provides more control over the visualization by allowing your device to dynamically configure the dashboard with each data frame.

• Your device sends a JSON object that includes both the sensor values and the dashboard layout over any data source (Serial, BLE, or Network).
• The dashboard is updated in real-time based on the incoming JSON structure.
• The device must send the JSON object between hardcoded start and end delimiters:
  • Start Delimiter: /* (hardcoded, like a C-style comment)
  • End Delimiter: */ (hardcoded)

This mode is great for embedded systems where the device has enough processing power to manage and send its own JSON-encoded dashboard configuration, especially in scenarios where you want to programmatically control how data is visualized on the dashboard.

Here’s an example of a JSON object that your device might send to Serial Studio:

{
  "title": "My Device Dashboard",
  "groups": [
    {
      "title": "Environment",
      "widget": "datagrid",
      "datasets": [
        {
          "index": 1,
          "title": "Temperature",
          "units": "°C",
          "value": "22.5",
          "widget": "gauge",
          "min": 0,
          "max": 100
        },
        {
          "index": 2,
          "title": "Humidity",
          "units": "%",
          "value": "55",
          "widget": "bar",
          "min": 0,
          "max": 100
        }
      ]
    },
    {
      "title": "Motion",
      "widget": "accelerometer",
      "datasets": [
        {
          "index": 3,
          "title": "X-axis",
          "value": "0.12",
          "widget": "x"
        },
        {
          "index": 4,
          "title": "Y-axis",
          "value": "-0.05",
          "widget": "y"
        },
        {
          "index": 5,
          "title": "Z-axis",
          "value": "9.81",
          "widget": "z"
        }
      ]
    },
    {
      "title": "Location",
      "widget": "map",
      "datasets": [
        {
          "index": 6,
          "title": "Latitude",
          "value": "37.7749",
          "widget": "lat"
        },
        {
          "index": 7,
          "title": "Longitude",
          "value": "-122.4194",
          "widget": "lon"
        },
        {
          "index": 8,
          "title": "Altitude",
          "value": "30",
          "widget": "alt"
        }
      ]
    }
  ]
}

Here’s a simple Arduino sketch that sends a JSON-encoded dashboard to Serial Studio:

void setup() {
  // Initialize serial communication at 115200 baud
  Serial.begin(115200); 
}

void loop() {
  // Send the start delimiter
  Serial.print("/*");

  // Send JSON data
  Serial.print("{\"title\":\"My Device Dashboard\", \"groups\":[{\"title\":\"Environment\",\"widget\":\"datagrid\",\"datasets\":[{\"index\":1,\"title\":\"Temperature\",\"units\":\"°C\",\"value\":\"22.5\",\"widget\":\"gauge\",\"min\":0,\"max\":100},");
  Serial.print("{\"index\":2,\"title\":\"Humidity\",\"units\":\"%\",\"value\":\"55\",\"widget\":\"bar\",\"min\":0,\"max\":100}]},");
  Serial.print("{\"title\":\"Motion\",\"widget\":\"accelerometer\",\"datasets\":[{\"index\":3,\"title\":\"X-axis\",\"value\":\"0.12\",\"widget\":\"x\"},");
  Serial.print("{\"index\":4,\"title\":\"Y-axis\",\"value\":\"-0.05\",\"widget\":\"y\"},");
  Serial.print("{\"index\":5,\"title\":\"Z-axis\",\"value\":\"9.81\",\"widget\":\"z\"}]},");
  Serial.print("{\"title\":\"Location\",\"widget\":\"map\",\"datasets\":[{\"index\":6,\"title\":\"Latitude\",\"value\":\"37.7749\",\"widget\":\"lat\"},");
  Serial.print("{\"index\":7,\"title\":\"Longitude\",\"value\":\"-122.4194\",\"widget\":\"lon\"},");
  Serial.print("{\"index\":8,\"title\":\"Altitude\",\"value\":\"30\",\"widget\":\"alt\"}]}]}");

  // Send the end delimiter
  Serial.println("*/");
  
  // Delay before sending the next frame
  delay(1000);
}

This Arduino code sends the complete JSON-encoded dashboard to Serial Studio, with sensor values embedded within the JSON structure.

1. Ensure your device is configured to send the JSON-encoded data between the hardcoded delimiters (/* and */) over your selected data source (Serial, Network, or BLE).
2. Select your data source in the Setup Panel.
3. Click Connect to start visualizing the JSON-based dashboard.
4. The dashboard will be dynamically updated based on the incoming JSON data.

Quick Plot Mode:

• Testing Arduino sensors during development
• Quick hardware validation
• Educational demonstrations
• When you just need to "see the numbers"

JSON Project File Mode:

• CanSat competition telemetry dashboards
• Industrial monitoring systems
• Data logging projects with specific visualization needs
• Any project where dashboard layout matters

Device-Defined Dashboard Mode:

• Multi-mode devices (device changes dashboard per mode)
• Configurable sensor arrays (dashboard adapts to active sensors)
• Embedded systems with GUI capabilities
• When device firmware controls the user interface

Getting Started:

• Getting Started - First-time setup tutorial (uses Quick Plot)
• Data Sources - Configure your connection
• Communication Protocols - Choose the right protocol

Building Custom Dashboards:

• Project Editor - Create JSON Project Files
• Widget Reference - All available widgets
• Data Flow - How data becomes visualizations

Advanced Topics:

• JavaScript API Reference - Custom frame parsing
• CSV Import & Export - Save and replay data

Need Help?

• Troubleshooting Guide - Common issues
• Examples - Real projects

Still not sure which mode to use? Start with Quick Plot to see if it works for you. If you need more control, move to JSON Project File mode. Most users end up using Project File mode for their final dashboards.