Visualization

Understanding how the transformation pipeline works is important, but at the end of the day it’s visualizing the data that matters. In this segment, we’ll walk you through creating a dashboard, generating some payloads, and seeing that data visualized in your browser in real-time.

Creating a Dashboard

The Control Center visualizes observations in the form of a dashboard, which is a small JavaScript program that lays out various widgets in a customizable fashion.

The following command will create a dashboard that visualizes our air temperature sensor data:

streambed dashboard add --name 'Air Temperature' --source - <<EOF

function() {
  return {
    panels: {
      latestTemperature: {
        title: 'Latest Temperature',
        type: 'ObservationBarChartCard',
        data: {
          topic: 'air-temp-data-up-json',
          field: 'temperature'
        }
      },
      
      historicalTemperature: {
        title: 'Temperature Readings',
        type: 'ObservationTimeSeriesCard',
        data: {
          topic: 'air-temp-data-up-json',
          field: 'temperature'
        }
      }
    },

    layout: [
      { type: "row", entries: [
        { type: "col", size: 6, entries: ["latestTemperature"] },
        { type: "col", size: 6, entries: ["historicalTemperature"] }
        
      ]}
    ]
  };
}
EOF

As you can see, we’ve declared a number of panels, and then referenced them in the layout section by describing its rows and columns. The rows and columns are fully nestable, providing full control over the layout. More information is available in the Control Center Reference Documentation.

Viewing Your Dashboard

Now that we’ve fully configured the Control Center, it’s time to open the UI.

https://localhost:9870/

With the UI open, you can login with the default username of “admin” and the password of “password”. Once logged in, you should be greeted with a dashboard that has two panels.

Let’s generate some data. The transformer processes LoRaWAN payloads, so we’ll need to use the lora-packet-encoder tool to generate the payload. Our first payload will be an ASCII string of “42.1”, which is represented in hex as “34322e310a”. Given this, we can generate a payload for our sensor:

docker run --rm -ti streambed-cli/amd64/lora-packet-encoder:latest 8F74FD863E5F7854D58D7CACC15804CA  F3C388E9 34322e31

which yields:

nwkType............: 00000000 (0)
nwkId..............: fffffff9 (-7)
nwkAddr............: 01c388e9 (29591785)
PHYPayload (Hex)...: 40e988c3f300020001f251c9fe2b11ff0d
PHYPayload (Base64): QOmIw/MAAgAB8lHJ/isR/w0=

We’ll now use mosquitto_pub to publish the Base64 payload:

mosquitto_pub -h localhost -p 1883 -t /tutorial/air-temp/app2dev/data -l \
  <<< '{"key":29591785,"data":"QOmIw/MAAgAB8lHJ/isR/w0="}'

In the above command, key is the decimal representation of the sensor’s nwkAddr field, and data contains the LoRaWAN packet contents encoded as Base64.

You should see the dashboard display this reading in both panels. Here’s a flow of what just happened:

[ mosquitto_pub ] ---> [ tutorial-air-temp ]
                               |
                               v
                        [ transformer ] ---> [ air-temp-data-up-json ]

Now, let’s try another payload. This will publish a payload indicating that the temperature is now 25.5:

mosquitto_pub -h localhost -p 1883 -t /tutorial/air-temp/app2dev/data -l \
  <<< '{"key":29591785,"data":"QOmIw/MAAgAB9FbJ+isR/w0="}'

Be sure to select the Observations page as well for a by device breakdown of the latest readings.

Summary

Streambed and its Control Center provide a powerful platform for visualizing data reported by end devices.

In this tutorial, we covered how a custom sensor type and transformer can be specified, and how a dashboard can be created to visualize this data.

Advanced users may wish to continue with the Advanced Tutorial which covers how to create Streambed applications using Java or Scala. This permits you to perform more complex computations and integrations that aren’t achievable with the JavaScript-based transformation process.