STM32WB Web Bluetooth® App Interfaces

Two GitHub pages hosting the web app are available:

No installation is required to use it this way.


Introduction

This is a web interface created with React 18 and Bootstrap 5.
This web interface using Web Bluetooth® APIs can be used to establish a Bluetooth® LE connection and exchange data with a STM32WB board

STM32WB firmware applications that could be downloaded to interact with Web Bluetooth® application:

Example of the interface when a connection is established with Firmware Update Over The Air application and HeartRate application

Firmware Update Over The Air on smartphone & Heart Rate on PC


Setup

The following wiki page will help you to put in place the hardware setup.

Hardware requirements

To use the web interface, one of the following STM32WB boards is necessary .

A PC or a smartphone is required to open the web interface in a browser.

Software requirements

Flash stm32wb5x_BLE_Stack_full_fw.bin or stm32wb5x_BLE_Stack_light_fw.bin binary on the Wireless Coprocessor.
If it is not the case, STM32CubeProgrammer is needed to load the appropriate binary.
All available coprocessor wireless binaries are located here.
All available application binaries are available here.
Refer to UM2237 to learn how to install and use STM32CubeProgrammer.

For more information about Bluetooth® LE please refer to the STMicroelectronics Bluetooth® LE Wiki.


User's guide

Peer To Peer Server

The P2P Server application demonstrates a bidirectional Bluetooth® LE communication between a client and a server. The P2P Server interface proposes a set of buttons to interact with the connected device. A reboot panel is available only if a P2P Server service with the reboot OTA characteristic is detected on the device (see the Firmware Update Over The Air section to have more information related to OTA).

Requirements

Example with the P-NUCLEO-WB55 board.
One of the following binary has to be flashed on the wireless coprocessor.

And this application binary file has to be flashed on the application coprocessor.

If you don't know how to update the coprocessors firmware, click here.

Follow the next steps to learn how to use the application P2P Server

Step 1. Power on the STM32WB board with the Ota application flashed in and activate the Bluetooth® on your machine.
Step 2. Open this web page in your browser.
Step 3. Click on the connect button then select P2PSRV1 in the device list and click pair.
Step 3
Step 4. Click on P2P Server to show the interface and don't hesitate to read the tooltips.
You are now connected.
You can now interact with the connected device.
Step 4


Firmware Update Over The Air (OTA)

The Firmware Update Over The Air (OTA) application allows a remote device to update the current application on the application coprocessor or to update the Wireless stack on the wireless coprocessor. Furthermore, the services which implements the reboot OTA characteristic are able to jump/reboot on the OTA application, thus allowing to update the application at your will.

Requirements

Example with the P-NUCLEO-WB55 board.
One of the following binary has to be flashed on the wireless coprocessor.

And this application binary file has to be flashed on the application coprocessor.

If you don't know how to update the coprocessors firmware, click here.

Follow the next steps to learn how to use the application Firmware Update Over The Air

Step 1. Power on the STM32WB board with the Ota application flashed in and activate the Bluetooth® on your machine.
Step 2. Open this web page in your browser.
Step 3. Click on the connect button then select STM_OTA in the device list and click pair.
You are now connected
Step 3
Step 4. Select the correct STM32WB device by clicking on the radio button.
Step 5. Choose between Application Coprocessor Binary to update the Application and Wireless Coprocessor Binary to update the Wireless stack.
Reboot Panel
Step 6. Select the binary to be downloaded. You can either fetch a binary file from the STMicroelectronics GitHub repository STM32CubeWB or upload a binary file stored on your machine.
Reboot Panel
Step 7. (Not mandatory) Choose the first sector address from which the file will be write.
Step 8. Click on the upload button and wait for the disconnection.
Reboot Panel
Congratulations, the new Application/Wireless stack is running and can be connected

If you have updated the old application with a new application implementing the characteristic reboot OTA, like BLE_p2pServer_ota_reference.bin or BLE_HeartRate_ota_reference.bin a panel permitting to restart on the OTA application is available. From this panel you can jump on the Firmware Update Over The Air application, then reboot on another application.
The section 4 of the panel (4. Range of sectors to delete) is not mandatory, the values are updated automatically.
Reboot Panel


