1. Project Overview

This project uses an Arduino UNO and DHT11 sensor to measure temperature and humidity and display the readings on a live web dashboard using Python Flask.

Technologies Used

• Arduino UNO
• DHT11 Temperature and Humidity Sensor
• Arduino IDE
• Python
• Flask
• PySerial
• HTML, CSS and JavaScript

System Architecture

DHT11 Sensor
     |
     v
Arduino UNO
     |
     v
USB Serial Communication
     |
     v
Python Flask Application
     |
     v
Web Dashboard
     |
     v
Live Temperature & Humidity

2. Hardware Requirements

DHT11 Connections

For a bare four-pin DHT11 sensor, check its pinout and use the required pull-up resistor. Three-pin modules often include this resistor.

3. Arduino IDE Setup

Step 1: Install Arduino IDE

Download Arduino IDE:

https://www.arduino.cc/en/software

Install and open Arduino IDE.

Step 2: Install DHT11 Library

1. Open Arduino IDE.
2. Navigate to Sketch → Include Library → Manage Libraries.
3. Search for DHT sensor library.
4. Install DHT sensor library by Adafruit.
5. Install Adafruit Unified Sensor if requested.

Step 3: Arduino Code

Create a new Arduino sketch and upload the following code.

#include <DHT.h>

// Sensor configuration
#define DHTPIN 2
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

void setup() {

    // Start serial communication
    Serial.begin(9600);

    // Initialize DHT11
    dht.begin();
}

void loop() {

    // Read sensor values
    float temperature = dht.readTemperature();
    float humidity = dht.readHumidity();

    // Check sensor readings
    if (isnan(temperature) || isnan(humidity)) {

        Serial.println("ERROR");

    }
    else {

        // Send data to Python
        Serial.print(temperature);
        Serial.print(",");
        Serial.println(humidity);

    }

    delay(2000);
}

Expected Serial Output

28.00,65.00
29.00,64.00
30.00,63.00

The first value represents temperature in Celsius, and the second represents humidity in percentage.

4. Python Environment Setup

Step 1: Install Python

Download Python from:

https://www.python.org/downloads/

During installation, select Add Python to PATH.

Verify installation:

python --version

Step 2: Create Project Folder

Open PowerShell or Command Prompt.

mkdir DHT11_Website
cd DHT11_Website

Step 3: Create Python Virtual Environment

A virtual environment keeps project dependencies separate from other Python projects.

python -m venv venv

Step 4: Activate Virtual Environment

Windows PowerShell:

.\venv\Scripts\Activate.ps1

If PowerShell blocks activation, run:

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

Then activate again:

.\venv\Scripts\Activate.ps1

Windows Command Prompt:

venv\Scripts\activate.bat

After successful activation, you should see:

(venv) C:\...\DHT11_Website>

Step 5: Install Required Libraries

pip install flask pyserial

Verify installed packages:

pip list

Step 6: Save Dependencies

pip freeze > requirements.txt

5. Project Structure

The project will contain one Python application file.

DHT11_Website/
│
├── venv/
│
├── app.py
│
└── requirements.txt

The HTML, CSS and JavaScript code will be included inside app.py, so a separate HTML file is not required.

6. Create the Python Application

Create a file named app.py.

Copy the following complete code:

from flask import Flask, jsonify, render_template_string
import serial
import threading
import time

app = Flask(__name__)

# Arduino Configuration
SERIAL_PORT = "COM3"
BAUD_RATE = 9600

# Sensor Variables
temperature = 0
humidity = 0

connection_status = "Disconnected"
last_updated = "--"


# =====================================
# ARDUINO SERIAL COMMUNICATION
# =====================================

def read_arduino():

    global temperature, humidity
    global connection_status, last_updated

    while True:

        try:

            print("Connecting to Arduino...")

            arduino = serial.Serial(
                SERIAL_PORT,
                BAUD_RATE,
                timeout=2
            )

            time.sleep(2)

            connection_status = "Connected"

            print("Arduino Connected!")

            while True:

                line = arduino.readline().decode(
                    "utf-8",
                    errors="ignore"
                ).strip()

                if not line or line == "ERROR":
                    continue

                try:

                    values = line.split(",")

                    if len(values) == 2:

                        temp = float(values[0])
                        hum = float(values[1])

                        temperature = temp
                        humidity = hum

                        last_updated = time.strftime("%H:%M:%S")

                        print(
                            f"Temperature: {temp} C | "
                            f"Humidity: {hum} %"
                        )

                except ValueError:

                    continue

        except Exception as error:

            connection_status = "Disconnected"

            print("Arduino Error:", error)

            time.sleep(3)


