vertical fit is now optional

diff --git a/motioneye/prefs.py b/motioneye/prefs.py
index e94ed7d9833f1f926e431be8bf61e371a97338ca..d43ab3df73021d20ab1e4cb159b4e27963430ce0 100644 (file)
--- a/motioneye/prefs.py
+++ b/motioneye/prefs.py
@@ -25,6 +25,7 @@ import settings
 _PREFS_FILE_NAME = 'prefs.json'
 _DEFAULT_PREFS = {
     'layout_columns': 3,
+    'fit_frames_vertically': True,
     'framerate_factor': 1,
     'resolution_factor': 1
 }

diff --git a/motioneye/settings.py b/motioneye/settings.py
index 563d97f9d19637b0d13263f47fb2df2f86c830c4..c8100cf1ce20814bca5c77df90b59b3cb708cbd2 100644 (file)
--- a/motioneye/settings.py
+++ b/motioneye/settings.py
@@ -107,7 +107,7 @@ ENABLE_UPDATE = False
 # timeout in seconds to use when talking to the SMTP server
 SMTP_TIMEOUT = 60
 
-# timeout in seconds to wait media files list
+# timeout in seconds to wait for media files list
 LIST_MEDIA_TIMEOUT = 120
 
 # timeout in seconds to wait for zip file creation

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index b5dcfa1c8b5b695b38316b88d13978c3fc7b8121..fcbe11726b2d42c25fc72082121aadbd4a4797d0 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -15,6 +15,7 @@ var initialConfigFetched = false; /* used to workaround browser extensions that
 var pageContainer = null;
 var overlayVisible = false;
 var layoutColumns = 1;
+var fitFramesVertically = false;
 
 
     /* Object utilities */
@@ -701,6 +702,11 @@ function initUI() {
         setLayoutColumns(columns);
         savePrefs();
     });
