image loading progress improvements

diff --git a/static/css/main.css b/static/css/main.css
index 32812e291dab5ba2043874d413c89cbe2d4f6395..467dfd89492eb06e7800ebaa4dbf1cd358ede0c0 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -683,7 +683,8 @@ img.camera {
     opacity: 1;
 }
 
-img.camera.error {
+img.camera.error,
+img.camera.loading {
     opacity: 0;
 }
 
@@ -693,7 +694,6 @@ div.camera-placeholder {
     right: 0px;
     bottom: 0px;
     left: 0px;
-    background-color: #555;
     text-align: center;
     transition: opacity 0.2s linear;
 }
@@ -713,12 +713,11 @@ div.camera-progress {
     opacity: 0;
     transition: all 0.2s linear;
     text-align: center;
-    background-color: rgba(0, 0, 0, 1);
     cursor: pointer;
 }
 
 img.camera-progress {
-    margin-top: 28%;
+    margin-top: 20%;
     border: 10px solid white;
     border-radius: 10px;
 }

diff --git a/static/img/camera-progress.gif b/static/img/camera-progress.gif
index 023347e4680b09d593822759b1b54a923abf320a..748c0c74cea0cf78e0d8fbd2598f15fe7a9d5aae 100644 (file)
Binary files a/static/img/camera-progress.gif and b/static/img/camera-progress.gif differ

diff --git a/static/js/main.js b/static/js/main.js
index 00dd7eeb3f0660807fd9f5fa0e85ac5f59551aa4..df0d825b339db851f5c257ed1a5dc87ff3045403 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1661,6 +1661,11 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         doFullScreenCamera(cameraId);
     });
     
+    //if (inProgress) { TODO
+        cameraProgress.css('opacity', '0.5');
+        cameraPlaceholder.css('opacity', '0');
+//    }
+    
     /* insert the new camera frame at the right position,
      * with respect to the camera id */
     var cameraFrames = pageContainer.find('div.camera-frame');
@@ -1711,7 +1716,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         this.error = true;
         this.loading = false;
         
-        cameraImg.addClass('error');
+        cameraImg.addClass('error').removeClass('loading');
         cameraImg.height(Math.round(cameraImg.width() * 0.75));
         cameraPlaceholder.css('opacity', 1);
     });
@@ -1723,7 +1728,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         this.error = false;
         this.loading = false;
         
-        cameraImg.removeClass('error');
+        cameraImg.removeClass('error').removeClass('loading');
         cameraImg.css('height', '');
         cameraPlaceholder.css('opacity', 0);
         cameraProgress.css('opacity', 0);
@@ -1734,7 +1739,8 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         }
     });
     
-    cameraImg.error();
+    cameraImg.addClass('loading');
+    cameraImg.height(Math.round(cameraImg.width() * 0.75));
 }
 
 function remCameraFrameUi(cameraId) {
@@ -1907,7 +1913,7 @@ function checkCameraErrors() {
     var cameraFrames = $('div.page-container').find('img.camera');
     
     cameraFrames.each(function () {
-        if (this.complete === true && this.naturalWidth === 0 && !this.error) {
+        if (this.complete === true && this.naturalWidth === 0 && !this.error && this.src) {
             $(this).error();
         }
     });