https:\/\/parceljs.org\/getting-started\/webapp\/<\/a><\/p>\n\n\n\nOnce it\u2019s installed, go to the app folder and type parcel index.html<\/p>\n\n\n\n
You will have your app running on the browser.<\/p>\n\n\n\n
Step 4:<\/strong><\/p>\n\n\n\n\nConnect your dongle to your pc.\u00a0<\/li>\n<\/ul>\n\n\n\n\nOpen the app on your browser and click connect.\u00a0<\/li>\n<\/ul>\n\n\n\n\nClick on the device information. If you see the device is in peripheral mode than you have to make it central.\u00a0<\/li>\n<\/ul>\n\n\n\n\nClick on the central button. And recheck device information.\u00a0<\/li>\n<\/ul>\n\n\n\nStep 4:<\/strong><\/p>\n\n\n\n\nLets scan for nearby devices.\u00a0<\/li>\n<\/ul>\n\n\n\n\nClick on the scan button and look at the list of the scanned device on your console log. Pick any HibouAir devices and copy the device information.\u00a0<\/li>\n<\/ul>\n\n\n\n\nOpen the index.js file and go to line 95<\/li>\n<\/ul>\n\n\n\n\nreplace the scan target information with the one you copied.<\/li>\n\n\n\n Update firebaseconfig.js with <\/li>\n<\/ul>\n\n\n\nNow save the page and click on send data to the cloud. If your firebase configuration is correct, you should see data showing on your cloud database. <\/p>\n\n\n\n
Here is the code for index.html file <\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta2\/dist\/css\/bootstrap.min.css\"\n rel=\"stylesheet\"\n integrity=\"sha384-BmbxuPwQa2lc\/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH\/Ev+nYRRuWlolflfl\"\n crossorigin=\"anonymous\"\n \/>\n\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.2.9\/firebase-app.js\"><\/script>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.2.9\/firebase-database.js\"><\/script>\n <title>BLE data to google firebase<\/title>\n <\/head>\n <body>\n <div class=\"container\">\n <h2>Send BLE data to cloud<\/h2>\n <p>\n This script helps you to connect to BleuIO and sends data to Firebase\n cloud.\n <\/p>\n <p>\n Learn more about BleuIO.\n <a href=\"https:\/\/www.bleuio.com\/\">https:\/\/www.bleuio.com\/<\/a>\n <\/p>\n <br \/>\n <button class=\"btn btn-success\" id=\"connect\">Connect<\/button>\n <button class=\"btn btn-success\" id=\"deviceinfo\">Device Info<\/button>\n <!-- To get Ble data from HibouAir (Peripheral device), BleuIO has to be on central mode -->\n <button class=\"btn btn-success\" id=\"central\">Central Mode<\/button>\n\n <button class=\"btn btn-success\" id=\"scan\">Scan for devices<\/button>\n\n <button class=\"btn btn-success\" id=\"sendDataTCloudBtn\">\n Send data to cloud Data\n <\/button>\n\n <button class=\"btn btn-success\" id=\"stopSendingData\">\n Stop Sending Data\n <\/button>\n <br \/><br \/>\n <h5><div id=\"log\"><\/div><\/h5>\n <\/div>\n\n <script src=\".\/firebaseconfig.js\"><\/script>\n <script src=\".\/index.js\"><\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nHere is the code for index.js file<\/p>\n\n\n\n
import * as my_dongle from 'bleuio'\ndocument.getElementById('connect').addEventListener('click', function(){\n my_dongle.at_connect()\n})\ndocument.getElementById('deviceinfo').addEventListener('click', function(){\n my_dongle.ati().then((data)=>console.log(data))\n})\ndocument.getElementById('central').addEventListener('click', function(){\n my_dongle.at_central().then((data)=>console.log(data))\n})\ndocument.getElementById('scan').addEventListener('click', function(){\nmy_dongle.at_gapscan(2).then((data)=>console.log(data))\n})\nconst parseSensorData = ((input) =>{\n let counter = 13;\n if (input.includes(\"5B070503\")) {\n counter = 17;\n }\n let sensorData = {\n sensorid:\n input[counter + 1] +\n input[counter + 2] +\n input[counter + 3] +\n input[counter + 4] +\n input[counter + 5] +\n input[counter + 6],\n pressure:\n parseInt(\n input[counter + 13] +\n input[counter + 14] +\n input[counter + 11] +\n input[counter + 12],\n 16\n ) \/ 10,\n temperature:\n parseInt(\n input[counter + 17] +\n input[counter + 18] +\n input[counter + 15] +\n input[counter + 16],\n 16\n ) \/ 10,\n humidity:\n parseInt(\n input[counter + 21] +\n input[counter + 22] +\n input[counter + 19] +\n input[counter + 20],\n 16\n ) \/ 10,\n voc:\n parseInt(\n input[counter + 25] +\n input[counter + 26] +\n input[counter + 23] +\n input[counter + 24],\n 16\n ) \/ 10,\n als: parseInt(\n input[counter + 9] +\n input[counter + 10] +\n input[counter + 7] +\n input[counter + 8],\n 16\n ),\n pm1:\n parseInt(\n input[counter + 29] +\n input[counter + 30] +\n input[counter + 27] +\n input[counter + 28],\n 16\n ) \/ 10,\n pm25:\n parseInt(\n input[counter + 33] +\n input[counter + 34] +\n input[counter + 31] +\n input[counter + 32],\n 16\n ) \/ 10,\n pm10:\n parseInt(\n input[counter + 37] +\n input[counter + 38] +\n input[counter + 35] +\n input[counter + 36],\n 16\n ) \/ 10}\n return sensorData\n })\n\nconst sendDataToCloud = (()=>{\n \/\/get the scan target device id by scanning for device.\n my_dongle.at_scantarget('[1]F9:0D:35:E7:72:65',2).then((data)=>{\n let theAdvData = data.filter(element => element.includes(\"ADV\"));\n if(theAdvData && theAdvData.length>0){\n console.log(theAdvData)\n let advData = theAdvData[0].split(\"[ADV]: \")\n \/\/ converting advertising string to meaningfull numbers \n \/\/and pass it to an array of objects\n let airQualityData = parseSensorData(advData[1])\n console.log(airQualityData)\n \/\/ save the data to database \n let database = firebase.database(); \/\/ which gets the database \n let ref = database.ref(\"records\");\n \/\/pushing the object to the reference\n ref.push(airQualityData)\n }\n })\n})\nvar intervalId\ndocument.getElementById('sendDataTCloudBtn').addEventListener('click', function(){\n sendDataToCloud()\n if (intervalId) {\n clearInterval(intervalId);\n }\n intervalId = setInterval(sendDataToCloud ,5000);\n document.getElementById(\"log\").innerHTML=\"Sending data to cloud. Click stop sending data to stop the process.\";\n\n})\ndocument.getElementById('stopSendingData').addEventListener('click', function(){\n clearInterval(intervalId)\n document.getElementById(\"log\").innerHTML=\"Sending data stopped.\";\n })\ndocument.getElementById('stopProcess').addEventListener('click', function(){\n console.log(my_dongle.stop()) \n})\n<\/code><\/pre>\n\n\n\nRight now, its sending data every 5 seconds. <\/p>\n\n\n\n
You can stop the process by clicking stop sending data.<\/p>\n\n\n\n
Have a look at the following video for a better understanding. <\/p>\n\n\n\n
<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/04\/image-13.png\")
<\/figure>\n\n\n\n