enrolement works

application/endpoints.py

@@ -4,6 +4,7 @@ import requests
 import application.config as config
 import json
 import cv2
+import base64
 from application.db import Session, Person, Fingerprint
 
 lastImage = ""
@@ -14,17 +15,20 @@ class PersonList(Resource):
         try:
             jsonData = flask.request.get_json(force=True)
             personJSON = jsonData["person"]
-
+            print(personJSON)
             session = Session()
+
+            # get Fingerprints with Middleware
             fingerprintsObj = []
-            for fingerprint in personJSON["fingerprints"]:
+            if "fingerprints" in personJSON:
-                fingerprint["fingerprint"] = fingerprint["fingerprint"].encode('utf-8')
+                for fingerprint in personJSON["fingerprints"]:
-                fp = Fingerprint(**fingerprint) # ** Operator converts DICT/JSON to initializable 
+                    fingerprint["fingerprint"] = fingerprint["fingerprint"].encode('utf-8')
-                fingerprintsObj.append(fp)  
+                    fp = Fingerprint(**fingerprint) # ** Operator converts DICT/JSON to initializable 
-                session.add(fp)
+                    fingerprintsObj.append(fp)  
+                    session.add(fp)
 
             personJSON["fingerprints"] = fingerprintsObj
-            personJSON["face"] = personJSON["face"].encode('utf-8')
+            personJSON["face"] = ("data:image/png;base64,"+str(lastImage)).encode('utf-8')
             person = Person(**personJSON)
             session.add(person)
             session.commit()
@@ -120,13 +124,13 @@ class Camera(Resource):
         def get_frame(self, ending):
             success, image = self.video.read()
             ret, jpeg = cv2.imencode(ending, image)
-            return jpeg.tobytes()
+            return jpeg
 
 
     def gen(self, camera):
         """Video streaming generator function."""
         while True:
