Fancy index.html
Change-Id: Id34b142c250b0977c8ec884e335c120f2ff01cc9
diff --git a/person_detection/app.py b/person_detection/app.py
index fc0b9c7..bc72e96 100644
--- a/person_detection/app.py
+++ b/person_detection/app.py
@@ -8,6 +8,7 @@
from flask import Flask, render_template, Response
from argparse import ArgumentParser, SUPPRESS
+import config
from person_detection import Camera
@@ -16,9 +17,9 @@
@app.route('/')
def index():
+ global cameras
"""Video streaming home page."""
- return render_template('index.html', devices=[0, 1, 2, 3])
-
+ return render_template('index.html', devices=config.cameras)
def gen(camera):
"""Video streaming generator function."""
diff --git a/person_detection/config.py b/person_detection/config.py
new file mode 100644
index 0000000..4aa9d1e
--- /dev/null
+++ b/person_detection/config.py
@@ -0,0 +1,6 @@
+"""
+SPDX-FileCopyrightText: 2020-present Open Networking Foundation <info@opennetworking.org>
+SPDX-License-Identifier: LicenseRef-ONF-Member-1.01
+"""
+
+cameras = {"0": "Ain's desk", "1":"Large conference room", "2":"Shad's desk", "3":"Unknown"}
diff --git a/person_detection/templates/index.html b/person_detection/templates/index.html
index 43a4c6b..0cb83e7 100644
--- a/person_detection/templates/index.html
+++ b/person_detection/templates/index.html
@@ -1,11 +1,30 @@
<html>
<head>
<title>Person Detection - Aether Edge Application</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
- <h1>Person Detection - Aether Edge Application</h1>
- {% for x in devices %}
- <img src="{{ url_for('video_feed', device=x) }}">
- {% endfor %}
+ <main>
+ <div class="container">
+ <div class=row>
+ <h2 class="pb-2 border-bottom">Person Detection - Aether Edge Application</h2>
+ </div>
+ <div class="row">
+ {% for x, y in devices.items() %}
+ <div class="col-6">
+ <div class="card">
+ <img src="{{ url_for('video_feed', device=x) }}" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">Camera {{ x }}</h5>
+ <p class="card-text">{{ y }}</p>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ </main>
+ <h1></h1>
</body>
</html>