Overview
This is the tutorial on Plotting Real-Time Graph from Bluetooth 5.0 Devices to Google Chrome. We will plot a real-time graph to Google Chrome from Hibou Air Quality Monitor using BleuIO and javascript library chartjs.
For this project, I am using a Bluetooth Low Energy USB dongle called BlueIO, which will act as a central device to retrieve data. Hibou Air Quality Monitor 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.
Requirements
Here is a list of requirements which is required to start the project.
- Google Chrome version 78 or later (windows)
- BleuIO — Bluetooth Low Energy Adapter
- HibouAir Quality Monitor sensor device
Plotting Real-Time Graph from Bluetooth 5.0 to Google Chrome
The article assumes you have some general knowledge of how Bluetooth Low Energy (BLE) works. You can follow our basic guide to learn more about Bluetooth Low Energy. If you have proper knowledge of BLE, then we can proceed with Plotting Real-Time Graph from Bluetooth 5.0 to Google Chrome.
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. To do that 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 set up the BleuIO and quickly start scanning.
Step 1:
Clone this repository from following link
|
1 |
https://github.com/smart-sensor-devices-ab/Web-Hibou-Sensor-Plotter.git |
Using git clone, clone the following.
|
1 |
https://github.com/smart-sensor-devices-ab/Web-Hibou-Sensor-Plotter.git |
Step 2:
Once you have everything ready, open the index.html file. Your page should look like this
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 the number of devices found. Now you can select a device from the dropdown and start getting data from the device.
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.
Results & Testing
Here is our real time chart showing on web browser.
So this is how you can plot a real-time graph from Bluetooth 5.0 device to Google Chrome.
Video Tutorial & Guide
Follow the video tutorial to learn about Plotting of Real-Time Graph from Bluetooth 5.0 to Google Chrome incase if you face any difficulty.