-            frame = camera.get_frame('.jpg')
+            frame = camera.get_frame('.jpg').tobytes()
             yield (b'--frame\r\n'
                 b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
 
@@ -137,7 +141,8 @@ class Camera(Resource):
                 return flask.Response(self.gen(self.VideoCamera()), mimetype='multipart/x-mixed-replace; boundary=frame')
             
             elif type == "still":
-                return flask.Response(lastImage,  mimetype='image/jpeg')
+                lastImage1 = base64.b64decode(lastImage.encode())
+                return flask.Response(lastImage1,  mimetype='image/png')
 
             return flask.make_response(flask.jsonify({'error': "No idea how you got here"}), 404)
         except Exception as e:
@@ -147,7 +152,7 @@ class Camera(Resource):
     def post(self):
         global lastImage
         try:
-            lastImage = self.VideoCamera().get_frame('.png')
+            lastImage = base64.b64encode(self.VideoCamera().get_frame('.png')).decode()
         except Exception as e:
             print("error: -", e)
             return flask.make_response(flask.jsonify({'error': str(e)}), 404)

application/static/coms.js

@@ -1,4 +1,4 @@
-function getJSON(url, callback) {
+function getJSON(url, callback, fallback) {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
     xhr.responseType = 'json';
@@ -7,14 +7,13 @@ function getJSON(url, callback) {
         if (status < 400) {
             callback(null, xhr.response);
         } else {
-            console.log("failed getting");
+            fallback();
-            console.log(status);
         }
     };
     xhr.send();
 };
 
-function putJSON(url, data, callback) {
+function putJSON(url, data, callback, fallback) {
     var xhr = new XMLHttpRequest();
     xhr.open('PUT', url, true);
     xhr.responseType = 'json';
@@ -24,14 +23,13 @@ function putJSON(url, data, callback) {
         if (status < 400) {
             callback(null, xhr.response);
         } else {
-            console.log("failed posting");
+            fallback();
-            console.log(status);
         }
     };
     xhr.send(data);
 };
 
-function postJSON(url, data, callback) {
+function postJSON(url, data, callback, fallback) {
     var xhr = new XMLHttpRequest();
     xhr.open('POST', url, true);
     xhr.responseType = 'json';
@@ -41,8 +39,7 @@ function postJSON(url, data, callback) {
         if (status < 400) {
             callback(null, xhr.response);
         } else {
-            console.log("failed posting");
+            fallback();
-            console.log(status);
         }
     };
     xhr.send(data);

application/static/main.css

@@ -27,7 +27,7 @@
     top: 10rem;
     left: -50%;
     display: block;
-   
+   padding: 0;
 }
 
 .listIMG{
@@ -46,7 +46,7 @@
     padding:0;
 }
 .card{
-    margin-top:2rem;
+    margin-top:1rem;
 }
 .card-text{
     padding: 0;
@@ -60,25 +60,27 @@
     float:right;
 }
 .middle{
-    margin: 0rem 2rem 0 2rem;
+    padding: 2rem ;
+    margin: 0 !important;
     height: 100%;
-    width: 40%;
+    width: 45%;
     display: block;
 }
 
 #image-left{
     width:100%;
-    padding: 1rem;
+  
 }
 #image-right{
     width:100%;
-    padding: 1rem;
+
 }
 
 .heroInfo{
-    padding: 1rem;
+   
 }
 
 .middle-controls{
-    margin-right: 1rem;
+    margin-left: 1rem;
+    margin-top: 1rem;
 }

application/static/main.js

@@ -5,6 +5,15 @@ var ml = document.getElementById('middle-left');
 var mr = document.getElementById('middle-right');
 personData = {}
 
+/**
+ * Retrieves input data from a form and returns it as a JSON object.
+ * @param  {HTMLFormControlsCollection} elements  the form elements
+ * @return {Object}                               form data as an object literal
+ */
+const formToJSON = elements => [].reduce.call(elements, (data, element) => {
+    data[element.name] = element.value;
+    return data;
+  }, {});
 
 function focusNav(id) {
     focusedID = id;
@@ -51,7 +60,8 @@ function snapShot(){
     postJSON(rootKontext + "/api/v1/camera/", {},         
         function (error, data) {
             document.getElementById('image-left').src = rootKontext + "/api/v1/camera/still";
-        }
+        },
+        null
     );
 }
 
@@ -70,12 +80,32 @@ function renderPersonRight(data){
     mr.innerHTML = string;
 }
 
+function enrole(){
+    data = {}
+    data["fname"] = document.getElementById("personform")["fname"].value
+    data["lname"] = document.getElementById("personform")["lname"].value
+    data["gender"] = document.getElementById("personform")["gender"].value
+    data["yob"] = document.getElementById("personform")["yob"].value
+    data = {"person": data}
+    console.log(data)
+    postJSON(rootKontext + "/api/v1/person/", JSON.stringify(data), 
+    function(){
+        location.reload()
+    },
+    null
+    )
+}
+
 function identify(){
     snapShot()
     getJSON(rootKontext + "/api/v1/person/?useFace=True",
         function (error, data) {
             data = data["data"]
             renderPersonRight(data)
+            $("#middle-right").removeClass("border-danger").addClass("boarder-success")
+        },
+        function(){
+            $("#middle-right").removeClass("border-success").addClass("border-danger")
         }
     );
 }
@@ -86,6 +116,11 @@ function validate(){
         function (error, data) {
             data = data["data"]
             renderPersonRight(data)
+            $("#middle-right").removeClass("border-danger").addClass("border-success")
+        },
+        function(){
+            mr.innerHTML="<p><h3>Please select a person<br> from the list, which you want to use for validation</h3></p>"
+            $("#middle-right").removeClass("border-success").addClass("border-danger")
         }
     );
 }
@@ -110,7 +145,8 @@ function loadData() {
             personData = data
             loadPersonList(data)
             renderIdentify()
-        }
+        },
+        null
     );
 }
 

application/static/render.js

@@ -12,6 +12,7 @@ function renderValidate(){
     <button onclick="renderValidate()" class="btn btn-warning float-right middle-controls">Retry</button>
     `
     ml.innerHTML = string;
+    $("#middle-right").removeClass("border-danger").removeClass("border-success")
 }
 
 function renderChange(){
@@ -20,7 +21,29 @@ function renderChange(){
 }
 function renderEnrole(){
     clearMiddle()
-    console.log("enrole")
+    string = `
+    <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
+    
+    <button onclick="snapShot()" class="btn btn-primary float-right middle-controls">Snap</button>
+    <button onclick="renderEnrole()" class="btn btn-warning float-right middle-controls">Retry</button>
+    `
+    ml.innerHTML = string;
+
+    string2 = `
+    <form id="personform">
+        <input type="text" class="form-control" name="fname" placeholder="First Name" ><br>
+        <input type="text" class="form-control" name="lname" placeholder="Last Name" ><br>
+        <select class="form-control" id="gender" name="gender">
+            <option>male</option>
+            <option>female</option>
+            <option>other</option>
+        </select><br>
+        <input type="text" class="form-control" name="yob" placeholder="YoB"><br>
+        
+    </form>
+    <button type="button" class="btn btn-success float-right" onclick="enrole()">Enrole</button>
+    `
+    mr.innerHTML = string2;
 }
 function renderIdentify(){
     clearMiddle()

application/templates/index.html

@@ -40,11 +40,11 @@
     </div>
     <div style="position: fixed; left: 50%;">
         <div class="container bg-dark" id="main">
-            <div class="middle" id="middle-left">
+            <div class="middle card" id="middle-left">
 
 
             </div>
-            <div class="middle" id="middle-right">
+            <div class="middle card" id="middle-right">
 
 
             </div>