The dashboard is a pure JavaScript application that starts by connecting to your board, then it queries which Bluetooth services are supported, and dynamically generates the dashboard to only show the services that are available. You can get to the dashboard by navigating in Chrome to https://adafruit-webbt-playground.glitch.me/ or clicking the button below.

Connecting

Connecting to the dashboard is pretty simple. Just click on the button marked Connect. A dialog should come up showing you the various Bluetooth Connections that are available.

By default it will show only known boards. However, if you have a different board, you can uncheck Show only known devices and it will show you everything it detects.

Once you are connected, you should several panels appear. The exact number depends on the board and firmware you are using. Try playing around with the board and see what happens.

Types of Panels

There are several different kinds of panels and they are designed for different purposes. Some types of data can be displayed on different types of panels. For instance, sensor data could either be displayed with a text panel, which will show the latest values or it can be graphed with a graph panel.

Text Panels

Text panels are your basic panel which will show the data value as text. For each panel, a format field is applied so that it shows up in a more meaningful way. At this time, no text panels are being used. They are useful as a basis for testing new sensors.

Graph Panels

Graph panels allow you to display the data as a graph. It can show either one data dataset as with the temperature or it can show multiple datasets such as with the accelerometer. The latest data will always show in the top half of the panel as indicated by the circles.

Color Panels

Color panels are designed for changing the color of NeoPixel LEDs. They are less flexible than most of the other panels due to their need to be pretty specific. It's possible to have multiple color pickers that each change the same set of NeoPixels.

3D Panels

The 3D panel is meant for displaying the orientation of the board and is also pretty inflexible since there is only one quaternion service and this displays the data from there.

Custom Panels

The custom panel is for unique panels that are primarily used by a single sensor that have controls that are unlike other panels. The battery and tone panels are custom panels because of it made more sense to go this route.

Available Panels

There are over a dozen different panels currently available. These panels are:

Battery

This will display the battery percentage as both a graphic and text. The color of the battery will change depending on the charge level.

Temperature

This will display the current temperature in Celsius in a graph.

Light

This will display the current light level in a graph.

Accelerometer

This will display the X, Y, and Z axes in meters/second2 a graph.

Gyroscope

On older versions of the firmware, this will display the Gyroscope values X, Y, and Z axes in radians in a graph.

Magnetometer

On older versions of the firmware, this will display the Magnetometer values X, Y, and Z axes in micro-Teslas in a graph.

Buttons

This will display the current button or buttons as a graphical representation The number of buttons displayed depends on the type of board connected.

Switch

This will display the current switch position as a graphical representation if the current board has a switch. This is tied into the button service.

Humidity

This will display the relative humidity as a percentage in a graph.

Barometric Pressure

This will display the Barometric Pressure in hectoPascals.

Tone

Clicking the button in this panel will play a 440Hz tone for 1 second.

NeoPixel

This will give you a color picker and changing the color will change the color of the NeoPixel LED(s) on the board. On the Circuit Playground Bluefruit, it will light up the entire ring of NeoPixels.

3D Model

This will display a bunny and changing the orientation of the board should change the orientation of the bunny.

The Log

At the bottom of the page is a log that will show you some of the device information including some of the services and characteristics that were found when the device connected as well as messages about connecting and disconnecting.

There are a few other controls such as AutoScroll, which will automatically scroll the log, Show Timestamp, which will print a timestamp beside every line in the log, and a Clear Text button. The Clear Text button will clear any data that has transferred, but keep the connection open. The application is targeting 30 frames per second. It can actually run faster than this, but slowing it down gives the browser time enough to respond to notifications.

Dark Mode

Finally, let's not forget about Dark Mode. The dashboard supports a couple of different color themes, which are light and dark mode and you can alternate between them by checking and unchecking the Dark Mode checkbox. As you can tell by the screenshots in this guide, we like dark mode.

This guide was first published on Mar 06, 2020. It was last updated on Mar 06, 2020.
This page (Using the Dashboard) was last updated on Oct 31, 2020.