Skip to content

Add frame and instructions #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shivram9 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add frame and instructions #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ed77d73
Added colour to the NavBar
shivram9 Sep 28, 2025
36edffd
Fixed the Complaints\14 link
shivram9 Sep 29, 2025
bb1fc6c
Added a frame and instructions for the camera setup
shivram9 Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified __pycache__/app.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
986 changes: 986 additions & 0 deletions app.log
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ def delete(id):
except Exception as e:
logging.error(f"Error deleting complaint with ID {id}: {str(e)}")
flash('An error occurred while deleting the complaint!', 'error')
return redirect("/complaint")
return redirect("/complaints")

@app.route('/delete_notification/<int:id>')
@login_required
Expand Down
986 changes: 986 additions & 0 deletions error.log
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified instance/user.db
View file
Open in desktop
Binary file not shown.
Binary file added migrations/__pycache__/env.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file added models/__pycache__/config_loader.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file modified models/__pycache__/fire_detection.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file modified models/__pycache__/gear_detection.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file modified models/__pycache__/motion_amp.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file added models/__pycache__/pose_detection.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
Binary file modified models/__pycache__/r_zone.cpython-311.pyc
View file
Open in desktop
Binary file not shown.
33 changes: 16 additions & 17 deletions static/css/nav-animation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
/* nav-animation.css */
.animated-header {
transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}
.animated-header:hover {
}
.animated-header:hover {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 15px rgba(0, 255, 34, 0.2);
}
.navbar ul li a {
}

.navbar ul li a {
position: relative;
transition: color 0.3s ease-in-out;
}
.navbar ul li a:hover {
color: #000000;
}
.navbar ul li a::after {
}

.navbar ul li a:hover {
color: #47b2e4; /* Same as underline color */
}

.navbar ul li a::after {
content: '';
position: absolute;
width: 100%;
Expand All @@ -26,9 +26,8 @@
left: 0;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
.navbar ul li a:hover::after {
}

.navbar ul li a:hover::after {
transform: scaleX(1);
}

}
2 changes: 1 addition & 1 deletion templates/complaints.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{% include 'sidebar.html' %}
<div class="container">
<h1>All Complaints</h1>
<p>Share your unique form <a href="/complaints/{{ user.id }}" target="_blank">link</a> with your organization.</p>
<p>Share your unique form <a href="/complaint/{{ user.id }}" target="_blank">link</a> with your organization.</p>

{% if complaints|length == 0 %}
<div class="alert alert-dark" role="alert">
Expand Down
277 changes: 264 additions & 13 deletions templates/dash.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,291 @@
<link rel="stylesheet" href="static/css/style_dash.css">

<title>Cam Dashboard</title>
<style>
.main {
min-height: 100vh;
background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.setup-card {
max-width: 900px;
margin: 0 auto;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 50px;
color: white;
box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}

.setup-card h2 {
font-weight: 700;
margin-bottom: 15px;
font-size: 2rem;
}

.setup-card .icon {
font-size: 80px;
margin-bottom: 25px;
opacity: 0.9;
}

.instruction-list {
text-align: left;
background: rgba(255,255,255,0.15);
border-radius: 15px;
padding: 30px;
margin: 30px 0;
backdrop-filter: blur(10px);
}

.instruction-list h5 {
font-size: 1.3rem;
margin-bottom: 20px;
}

.instruction-list ol {
counter-reset: step-counter;
list-style: none;
padding-left: 0;
}

.instruction-list ol > li {
counter-increment: step-counter;
margin-bottom: 20px;
padding-left: 50px;
position: relative;
font-size: 17px;
line-height: 1.7;
}

.instruction-list ol > li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
background: rgba(255,255,255,0.3);
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
}

.instruction-list ul {
margin-top: 10px;
padding-left: 20px;
}

.instruction-list ul li {
margin-bottom: 8px;
font-size: 15px;
}

.instruction-list strong {
color: #ffd700;
font-weight: 600;
}

.btn-setup {
background: white;
color: #667eea;
font-weight: 600;
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
display: inline-block;
margin-top: 25px;
transition: all 0.3s ease;
font-size: 18px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-setup:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
color: #764ba2;
}