# =====================================
# HTML DASHBOARD
# =====================================

HTML_PAGE = """

<!DOCTYPE html>
<html>

<head>

    <title>DHT11 Monitoring System</title>

    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <style>

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #eef2f7;
            color: #172554;
        }

        header {
            background: #172554;
            color: white;
            padding: 30px 15px;
            text-align: center;
        }

        header h1 {
            margin: 0 0 10px;
        }

        .container {
            max-width: 900px;
            margin: 50px auto;
            padding: 15px;
        }

        .cards {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-wrap: wrap;
        }

        .card {
            background: white;
            width: 300px;
            padding: 35px 20px;
            border-radius: 18px;
            text-align: center;
            box-shadow: 0 5px 20px #0001;
        }

        .icon {
            font-size: 45px;
        }

        .value {
            font-size: 48px;
            font-weight: bold;
            margin: 20px 0;
        }

        .temperature {
            color: #ef4444;
        }

        .humidity {
            color: #2563eb;
        }

        .status-box {
            background: white;
            padding: 22px;
            border-radius: 15px;
            margin-top: 30px;
            text-align: center;
        }

        .connected {
            color: #16a34a;
        }

        .disconnected {
            color: #dc2626;
        }

        footer {
            text-align: center;
            padding: 25px;
            color: #64748b;
        }

    </style>

</head>

<body>

    <header>

        <h1>🌡️ DHT11 Monitoring System</h1>

        <p>Live Temperature and Humidity Dashboard</p>

    </header>


    <div class="container">

        <div class="cards">

            <div class="card">

                <div class="icon">🌡️</div>

                <h2>Temperature</h2>

                <div class="value temperature"
                     id="temperature">

                    -- °C

                </div>

                <p>Room Temperature</p>

            </div>


            <div class="card">

                <div class="icon">💧</div>

                <h2>Humidity</h2>

                <div class="value humidity"
                     id="humidity">

                    -- %

                </div>

                <p>Air Humidity</p>

            </div>

        </div>


        <div class="status-box">

            <h3>

                Arduino Status:

                <span id="status" class="disconnected">

                    Checking...

                </span>

            </h3>

            <p>

                Last Updated:

                <span id="updated">--</span>

            </p>

        </div>

    </div>


    <footer>

        Arduino UNO + DHT11 | Python Flask IoT Dashboard

    </footer>


    <script>

        async function updateData() {

            try {

                const response = await fetch("/data");

                const data = await response.json();


                document.getElementById("temperature").innerText =
                    data.temperature + " °C";


                document.getElementById("humidity").innerText =
                    data.humidity + " %";


                const status =
                    document.getElementById("status");


                status.innerText = data.status;


                status.className =
                    data.status === "Connected"
                    ? "connected"
                    : "disconnected";


                document.getElementById("updated").innerText =
                    data.updated;

            }

            catch (error) {

                document.getElementById("status").innerText =
                    "Connection Error";

            }

        }


        updateData();

        // Update every two seconds
        setInterval(updateData, 2000);

    </script>

</body>

</html>

"""


# =====================================
# FLASK ROUTES
# =====================================

@app.route("/")
def home():

    return render_template_string(HTML_PAGE)


@app.route("/data")
def get_data():

    return jsonify({

        "temperature": temperature,

        "humidity": humidity,

        "status": connection_status,

        "updated": last_updated

    })


# =====================================
# START APPLICATION
# =====================================

if __name__ == "__main__":

    thread = threading.Thread(
        target=read_arduino,
        daemon=True
    )

    thread.start()

    app.run(
        host="127.0.0.1",
        port=5000,
        debug=False
    )

7. Configure Arduino COM Port

Before running the application, identify the Arduino COM port.

1. Open Arduino IDE.
2. Connect Arduino UNO.
3. Select Tools → Port.
4. Note the COM port number.

For example:

SERIAL_PORT = "COM3"

If your Arduino uses COM5, change it to:

SERIAL_PORT = "COM5"

Important: Close Arduino IDE Serial Monitor before running the Python application because both applications cannot normally access the same serial port simultaneously.

8. Run the Application

Make sure your virtual environment is activated.

python app.py

Expected terminal output:

