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 demo3Hardware required: https://store.arduino.cc/nicla-sense-me41) Upload this sketch to the Arduino Nano Bluetooth® Low Energy sense board52) 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 Energy8Web dashboard by D. Pajak9Device sketch based on example by Sandeep Mistry and Massimo Banzi10Sketch and web dashboard copy-fixed to be used with the Nicla Sense ME by Pablo Marquínez11*/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, XY29BLECharacteristic gyroscopeCharacteristic(BLE_SENSE_UUID("6001"), BLERead | BLENotify, 3 * sizeof(float));    // Array of 3x 2 Bytes, XYZ30BLECharacteristic quaternionCharacteristic(BLE_SENSE_UUID("7001"), BLERead | BLENotify, 4 * sizeof(float));     // Array of 4x 2 Bytes, XYZW31
32BLECharacteristic rgbLedCharacteristic(BLE_SENSE_UUID("8001"), BLERead | BLEWrite, 3 * sizeof(byte)); // Array of 3 bytes, RGB33
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 name39String 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 initialization60  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 Characteristics98  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 handler111  BLE.setEventHandler(BLEDisconnected, blePeripheralDisconnectHandler);112
113  // Sensors event handlers114  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 it180  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.
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.
 
  
    
    
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.
