#9 Face detection information is provided in GUI

Face detection (from each camera) is now provided in GUI. Further styling will be done. This was mainly achieved via AJAX, jQuery andjsonify module from Flask.
kcuric · Jan 4, 2020 · e3023f8 · e3023f8
1 parent ed82a8d
commit e3023f8
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 5 deletions.
diff --git a/server/app.py b/server/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, render_template, Response
+from flask import Flask, render_template, Response, jsonify
 from modules.Detector import Detector
 import socket, sys, signal
 
@@ -20,6 +20,7 @@
 
 # DETECTOR CONFIG
 detector = Detector()
+face_detected = dict()
 
 # SIGNAL HANDLING
 def receive_signal(signal_number, frame):
@@ -33,11 +34,14 @@ def receive_signal(signal_number, frame):
     print("Application exited.")
     sys.exit()
 
-def rec(sock):
+def rec(sock, camera_num):
+    global face_detected
     while True:
         data, addr = sock.recvfrom(65535)
         if(detector.find_faces(data)):
-            print("INTRUDER!")
+            face_detected[camera_num] = True
+        else:
+            face_detected[camera_num] = False
         yield (b'--frame\r\n'
                 b'Content-Type: image/jpeg\r\n\r\n' + data + b'\r\n')
 
@@ -47,11 +51,21 @@ def index():
 
 @app.route('/camera1')
 def camera1():
-    return Response(rec(sockets[0]), mimetype='multipart/x-mixed-replace; boundary=frame')
+    return Response(
+        rec(sockets[0], 1), 
+        mimetype='multipart/x-mixed-replace; boundary=frame', 
+    )
 
 @app.route('/camera2')
 def camera2():
-    return Response(rec(sockets[1]), mimetype='multipart/x-mixed-replace; boundary=frame')
+    return Response(
+        rec(sockets[1], 2), 
+        mimetype='multipart/x-mixed-replace; boundary=frame',
+    )
+
+@app.route('/face_detected')
+def check_for_faces():
+    return jsonify(face_detected)
 
 if __name__ == '__main__':
     signal.signal(signal.SIGINT, receive_signal)

diff --git a/server/static/css/style.css b/server/static/css/style.css
@@ -31,4 +31,16 @@ img{
     height: 360px;
     padding: 10px;
     float: left;
+}
+
+ul{
+    list-style: none;
+}
+
+.normal{
+    color: green;
+}
+
+.warning{
+    color: red;
 }
diff --git a/server/static/js/app.js b/server/static/js/app.js
@@ -0,0 +1,39 @@
+$(document).ready(function(){
+    /**
+     * face_detected is a JSON containing information
+     * about face detection on each camera.
+     */
+    var faces_detected;
+
+    var checkIfDetected = function() {
+        $.ajax({
+          url: '/face_detected',
+          dataType: 'json',
+          type: 'get',
+          success: function(e) {
+            faces_detected = e; 
+            $('#detection').html('Detecting faces.');
+          },
+          error: function(e) {
+            $('#detection').html('Error: Something went wrong! Check your connection to the host!');
+          },
+        });
+      }
+
+    window.setInterval(function(){
+        checkIfDetected();
+        $('#camera_info').empty();
+        $.each(faces_detected, function(k, v) {
+          if(v == true){
+            var message = "Face/s detected!";
+            $('#camera_info').append('<li class="warning">Camera #' + k + ': ' + message +'</li>')
+          }
+          else{
+            var message = "No faces detected."
+            $('#camera_info').append('<li class="normal">Camera #' + k + ': ' + message +'</li>')
+          }
+
+        });
+    }, 1000);
+
+});
diff --git a/server/templates/index.html b/server/templates/index.html
@@ -5,14 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>DIY Survailence System</title>
+    <script
+    src="https://code.jquery.com/jquery-3.4.1.min.js"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+    crossorigin="anonymous"></script>
     <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/style.css') }}">
+    <script type="text/javascript" src= "{{ url_for('static', filename='js/app.js') }}"></script>
 </head>
 <body>
     <div class="container">
         <h1>DIY Survailence System</h1>
         <p>Running the app.py</p>
         <img src="{{ url_for('camera1') }}">
         <img src="{{ url_for('camera2') }}">
+        <p id="detection"></p>
+        <ul id="camera_info"></ul>
+
     </div>
 </body>
 </html>