.video-container {
margin-bottom: 40px;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.video-container h3 {
color: #333;
font-weight: 600;
margin-bottom: 20px;
font-size: 1.5rem;
}

.video-feed {
border-radius: 15px;
border: 3px solid #e9ecef;
width: 100%;
max-width: 100%;
height: 600px;
}

.detection-badges {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.detection-badges .badge {
padding: 10px 18px;
font-size: 15px;
font-weight: 500;
border-radius: 20px;
}

.help-section {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.2);
}

.help-section p {
font-size: 15px;
opacity: 0.95;
line-height: 1.6;
}

.container-fluid {
max-width: 1400px;
}

h1.page-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 30px;
}

@media (max-width: 768px) {
.setup-card {
padding: 30px 20px;
}

.video-feed {
height: 400px;
}

h1.page-title {
font-size: 2rem;
}
}
</style>
</head>

<body>
<div class="wrapper">
{% include 'sidebar.html' %}
<div class="main p-3 d-flex justify-content-center align-items-center">
<div class="text-center">
<div class="main p-4">
<div class="container-fluid">
<h1 class="page-title">Live Camera Dashboard</h1>

<div id="live-feeds">
{% if cameras %}
{% for camera in cameras %}
<h3>Camera: {{ camera.Cam_id }}</h3>
<div class="d-flex justify-content-center position-relative">
<iframe src="/video_feed/{{ camera.Cam_id }}" width="1000" height="500" class="video-feed"></iframe>
<!-- Overlay for Pose Alerts -->
<div class="video-container">
<h3>
<i class="lni lni-camera"></i> Camera: {{ camera.Cam_id }}
</h3>

<div id="hand-alert-{{ camera.Cam_id }}" class="hand-alert">
<!-- Dynamic hand gesture alert will be updated via JS -->
<div class="detection-badges">
{% if camera.fire_detection %}
<span class="badge bg-danger">Fire Detection Active</span>
{% endif %}
{% if camera.pose_alert %}
<span class="badge bg-warning text-dark">Pose Alert Active</span>
{% endif %}
{% if camera.restricted_zone %}
<span class="badge bg-primary">Restricted Zone Monitoring</span>
{% endif %}
{% if camera.safety_gear_detection %}
<span class="badge bg-success">Safety Gear Detection Active</span>
{% endif %}
</div>

<div class="position-relative mt-3">
<iframe src="/video_feed/{{ camera.Cam_id }}"
class="video-feed"
title="Camera Feed {{ camera.Cam_id }}"
frameborder="0"></iframe>

<div id="hand-alert-{{ camera.Cam_id }}" class="hand-alert"></div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-dark" role="alert">
No cameras Found!!
<div class="setup-card text-center">
<div class="icon">
<i class="lni lni-video"></i>
</div>
<h2>Get Started with IndShield</h2>
<p class="lead mb-0">No cameras found. Follow these simple steps to begin monitoring.</p>

<div class="instruction-list">
<h5><i class="lni lni-checkmark-circle"></i> Setup Your First Camera</h5>
<ol>
<li>
<strong>Open Manage Cameras</strong><br>
Click on "Manage Cameras" in the sidebar menu
</li>
<li>
<strong>Add Camera Details</strong><br>
Click "Add New Camera" button and enter:
<ul>
<li>Camera ID: Use "0" for built-in webcam, or enter IP address (e.g., 192.168.1.100:8080) for network cameras</li>
</ul>
</li>
<li>
<strong>Choose Detection Features</strong><br>
Select which safety features you need:
<ul>
<li><strong>Fire Detection:</strong> Monitors for fire hazards in real-time</li>
<li><strong>Pose Alert:</strong> Detects emergency hand gestures (L-shape pose)</li>
<li><strong>Restricted Zone:</strong> Alerts when someone enters prohibited areas</li>
<li><strong>Safety Gear:</strong> Ensures workers wear proper protective equipment</li>
</ul>
</li>
<li>
<strong>Save Configuration</strong><br>
Click "Save" to apply your camera settings
</li>
<li>
<strong>View Live Feed</strong><br>
Return to this dashboard to see your camera feed with active detection
</li>
</ol>
</div>

<a href="/manage_camera" class="btn-setup">
<i class="lni lni-cog"></i> Set Up Your First Camera
</a>

<div class="help-section">
<p class="mb-2"><strong>Need Help Getting Started?</strong></p>
<p>
<strong>For Mobile Cameras:</strong> Download "IP Webcam" app, start the server, and use the IP address shown in the app.<br>
<strong>For USB Webcams:</strong> Simply enter "0" as the camera ID. Use "1" or "2" for additional connected cameras.
</p>
</div>
</div>
{% endif %}
</div>

</div>
</div>
</div>
</body>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
Expand Down