Graduate

Update HTML

......@@ -15,6 +15,27 @@
#canvasOutput {
background-color: #666;
}
#messagebox {
height: 300px;
overflow-y: auto;
}
.message {
padding: 20px;
font-weight: bold;
color: white;
}
.attend {
background-color: #4CAF50;
}
.already {
background-color: #2196F3;
}
.late {
background-color: #ff9800;
}
.fail {
background-color: #f44336;
}
</style>
<script type='text/javascript' src="{{url_for('static', filename='js/opencv.js')}}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
......@@ -150,22 +171,22 @@ function main()
data: {'image':b64encoded},
success: function(data){
if (data.status == "attend"){
var newDiv = document.createElement("div");
var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "출석");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
var newHead = "<div class='message attend'>";
var newTail = "</div>";
var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "출석되었습니다.";
$('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
}
else if (data.status == "already"){
var newDiv = document.createElement("div");
var newContent = document.createTextNode('[' + data.student_id + '/' + data.student_name + ']' + "이미 출석처리 되었습니다.");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
var newHead = "<div class='message already'>";
var newTail = "</div>";
var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "이미 출석되었습니다.";
$('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
}
else{
var newDiv = document.createElement("div");
var newContent = document.createTextNode("실패");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);
else if (data.status == "fail"){
var newHead = "<div class='message fail'>";
var newTail = "</div>";
var newContent = "인식 실패";
$('#messagebox').prepend(newDiv + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
}
}
});
......@@ -196,5 +217,8 @@ function main()
<video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
<canvas id="canvasOutput"></canvas>
</div>
<div id="messagebox">
</div>
</body>
</html>
......