This Project will show how to collect Realtime Bluetooth low energy data and show it on web browser.
collect and show BLE data.jpg

This project will show how to collect Realtime Bluetooth low energy data and show it on web browser.

For this project, I am using Bluetooth Low Energy USB dongle called BlueIO, which will act as a central device to retrieve data. Hibou Air Quality Monitor which will serve as a peripheral device to transmit the data. The script is simple to use and can be used for other purposes such as store the data into database or cloud.

Things we need:

Before we start

The article assumes you have some general knowledge of how Bluetooth Low Energy (BLE) work. Since the Chrome Serial specification on Google Chrome is not finalized yet, you will have to go to enable the highlighted flag, and restart Chrome. open chrome://flags/#enable-experimental-web-platform-features in chrome browser. In this example, we are going to use JavaScript + html (and some CSS for styling) to setup the BleuIO and quickly start scanning.

get ble data on browser

Steps :

  • Clone the git repository .git clone https://github.com/smart-sensor-devices-ab/get_realtime_data_bleuio
  • Connect the Bleuio dongle to your computer.
  • Open index.html file
  • Click connect and wait for the device to load on your com port.
  • Select your com port.
  • Scan for BLE devices. (this script only scan for Hibou Devices . You can change the manufacturer value at script.js file)
  • Select device and start getting data. You will see real time value on the screen.
  • Click on stop getting data to stop the script.

Follow the video for better understanding

Sheikh Shuhad