Skip to content

SalhiFayza/real-time-data-dashboard-using-Python-Django

Repository files navigation

Real-Time Data Dashboard using Python & Django

A web server powered by an Arduino UNO and Raspberry Pi, interfaced with DHT22, DS18B20, and SEN0169 (Pro SKU) sensors, to monitor and graph aquaponics data in real-time. The data is stored and visualized over time and is accessible via a web browser.


🔧 Technologies Used

  • Software: VSCode
  • Languages:
    • Back-end: Python, Django
    • Front-end: HTML, CSS, JavaScript, Bootstrap, AJAX
  • Database:
    • Firebase (real-time DB)
    • SQLite3 (local DB)
  • Framework: Django (open-source web development framework for Python)

⚙️ Django Project Setup

Create a Django project:

django-admin startproject project_name

Create a Django app:

python manage.py startapp app_name

Start the development server:

python manage.py runserver

Stop the server:

CTRL + C

Run tests:

python manage.py test

Create superuser:

python manage.py createsuperuser

Create migrations (generate SQL commands):

python manage.py makemigrations app_name

Apply migrations:

python manage.py migrate

📁 Django Project Structure

< PROJECT ROOT >
│
├── core/
│   ├── static/                  # CSS, JS, images
│   ├── templates/
│   │   ├── includes/            # Components like navigation, sidebar, footer, scripts
│   │   ├── layouts/             # Base layout templates
│   │   ├── accounts/            # Login, Register pages
│   │   ├── index.html           # Main landing page
│   │   ├── page-404.html        # 404 Error page
│   │   ├── page-500.html        # 500 Error page
│
├── authentication/             # Authentication logic
├── app/                        # App logic and routing
├── requirements.txt            # Dependencies
├── .env                        # Environment variables
├── manage.py                   # Entry point for Django project

🔥 Firebase Setup

  1. Create a Firebase account
  2. Create a new project
  3. Add Firebase configuration to your Django project (can be in <script>, views.py, or JSON file):
const firebaseConfig = {
  apiKey: "******************",
  authDomain: "*********************",
  databaseURL: "***********************",
  projectId: "***********",
  storageBucket: "**************",
  messagingSenderId: "***********",
  appId: "******",
  measurementId: "********"
};

🔄 Real-Time Data with Firebase and Serial Communication

  • Live plotting using Python with data from Arduino (connected sensors)
  • Real-time charting using Firebase data
  • Data display through Django + AJAX interface
  • AJAX = Asynchronous JavaScript and XML

🧰 Libraries Used

asgiref==3.2.3
certifi==2019.11.28
chardet==3.0.4
dj-database-url==0.5.0
Django==3.0.1
django-heroku==0.3.1
gunicorn==20.0.4
heroku==0.1.4
idna==2.8
psycopg2==2.8.4
python-dateutil==1.5
pytz==2019.3
requests==2.22.0
sqlparse==0.3.0
urllib3==1.25.7
whitenoise==5.0.1

🌐 Local Web Server

This system integrates Arduino UNO, Raspberry Pi, and the DHT22, DS18B20, and SEN0169 sensors, using a Python virtual environment and SQLite to store and display real-time aquaponics data via a Django web server.

  • Django + AJAX is used to serve the frontend and backend
  • Firebase is used for real-time data handling
  • Plotly is used for charting

🖥️ Application Screenshots

🔐 Part 1: Authentication (SQLite - Django)

Login Register


🏠 Part 2: Firebase Home Data

Firebase Home


📊 Part 3: SQLite Data Graphs

  • Interface for viewing stored sensor data curves from the Django DB.
  • Select a date from the calendar to view graphs for that day.

Graphs 1 Graphs 2 Graphs 3 Graphs 4


🔁 Part 4: Firebase Data Charts

  • Real-time sensor data plotted from Firebase DB (temperature, humidity, water temperature, pH)

Firebase Chart 1 Firebase Chart 2


⚙️ Part 5: Settings Interface

  • Admin interface to configure threshold values for temperature and other sensor limits.

Settings