enh(web):add flask server with restapi

changed web filestructure build flask server with get index method and post predict method closes #6
Paeti · Nov 27, 2018 · 39b6126 · 39b6126
1 parent f519562
commit 39b6126
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 28 deletions.
diff --git a/web/server.py b/web/server.py
@@ -0,0 +1,13 @@
+from flask import Flask, render_template
+app = Flask(__name__)
+
+@app.route('/', methods=['GET'])
+def hello_world():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict(id, permission):
+    return 'Hello World!!!!'
+
+if __name__ == '__main__':
+  app.run(host = '0.0.0.0', debug = True)
diff --git a/web/custom.js → web/static/custom.js b/web/custom.js → web/static/custom.js
@@ -3,17 +3,19 @@ const canvas = document.getElementById('canvas');
 const user = document.getElementById('userForm');
 const loader = document.getElementById('heartLoader');
 const context = canvas.getContext('2d');
-const biggerText = document.getElementById('issaBiggerText')
-const smallerText = document.getElementById('issaSmallerText')
+const biggerText = document.getElementById('issaBiggerText');
+const smallerText = document.getElementById('issaSmallerText');
 const constraints = {
   video: true,
 };
+
 //Enables webcam
 navigator.mediaDevices.getUserMedia(constraints)
   .then((stream) => {
     webcam.srcObject = stream;
   });
 
+
 // Checks if "^" Key is pressed
 document.addEventListener("keydown", function (e) {
   if (e.keyCode == 192) {
@@ -30,13 +32,13 @@ document.addEventListener("keydown", function (e) {
     smallerText.style.opacity = 0;
     smallerText.style.transitionDuration = "1s";
     crypticWow("Ihr Bild wird nun verarbeitet");
-  } else if (e.keyCode == 70) {
+  } else if (e.keyCode == 77) {
     crypticWow("Sie sind 54 Jahre alt und weiblich");
-    smallerText.innerHTML = "korrigieren Sie ihre Schätzung und drücken Sie dann auf das Herz"
+      smallerText.innerHTML = "korrigieren Sie ihre Schätzung und drücken Sie dann auf das Herz";
     smallerText.style.transitionDelay = "1s";
     smallerText.style.opacity = 1;
     smallerText.style.transitionDuration = "2s";
-  
+
   }
 }, false);
 
@@ -45,11 +47,11 @@ function send(canvas) {
   $.ajax({
     type: "POST",
     url: "", //TODO: insert filename which gets the image via post
-    data: { 
+    data: {
        imgBase64: dataURL
     }
   }).done(function(o) {
-    console.log('saved'); 
+    console.log('saved');
   });
 }
 
@@ -91,4 +93,3 @@ function toggleFullScreen() {
     }
   }
 }
-
diff --git a/web/index.html → web/static/index.html b/web/index.html → web/static/index.html
@@ -30,4 +30,4 @@ <h2 id="issaSmallerText">und stimmen zu, dass ihr Bild für das Trainieren der
     <script src="/custom.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/web/style.css → web/static/style.css b/web/style.css → web/static/style.css
diff --git a/web/userForm.png → web/static/userForm.png b/web/userForm.png → web/static/userForm.png
diff --git a/web/templates/index.html b/web/templates/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>IP Hartung</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="../static/style.css" />
+</head>
+
+<body onload="toggleFullScreen()">
+    <div id="bannerWrapper">
+        <h1 id="issaBiggerText">Drücken Sie Enter und lassen Sie Ihr Alter schätzen</h1>
+        <h2 id="issaSmallerText">und stimmen zu, dass ihr Bild für das Trainieren der
+            Software weiterverwendet wird.</h2>
+    </div>
+    <div id="wrapper">
+        <video autoplay id="webcam">
+        </video>
+    </div>
+    <div id="userForm">
+        <img src="../static/userForm.png" alt="">
+    </div>
+    <div id="heartLoader">
+        <div></div>
+    </div>
+
+    <!-- height and width needs to get adpopted to the pixels of the webcam-->
+    <canvas id="canvas" height="1040px" width="1380px"></canvas>
+    <script src="../static/custom.js"></script>
+</body>
+
+</html>
diff --git a/web/webserver.py b/web/webserver.py
-Original file line number
+Diff line change
@@ Expand Up @@
         <script src="/custom.js"></script>
     </body>
-    </html>
+    </html>