Connecting to Arduino...
Arduino Connected!

Temperature: 28.0 C | Humidity: 65.0 %
Temperature: 29.0 C | Humidity: 64.0 %

Running on http://127.0.0.1:5000

Open your web browser:

http://127.0.0.1:5000

Your live dashboard will display the temperature, humidity and Arduino connection status.

9. Troubleshooting

10. Useful Commands

11. Future Improvements

After completing the basic project, students can extend it with:

1. Live temperature and humidity graphs.
2. Historical sensor data storage using SQLite.
3. Download sensor readings as CSV.
4. Temperature threshold alerts.
5. Multiple sensor monitoring.
6. Professional IoT dashboard design.
7. Remote access through a suitable network deployment.

Project Conclusion: This project demonstrates how Arduino hardware, sensor technology, serial communication and Python web development can be integrated to create a simple real-time IoT monitoring system.

A dictionary is used to store data in key-value pairs.

Example:

student = {
    "name": "Ram",
    "age": 18,
    "marks": 75
}

Here:

"name"  is key, "Ram" is value
"age"   is key, 18 is value
"marks" is key, 75 is value

Dictionary is useful when we want to store related information together.

Example:

One student has name, age, and marks.
So we can store these details in one dictionary.

2. Accessing Dictionary Values

student = {
    "name": "Ram",
    "age": 18,
    "marks": 75
}

print(student["name"])
print(student["age"])
print(student["marks"])

Output:

Ram
18
75

3. Updating Dictionary Values

student = {
    "name": "Ram",
    "marks": 75
}

student["marks"] = 85

print(student)

Output:

{'name': 'Ram', 'marks': 85}

Here, marks changed from 75 to 85.

4. Simple Dictionary Exercise

Question

Create a dictionary named book.

It should store:

title
author
price

Then print all details.

Solution

book = {
    "title": "Python Basics",
    "author": "Ram",
    "price": 500
}

print("Title:", book["title"])
print("Author:", book["author"])
print("Price:", book["price"])

Output:

Title: Python Basics
Author: Ram
Price: 500

5. Mini Project: Student Management System Using Dictionary

Project Goal

Create a simple program that can:

1\. Add student details
2. View student details
3. Update marks
4. Check pass or fail
5. Exit

This project uses:

Dictionary
Function
Input
If else
While loop
Try except

This is a good continuation from Day 3 because students already studied dictionary, exception handling, file handling, and login using file handling.

6. Full Code

student = {
    "name": "",
    "age": 0,
    "marks": 0
}

def add_student():
    try:
        name = input("Enter student name: ")
        age = int(input("Enter student age: "))
        marks = float(input("Enter student marks: "))

        student["name"] = name
        student["age"] = age
        student["marks"] = marks

        print("Student details added successfully")

    except ValueError:
        print("Please enter valid number for age and marks")

def view_student():
    if student["name"] == "":
        print("No student details found")
    else:
        print("\n--- Student Details ---")
        print("Name:", student["name"])
        print("Age:", student["age"])
        print("Marks:", student["marks"])

def update_marks():
    if student["name"] == "":
        print("No student details found")
    else:
        try:
            new_marks = float(input("Enter new marks: "))
            student["marks"] = new_marks
            print("Marks updated successfully")

        except ValueError:
            print("Please enter valid marks")

def check_result():
    if student["name"] == "":
        print("No student details found")
    else:
        if student["marks"] >= 40:
            print(student["name"], "has passed")
        else:
            print(student["name"], "has failed")

def menu():
    while True:
        print("\n===== Student Management System =====")
        print("1. Add Student")
        print("2. View Student")
        print("3. Update Marks")
        print("4. Check Result")
        print("5. Exit")

        choice = input("Enter your choice: ")

        if choice == "1":
            add_student()

        elif choice == "2":
            view_student()

        elif choice == "3":
            update_marks()

        elif choice == "4":
            check_result()

        elif choice == "5":
            print("Program closed")
            break

        else:
            print("Invalid choice")

menu()

7. Simple Project Explanation

Student Dictionary

student = {
    "name": "",
    "age": 0,
    "marks": 0
}

This dictionary stores one student's details.

At first, the values are empty.

After adding student, it may look like this:

student = {
    "name": "Ram",
    "age": 18,
    "marks": 75
}

Add Student

student["name"] = name
student["age"] = age
student["marks"] = marks

This stores user input inside the dictionary.

View Student

