From: Calin Crisan Date: Sun, 20 Dec 2015 16:26:38 +0000 (+0200) Subject: vertical fit is now optional X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=36fc969964de15b38239c0ea5888de85b3367a26;p=motioneye-debian vertical fit is now optional --- diff --git a/motioneye/prefs.py b/motioneye/prefs.py index e94ed7d..d43ab3d 100644 --- 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 563d97f..c8100cf 100644 --- 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 b5dcfa1..fcbe117 100644 --- 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 f0d3ab8..6b35a88 100644 --- a/motioneye/templates/main.html +++ b/motioneye/templates/main.html @@ -109,6 +109,11 @@ ? + + Fit Frames Vertically + + ? + Frame Rate Dimmer