Smart Door Access Project In Django and Arduino

Introduction:

In a world where technology keeps getting better, even opening doors is getting a high-tech makeover. Picture this: you use your phone or computer to unlock doors, super safe and easy. Today, we’re talking about smart door access. Django, a powerful web tool, and Arduino, a tiny computer, team up to change how we open doors. Welcome to the Smart Door Access: Django & Arduino Project.

Smart Door Access: A Tale of Innovation
Gone are the days of juggling keys or fumbling with passcodes. Smart door access systems bring convenience and security to the forefront, offering remote management, real-time monitoring, and cutting-edge authentication features. But how do we bring this vision to life?

Introducing Django and Arduino Integration
Enter Django, the wizard behind the web, providing a robust platform for user authentication and access control. Paired with Arduino, the Swiss Army knife of hardware tinkering, we create a seamless connection between the digital and physical realms, making our smart door dreams a reality.

Peeking into the Toolbox: Key Components

1. Django Web Application: Think of Django as the conductor of our smart door symphony. It orchestrates user authentication, access permissions, and system monitoring through a sleek web interface.
2. Arduino Microcontroller: Meet Arduino, the magician behind the scenes. It translates Django’s commands into tangible actions, controlling the electronic door lock with finesse.
3. Electronic Door Lock: Our door lock, wired to the Arduino, dances to Django’s tune, opening and closing with precision based on user permissions.

Unleashing the Power: Benefits Galore

1. Fortified Security: Django’s robust authentication ensures only the right folks get in, while Arduino ensures the door obeys only the rightful commands.
2. Anywhere, Anytime Access: With Django’s web interface, administrators manage access from their cozy office or the beach, thanks to Arduino’s real-time responsiveness.
3. Peace of Mind: Real-time monitoring means knowing who’s coming and going, providing invaluable peace of mind for security-conscious minds.
4. Tailored Solutions: The modular nature of Django and Arduino allows for custom solutions, whether it’s a cozy apartment or a bustling office complex.

Code:

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
import serial
from django.contrib.auth import logout

# Replace 'COM5' with the correct port where the Arduino is connected
ser = serial.Serial('COM5', 9600, timeout=1)

def login_view(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            # Send 'O' command to open the door
            ser.write(b'O')
            return render(request, 'door_opened.html')
        else:
            return render(request, 'invalid.html')
    return render(request, 'login.html')


def logout_view(request):
    ser.write(b'C') # Send 'C' command to close the door
    logout(request)
    return redirect('login_view')

#include <Servo.h>

Servo myServo;  // Create a servo object

void setup() {
  myServo.attach(9);  // Attach the servo on pin 9 to the servo object
  Serial.begin(9600); // Begin serial communication at 9600 baud rate
  Serial.println("System ready. Send 'O' to open the door and 'C' to close the door.");
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == 'O') {
      openDoor();
    } else if (command == 'C') {
      closeDoor();
    } else {
      Serial.println("Invalid command. Use 'O' to open and 'C' to close.");
    }
  }
}

// Function to open the door
void openDoor() {
  Serial.println("Opening door...");
  for (int pos = 0; pos <= 90; pos += 1) { // Move from 0 to 90 degrees
    myServo.write(pos);                    // Tell servo to go to position in variable 'pos'
    delay(10);                             // Wait 10 milliseconds between each degree
  }
  Serial.println("Door opened.");
}

// Function to close the door
void closeDoor() {
  Serial.println("Closing door...");
  for (int pos = 90; pos >= 0; pos -= 1) { // Move from 90 to 0 degrees
    myServo.write(pos);                    // Tell servo to go to position in variable 'pos'
    delay(10);                             // Wait 10 milliseconds between each degree
  }
  Serial.println("Door closed.");
}

<!DOCTYPE html>
<html>
<head>
    <title>Door Opened</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        .welcome-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
            animation: fadeIn 1s ease-out;
        }
        .welcome-container h2 {
            margin-bottom: 15px;
            color: #333;
            animation: slideIn 1s ease-out;
        }
        .welcome-container p {
            color: #555;
            animation: fadeIn 1s ease-out;
        }
        .welcome-icon {
            font-size: 50px;
            color: #4CAF50;
            animation: bounce 1s ease-out;
        }
        .logout-button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .logout-button:hover {
            background-color: #45a049;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="welcome-icon">&#x1F6AA;</div> <!-- Door emoji icon -->
        <h2>Welcome!</h2>
        <p>The door has been opened successfully.</p>
        <form action="{% url 'logout_view' %}" method="post">
            {% csrf_token %}
            <button type="submit" class="logout-button">Logout</button>
        </form>
    </div>
</body>
</html>

invalid.html

<!DOCTYPE html>
<html>
<head>
    <title>Invalid Credentials</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        .error-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
            animation: fadeIn 1s ease-out;
        }
        .error-container h2 {
            margin-bottom: 15px;
            color: #d9534f;
            animation: slideIn 1s ease-out;
        }
        .error-container p {
            color: #555;
            animation: fadeIn 1s ease-out;
        }
        .error-icon {
            font-size: 50px;
            color: #d9534f;
            animation: shake 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            50% { transform: translateX(10px); }
            75% { transform: translateX(-10px); }
            100% { transform: translateX(0); }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-icon">&#x1F512;</div> <!-- Lock emoji icon -->
        <h2>Invalid Credentials</h2>
        <p>The door remains closed.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Door Locker Access</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        .access-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
            animation: fadeIn 1s ease-out;
        }
        .access-container h2 {
            margin-bottom: 25px;
            color: #333;
            animation: slideIn 1s ease-out;
        }
        .access-container label {
            display: block;
            margin-bottom: 10px;
            text-align: left;
            font-weight: bold;
            color: #555;
            animation: fadeIn 1s ease-out;
        }
        .access-container input[type="text"],
        .access-container input[type="password"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
            animation: fadeIn 1s ease-out;
            transition: border-color 0.3s;
        }
        .access-container input[type="text"]:focus,
        .access-container input[type="password"]:focus {
            border-color: #007BFF;
            outline: none;
        }
        .access-container button {
            width: 100%;
            padding: 12px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            transition: background-color 0.3s, transform 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .access-container button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .access-container button:disabled {
            background-color: #999;
            cursor: not-allowed;
        }
        .loading {
            display: none;
            margin-left: 10px;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .error-message {
            color: red;
            font-size: 14px;
            margin-top: -10px;
            margin-bottom: 20px;
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="access-container">
        <h2>Door Locker Access</h2>
        <form id="accessForm" method="post">
            {% csrf_token %}
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
            <div class="error-message" id="error-message"></div>
            <button type="submit" id="submitButton">Unlock Door <div class="loading" id="loading"></div></button>
        </form>
    </div>
</body>
</html>

Conclusion: In the collaboration between Django and Arduino, innovation never stops. Together, they open doors to a smarter, safer future. Whether it’s in fancy offices or cozy homes, they’re leading us towards a world where keys are old news, and everything’s just a click away.

And don’t forget to check out our YouTube channel and blog for more cool stuff!