Showing
1 changed file
with
37 additions
and
13 deletions
... | @@ -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> | ... | ... |
-
Please register or login to post a comment