Graduate

Update HTML

...@@ -15,6 +15,27 @@ ...@@ -15,6 +15,27 @@
15 #canvasOutput { 15 #canvasOutput {
16 background-color: #666; 16 background-color: #666;
17 } 17 }
18 +#messagebox {
19 + height: 300px;
20 + overflow-y: auto;
21 +}
22 +.message {
23 + padding: 20px;
24 + font-weight: bold;
25 + color: white;
26 +}
27 +.attend {
28 + background-color: #4CAF50;
29 +}
30 +.already {
31 + background-color: #2196F3;
32 +}
33 +.late {
34 + background-color: #ff9800;
35 +}
36 +.fail {
37 + background-color: #f44336;
38 +}
18 </style> 39 </style>
19 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script> 40 <script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
20 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script> 41 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
...@@ -150,22 +171,22 @@ function main() ...@@ -150,22 +171,22 @@ function main()
150 data: {'image':b64encoded}, 171 data: {'image':b64encoded},
151 success: function(data){ 172 success: function(data){
152 if (data.status == "attend"){ 173 if (data.status == "attend"){
153 - var newDiv = document.createElement("div"); 174 + var newHead = "<div class='message attend'>";
154 - var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "출석"); 175 + var newTail = "</div>";
155 - newDiv.appendChild(newContent); 176 + var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "출석되었습니다.";
156 - document.body.appendChild(newDiv); 177 + $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
157 } 178 }
158 else if (data.status == "already"){ 179 else if (data.status == "already"){
159 - var newDiv = document.createElement("div"); 180 + var newHead = "<div class='message already'>";
160 - var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "이미 출석처리 되었습니다."); 181 + var newTail = "</div>";
161 - newDiv.appendChild(newContent); 182 + var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "이미 출석되었습니다.";
162 - document.body.appendChild(newDiv); 183 + $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
163 } 184 }
164 - else{ 185 + else if (data.status == "fail"){
165 - var newDiv = document.createElement("div"); 186 + var newHead = "<div class='message fail'>";
166 - var newContent = document.createTextNode("실패"); 187 + var newTail = "</div>";
167 - newDiv.appendChild(newContent); 188 + var newContent = "인식 실패";
168 - document.body.appendChild(newDiv); 189 + $('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
169 } 190 }
170 } 191 }
171 }); 192 });
...@@ -196,5 +217,8 @@ function main() ...@@ -196,5 +217,8 @@ function main()
196 <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video> 217 <video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
197 <canvas id="canvasOutput"></canvas> 218 <canvas id="canvasOutput"></canvas>
198 </div> 219 </div>
220 + <div id="messagebox">
221 +
222 + </div>
199 </body> 223 </body>
200 </html> 224 </html>
......