Update index.html UI

@@ -66,8 +66,8 @@ function init()
                 var ratio = 1.0;
                 var ratio = 1.0;
                 video.width = video.videoWidth;
                 video.width = video.videoWidth;
                 video.height = video.videoHeight;
                 video.height = video.videoHeight;
-                if (video.width > screenWidth || video.height + headerHeight + messageboxHeight / 2 > screenHeight){
-                    ratio = Math.min(screenWidth / video.width * 1.0, screenHeight / ((video.height + headerHeight + messageboxHeight / 2) * 1.0));
+                if (video.width > screenWidth || video.height + headerHeight + messageboxHeight > screenHeight){
+                    ratio = Math.min(screenWidth / video.width * 1.0, screenHeight / ((video.height + headerHeight + messageboxHeight) * 1.0));
                 }
                 }
                 container.style.width = Math.round(video.width * ratio) + 'px';
                 container.style.width = Math.round(video.width * ratio) + 'px';
                 container.style.height = Math.round(video.height * ratio) + 'px';
                 container.style.height = Math.round(video.height * ratio) + 'px';
@@ -100,6 +100,7 @@ function main()
     let canvasContext = canvasOutput.getContext('2d');
     let canvasContext = canvasOutput.getContext('2d');
     let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
     let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
     let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
     let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
+    var dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
     let cap = new cv.VideoCapture(video);
     let cap = new cv.VideoCapture(video);
     let faces = new cv.RectVector();
     let faces = new cv.RectVector();
     let classifier = new cv.CascadeClassifier();
     let classifier = new cv.CascadeClassifier();
@@ -189,26 +190,25 @@ function main()
                                var newHead = "<div class='message attend'>";
                                var newHead = "<div class='message attend'>";
                                var newTail = "</div>";
                                var newTail = "</div>";
                                var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "출석되었습니다.";
                                var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "출석되었습니다.";
-                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
+                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 1000);
                            }
                            }
                            else if (data.status == "already"){
                            else if (data.status == "already"){
                                var newHead = "<div class='message already'>";
                                var newHead = "<div class='message already'>";
                                var newTail = "</div>";
                                var newTail = "</div>";
                                var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "이미 출석되었습니다.";
                                var newContent = '[' + data.student_id + '/' + data.student_name + ']' + "이미 출석되었습니다.";
-                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
+                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 1000);
                            }
                            }
                            else if (data.status == "fail"){
                            else if (data.status == "fail"){
                                var newHead = "<div class='message fail'>";
                                var newHead = "<div class='message fail'>";
                                var newTail = "</div>";
                                var newTail = "</div>";
                                var newContent = "인식 실패";
                                var newContent = "인식 실패";
-                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 300);
+                               $('#messagebox').prepend(newHead + newContent + newTail).stop().animate({ scrollTop: $('#messages')[0].scrollHeight }, 1000);
                            }
                            }
                         }
                         }
                     });
                     });
                 }
                 }
             }
             }
             // to do resize preview
             // to do resize preview
-            var dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
             cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
             cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
             cv.imshow('canvasOutput', dst);
             cv.imshow('canvasOutput', dst);
             // schedule the next one.
             // schedule the next one.