Graduate

Update flask

1 <!doctype html> 1 <!doctype html>
2 -<title>Web Attendance System Register</title> 2 +<head>
3 <meta charset="UTF-8"> 3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 +<title>Web Attendance System Register</title>
5 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 6 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
6 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean"> 7 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&amp;subset=korean">
7 -<style> 8 +<style>body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}</style>
8 -body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}
9 -</style>
10 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script> 9 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
11 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script> 10 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
12 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 11 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
...@@ -14,16 +13,19 @@ body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif} ...@@ -14,16 +13,19 @@ body,h1,h2,h3,h4,h5 {font-family: "Nanum+Gothic", sans-serif}
14 let tempCanvas = document.createElement("canvas"); 13 let tempCanvas = document.createElement("canvas");
15 function load_cascade() 14 function load_cascade()
16 { 15 {
17 - let faceCascadeFile = 'haarcascade_frontalface_default.xml' 16 + alert("shibal");
18 - let faceCascadeURL = "{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}" 17 + let faceCascadeFile = 'haarcascade_frontalface_default.xml';
18 + let faceCascadeURL = "{{url_for('static', filename='js/haarcascade_frontalface_default.xml')}}";
19 let utils = new Utils('errorMessage'); 19 let utils = new Utils('errorMessage');
20 utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => { 20 utils.createFileFromUrl(faceCascadeFile, faceCascadeURL, () => {
21 - activate() 21 + alert("shibal");
22 + activate();
22 }); 23 });
23 } 24 }
24 function activate() 25 function activate()
25 { 26 {
26 - document.getElementById("myFile").disabled = false; 27 + let fileloader = document.getElementById("fileloader");
28 + fileloader.disabled = false;
27 } 29 }
28 30
29 function detect_face() 31 function detect_face()
...@@ -51,7 +53,8 @@ function detect_face() ...@@ -51,7 +53,8 @@ function detect_face()
51 } 53 }
52 if (faces.size() == 1) 54 if (faces.size() == 1)
53 { 55 {
54 - document.getElementById("sender").disabled = false; 56 + let sender = document.getElementById("sender");
57 + sender.disabled = false;
55 } 58 }
56 else if (faces.size() == 0) 59 else if (faces.size() == 0)
57 { 60 {
...@@ -86,10 +89,22 @@ function submit() ...@@ -86,10 +89,22 @@ function submit()
86 }) 89 })
87 } 90 }
88 91
92 +var loadFile = function(event) {
93 + var reader = new FileReader();
94 + reader.readAsDataURL(event.target.files[0]);
95 + output.onload = function() {
96 + var output = document.getElementById('imagefile');
97 + output.src = URL.createObjectURL(event.target.files[0]);
98 + detect_face()
99 + }
100 + };
101 +
89 </script> 102 </script>
103 +</head>
90 <body class="w3-light-grey" onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }"> 104 <body class="w3-light-grey" onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }">
91 <!-- w3-content defines a container for fixed size centered content, 105 <!-- w3-content defines a container for fixed size centered content,
92 and is wrapped around the whole page content, except for the footer in this example --> 106 and is wrapped around the whole page content, except for the footer in this example -->
107 +
93 <div class="w3-content" style="max-width:1400px"> 108 <div class="w3-content" style="max-width:1400px">
94 109
95 <!-- Header --> 110 <!-- Header -->
...@@ -103,13 +118,14 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -103,13 +118,14 @@ and is wrapped around the whole page content, except for the footer in this exam
103 <div> 118 <div>
104 학번: <input type="text" name="student_id"><br> 119 학번: <input type="text" name="student_id"><br>
105 이름: <input type="text" name="student_name"><br><br> 120 이름: <input type="text" name="student_name"><br><br>
106 - <input type="file" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled> 121 + <input type="file" id="fileloader" name="file" onchange="loadFile(event)" autocomplete="off" accept="image/jpeg" required disabled>
107 <div> 122 <div>
108 <img id="imagefile" style="display:none;"> 123 <img id="imagefile" style="display:none;">
109 <canvas id="preview"></canvas> 124 <canvas id="preview"></canvas>
110 </div> 125 </div>
111 <input id="sender" type="button" onclick="submit" value="등록" disabled> 126 <input id="sender" type="button" onclick="submit" value="등록" disabled>
112 </div> 127 </div>
128 +</div>
113 <script> 129 <script>
114 var loadFile = function(event) { 130 var loadFile = function(event) {
115 var reader = new FileReader(); 131 var reader = new FileReader();
...@@ -121,5 +137,6 @@ and is wrapped around the whole page content, except for the footer in this exam ...@@ -121,5 +137,6 @@ and is wrapped around the whole page content, except for the footer in this exam
121 } 137 }
122 }; 138 };
123 </script> 139 </script>
124 -</div> 140 +</body>
141 +</html>
125 142
......