abhinav-ark / mpu6050_realtime_dashboard

Real Time Dashboard for MPU6050 Accelerometer/Gyroscope

Real Time Dashboard for MPU6050 Accelerometer/Gyroscope

This is a web based dashboard for graphical representation of real-time acceleration and rotation data from MPU6050 using websockets. It also records and stores time series sensor data using InfluxDB. Done as a part of 19CSE446 Internet of Things Course, Department of Computer Science and Engineering, Amrita Vishwa Vidyapeetham, Coimbatore.

Technologies Used

• Arduino ESP32
• Adafruit
• Embedded C
• WebSockets
• InfluxDB
• NodeJS
• React
• NextJS
• Express
• MUI React

UI Screens

Real Time Data (Last 20 Readings)

All Time Data

InfluxDB

Video Demonstration

Note

This video doesn't contain any audio 🔇

Demo.mp4

How to setup ?

• Either clone the repository (or) download the Source Code from the latest release.

Arduino

• Connect the MPU6050 Sensor to the ESP32 Microcontroller and connect the Microcontroller to your computer through a USB Cable.

Circuit Diagram (Image Courtesy: ElectronicWings.com)

DOIT ESP32 DevKit

• Install all the necessary libraries in Arduino IDE
  • ArduinoWebockets
  • Adafruit_MPU6050
  • WiFi
  • Wire
• Enter the Wifi Network SSID, PASSWORD, IP Address of the Server Computer in which your Backend is Running in The mpu6050.ino Arduino File and Upload the code to the board.

Important

It is necessary that both the ESP32 Microcontroller and the backend server are connected to the same WiFi Network for the Code to work.

Influx DB

• Install InfluxDB on your Server Computer (OR) you can use the cloud version also instead.
• Create a user, organisation of your choice and a Bucket named IOT.
• Create an API Access Token with Read and Write Permissions to IOT bucket.

NodeJS

• In the Server Computer, make sure you have nodeJS installed.
• Goto the backend folder and type the following commands to install the dependencies.

> npm install

• Goto the .env file to enter your Environmental Variables, i.e, INFLUXDB API TOKEN, INFLUXDB URL and INFLUXDB ORGANISATION.

• To run the development server type the following command

> npm run dev

• You can test the websockets server by using the ./TestWebsockets/test.html document.

Explanatory Demonstration

Note

Enable Audio 🔊 for Audio Explanation.

Explanatory_Demonstration.mp4

Contributing

Refer to The Code of Conduct before making a pull request to the repository, posting on the discussions section or involing in any public activity related to this repository.

Licensing

All code in this repository is Licensed Under MIT License, and is freely available for anyone to use or make changes.

Security Policy

Refer SECURITY.md for Security Policy.

mpu6050_realtime_dashboard's Issues

Improve UI

Add a more responsive Graph and add card to display current progress

Add influxDB connectivity

Use npm @influxdata/influxdb-client to add influxDB connectivity

Add Multiline Graph

Add support for displaying multiple lines in one graph

Working Prototype with Dynamic Graph

Finish a working prototype involving a Dynamic Graph ASAP