Maker.io main logo

Generate Real-time Graph From Bluetooth Device

2020-12-17 | By Sheikh Shuhad

License: GNU Lesser General Public License

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 showing real-time air quality data; temperate, humidity, pressure, particle matters etc. The data could be later stored on a cloud service of choice.

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.

Step 1: Creating Files

Create a file called index.html and paste the codes from this github url.

https://github.com/smart-sensor-devices-ab/Web-Hibou-Sensor-Plotter/blob/master/index.html

This gives you basic layout of the page with connect, scan, and get data buttons.

Create a file called script.js and paste the following codes from this github url

https://github.com/smart-sensor-devices-ab/Web-Hib...

This js has all the codes and uses Chrome Serial to

  •  Connect to your BleuIO Bluetooth dongle,
  •  Scan nearby devices using the AT-commands
  •  Receive and store the data
  •  Generate real time charts from the data.

All the functions used in the script are well commented for understanding.

Now create a style.css on the root folder and paste the codes from this github url.

https://github.com/smart-sensor-devices-ab/Web-Hibou-Sensor-Plotter/blob/master/style.css

They will give your site a clean look.

You can download the complete script from here. https://github.com/smart-sensor-devices-ab/Web-Hi...

ble connect

Step 2: Connect to the Dongle

 

Once you have everything ready, open the index.html file.

Now connect your BleuIO device to your computer and click connect. Wait for your device to show up on the port screen. Select your device and press connect.

Once the device is connected, you can scan for nearby devices. For this project I have added a filter so that it will only look for Hibou BLE devices. You will see a list of devices on the dropdown menu. We have a small console on the page that shows scan status and number of devices found. Now you can select a device from the dropdown and start getting data from the device.

select ble   select ble device

Step 3: Generate Graph

 

Once you click on get data after selecting a device, it will start to generate graphs using chartjs using real-time data from Hibou Air Quality Monitor.

In my script I am showing Pressure, Temperature, ALS, VOC, Humidity, PM2.5 You can customize your own chart by updating values. All the codes for charts are available on script.js

ble chart report

Follow this video if you find any difficulties.

 

制造商零件编号 SSD005/4-V2W
BLUETOOTH 5 LOW ENERGY USB DONGL
Smart Sensor Devices
制造商零件编号 SSD005/4-V2B
BLUETOOTH 5 LOW ENERGY USB DONGL
Smart Sensor Devices
制造商零件编号 SSD002/2B-EU
SENSOR AIR QUALITY BLUETOOTH OUT
Smart Sensor Devices
制造商零件编号 SSD002/2B-US
SENSOR AIR QUALITY BLUETOOTH OUT
Smart Sensor Devices
Add all DigiKey Parts to Cart
TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum