hero

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, we may have to place the sensor in a hard-to-reach area and therefore want to access the data wirelessly.

Thanks to the ANNA B112 Bluetooth® chip and the libraries developed for the Nicla sense, 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 have 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 version for 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-A)
  • 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.

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

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

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 is using 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's connected, the button will change its color to green, and the graphs will start to show data in real time.

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 don't need to install or run any application from your computer as shown in this tutorial. You can read more about WebBLE technology here.

Tutorial Toolbox

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.

Suggest Changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. You can read more on how to contribute in the contribution policy.