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
- 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.
- Arduino Microcontroller: Meet Arduino, the magician behind the scenes. It translates Django’s commands into tangible actions, controlling the electronic door lock with finesse.
- 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
- Fortified Security: Django’s robust authentication ensures only the right folks get in, while Arduino ensures the door obeys only the rightful commands.
- 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.
- Peace of Mind: Real-time monitoring means knowing who’s coming and going, providing invaluable peace of mind for security-conscious minds.
- 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:
Django Views (views.py):
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')Arduino Code:
#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.");
}
door_opened.html:
<!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">🚪</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">🔒</div> <!-- Lock emoji icon -->
<h2>Invalid Credentials</h2>
<p>The door remains closed.</p>
</div>
</body>
</html>
login.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!