Displaying on-Board Sensor Values on a WebBLE Dashboard

This tutorial shows how to use the web dashboard to read data from the Arduino® Nicla Sense ME sensors.

Overview

The Arduino® Nicla Sense ME can give you information about the environment such as pressure, temperature and gas readings. Sometimes, you may have to place the sensor in a hard-to-reach area due to certain environmental requirement. Therefore, it will be much convenient and helpful to access the data wirelessly.

Thanks to the ANNA B112 Bluetooth® chip and the libraries developed for the Nicla Sense ME, you can easily stream data over Bluetooth® to a device of your choice. By using WebBLE, no additional software other than a compatible browser (Google Chrome is recommended) is required.

To demonstrate this, we prepared a simple sketch and hosted a dashboard so you can try it yourself.

A previous version of this dashboard was developed to be used with the Arduino® Nano 33 BLE. You can see a video that shows how it looks here.

In this tutorial, we will focus on the Arduino® Nicla Sense ME.

Goals

  • Upload the sketch to the Arduino® Nicla Sense ME.
  • Connect through Bluetooth® Low Energy to our dashboard and read sensor data.

Required Hardware and Software

  • Nicla Sense ME
  • Micro USB-A cable (USB-A to Micro USB-AB)
  • Arduino IDE 1.8.10+, Arduino IDE 2 or Arduino Web Editor
  • If you choose the Arduino IDE, you will need to install 2 libraries: Arduino_BHY2 and ArduinoBLE

Instructions

Set up the Board

If you use the Web Editor to upload the sketch you don't need to install any library. They are all included automatically. If you use the Arduino IDE or the CLI, you need to download the Arduino_BHY2 and the ArduinoBLE libraries.

These libraries can be found within the Library Manager in the Arduino IDE, or it can be downloaded separately following the links attached within required hardware and software section.

If you use a local IDE, you can copy & paste the following sketch:

