added a full screen button to camera frames

diff --git a/static/css/frame.css b/static/css/frame.css
index 92ac8f9ddf0a900fb4dd6d681333441cedab35ae..18b04dab3e98fb626477445a4e6a358b8f9f8326 100644 (file)
--- a/static/css/frame.css
+++ b/static/css/frame.css
@@ -49,12 +49,13 @@ div.camera-frame {
 
 div.camera-container {
     height: 100%;
+    text-align: center;
+    overflow: hidden;
 }
 
 img.camera {
     width: 100%;
     height: auto;
-    display: block;
     transition: opacity 0.2s linear;
     opacity: 1;
 }
@@ -62,7 +63,7 @@ img.camera {
 img.camera.error,
 img.camera.loading {
     opacity: 0;
-    height: 100%;
+    height: 100% !important;
 }
 
 div.camera-placeholder {
@@ -73,10 +74,11 @@ div.camera-placeholder {
     left: 0px;
     text-align: center;
     transition: opacity 0.2s linear;
+    overflow: hidden;
 }
 
 img.no-camera {
-    margin-top: 20%;
+    padding-top: 20%;
     width: 30%;
     opacity: 0.8;
 }

diff --git a/static/js/frame.js b/static/js/frame.js
index af4997b620dc2ad811c7b90e6152ee75d1efbec0..89e2c6770f95bf24b8cb0cd7442bf9a6d0a5ce41 100644 (file)
--- a/static/js/frame.js
+++ b/static/js/frame.js
@@ -37,6 +37,7 @@ function setupCameraFrame() {
     var cameraProgress = cameraFrameDiv.find('div.camera-progress');
     var cameraImg = cameraFrameDiv.find('img.camera');
     var progressImg = cameraFrameDiv.find('img.camera-progress');
+    var body = $('body');
     
     cameraFrameDiv[0].refreshDivider = 0;
     cameraFrameDiv[0].streamingFramerate = parseInt(cameraFrameDiv.attr('streaming_framerate')) || 1;
@@ -67,9 +68,17 @@ function setupCameraFrame() {
         this.loading = 0;
         
         cameraImg.removeClass('error').removeClass('loading');
-        cameraImg.css('height', '');
         cameraPlaceholder.css('opacity', 0);
         cameraProgress.removeClass('visible');
+        
+        if (this.naturalWidth / this.naturalHeight > body.width() / body.height()) {
+            cameraImg.css('width', '100%');
+            cameraImg.css('height', 'auto');
+        }
+        else {
+            cameraImg.css('width', 'auto');
+            cameraImg.css('height', '100%');
+        }
     });
     
     cameraImg.addClass('loading');

diff --git a/static/js/main.js b/static/js/main.js
index 820a9e37e6aa9c39e9e1a6600eaa2297b3ed3bdc..07fb3d36a532a20fbe4c42a6d39b00be220ec42f 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1782,6 +1782,7 @@ function addCameraFrameUi(cameraConfig) {
                 '<div class="camera-top-bar">' +
                     '<span class="camera-name"></span>' +
                     '<div class="camera-buttons">' +
+                        '<div class="button camera-button mouse-effect full-screen" title="full-screen window"></div>' +
                         '<div class="button camera-button mouse-effect media-pictures" title="pictures"></div>' +
                         '<div class="button camera-button mouse-effect media-movies" title="movies"></div>' +
                         '<div class="button camera-button mouse-effect configure" title="configure"></div>' +
@@ -1798,6 +1799,7 @@ function addCameraFrameUi(cameraConfig) {
     var configureButton = cameraFrameDiv.find('div.camera-button.configure');
     var picturesButton = cameraFrameDiv.find('div.camera-button.media-pictures');
     var moviesButton = cameraFrameDiv.find('div.camera-button.media-movies');
+    var fullScreenButton = cameraFrameDiv.find('div.camera-button.full-screen');
     var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
     var cameraProgress = cameraFrameDiv.find('div.camera-progress');
     var cameraImg = cameraFrameDiv.find('img.camera');
@@ -1860,6 +1862,12 @@ function addCameraFrameUi(cameraConfig) {
         };
     }(cameraId));
     
+    fullScreenButton.click(function (cameraId) {
+        return function () {
+            window.open(window.location.href + 'picture/' + cameraId + '/frame/', '_blank');
+        };
+    }(cameraId));
+    
     /* error and load handlers */
     cameraImg.error(function () {
         this.error = true;

diff --git a/templates/frame.html b/templates/frame.html
index 6b3635a5f890f5a6257c4c71c91c2dd267ad1e8e..ee0d3d365674edef50f8e11916012feca29031fb 100644 (file)
--- a/templates/frame.html
+++ b/templates/frame.html
@@ -15,9 +15,8 @@
             streaming_framerate="{{camera_config['stream_maxrate']}}" streaming_server_resize="{{camera_config['@webcam_server_resize']}}">
         
         <div class="camera-container">
-            <div class="camera-placeholder"><img class="no-camera" src="{{STATIC_URL}}img/no-camera.svg"></div>
-            <img class="camera">
-            <div class="camera-progress"><img class="camera-progress"></div>
+            <div class="camera-placeholder"><img class="no-camera" src="{{STATIC_URL}}img/no-camera.svg"></div><img
+                class="camera"><div class="camera-progress"><img class="camera-progress"></div>
         </div>
     </div>
 {% endblock %}