print("Name:", student["name"])
print("Age:", student["age"])
print("Marks:", student["marks"])

This displays the student details.

Update Marks

student["marks"] = new_marks

This changes old marks into new marks.

Check Result

if student["marks"] >= 40:
    print(student["name"], "has passed")
else:
    print(student["name"], "has failed")

If marks are 40 or above, the student passes.

If marks are below 40, the student fails.

8. Basic OOP Introduction

OOP means Object-Oriented Programming.

Simple meaning:

OOP is a way to keep related data and functions together.

In dictionary, we write:

student = {
    "name": "Ram",
    "age": 18,
    "marks": 75
}

In OOP, we can create a Student class.

9. Class and Object

Class

A class is a blueprint.

Example:

Student class is a blueprint.

Object

An object is created from a class.

Example:

Class  -> Student
Object -> Ram
Object -> Sita

10. Simple OOP Example

class Student:
    def __init__(self, name, age, marks):
        self.name = name
        self.age = age
        self.marks = marks

    def show_details(self):
        print("Name:", self.name)
        print("Age:", self.age)
        print("Marks:", self.marks)

student1 = Student("Ram", 18, 75)

student1.show_details()

Output:

Name: Ram
Age: 18
Marks: 75

11. Simple OOP Terms

12. Very Simple Database Introduction

A database is used to store data permanently.

In dictionary:

Data is lost when the program closes.

In database:

Data can be stored permanently.

SQLite is a simple database that Python can use directly.

We use:

import sqlite3

SQLite creates a file like:

school.db

13. Very Simple SQLite Program

This program will:

1\. Create database
2. Create table
3. Insert one student
4. Select and show students

Save as:

simple_db.py

import sqlite3

# Connect to database
connection = sqlite3.connect("school.db")

# Create cursor
cursor = connection.cursor()

# Create table
cursor.execute("""
CREATE TABLE IF NOT EXISTS students (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT,
    age INTEGER,
    marks REAL
)
""")

# Insert one student
cursor.execute("""
INSERT INTO students (name, age, marks)
VALUES (?, ?, ?)
""", ("Ram", 18, 75))

# Save changes
connection.commit()

# Select data from table
cursor.execute("SELECT * FROM students")

students = cursor.fetchall()

for student in students:
    print(student)

# Close connection
connection.close()

Output example:

(1, 'Ram', 18, 75.0)

14. Simple Database Code Explanation

Import SQLite

import sqlite3

This lets us use SQLite in Python.

Connect to Database

connection = sqlite3.connect("school.db")

This creates or opens the database file.

Cursor

cursor = connection.cursor()

Cursor is used to run SQL commands.

Simple meaning:

Connection opens the database.
Cursor runs commands inside the database.

Create Table

cursor.execute("""
CREATE TABLE IF NOT EXISTS students (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT,
    age INTEGER,
    marks REAL
)
""")

This creates a table named students.

Columns are:

id
name
age
marks

Insert Data

cursor.execute("""
INSERT INTO students (name, age, marks)
VALUES (?, ?, ?)
""", ("Ram", 18, 75))

This adds one student into the table.

The ? signs are placeholders.

Python safely puts values there.

Select Data

cursor.execute("SELECT * FROM students")
students = cursor.fetchall()

This selects all data from the students table.

fetchall() gets all rows.

Print Data

for student in students:
    print(student)

This prints each student record.

15. Only Remember This for Database Today

Database stores data permanently.

SQLite creates a .db file.

Table stores data in rows and columns.

CREATE TABLE creates a table.

INSERT INTO adds data.

SELECT reads data.

Cursor runs SQL commands.

16. Final Practice

Practice 1: Dictionary

Create a dictionary named mobile.

It should contain:

brand
model
price

Print all details.

Practice 2: Student Management

Create a student management system using dictionary.

It should have:

1\. Add student
2. View student
3. Update marks
4. Check result
5. Exit

Practice 3: OOP

Create a class named Mobile.

It should have:

brand
model
price

Create one object and print details.

Practice 4: Database

Create a database named:

library.db

Create a table named:

books

Columns:

id
title
author
price

Then insert one book and select all books.

Final Summary

Today we learned:

Dictionary stores data in key-value pairs.

Student Management System can be made using dictionary.

OOP keeps related data and functions together.

Class is a blueprint.

Object is created from class.

SQLite is a simple database.

CREATE TABLE creates a table.

INSERT INTO adds data.

SELECT reads data from table.