+    $('#fitFramesVerticallySwitch').change(function () {
+        fitFramesVertically = this.checked;
+        updateLayout();
+        savePrefs();
+    });
     $('#framerateDimmerSlider').change(function () {
         framerateFactor = parseInt(this.value) / 100;
         savePrefs();
@@ -886,58 +892,63 @@ function setLayoutColumns(columns) {
 }
 
 function updateLayout() {
-    /* make sure the height of each camera
-     * is smaller than the height of the screen */
-    
-    /* find the tallest frame */
-    var frames = getCameraFrames();
-    var maxHeight = -1;
-    var maxHeightFrame = null;
-    frames.each(function () {
-        var frame = $(this);
-        var height = frame.height();
-        if (height > maxHeight) {
-            maxHeight = height;
-            maxHeightFrame = frame;
+    if (fitFramesVertically) {
+        /* make sure the height of each camera
+         * is smaller than the height of the screen */
+        
+        /* find the tallest frame */
+        var frames = getCameraFrames();
+        var maxHeight = -1;
+        var maxHeightFrame = null;
+        frames.each(function () {
+            var frame = $(this);
+            var height = frame.height();
+            if (height > maxHeight) {
+                maxHeight = height;
+                maxHeightFrame = frame;
+            }
+        });
+        
+        if (!maxHeightFrame) {
+            return; /* no camera frames */
+        }
+        
+        var pageContainer = getPageContainer();
+        var windowWidth = $(window).width();
+        
+        var columns = layoutColumns;
+        if (isFullScreen() || windowWidth < 1200) {
+            columns = 1; /* always 1 column when in full screen or mobile */
+        }
+        
+        var heightOffset = 10; /* some padding */
+        if (!isFullScreen()) {
+            heightOffset += 50; /* top bar */
         }
-    });
-    
-    if (!maxHeightFrame) {
-        return; /* no camera frames */
-    }
-    
-    var pageContainer = getPageContainer();
-    var windowWidth = $(window).width();
-    
-    var columns = layoutColumns;
-    if (isFullScreen() || windowWidth < 1200) {
-        columns = 1; /* always 1 column when in full screen or mobile */
-    }
-    
-    var heightOffset = 10; /* some padding */
-    if (!isFullScreen()) {
-        heightOffset += 50; /* top bar */
-    }
-
-    var windowHeight = $(window).height() - heightOffset;
-    var ratio = maxHeightFrame.width() / maxHeightFrame.height();
-    var width = parseInt(ratio * windowHeight * columns);
-    var maxWidth = windowWidth;
-    
-    if (pageContainer.hasClass('stretched')) {
-        maxWidth *= 0.6; /* opened settings panel occupies 40% of the window width */ 
-    }
     
-    if (width < 100) {
-        width = 100; /* absolute minimum width for a frame */;
+        var windowHeight = $(window).height() - heightOffset;
+        var ratio = maxHeightFrame.width() / maxHeightFrame.height();
+        var width = parseInt(ratio * windowHeight * columns);
+        var maxWidth = windowWidth;
+        
+        if (pageContainer.hasClass('stretched') && windowWidth > 1000) {
+            maxWidth *= 0.6; /* opened settings panel occupies 40% of the window width */ 
+        }
+        
+        if (width < 100) {
+            width = 100; /* absolute minimum width for a frame */
+        }
+        
+        if (width > maxWidth) {
+            getPageContainer().css('width', '');
+            return; /* page container width already at its maximum */
+        }
+        
+        getPageContainer().css('width', width);
     }
-    
-    if (width > maxWidth) {
+    else {
         getPageContainer().css('width', '');
-        return; /* page container width already at its maximum */
     }
-    
-    getPageContainer().css('width', width);
 }
 
 function showCameraOverlay() {
@@ -1267,6 +1278,7 @@ function configUiValid() {
 function prefsUi2Dict() {
     var dict = {
         'layout_columns': $('#layoutColumnsSlider').val(),
+        'fit_frames_vertically': $('#fitFramesVerticallySwitch')[0].checked,
         'framerate_factor': $('#framerateDimmerSlider').val() / 100,
         'resolution_factor': $('#resolutionDimmerSlider').val() / 100
     };
@@ -1276,6 +1288,7 @@ function prefsUi2Dict() {
 
 function dict2PrefsUi(dict) {
     $('#layoutColumnsSlider').val(dict['layout_columns']);
+    $('#fitFramesVerticallySwitch')[0].checked = dict['fit_frames_vertically'];
     $('#framerateDimmerSlider').val(dict['framerate_factor'] * 100);
     $('#resolutionDimmerSlider').val(dict['resolution_factor'] * 100);
 
@@ -1284,6 +1297,7 @@ function dict2PrefsUi(dict) {
 
 function applyPrefs(dict) {
     setLayoutColumns(dict['layout_columns']);
+    fitFramesVertically = dict['fit_frames_vertically']
     framerateFactor = dict['framerate_factor'];
     resolutionFactor = dict['resolution_factor'];
 }

diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index f0d3ab8329e32a1bcbe6133e79c3764ac64461fd..6b35a8814d99b90ba25ba73d96e8be7214b2a098 100644 (file)
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -109,6 +109,11 @@
                         <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutColumnsSlider"></td>
                         <td><span class="help-mark" title="configures the number of columns used to lay out the camera frames">?</span></td>
                     </tr>
+                    <tr class="settings-item" min="1" max="4" snap="1" ticksnum="4" decimals="0" id="fitFramesVerticallyRow">
+                        <td class="settings-item-label"><span class="settings-item-label">Fit Frames Vertically</span></td>
+                        <td class="settings-item-value"><input type="checkbox" class="styled prefs" id="fitFramesVerticallySwitch"></td>
+                        <td><span class="help-mark" title="controls whether frame sizes can be reduced to vertically fit the window or not">?</span></td>
+                    </tr>
                     <tr class="settings-item" min="0" max="100" snap="2" ticksnum="6" decimals="0">
                         <td class="settings-item-label"><span class="settings-item-label">Frame Rate Dimmer</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled prefs" id="framerateDimmerSlider"></td>