HeartRate

The HeartRate application measures heart rate data and other information like the body sensor location and the energy expended. The HeartRate interface proposes a set of buttons and text input to interact with the connected device and a chart displaying the heart rate data received. A reboot panel is available only if a HeartRate service with the reboot OTA characteristic is detected on the device (see the Firmware Update Over The Air section to have more information related to OTA).

Requirements

Example with the P-NUCLEO-WB55 board.
One of the following binary has to be flashed on the wireless coprocessor.

And this application binary file has to be flashed on the application coprocessor.

If you don't know how to update the coprocessors firmware, click here.

Follow the next steps to learn how to use the application HeartRate

Step 1. Power on the STM32WB board with the HeartRate application flashed in and activate the Bluetooth® on your machine.
Step 2. Open this web page in your browser.
Step 3. Click on the connect button then select HRSTM in the device list and click pair.
You are now connected
Step 3
Step 4. Click on HeartRate to show the interface and don't hesitate to read the tooltips.
You can now interact with the connected device.
Step 4
Step 4


Data Throughput

The Data Throughput application measures the upload (data transfer from web interface to the connected device) and download (data transfer from the connected device to the web interface) throughput between the web app and the connected device. The Data Throughput interface proposes two panels, one to display the uploaded data and the other the downloaded data. Each panel has a chart of the data throughput and a button to reset the chart, the upload panel has also a button to start or stop the uploading of data.

Requirements

Example with the P-NUCLEO-WB55 board.
One of the following binary has to be flashed on the wireless coprocessor.

You also need to flash the BLE Data Throughput application with executable files by following the instructions here.

If you don't know how to update the coprocessors firmware, click here.

Follow the next steps to learn how to use the application Data Throughput

Step 1. Power on the STM32WB board with the Data Throughput application flashed in and activate the Bluetooth® on your machine.
Step 2. Open this web page in your browser.
Step 3. Click on the connect button then select DT_SERVER in the device list and click pair.
You are now connected
Step 3
Step 4. Click on Data Throughput to show the interface and don't hesitate to read the tooltips.
You can now interact with the connected device.
Step 4


Sensor

The Sensor app shows data exported by sensors from a BLE device using the BlueST protocol. The sensor interface displays different panels based on the data types exported by the firmware, including environmental and motion data. Using a set of buttons, the application will interact with the connected device to get its temperature, gyroscope and accelerometer data. All data received by the application can be displayed on graphs.

Requirements

Example with the STM32WB5MM-DK board.
One of the following binary has to be flashed on the wireless coprocessor.

If you don't know how to update the coprocessors firmware, click here.

You also need to flash the BLE Sensor application with executable files by following the instructions here.

Follow the next steps to learn how to use the application Sensor

Step 1. Power on the STM32WB5MM-DK board with the Sensor application flashed in and activate the Bluetooth® on your machine.
Step 2. Open this web page in your browser.
Step 3. Click on the connect button then select WB5M DK in the device list and click pair.
Step 3
Step 4. You can now click on 2 applications (P2P Server or Sensor)

1) Click on P2P Server to show its interface. You will be able to interact with the LED. Don't hesitate to read the tooltips.
You are now connected.
You can now interact with the connected device.
Step 4

2) Click on Sensor to show its interface. You will be able to interact with the environmental and motion sensors. Each sensor needs to have his notifications enabled in order to display data. For the temperature, you can choose to use Celcius or Fahrenheit but notifications have to be disabled if you want to switch unit.
You are now connected.
You can now interact with the connected device.
Step 4
Step 4
Step 4
Step 4


Troubleshooting

Caution : Issues and the pull-requests are not supported to submit problems or suggestions related to the software delivered in this repository. This example is being delivered as-is, and not necessarily supported by ST.

If you want to debug Web Bluetooth® applications, you can easily do it by adding : console.log(variable); in your code so you can see in the navigator's console what is displayed.

For any other question related to the product, the hardware performance or characteristics, the tools, the environment, you can submit it to the ST Community on the STM32 MCUs related page.