pip install flask<\/code>)<\/li>\n<\/ul>\n\n\n\nSetting Up the Flask App<\/h2>\n\n\n\n
Let’s start by examining the Python Flask code provided in app.py<\/code>. This code defines a Flask web application with two routes: the home route (\/<\/code>) and a route to run the BLE device scan (\/run_scan<\/code>). The app uses the serial<\/code> library to communicate with the BleuIO dongle over the serial port.<\/p>\n\n\n\nfrom flask import Flask, render_template, request\nimport serial\nimport time\n\napp = Flask(__name__)\n\ndef scan_ble_devices():\n connecting_to_dongle = 0\n print(\"Connecting to dongle...\")\n\n while connecting_to_dongle == 0:\n try:\n console = serial.Serial(\n port='\/dev\/cu.usbmodem4048FDE52DAF1',\n baudrate=57600,\n parity=\"N\",\n stopbits=1,\n bytesize=8,\n timeout=0\n )\n if console.is_open.__bool__():\n connecting_to_dongle = 1\n except:\n print(\"Dongle not connected. Please reconnect Dongle.\")\n time.sleep(5)\n\n console.write(str.encode(\"AT+CENTRAL\"))\n console.write('\\r'.encode())\n time.sleep(0.1)\n console.write(str.encode(\"AT+GAPSCAN=2\"))\n console.write('\\r'.encode())\n time.sleep(3)\n json_responses = []\n\n while console.inWaiting() > 0:\n line = console.readline().decode().strip()\n print(line)\n if line.startswith('['):\n json_responses.append(line)\n \n console.close()\n return json_responses\n\n@app.route('\/')\ndef home():\n return render_template('index.html')\n\n@app.route('\/run_scan', methods=['POST'])\ndef run_scan():\n if request.method == 'POST':\n json_responses = scan_ble_devices()\n \n return render_template('index.html', json_responses=json_responses)\n\nif __name__ == '__main__':\n app.run(debug=True,port=5001)\n<\/code><\/pre>\n\n\n\nHTML Template (index.html)<\/h2>\n\n\n\n
The HTML template (index.html<\/code>) defines a simple web page with a button to trigger the BLE device scan. The page displays the results of the scan in an unordered list. Make sure the index.html file should stay inside template folder. so the folder structure should be like this<\/p>\n\n\n\n\u251c\u2500\u2500 app.py\n\u2514\u2500\u2500 templates\n \u2514\u2500\u2500 index.html<\/code><\/pre>\n\n\n\nCode for index.html is provided below<\/p>\n\n\n\n
\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Flask BLE Device Scanner<\/title>\n <link\n href=\"\/\/cdn.muicss.com\/mui-0.10.3\/css\/mui.min.css\"\n rel=\"stylesheet\"\n type=\"text\/css\"\n \/>\n <\/head>\n <body>\n <div class=\"mui-container\">\n <br \/><br \/>\n <div class=\"mui-panel\">\n <img\n src=\"https:\/\/flask.palletsprojects.com\/en\/3.0.x\/_images\/flask-horizontal.png\"\n alt=\"\"\n height=\"100\"\n \/>\n \n <img\n src=\"https:\/\/1000logos.net\/wp-content\/uploads\/2020\/08\/Python-Logo.png\"\n alt=\"\"\n height=\"100\"\n \/>\n <h1>Hello, Python BLE programmer!<\/h1>\n <p>\n This is a simple web page created with Flask to interact with BLE\n devices nearby.\n <\/p>\n\n <form action=\"\/run_scan\" method=\"post\">\n <button\n type=\"submit\"\n class=\"mui-btn mui-btn--primary mui-btn--raised\"\n >\n Scan for BLE Devices\n <\/button>\n <\/form>\n <br \/>\n\n {% if json_responses %}\n <ul class=\"mui-list--unstyled\">\n {% for json_response in json_responses %}\n <li style=\"margin-bottom: 10px\">\n ✓ {{ json_response | safe }}\n <\/li>\n {% endfor %}\n <\/ul>\n {% endif %}\n <\/div>\n <\/div>\n <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nExplaining the Code<\/h2>\n\n\n\n
Let’s dive into the connection part of the code and explain how the serial port is specified and why it is essential.<\/p>\n\n\n\n
console = serial.Serial(\n port='\/dev\/cu.usbmodem4048FDE52DAF1',\n baudrate=57600,\n parity=\"N\",\n stopbits=1,\n bytesize=8,\n timeout=0\n)<\/code><\/pre>\n\n\n\nIn this code snippet, the serial.Serial<\/code> function is used to create a serial port object (console<\/code>) for communication with the BleuIO dongle. Let’s break down the parameters used in this function:<\/p>\n\n\n\n\nport<\/code><\/strong>: Specifies the name or address of the port to which the BleuIO dongle is connected. In this case, it is set to '\/dev\/cu.usbmodem4048FDE52DAF1'<\/code>.
On macOS<\/strong>, \/dev\/cu.*<\/code> represents serial ports, and by running ls \/dev\/cu.*<\/code> in the terminal, you can see a list of connected devices. The specific port for the BleuIO dongle is copied from this list and pasted into the code. <\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/01\/image-1-1024x171.png\")
<\/figure>\n\n\n\nFor windows the COM port information can be found here. Here the path for the dongle is COM14<\/p>\n\n\n\n![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/01\/image.png\")
<\/figure>\n\n\n\n\nbaudrate<\/code><\/strong>: Sets the baud rate for communication. The BleuIO dongle communicates at a baud rate of 57600, so it is set accordingly.<\/li>\n\n\n\nparity<\/code><\/strong>: Specifies the parity checking scheme. In this case, it is set to “N” for no parity.<\/li>\n\n\n\nstopbits<\/code><\/strong>: Defines the number of stop bits. It is set to 1, which is a common configuration.<\/li>\n\n\n\nbytesize<\/code><\/strong>: Sets the number of data bits. It is set to 8, which is standard for most serial communication.<\/li>\n\n\n\ntimeout<\/code><\/strong>: Sets the timeout for read operations. It is set to 0, meaning no timeout, allowing the code to wait indefinitely for responses from the BleuIO dongle.<\/li>\n<\/ul>\n\n\n\nIt’s crucial to accurately specify the port to establish a successful connection between the Flask application and the BleuIO dongle. Incorrect port information will result in a failure to establish communication.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/01\/Flask-BLE-Device-Scanner-1024x517.png\")
<\/figure>\n\n\n\n