added a full screen functionality

diff --git a/doc/todo.txt b/doc/todo.txt
index 1d151b87fce6a13f753f0c46188251141742f688..dcc70f02ba9083ddaf3a9f50091f5f6ab2a1ff18 100644 (file)
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,5 +1,4 @@
 -> add an autoupdate mechanism
--> click to zoom on cameras
 -> make camera frames positions configurable
 -> add a view log functionality
 -> add a previewer for movies

diff --git a/static/css/main.css b/static/css/main.css
index 05c2c79a5d33b44b8f4f7151a1ba6fecb31ab4bd..44ba644e33296bdf5f1a920a7b1e32537ab6a9b3 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -301,6 +301,7 @@ div.camera-list {
 }
 
 div.camera-frame {
+    position: relative;
     width: 32%;
     text-align: left;
     background-color: #313131;
@@ -312,6 +313,13 @@ div.camera-frame {
     opacity: 0;
 }
 
+div.modal-container div.camera-frame {
+    width: auto;
+    padding: 5px;
+    margin: -10px;
+    background-color: #414141;
+}
+
 div.camera-frame:HOVER {
     background-color: #414141;
 }
@@ -322,6 +330,10 @@ div.camera-top-bar {
     height: 17px;
 }
 
+div.modal-container div.camera-top-bar {
+    display: none;
+}
+
 span.camera-name {
     float: left;
 }
@@ -345,6 +357,10 @@ div.camera-button.close {
     background-position: 0px 0px;
 }
 
+div.camera-button.full-screen {
+    background-position: -32px 0px;
+}
+
 div.camera-button.configure {
     background-position: -16px 0px;
 }

diff --git a/static/img/top-bar-buttons.svg b/static/img/top-bar-buttons.svg
index a65569ae9d2da38d7ad66396f835e351a2540158..32203ba8dcd42aa30c75469004fadec49bcd6ca3 100644 (file)
--- a/static/img/top-bar-buttons.svg
+++ b/static/img/top-bar-buttons.svg
@@ -9,7 +9,7 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="32"
+   width="48"
    height="16"
    id="svg2"
    version="1.1"
@@ -27,9 +27,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="11.074219"
-     inkscape:cx="44.699099"
-     inkscape:cy="-20.220877"
+     inkscape:zoom="1"
+     inkscape:cx="35.119687"
+     inkscape:cy="7.4678179"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -72,13 +72,13 @@
      transform="translate(0,-1036.3622)">
     <path
        sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845000000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        id="path3752"
        sodipodi:cx="7.8036885"
        sodipodi:cy="8.2353296"
        sodipodi:rx="5.6186557"
        sodipodi:ry="5.3845448"
-       d="m 13.422344,8.2353296 c 0,2.9738024 -2.515558,5.3845444 -5.6186555,5.3845444 -3.1030978,0 -5.6186557,-2.410742 -5.6186557,-5.3845444 0,-2.973802 2.5155579,-5.3845448 5.6186557,-5.3845448 3.1030975,0 5.6186555,2.4107428 5.6186555,5.3845448 z"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
        transform="matrix(1.1568604,0,0,1.2071587,-1.0277779,1034.4208)" />
     <path
        style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
@@ -95,13 +95,13 @@
        style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
     <path
        sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845000000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
        id="path3792"
        sodipodi:cx="7.8036885"
        sodipodi:cy="8.2353296"
        sodipodi:rx="5.6186557"
        sodipodi:ry="5.3845448"
-       d="m 13.422344,8.2353296 c 0,2.9738024 -2.515558,5.3845444 -5.6186555,5.3845444 -3.1030978,0 -5.6186557,-2.410742 -5.6186557,-5.3845444 0,-2.973802 2.5155579,-5.3845448 5.6186557,-5.3845448 3.1030975,0 5.6186555,2.4107428 5.6186555,5.3845448 z"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
        transform="matrix(-1.1568604,0,0,1.2071587,33.027778,1034.4209)" />
     <path
        sodipodi:nodetypes="cc"
@@ -133,5 +133,21 @@
        id="path3802"
        d="m 25.5,1040.8622 -1,1"
        style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+    <path
+       transform="matrix(-1.1568604,0,0,1.2071587,49.027778,1034.4209)"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
+       sodipodi:ry="5.3845448"
+       sodipodi:rx="5.6186557"
+       sodipodi:cy="8.2353296"
+       sodipodi:cx="7.8036885"
+       id="path3759"
+       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path3761"
+       d="m 36.5,1041.8622 7,0 0,5 -7,0 z"
+       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
   </g>
 </svg>

diff --git a/static/js/main.js b/static/js/main.js
index ed82a7a7aa76b421318c6d30af04ed15f113b402..b326c59e77572e1a9dfd6cc0a66821db1994eb1b 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,6 +1,7 @@
 
 var pushConfigs = {};
 var refreshDisabled = 0;
+var fullScreenCameraId = null;
 
 
     /* utils */
@@ -1155,7 +1156,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
                     '<span class="camera-name"></span>' +
                     '<div class="camera-buttons">' +
                         '<div class="button camera-button mouse-effect configure" title="configure"></div>' +
-                        '<div class="button camera-button mouse-effect close" title="close"></div>' +
+                        '<div class="button camera-button mouse-effect full-screen" title="full screen"></div>' +
                     '</div>' +
                 '</div>' +
                 '<div class="camera-container">' +
@@ -1167,7 +1168,7 @@ 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 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');
@@ -1176,7 +1177,6 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
     /* no camera buttons if not admin */
     if (user !== 'admin') {
         configureButton.hide();
-        closeButton.hide();
     }
     
     cameraFrameDiv.attr('id', 'camera' + cameraId);
@@ -1213,8 +1213,8 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
         doConfigureCamera(cameraId);
     });
 
