From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 13 Oct 2013 10:31:53 +0000 (+0300)
Subject: better camera frame error/progress display
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=ad04d1b2cbf169a7df45e9e68ea05b69ba60094a;p=motioneye-debian

better camera frame error/progress display
---

diff --git a/doc/todo.txt b/doc/todo.txt
index bd4dcd7..73448ee 100644
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,5 +1,3 @@
--> applying progress sometimes does not appear on frame
-
 -> style scroll bars
 -> hint text next to section titles
 -> clickable hints
diff --git a/static/css/main.css b/static/css/main.css
index 963a70f..05c2c79 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -374,6 +374,7 @@ div.camera-placeholder {
     left: 0px;
     background-color: #555;
     text-align: center;
+    transition: opacity 0.2s linear;
 }
 
 img.no-camera {
diff --git a/static/js/main.js b/static/js/main.js
index c40de50..5c05231 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1112,6 +1112,8 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
     var nameSpan = cameraFrameDiv.find('span.camera-name');
     var configureButton = cameraFrameDiv.find('div.camera-button.configure');
     var closeButton = cameraFrameDiv.find('div.camera-button.close');
+    var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
+    var cameraProgress = cameraFrameDiv.find('div.camera-progress');
     var cameraImg = cameraFrameDiv.find('img.camera');
     var progressImg = cameraFrameDiv.find('img.camera-progress');
     
@@ -1164,13 +1166,17 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         this.error = true;
         cameraImg.addClass('error');
         cameraImg.height(Math.round(cameraImg.width() * 0.75));
+        cameraPlaceholder.css('opacity', 1);
     });
     cameraImg.load(function () {
         this.error = false;
         cameraImg.removeClass('error');
         cameraImg.css('height', '');
-        $('div.camera-progress').css('opacity', '0');
+        cameraPlaceholder.css('opacity', 0);
+        cameraProgress.css('opacity', 0);
     });
+    
+    cameraImg.error();
 }
 
 function remCameraFrameUi(cameraId) {