1/*
2Arduino Nicla Sense ME WEB Bluetooth® Low Energy Sense dashboard demo
3Hardware required: https://store.arduino.cc/nicla-sense-me
41) Upload this sketch to the Arduino Nano Bluetooth® Low Energy sense board
52) Open the following web page in the Chrome browser:
6https://arduino.github.io/ArduinoAI/NiclaSenseME-dashboard/
73) Click on the green button in the web page to connect the browser to the board over Bluetooth® Low Energy
8Web dashboard by D. Pajak
9Device sketch based on example by Sandeep Mistry and Massimo Banzi
10Sketch and web dashboard copy-fixed to be used with the Nicla Sense ME by Pablo Marquínez
11*/
12
13#include "Nicla_System.h"
14#include "Arduino_BHY2.h"
15#include <ArduinoBLE.h>
16
17#define BLE_SENSE_UUID(val) ("19b10000-" val "-537e-4f6c-d104768a1214")
18
19const int VERSION = 0x00000000;
20
21BLEService service(BLE_SENSE_UUID("0000"));
22
23BLEUnsignedIntCharacteristic versionCharacteristic(BLE_SENSE_UUID("1001"), BLERead);
24BLEFloatCharacteristic temperatureCharacteristic(BLE_SENSE_UUID("2001"), BLERead);
25BLEUnsignedIntCharacteristic humidityCharacteristic(BLE_SENSE_UUID("3001"), BLERead);
26BLEFloatCharacteristic pressureCharacteristic(BLE_SENSE_UUID("4001"), BLERead);
27
28BLECharacteristic accelerometerCharacteristic(BLE_SENSE_UUID("5001"), BLERead | BLENotify, 3 * sizeof(float)); // Array of 3x 2 Bytes, XY
29BLECharacteristic gyroscopeCharacteristic(BLE_SENSE_UUID("6001"), BLERead | BLENotify, 3 * sizeof(float)); // Array of 3x 2 Bytes, XYZ
30BLECharacteristic quaternionCharacteristic(BLE_SENSE_UUID("7001"), BLERead | BLENotify, 4 * sizeof(float)); // Array of 4x 2 Bytes, XYZW
31
32BLECharacteristic rgbLedCharacteristic(BLE_SENSE_UUID("8001"), BLERead | BLEWrite, 3 * sizeof(byte)); // Array of 3 bytes, RGB
33
34BLEFloatCharacteristic bsecCharacteristic(BLE_SENSE_UUID("9001"), BLERead);
35BLEIntCharacteristic co2Characteristic(BLE_SENSE_UUID("9002"), BLERead);
36BLEUnsignedIntCharacteristic gasCharacteristic(BLE_SENSE_UUID("9003"), BLERead);
37
38// String to calculate the local and device name
39String name;
40
41Sensor temperature(SENSOR_ID_TEMP);
42Sensor humidity(SENSOR_ID_HUM);
43Sensor pressure(SENSOR_ID_BARO);
44Sensor gas(SENSOR_ID_GAS);
45SensorXYZ gyroscope(SENSOR_ID_GYRO);
46SensorXYZ accelerometer(SENSOR_ID_ACC);
47SensorQuaternion quaternion(SENSOR_ID_RV);
48SensorBSEC bsec(SENSOR_ID_BSEC);
49
50void setup(){
51 Serial.begin(115200);
52
53 Serial.println("Start");
54
55 nicla::begin();
56 nicla::leds.begin();
57 nicla::leds.setColor(green);
58
59 //Sensors initialization
60 BHY2.begin(NICLA_STANDALONE);
61 temperature.begin();
62 humidity.begin();
63 pressure.begin();
64 gyroscope.begin();
65 accelerometer.begin();
66 quaternion.begin();
67 bsec.begin();
68 gas.begin();
69
70 if (!BLE.begin()){
71 Serial.println("Failed to initialized BLE!");
72
73 while (1)
74 ;
75 }
76
77 String address = BLE.address();
78
79 Serial.print("address = ");
80 Serial.println(address);
81
82 address.toUpperCase();
83
84 name = "NiclaSenseME-";
85 name += address[address.length() - 5];
86 name += address[address.length() - 4];
87 name += address[address.length() - 2];
88 name += address[address.length() - 1];
89
90 Serial.print("name = ");
91 Serial.println(name);
92
93 BLE.setLocalName(name.c_str());
94 BLE.setDeviceName(name.c_str());
95 BLE.setAdvertisedService(service);
96
97 // Add all the previously defined Characteristics
98 service.addCharacteristic(temperatureCharacteristic);
99 service.addCharacteristic(humidityCharacteristic);
100 service.addCharacteristic(pressureCharacteristic);
101 service.addCharacteristic(versionCharacteristic);
102 service.addCharacteristic(accelerometerCharacteristic);
103 service.addCharacteristic(gyroscopeCharacteristic);
104 service.addCharacteristic(quaternionCharacteristic);
105 service.addCharacteristic(bsecCharacteristic);
106 service.addCharacteristic(co2Characteristic);
107 service.addCharacteristic(gasCharacteristic);
108 service.addCharacteristic(rgbLedCharacteristic);
109
110 // Disconnect event handler
111 BLE.setEventHandler(BLEDisconnected, blePeripheralDisconnectHandler);
112
113 // Sensors event handlers
114 temperatureCharacteristic.setEventHandler(BLERead, onTemperatureCharacteristicRead);
115 humidityCharacteristic.setEventHandler(BLERead, onHumidityCharacteristicRead);
116 pressureCharacteristic.setEventHandler(BLERead, onPressureCharacteristicRead);
117 bsecCharacteristic.setEventHandler(BLERead, onBsecCharacteristicRead);
118 co2Characteristic.setEventHandler(BLERead, onCo2CharacteristicRead);
119 gasCharacteristic.setEventHandler(BLERead, onGasCharacteristicRead);
120
121 rgbLedCharacteristic.setEventHandler(BLEWritten, onRgbLedCharacteristicWrite);
122
123 versionCharacteristic.setValue(VERSION);
124
125 BLE.addService(service);
126 BLE.advertise();
127}
128
129void loop(){
130 while (BLE.connected()){
131 BHY2.update();
132
133 if (gyroscopeCharacteristic.subscribed()){
134 float x, y, z;
135
136 x = gyroscope.x();
137 y = gyroscope.y();
138 z = gyroscope.z();
139
140 float gyroscopeValues[3] = {x, y, z};
141
142 gyroscopeCharacteristic.writeValue(gyroscopeValues, sizeof(gyroscopeValues));
143 }
144
145 if (accelerometerCharacteristic.subscribed()){
146 float x, y, z;
147 x = accelerometer.x();
148 y = accelerometer.y();
149 z = accelerometer.z();
150
151 float accelerometerValues[] = {x, y, z};
152 accelerometerCharacteristic.writeValue(accelerometerValues, sizeof(accelerometerValues));
153 }
154
155 if(quaternionCharacteristic.subscribed()){
156 float x, y, z, w;
157 x = quaternion.x();
158 y = quaternion.y();
159 z = quaternion.z();
160 w = quaternion.w();
161
162 float quaternionValues[] = {x,y,z,w};
163 quaternionCharacteristic.writeValue(quaternionValues, sizeof(quaternionValues));
164 }
165
166 }
167}
168
169void blePeripheralDisconnectHandler(BLEDevice central){
170 nicla::leds.setColor(red);
171}
172
173void onTemperatureCharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
174 float temperatureValue = temperature.value();
175 temperatureCharacteristic.writeValue(temperatureValue);
176}
177
178void onHumidityCharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
179 uint8_t humidityValue = humidity.value() + 0.5f; //since we are truncating the float type to a uint8_t, we want to round it
180 humidityCharacteristic.writeValue(humidityValue);
181}
182
183void onPressureCharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
184 float pressureValue = pressure.value();
185 pressureCharacteristic.writeValue(pressureValue);
186}
187
188void onBsecCharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
189 float airQuality = float(bsec.iaq());
190 bsecCharacteristic.writeValue(airQuality);
191}
192
193void onCo2CharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
194 uint32_t co2 = bsec.co2_eq();
195 co2Characteristic.writeValue(co2);
196}
197
198void onGasCharacteristicRead(BLEDevice central, BLECharacteristic characteristic){
199 unsigned int g = gas.value();
200 gasCharacteristic.writeValue(g);
201}
202
203void onRgbLedCharacteristicWrite(BLEDevice central, BLECharacteristic characteristic){
204 byte r = rgbLedCharacteristic[0];
205 byte g = rgbLedCharacteristic[1];
206 byte b = rgbLedCharacteristic[2];
207
208 nicla::leds.setColor(r, g, b);
209}