-    closeButton.click(function () {
-        doCloseCamera(cameraId);
+    fullScreenButton.click(function () {
+        doFullScreenCamera(cameraId);
     });
     
     /* error and load handlers */
@@ -1297,10 +1297,12 @@ function recreateCameraFrames(cameras) {
     }
 }
 
+
 function doConfigureCamera(cameraId) {
     openSettings(cameraId);
 }
 
+    /* not used anymore */
 function doCloseCamera(cameraId) {
     remCameraFrameUi(cameraId);
     showProgress();
@@ -1329,6 +1331,51 @@ function doCloseCamera(cameraId) {
     });
 }
 
+function doFullScreenCamera(cameraId) {
+    if (fullScreenCameraId != null) {
+        return; /* a camera is already in full screen */
+    }
+    
+    var cameraFrameDiv = $('#camera' + cameraId);
+    var cameraName = cameraFrameDiv.find('span.camera-name').text();
+    var frameImg = cameraFrameDiv.find('img.camera');
+    var aspectRatio = frameImg.width() / frameImg.height();
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
+    var windowAspectRatio = windowWidth / windowHeight;
+    var frameIndex = cameraFrameDiv.index();
+    var pageContainer = $('div.page-container');
+
+    fullScreenCameraId = cameraId;
+
+    var width;
+    if (windowAspectRatio > aspectRatio) {
+        width = aspectRatio * Math.round(0.8 * windowHeight);
+    }
+    else {
+        width = Math.round(0.9 * windowWidth);
+    }
+    cameraFrameDiv.css('width', width);
+    
+    runModalDialog({
+        title: cameraName,
+        closeButton: true,
+        //buttons: null,
+        content: cameraFrameDiv,
+        onClose: function () {
+            fullScreenCameraId = null;
+            cameraFrameDiv.css('width', '');
+            var nextFrame = pageContainer.find('div.camera-frame:eq(' + frameIndex + ')');
+            if (nextFrame.length) {
+                nextFrame.before(cameraFrameDiv);
+            }
+            else {
+                pageContainer.append(cameraFrameDiv);
+            }
+        }
+    });
+}
+
 function refreshCameraFrames() {
     if (refreshDisabled) {
         /* camera refreshing disabled, retry later */
@@ -1347,7 +1394,14 @@ function refreshCameraFrames() {
         img.src = '/snapshot/' + cameraId + '/current/?_=' + timestamp;
     }
     
-    var cameraFrames = $('div.page-container').find('div.camera-frame');
+    var cameraFrames;
+    if (fullScreenCameraId != null) {
+        cameraFrames = $('#camera' + fullScreenCameraId);
+    }
+    else {
+        cameraFrames = $('div.page-container').find('div.camera-frame');
+    }
+    
     cameraFrames.each(function () {
         /* limit the refresh rate to 10 fps */
         var count = Math.max(1, 10 / this.framerate);