better camera frame error/progress display

diff --git a/doc/todo.txt b/doc/todo.txt
index bd4dcd75c9620c39e3c092e10e43034c269d7c23..73448ee1375780a7584c3925f1900d63db045e26 100644 (file)
--- 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 963a70f7c28162b2f658b614107c9e407c39cce5..05c2c79a5d33b44b8f4f7151a1ba6fecb31ab4bd 100644 (file)
--- 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 c40de507b8a04b8b97451803a40d8f1cff5b9279..5c052313ff85bb1eb901e5743cfbd32fa0cc33af 100644 (file)
--- 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) {