Once you have these tools, you can select the Nicla Sense ME as target board and its corresponding port. Now you are ready to upload the sketch.

Connect to the Dashboard

Once you uploaded the sketch to your board you can open the Nicla Sense ME Dashboard. If you're interested in the source code, you can have a look at the repository.

Preview of the dashboard
Preview of the dashboard

To connect your board to the dashboard, you will need to click on the top left button which says "Connect Board". A pop up will be displayed in your browser and it starts searching for Bluetooth® devices. This application leverages the WebBLE functionality of your browser.

Popup message to connect the device to the browser
Popup message to connect the device to the browser

For this feature to work, make sure that WebBLE is both supported and enabled! In Google Chrome go to chrome://flags and enable "Experimental Web Platform features". Check the website compatibility list to confirm that your browser supports this feature

Once it is connected, the button will change its color to green, and the graphs will start to show data in real time. You will be able to verify its operation by trying out the following actions:

  • Try to rotate the board and see the 3D model of the board spin.

  • You can also select a different LED color from the bottom left widget.

  • Breathe onto the board and see the humidity and temperature values changing.

Conclusion

The Nicla Sense ME supports a lot of use cases through its on-board sensors and the Bluetooth® Low Energy functionality. By leveraging the WebBLE API, you do not need to install or run any application from your computer as shown in this tutorial. You can read more about WebBLE technology here.

Suggest changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. If you see anything wrong, you can edit this page here.

License

The Arduino documentation is licensed under the Creative Commons Attribution-Share Alike 4.0 license.