project lapse time: 2021-01-2 - 2021-02-28
As businesses continue to embrace the Internet of Things (IoT),
it is becoming increasingly important to have an effective way of visualizing the data produced by these devices. Company X recognized this need and approached me in my freshmen year to create a web front-end that would display sensor data collected by their IoT devices.
After researching various options, I chose to use Python Dash to create the web application. Python Dash is a web framework for building data visualization applications that is built on top of Flask , Plotly.js, and React.js. It provides a simple syntax for building interactive web applications, making it an ideal choice for this project.
Project Requirements
The main requirements for the project were to create a web front-end that would display sensor data collected by IoT devices in real-time. Additionally, the front-end needed to have sidebars that would allow the user to control the data being displayed.
Solution
To meet these requirements, I created a Python Dash application that would display the sensor data in real-time using Plotly.js.
Since the data being collected by IoT devices also needs python to process, I used a rather trivial way to create a real-time connection between the server and the front-end, that is, I used python f-string to cotain all the application body as html and embedded the server data as parameters. However, I am now very certain that this method is rigid and there are better ways to perform this task. But I was a novice at that time, and this method was the workround I could think of.
To enable user control, I created a sidebar using the Dash Bootstrap Components library. The sidebar mainly allowed the user to select which sensor data to display.
Besides, I also created a table that would display the sensor data in tabular form. Data in the table may from a csv file.
Technical Implementation
The Python Dash application was structured into two main parts: the server-side code and the client-side code. The server-side code was responsible for collecting the sensor data, updating the front-end in real-time, and serving the web application to the client.
The client-side code was responsible for rendering the web application, handling user interactions, and communicating with the server-side code to update the data displayed on the front-end.
I used Plotly.js to create the data visualizations on the front-end. Plotly.js is a JavaScript library that provides a wide range of chart types and customization options, making it ideal for displaying sensor data.
Conclusion
In conclusion, I was able to successfully create a web front-end using Python Dash that displayed IoT sensor data in real-time and allowed for user control. The use of Python Dash and Plotly.js made it easy to create a visually appealing and interactive web application that met the requirements of Company X. However, some of the metrics I have used in this project are trivial and need optimization.
Overall, this project showcases the power and versatility of Python Dash and its ability to create web applications that effectively display IoT sensor data. The project has opened my eyes to the possibilities of python and the web and I look forward to creating moreweb applications in the future.