From bd90ce107622bd2b961765468613972afcd4266b Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 4 Dec 2016 17:53:56 +0200
Subject: [PATCH] the number of rows when laying out frames is now configurable
 as a preference

---
 motioneye/prefs.py            |  1 +
 motioneye/static/css/main.css |  1 -
 motioneye/static/js/main.js   | 16 +++++++++++++---
 motioneye/templates/main.html |  7 ++++++-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/motioneye/prefs.py b/motioneye/prefs.py
index d43ab3d..0b3a8c1 100644
--- a/motioneye/prefs.py
+++ b/motioneye/prefs.py
@@ -26,6 +26,7 @@ _PREFS_FILE_NAME = 'prefs.json'
 _DEFAULT_PREFS = {
     'layout_columns': 3,
     'fit_frames_vertically': True,
+    'layout_rows': 1,
     'framerate_factor': 1,
     'resolution_factor': 1
 }
diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 52e3601..4ad129e 100644
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -1228,7 +1228,6 @@ img.camera {
     display: block;
     transition: opacity 0.2s ease;
     opacity: 1;
-    min-height: 160px;
 }
 
 img.camera.error,
diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index 32e37fa..016b2f1 100644
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -16,6 +16,7 @@ var pageContainer = null;
 var overlayVisible = false;
 var layoutColumns = 1;
 var fitFramesVertically = false;
+var layoutRows = 1;
 
 
     /* Object utilities */
@@ -734,6 +735,11 @@ function initUI() {
         updateLayout();
         savePrefs();
     });
+    $('#layoutRowsSlider').change(function () {
+        layoutRows = parseInt(this.value);
+        updateLayout();
+        savePrefs();
+    });
     $('#framerateDimmerSlider').change(function () {
         framerateFactor = parseInt(this.value) / 100;
         savePrefs();
@@ -972,7 +978,8 @@ function setLayoutColumns(columns) {
 function updateLayout() {
     if (fitFramesVertically) {
         /* make sure the height of each camera
-         * is smaller than the height of the screen */
+         * is smaller than the height of the screen
+         * divided by the number of layout rows */
         
         /* find the tallest frame */
         var frames = getCameraFrames();
@@ -1005,7 +1012,7 @@ function updateLayout() {
         }
     
         var windowHeight = $(window).height() - heightOffset;
-        var ratio = maxHeightFrame.width() / maxHeightFrame.height();
+        var ratio = maxHeightFrame.width() / maxHeightFrame.height() / layoutRows;
         var width = parseInt(ratio * windowHeight * columns);
         var maxWidth = windowWidth;
         
@@ -1604,8 +1611,9 @@ function configUiValid() {
 
 function prefsUi2Dict() {
     var dict = {
-        'layout_columns': $('#layoutColumnsSlider').val(),
+        'layout_columns': parseInt($('#layoutColumnsSlider').val()),
         'fit_frames_vertically': $('#fitFramesVerticallySwitch')[0].checked,
+        'layout_rows': parseInt($('#layoutRowsSlider').val()),
         'framerate_factor': $('#framerateDimmerSlider').val() / 100,
         'resolution_factor': $('#resolutionDimmerSlider').val() / 100
     };
@@ -1616,6 +1624,7 @@ function prefsUi2Dict() {
 function dict2PrefsUi(dict) {
     $('#layoutColumnsSlider').val(dict['layout_columns']);
     $('#fitFramesVerticallySwitch')[0].checked = dict['fit_frames_vertically'];
+    $('#layoutRowsSlider').val(dict['layout_rows']);
     $('#framerateDimmerSlider').val(dict['framerate_factor'] * 100);
     $('#resolutionDimmerSlider').val(dict['resolution_factor'] * 100);
 
@@ -1625,6 +1634,7 @@ function dict2PrefsUi(dict) {
 function applyPrefs(dict) {
     setLayoutColumns(dict['layout_columns']);
     fitFramesVertically = dict['fit_frames_vertically']
+    layoutRows = dict['layout_rows'];
     framerateFactor = dict['framerate_factor'];
     resolutionFactor = dict['resolution_factor'];
     
diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index 9a7cdf0..d7de62a 100644
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -112,11 +112,16 @@
                         <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">
+                    <tr class="settings-item">
                         <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="1" max="4" snap="1" ticksnum="4" decimals="0" id="layoutRows" depends="fitFramesVertically">
+                        <td class="settings-item-label"><span class="settings-item-label">Layout Rows</span></td>
+                        <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutRowsSlider"></td>
+                        <td><span class="help-mark" title="configures the number of rows used to lay out the camera frames">?</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>
-- 
2.39.5