From: Calin Crisan Date: Sun, 29 Sep 2013 09:56:03 +0000 (+0300) Subject: got rid of base-site X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=f7a110a01873adb89ac1a12e656a998afed0a5b2;p=motioneye-debian got rid of base-site --- diff --git a/motioneye.py b/motioneye.py index f62efd4..bd5e1ed 100644 --- a/motioneye.py +++ b/motioneye.py @@ -41,9 +41,9 @@ def _start_server(): if __name__ == '__main__': -# _configure_signals() -# _configure_logging() -# _start_server() + _configure_signals() + _configure_logging() + _start_server() # import config # main_config = config.get_main() @@ -53,6 +53,5 @@ if __name__ == '__main__': # #config.set_camera(1, data) # config.rem_camera(1) - import motionctl - - motionctl.start() +# import motionctl +# motionctl.start() diff --git a/src/config.py b/src/config.py index 86273d0..a87b4c4 100644 --- a/src/config.py +++ b/src/config.py @@ -477,7 +477,7 @@ def _set_default_motion_camera(data): data.setdefault('@network_share_name', '') data.setdefault('@network_username', '') data.setdefault('@network_password', '') - data.setdefault('target_dir', '.') + data.setdefault('target_dir', settings.RUN_PATH) data.setdefault('webcam_localhost', False) data.setdefault('webcam_port', 8080) diff --git a/src/motionctl.py b/src/motionctl.py index 507f584..6c7cce1 100644 --- a/src/motionctl.py +++ b/src/motionctl.py @@ -35,7 +35,7 @@ def start(): log_file = open(motion_log_path, 'w') process = subprocess.Popen(args, stdout=log_file, stderr=log_file, close_fds=True, - cwd=settings.RUN_PATH) + cwd=settings.CONF_PATH) # wait 2 seconds to see that the process has successfully started for i in xrange(20): # @UnusedVariable diff --git a/static/css/base-site.css b/static/css/base-site.css deleted file mode 100644 index c104b06..0000000 --- a/static/css/base-site.css +++ /dev/null @@ -1,295 +0,0 @@ - - - /* fonts */ - -@font-face { - font-family: 'Maven Pro'; - src: url('../fnt/mavenpro-regular-webfont.eot'); - src: url('../fnt/mavenpro-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fnt/mavenpro-regular-webfont.woff') format('woff'), - url('../fnt/mavenpro-regular-webfont.ttf') format('truetype'), - url('../fnt/mavenpro-regular-webfont.svg#maven_proregular') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'Maven Pro'; - src: url('../fnt/mavenpro-bold-webfont.eot'); - src: url('../fnt/mavenpro-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fnt/mavenpro-bold-webfont.woff') format('woff'), - url('../fnt/mavenpro-bold-webfont.ttf') format('truetype'), - url('../fnt/mavenpro-bold-webfont.svg#maven_probold') format('svg'); - font-weight: bold; - font-style: normal; -} - - - /* layout */ - -html { - font-family: 'Maven Pro'; -} - -div.page, -div.header-container { - position: relative; - min-width: 320px; - width: 100%; -} - -div.page { - margin-top: 50px; - padding-bottom: 20px; - font-size: 1em; - transition: all 0.5s linear; -} - -div.header { - background-color: rgba(64, 64, 64, 0.5); - top: 0px; - width: 100%; - height: 50px; - position: fixed; - overflow: hidden; - z-index: 10000; -} - -div.header-container { - transition: all 0.5s linear; -} - -div.footer { - position: absolute; - bottom: 0px; - width: 100%; - height: 20px; - font-size: 0.5em; - color: #aaa; - text-align: center; -} - -div.page-container { - transition: all 0.2s linear; - padding: 5px; -} - -div.page-container.stretched { - margin-left: 40%; -} - - - /* settings */ - -div.settings { - background-color: #313131; - position: fixed; - z-index: 1; - top: 50px; - left: 0px; - width: 0px; - height: 100%; - transition: all 0.2s linear; - overflow: auto; -} - -div.settings.open { - width: 40%; - min-width: 320px; -} - -div.settings-container { - padding-top: 10px; - padding-bottom: 60px; - display: none; - white-space: nowrap; -} - -div.settings.open div.settings-container { - display: block; -} - -div.settings-top-bar { - position: relative; - display: inline-block; - width: 40%; - height: 50px; -} - -div.settings-top-bar.open { - background-color: #414141; - min-width: 320px; -} - -div.settings-section-title { - position: relative; - text-align: right; - background-color: rgba(100, 100, 100, 0.3); - padding: 5px; -} - -table.settings { - width: 100%; - padding: 0.5em 0.5em 1em 0.5em; -} - -td.settings-item-label { - width: 50%; - text-align: right; - padding-right: 5px; -} - -td.settings-item-value { - width: 50%; - text-align: left; - padding-left: 5px; -} - -span.settings-item-label { - font-size: 0.9em; -} - -span.settings-item-unit { - font-size: 0.6em; - padding: 0px 0.2em; -} - -div.settings-item-separator { - height: 1px; - border-top: 1px solid #414141; - margin: 5px 0px; -} - -select.video-device { - display: none; - padding: 4px 1.5em 4px 4px; - vertical-align: middle; - font-size: 20px; - width: auto; - max-width: 40%; -} - -div.apply-button { - position: relative; - display: none; - opacity: 0; - float: right; - width: 80px; - height: 30px; - line-height: 30px; - text-align: center; - margin: 10px; - color: white; - font-weight: bold; - font-size: 17px; - background-color: #FF6F00; - border-radius: 3px; - transition: all 0.1s linear; -} - -div.apply-button:HOVER { - background-color: #FF7D19; -} - -div.apply-button:ACTIVE { - background-color: #F06800; -} - -div.apply-button.progress { - background-color: #FF6F00; -} - -img.apply-progress { - margin-top: 3px; -} - -div.settings-top-bar.open select.video-device { - display: inline; -} - -div.check-box.section { - margin: 0px; - float: left; -} - -div.check-box.section div.check-box-button { - background-color: #515151; -} - -div.check-box.on.section div.check-box-button { - background-color: #3498db; -} - -input[type=text].working-schedule.number { - width: 50px; -} - - - /* media queries */ - -@media all and (max-width: 1440px) { - /* smaller screens */ - - body { - font-size: 17px; - } -} - -@media all and (max-width: 1000px) { - /* small screens (mobile devices) */ - - div.page-container.stretched { - margin-left: 0px; - } - - div.settings.open { - box-shadow: 0px 0px 10px rgba(0,0,0,0.5); - background-color: rgba(40, 40, 40, 0.9); - } -} - -@media all and (max-width: 400px) { - /* very small screens */ - - body { - font-size: 13px; - } -} - - - /* links */ - -a { - color: inherit; - text-decoration: inherit; -} - - - /* icons */ - -img.settings-button { - margin: 2px; - cursor: pointer; - vertical-align: middle; -} - -div.logo { - float: right; - display: inline-block; - white-space: nowrap; - opacity: 0.86; -} - -span.logo { - vertical-align: middle; - font-size: 27px; - font-weight: bold; - position: relative; - top: 3px; -} - -img.logo { - width: 48px; - height: 48px; - vertical-align: middle; -} diff --git a/static/css/main.css b/static/css/main.css index 6214374..a4994e2 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,4 +1,232 @@ + + /* fonts */ + +@font-face { + font-family: 'Maven Pro'; + src: url('../fnt/mavenpro-regular-webfont.eot'); + src: url('../fnt/mavenpro-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fnt/mavenpro-regular-webfont.woff') format('woff'), + url('../fnt/mavenpro-regular-webfont.ttf') format('truetype'), + url('../fnt/mavenpro-regular-webfont.svg#maven_proregular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Maven Pro'; + src: url('../fnt/mavenpro-bold-webfont.eot'); + src: url('../fnt/mavenpro-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fnt/mavenpro-bold-webfont.woff') format('woff'), + url('../fnt/mavenpro-bold-webfont.ttf') format('truetype'), + url('../fnt/mavenpro-bold-webfont.svg#maven_probold') format('svg'); + font-weight: bold; + font-style: normal; +} + + + /* layout */ + +html { + font-family: 'Maven Pro'; +} + +div.page, +div.header-container { + position: relative; + min-width: 320px; + width: 100%; +} + +div.page { + margin-top: 50px; + padding-bottom: 20px; + font-size: 1em; + transition: all 0.5s linear; +} + +div.header { + background-color: rgba(64, 64, 64, 0.5); + top: 0px; + width: 100%; + height: 50px; + position: fixed; + overflow: hidden; + z-index: 10000; +} + +div.header-container { + transition: all 0.5s linear; +} + +div.footer { + position: absolute; + bottom: 0px; + width: 100%; + height: 20px; + font-size: 0.5em; + color: #aaa; + text-align: center; +} + +div.page-container { + transition: all 0.2s linear; + padding: 5px; +} + +div.page-container.stretched { + margin-left: 40%; +} + + + /* settings */ + +div.settings { + background-color: #313131; + position: fixed; + z-index: 1; + top: 50px; + left: 0px; + width: 0px; + height: 100%; + transition: all 0.2s linear; + overflow: auto; +} + +div.settings.open { + width: 40%; + min-width: 320px; +} + +div.settings-container { + padding-top: 10px; + padding-bottom: 60px; + display: none; + white-space: nowrap; +} + +div.settings.open div.settings-container { + display: block; +} + +div.settings-top-bar { + position: relative; + display: inline-block; + width: 40%; + height: 50px; +} + +div.settings-top-bar.open { + background-color: #414141; + min-width: 320px; +} + +div.settings-section-title { + position: relative; + text-align: right; + background-color: rgba(100, 100, 100, 0.3); + padding: 5px; +} + +table.settings { + width: 100%; + padding: 0.5em 0.5em 1em 0.5em; +} + +td.settings-item-label { + width: 50%; + text-align: right; + padding-right: 5px; +} + +td.settings-item-value { + width: 50%; + text-align: left; + padding-left: 5px; +} + +span.settings-item-label { + font-size: 0.9em; +} + +span.settings-item-unit { + font-size: 0.6em; + padding: 0px 0.2em; +} + +div.settings-item-separator { + height: 1px; + border-top: 1px solid #414141; + margin: 5px 0px; +} + +select.video-device { + display: none; + padding: 4px 1.5em 4px 4px; + vertical-align: middle; + font-size: 20px; + width: auto; + max-width: 40%; +} + +div.apply-button { + position: relative; + display: none; + opacity: 0; + float: right; + width: 80px; + height: 30px; + line-height: 30px; + text-align: center; + margin: 10px; + color: white; + font-weight: bold; + font-size: 17px; + background-color: #FF6F00; + border-radius: 3px; + transition: all 0.1s linear; +} + +div.apply-button:HOVER { + background-color: #FF7D19; +} + +div.apply-button:ACTIVE { + background-color: #F06800; +} + +div.apply-button.progress { + background-color: #FF6F00; +} + +img.apply-progress { + margin-top: 3px; +} + +div.settings-top-bar.open select.video-device { + display: inline; +} + +div.check-box.section { + margin: 0px; + float: left; +} + +div.check-box.section div.check-box-button { + background-color: #515151; +} + +div.check-box.on.section div.check-box-button { + background-color: #3498db; +} + +input[type=text].working-schedule.number { + width: 50px; +} + + + /* camera frames */ + div.video-list { text-align: center; } @@ -71,6 +299,35 @@ img.video { /* media queries */ +@media all and (max-width: 1440px) { + /* smaller screens */ + + body { + font-size: 17px; + } +} + +@media all and (max-width: 1000px) { + /* small screens (mobile devices) */ + + div.page-container.stretched { + margin-left: 0px; + } + + div.settings.open { + box-shadow: 0px 0px 10px rgba(0,0,0,0.5); + background-color: rgba(40, 40, 40, 0.9); + } +} + +@media all and (max-width: 400px) { + /* very small screens */ + + body { + font-size: 13px; + } +} + @media all and (max-width: 1900px) { /* a bit smaller screens */ @@ -86,3 +343,41 @@ img.video { width: 98%; } } + + + /* links */ + +a { + color: inherit; + text-decoration: inherit; +} + + + /* icons */ + +img.settings-button { + margin: 2px; + cursor: pointer; + vertical-align: middle; +} + +div.logo { + float: right; + display: inline-block; + white-space: nowrap; + opacity: 0.86; +} + +span.logo { + vertical-align: middle; + font-size: 27px; + font-weight: bold; + position: relative; + top: 3px; +} + +img.logo { + width: 48px; + height: 48px; + vertical-align: middle; +} diff --git a/static/js/base-site.js b/static/js/base-site.js deleted file mode 100644 index bd3ab37..0000000 --- a/static/js/base-site.js +++ /dev/null @@ -1,691 +0,0 @@ - -var pushConfigs = {}; - - - /* utils */ - -function ajax(method, url, data, callback) { - var options = { - type: method, - url: url, - data: data, - cache: false, - success: callback, - error: function (request, options, error) { - alert('Request failed with code: ' + request.status); - if (callback) { - callback(); - } - } - }; - - if (data && typeof data === 'object') { - options['contentType'] = 'application/json'; - options['data'] = JSON.stringify(options['data']); - } - - $.ajax(options); -} - -Object.keys = Object.keys || (function () { - var hasOwnProperty = Object.prototype.hasOwnProperty; - var hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'); - var dontEnums = [ - 'toString', - 'toLocaleString', - 'valueOf', - 'hasOwnProperty', - 'isPrototypeOf', - 'propertyIsEnumerable', - 'constructor' - ]; - var dontEnumsLength = dontEnums.length; - - return function (obj) { - if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) { - return []; - } - - var result = []; - for (var prop in obj) { - if (hasOwnProperty.call(obj, prop)) { - result.push(prop); - } - } - - if (hasDontEnumBug) { - for (var i = 0; i < dontEnumsLength; i++) { - if (hasOwnProperty.call(obj, dontEnums[i])) { - result.push(dontEnums[i]); - } - } - } - - return result; - }; -})(); - - - /* UI */ - -function initUI() { - /* checkboxes */ - $('input[type=checkbox].styled').each(function () { - makeCheckBox($(this)); - }); - - /* sliders */ - makeSlider($('#brightnessSlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#contrastSlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#saturationSlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#hueSlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#framerateSlider'), 1, 30, 0, [ - {value: 1, label: '1'}, - {value: 5, label: '5'}, - {value: 10, label: '10'}, - {value: 15, label: '15'}, - {value: 20, label: '20'}, - {value: 25, label: '25'}, - {value: 30, label: '30'} - ], null, 0); - makeSlider($('#streamingFramerateSlider'), 1, 30, 0, [ - {value: 1, label: '1'}, - {value: 5, label: '5'}, - {value: 10, label: '10'}, - {value: 15, label: '15'}, - {value: 20, label: '20'}, - {value: 25, label: '25'}, - {value: 30, label: '30'} - ], null, 0); - makeSlider($('#streamingQualitySlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#imageQualitySlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#frameChangeThresholdSlider'), 0, 10000, 0, null, 3, 0, 'px'); - makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%'); - - /* text validators */ - makeTextValidator($('#adminUsernameEntry'), true); - makeTextValidator($('#adminPasswordEntry'), true); - makeTextValidator($('#normalUsernameEntry'), true); - makeTextValidator($('#normalPasswordEntry'), true); - makeTextValidator($('#deviceNameEntry'), true); - makeTextValidator($('#networkServerEntry'), true); - makeTextValidator($('#networkShareNameEntry'), true); - makeTextValidator($('#networkUsernameEntry'), false); - makeTextValidator($('#networkPasswordEntry'), false); - makeTextValidator($('#rootDirectoryEntry'), true); - makeTextValidator($('#leftTextEntry'), true); - makeTextValidator($('#rightTextEntry'), true); - makeTextValidator($('#imageFileNameEntry'), true); - makeTextValidator($('#movieFileNameEntry'), true); - makeTextValidator($('#emailAddressesEntry'), true); - - /* number validators */ - makeNumberValidator($('#streamingPortEntry'), 1024, 65535, false, false, true); - makeNumberValidator($('#snapshotIntervalEntry'), 1, 86400, false, false, true); - makeNumberValidator($('#gapEntry'), 1, 86400, false, false, true); - makeNumberValidator($('#preCaptureEntry'), 0, 100, false, false, true); - makeNumberValidator($('#postCaptureEntry'), 0, 100, false, false, true); - - /* time validators */ - makeTimeValidator($('#mondayFrom')); - makeTimeValidator($('#mondayTo')); - makeTimeValidator($('#tuesdayFrom')); - makeTimeValidator($('#tuesdayTo')); - makeTimeValidator($('#wednesdayFrom')); - makeTimeValidator($('#wednesdayTo')); - makeTimeValidator($('#thursdayFrom')); - makeTimeValidator($('#thursdayTo')); - makeTimeValidator($('#fridayFrom')); - makeTimeValidator($('#fridayTo')); - makeTimeValidator($('#saturdayFrom')); - makeTimeValidator($('#saturdayTo')); - makeTimeValidator($('#sundayFrom')); - makeTimeValidator($('#sundayTo')); - - /* ui elements that enable/disable other ui elements */ - $('#motionEyeSwitch').change(updateConfigUi); - $('#showAdvancedSwitch').change(updateConfigUi); - $('#storageDeviceSelect').change(updateConfigUi); - $('#autoBrightnessSwitch').change(updateConfigUi); - $('#leftTextSelect').change(updateConfigUi); - $('#rightTextSelect').change(updateConfigUi); - $('#captureModeSelect').change(updateConfigUi); - $('#autoNoiseDetectSwitch').change(updateConfigUi); - $('#videoDeviceSwitch').change(updateConfigUi); - $('#textOverlaySwitch').change(updateConfigUi); - $('#videoStreamingSwitch').change(updateConfigUi); - $('#stillImagesSwitch').change(updateConfigUi); - $('#motionMoviesSwitch').change(updateConfigUi); - $('#motionNotificationsSwitch').change(updateConfigUi); - $('#workingScheduleSwitch').change(updateConfigUi); - - /* fetch & push handlers */ - $('#videoDeviceSelect').change(fetchCameraConfig); - $('input.general').change(pushMainConfig); - $('input.device, select.device, ' + - 'input.storage, select.storage, ' + - 'input.text-overlay, select.text-overlay, ' + - 'input.streaming, select.streaming, ' + - 'input.still-images, select.still-images, ' + - 'input.motion-movies, select.motion-movies, ' + - 'input.motion-detection, select.motion-detection, ' + - 'input.notifications, select.notifications, ' + - 'input.working-schedule, select.working-schedule').change(pushCameraConfig); - - /* apply button */ - $('#applyButton').click(function () { - if ($(this).hasClass('progress')) { - return; /* in progress */ - } - - doApply(); - }); -} - -function updateConfigUi() { - var objs = $('tr.settings-item, div.advanced-setting, table.advanced-setting, div.settings-section-title, table.settings'); - - function markHide() { - this._hide = true; - } - - function unmarkHide() { - this._hide = false; - } - - objs.each(unmarkHide); - - /* general enable switch */ - var motionEyeEnabled = $('#motionEyeSwitch').get(0).checked; - if (!motionEyeEnabled) { - objs.not($('#motionEyeSwitch').parents('div').get(0)).each(markHide); - } - - /* advanced settings */ - var showAdvanced = $('#showAdvancedSwitch').get(0).checked; - if (!showAdvanced) { - $('tr.advanced-setting, div.advanced-setting, table.advanced-setting').each(markHide); - } - - /* storage device */ - if ($('#storageDeviceSelect').val() === 'local-disk') { - $('#networkServerEntry').parents('tr:eq(0)').each(markHide); - $('#networkUsernameEntry').parents('tr:eq(0)').each(markHide); - $('#networkPasswordEntry').parents('tr:eq(0)').each(markHide); - $('#networkShareNameEntry').parents('tr:eq(0)').each(markHide); - } - - /* auto brightness */ - if ($('#autoBrightnessSwitch').get(0).checked) { - $('#brightnessSlider').parents('tr:eq(0)').each(markHide); - } - - /* text */ - if ($('#leftTextSelect').val() !== 'custom-text') { - $('#leftTextEntry').parents('tr:eq(0)').each(markHide); - } - if ($('#rightTextSelect').val() !== 'custom-text') { - $('#rightTextEntry').parents('tr:eq(0)').each(markHide); - } - - /* still images capture mode */ - if ($('#captureModeSelect').val() !== 'interval-snapshots') { - $('#snapshotIntervalEntry').parents('tr:eq(0)').each(markHide); - } - - /* auto noise level */ - if ($('#autoNoiseDetectSwitch').get(0).checked) { - $('#noiseLevelSlider').parents('tr:eq(0)').each(markHide); - } - - /* video device switch */ - if (!$('#videoDeviceSwitch').get(0).checked) { - $('#videoDeviceSwitch').parent().nextAll('div.settings-section-title, table.settings').each(markHide); - } - - /* text overlay switch */ - if (!$('#textOverlaySwitch').get(0).checked) { - $('#textOverlaySwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - /* video streaming switch */ - if (!$('#videoStreamingSwitch').get(0).checked) { - $('#videoStreamingSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - /* still images switch */ - if (!$('#stillImagesSwitch').get(0).checked) { - $('#stillImagesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - /* motion movies switch */ - if (!$('#motionMoviesSwitch').get(0).checked) { - $('#motionMoviesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - /* motion notifications switch */ - if (!$('#motionNotificationsSwitch').get(0).checked) { - $('#motionNotificationsSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - /* working schedule switch */ - if (!$('#workingScheduleSwitch').get(0).checked) { - $('#workingScheduleSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); - } - - objs.each(function () { - if (this._hide) { - $(this).hide(200); - } - else { - $(this).show(200); - } - }); - - /* re-validate all the input validators */ - $('div.settings').find('input.text-validator, input.number-validator, input.time-validator').each(function () { - this.validate(); - }); - - /* update all checkboxes and sliders */ - $('div.settings').find('input[type=checkbox], input.range').each(function () { - this.update(); - }); - - /* select the first option for the selects with no current selection */ - $('div.settings').find('select').each(function () { - if (this.selectedIndex === -1) { - this.selectedIndex = 0; - } - }); -} - -function configUiValid() { - var valid = true; - $('div.settings input, select').each(function () { - if (this.invalid) { - valid = false; - return false; - } - }); - - return valid; -} - -function mainUi2Dict() { - return { - 'enabled': $('#motionEyeSwitch')[0].checked, - 'show_advanced': $('#showAdvancedSwitch')[0].checked, - 'admin_username': $('#adminUsernameEntry').val(), - 'admin_password': $('#adminPasswordEntry').val(), - 'normal_username': $('#normalUsernameEntry').val(), - 'normal_password': $('#normalPasswordEntry').val() - }; -} - -function dict2MainUi(dict) { - $('#motionEyeSwitch')[0].checked = dict['enabled']; - $('#showAdvancedSwitch')[0].checked = dict['show_advanced']; - $('#adminUsernameEntry').val(dict['admin_username']); - $('#adminPasswordEntry').val(dict['admin_password']); - $('#normalUsernameEntry').val(dict['normal_username']); - $('#normalPasswordEntry').val(dict['normal_password']); - - updateConfigUi(); -} - -function cameraUi2Dict() { - return { - /* video device */ - 'enabled': $('#videoDeviceSwitch')[0].checked, - 'name': $('#deviceNameEntry').val(), - 'device': $('#deviceEntry').val(), - 'light_switch_detect': $('#lightSwitchDetectSwitch')[0].checked, - 'auto_brightness': $('#autoBrightnessSwitch')[0].checked, - 'brightness': $('#brightnessSlider').val(), - 'contrast': $('#contrastSlider').val(), - 'saturation': $('#saturationSlider').val(), - 'hue': $('#hueSlider').val(), - 'resolution': $('#resolutionSelect').val(), - 'rotation': $('#rotationSelect').val(), - 'framerate': $('#framerateSlider').val(), - - /* file storage */ - 'storage_device': $('#storageDeviceSelect').val(), - 'network_server': $('#networkServerEntry').val(), - 'network_share_name': $('#networkShareNameEntry').val(), - 'network_username': $('#networkUsernameEntry').val(), - 'network_password': $('#networkPasswordEntry').val(), - 'root_directory': $('#rootDirectoryEntry').val(), - - /* text overlay */ - 'text_overlay': $('#textOverlaySwitch')[0].checked, - 'left_text': $('#leftTextSelect').val(), - 'custom_left_text': $('#leftTextEntry').val(), - 'right_text': $('#rightTextSelect').val(), - 'custom_right_text': $('#rightTextEntry').val(), - - /* video streaming */ - 'video_streaming': $('#videoStreamingSwitch')[0].checked, - 'streaming_port': $('#streamingPortEntry').val(), - 'streaming_framerate': $('#streamingFramerateSlider').val(), - 'streaming_quality': $('#streamingQualitySlider').val(), - 'streaming_motion': $('#streamingMotion')[0].checked, - - /* still images */ - 'still_images': $('#stillImagesSwitch')[0].checked, - 'image_file_name': $('#imageFileNameEntry').val(), - 'image_quality': $('#imageQualitySlider').val(), - 'capture_mode': $('#captureModeSelect').val(), - 'snapshot_interval': $('#snapshotIntervalEntry').val(), - 'preserve_images': $('#preserveImagesSelect').val(), - - /* motion movies */ - 'motion_movies': $('#motionMoviesSwitch')[0].checked, - 'movie_file_name': $('#movieFileNameEntry').val(), - 'movie_quality': $('#movieQualitySlider').val(), - 'preserve_movies': $('#preserveMoviesSelect').val(), - - /* motion detection */ - 'show_frame_changes': $('#showFrameChangesSwitch')[0].checked, - 'frame_change_threshold': $('#frameChangeThresholdSlider').val(), - 'auto_noise_detect': $('#autoNoiseDetectSwitch')[0].checked, - 'noise_level': $('#noiseLevelSlider').val(), - 'gap': $('#gapEntry').val(), - 'pre_capture': $('#preCaptureEntry').val(), - 'post_capture': $('#postCaptureEntry').val(), - - /* motion notifications */ - 'motion_notifications': $('#motionNotificationsSwitch')[0].checked, - 'motion_notifications_emails': $('#emailAddressesEntry').val(), - - /* working schedule */ - 'working_schedule': $('#workingScheduleSwitch')[0].checked, - 'monday_from': $('#mondayFrom').val(), - 'monday_to':$('#mondayTo').val(), - 'tuesday_from': $('#tuesdayFrom').val(), - 'tuesday_to': $('#tuesdayTo').val(), - 'wednesday_from': $('#wednesdayFrom').val(), - 'wednesday_to': $('#wednesdayTo').val(), - 'thursday_from': $('#thursdayFrom').val(), - 'thursday_to': $('#thursdayTo').val(), - 'friday_from':$('#fridayFrom').val(), - 'friday_to': $('#fridayTo').val(), - 'saturday_from':$('#saturdayFrom').val(), - 'saturday_to': $('#saturdayTo').val(), - 'sunday_from': $('#sundayFrom').val(), - 'sunday_to': $('#sundayTo').val(), - }; -} - -function dict2CameraUi(dict) { - /* video device */ - $('#videoDeviceSwitch')[0].checked = dict['enabled']; - $('#deviceNameEntry').val(dict['name']); - $('#deviceEntry').val(dict['device']); - $('#lightSwitchDetectSwitch')[0].checked = dict['light_switch_detect']; - $('#autoBrightnessSwitch')[0].checked = dict['auto_brightness']; - $('#brightnessSlider').val(dict['brightness']); - $('#contrastSlider').val(dict['contrast']); - $('#saturationSlider').val(dict['saturation']); - $('#hueSlider').val(dict['hue']); - $('#resolutionSelect').val(dict['resolution']); - $('#rotationSelect').val(dict['rotation']); - $('#framerateSlider').val(dict['framerate']); - - /* file storage */ - $('#storageDeviceSelect').val(dict['storage_device']); - $('#networkServerEntry').val(dict['network_server']); - $('#networkShareNameEntry').val(dict['network_share_name']); - $('#networkUsernameEntry').val(dict['network_username']); - $('#networkPasswordEntry').val(dict['network_password']); - $('#rootDirectoryEntry').val(dict['root_directory']); - - /* text overlay */ - $('#textOverlaySwitch')[0].checked = dict['text_overlay']; - $('#leftTextSelect').val(dict['left_text']); - $('#leftTextEntry').val(dict['custom_left_text']); - $('#rightTextSelect').val(dict['right_text']); - $('#rightTextEntry').val(dict['custom_right_text']); - - /* video streaming */ - $('#videoStreamingSwitch')[0].checked = dict['video_streaming']; - $('#streamingPortEntry').val(dict['streaming_port']); - $('#streamingFramerateSlider').val(dict['streaming_framerate']); - $('#streamingQualitySlider').val(dict['streaming_quality']); - $('#streamingMotion')[0].checked = dict['streaming_motion']; - - /* still images */ - $('#stillImagesSwitch')[0].checked = dict['still_images']; - $('#imageFileNameEntry').val(dict['image_file_name']); - $('#imageQualitySlider').val(dict['image_quality']); - $('#captureModeSelect').val(dict['capture_mode']); - $('#snapshotIntervalEntry').val(dict['snapshot_interval']); - $('#preserveImagesSelect').val(dict['preserve_images']); - - /* motion movies */ - $('#motionMoviesSwitch')[0].checked = dict['motion_movies']; - $('#movieFileNameEntry').val(dict['movie_file_name']); - $('#movieQualitySlider').val(dict['movie_quality']); - $('#preserveMoviesSelect').val(dict['preserve_movies']); - - /* motion detection */ - $('#showFrameChangesSwitch')[0].checked = dict['show_frame_changes']; - $('#frameChangeThresholdSlider').val(dict['frame_change_threshold']); - $('#autoNoiseDetectSwitch')[0].checked = dict['auto_noise_detect']; - $('#noiseLevelSlider').val(dict['noise_level']); - $('#gapEntry').val(dict['gap']); - $('#preCaptureEntry').val(dict['pre_capture']); - $('#postCaptureEntry').val(dict['post_capture']); - - /* motion notifications */ - $('#motionNotificationsSwitch')[0].checked = dict['motion_notifications']; - $('#emailAddressesEntry').val(dict['motion_notifications_emails']); - - /* working schedule */ - $('#workingScheduleSwitch')[0].checked = dict['working_schedule']; - $('#mondayFrom').val(dict['monday_from']); - $('#mondayTo').val(dict['monday_to']); - $('#tuesdayFrom').val(dict['tuesday_from']); - $('#tuesdayTo').val(dict['tuesday_to']); - $('#wednesdayFrom').val(dict['wednesday_from']); - $('#wednesdayTo').val(dict['wednesday_to']); - $('#thursdayFrom').val(dict['thursday_from']); - $('#thursdayTo').val(dict['thursday_to']); - $('#fridayFrom').val(dict['friday_from']); - $('#fridayTo').val(dict['friday_to']); - $('#saturdayFrom').val(dict['saturday_from']); - $('#saturdayTo').val(dict['saturday_to']); - $('#sundayFrom').val(dict['sunday_from']); - $('#sundayTo').val(dict['sunday_to']); - - updateConfigUi(); -} - - - /* apply button */ - -function showApply() { - if (!$('div.settings-container').is(':visible')) { - return; /* settings panel is not open */ - } - - var applyButton = $('#applyButton'); - - applyButton.html('Apply'); - applyButton.css('display', 'inline-block'); - applyButton.animate({'opacity': '1'}, 100); - applyButton.removeClass('progress'); -} - -function showProgress() { - if (!$('div.settings-container').is(':visible')) { - return; /* settings panel is not open */ - } - - var applyButton = $('#applyButton'); - - if (applyButton.hasClass('progress')) { - return; /* progress already visible */ - } - - applyButton.html(''); - applyButton.css('display', 'inline-block'); - applyButton.animate({'opacity': '1'}, 100); - applyButton.addClass('progress'); -} - -function hideApply() { - if (!$('div.settings-container').is(':visible')) { - return; /* settings panel is not open */ - } - - var applyButton = $('#applyButton'); - - applyButton.animate({'opacity': '0'}, 200, function () { - applyButton.removeClass('progress'); - applyButton.css('display', 'none'); - }); -} - -function isProgress() { - var applyButton = $('#applyButton'); - - return applyButton.hasClass('progress'); -} - -function isApplyVisible() { - var applyButton = $('#applyButton'); - - return applyButton.is(':visible'); -} - -function doApply() { - var finishedCount = 0; - var configs = []; - - function testReady() { - if (finishedCount >= configs.length) { - if (Object.keys(pushConfigs).length === 0) { - hideApply(); - } - else { - showApply(); - } - } - } - - for (var key in pushConfigs) { - if (pushConfigs.hasOwnProperty(key)) { - configs.push({key: key, config: pushConfigs[key]}); - } - } - - if (configs.length === 0) { - return; - } - - showProgress(); - - for (var i = 0; i < configs.length; i++) { - var config = configs[i]; - ajax('POST', '/config/' + config.key + '/set/', config.config, function () { - finishedCount++; - testReady(); - }); - - /* update the camera name in the device select */ - if (config.key !== 'main') { - $('#videoDeviceSelect').find('option[value=' + config.key + ']').html(config.config.name); - } - } - - pushConfigs = {}; -} - -function fetchCurrentConfig() { - /* fetch the main configuration */ - ajax('GET', '/config/main/get/', null, function (data) { - dict2MainUi(data); - }); - - /* fetch the camera list */ - ajax('GET', '/config/list/', null, function (data) { - var i, cameras = data.cameras; - var videoDeviceSelect = $('#videoDeviceSelect'); - videoDeviceSelect.html(''); - for (i = 0; i < cameras.length; i++) { - var camera = cameras[i]; - videoDeviceSelect.append(''); - } - - if (cameras.length) { - videoDeviceSelect[0].selectedIndex = 0; - fetchCameraConfig(); - } - }); -} - -function fetchCameraConfig() { - var cameraId = $('#videoDeviceSelect').val(); - if (cameraId != null) { - ajax('GET', '/config/' + cameraId + '/get/', null, function (data) { - dict2CameraUi(data); - }); - } - else { - dict2CameraUi({}); - } -} - -function pushMainConfig() { - var mainConfig = mainUi2Dict(); - - pushConfigs['main'] = mainConfig; - if (!isApplyVisible()) { - showApply(); - } -} - -function pushCameraConfig() { - var cameraConfig = cameraUi2Dict(); - var cameraId = $('#videoDeviceSelect').val(); - - pushConfigs[cameraId] = cameraConfig; - if (!isApplyVisible()) { - showApply(); - } -} - -$(document).ready(function () { - /* open/close settings */ - $('img.settings-button').click(function () { - if ($('div.settings').hasClass('open')) { - $('div.settings').removeClass('open'); - $('div.page-container').removeClass('stretched'); - $('div.settings-top-bar').removeClass('open'); - } - else { - $('div.settings').addClass('open'); - $('div.page-container').addClass('stretched'); - $('div.settings-top-bar').addClass('open'); - - updateConfigUi(); - } - }); - - /* prevent scroll events on settings div from propagating */ - $('div.settings').mousewheel(function (e, d) { - var t = $(this); - if (d > 0 && t.scrollTop() === 0) { - e.preventDefault(); - } - else if (d < 0 && (t.scrollTop() === t.get(0).scrollHeight - t.innerHeight())) { - e.preventDefault(); - } - }); - - initUI(); - fetchCurrentConfig(); -}); diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..bd3ab37 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,691 @@ + +var pushConfigs = {}; + + + /* utils */ + +function ajax(method, url, data, callback) { + var options = { + type: method, + url: url, + data: data, + cache: false, + success: callback, + error: function (request, options, error) { + alert('Request failed with code: ' + request.status); + if (callback) { + callback(); + } + } + }; + + if (data && typeof data === 'object') { + options['contentType'] = 'application/json'; + options['data'] = JSON.stringify(options['data']); + } + + $.ajax(options); +} + +Object.keys = Object.keys || (function () { + var hasOwnProperty = Object.prototype.hasOwnProperty; + var hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'); + var dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ]; + var dontEnumsLength = dontEnums.length; + + return function (obj) { + if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) { + return []; + } + + var result = []; + for (var prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (var i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + + return result; + }; +})(); + + + /* UI */ + +function initUI() { + /* checkboxes */ + $('input[type=checkbox].styled').each(function () { + makeCheckBox($(this)); + }); + + /* sliders */ + makeSlider($('#brightnessSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#contrastSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#saturationSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#hueSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#framerateSlider'), 1, 30, 0, [ + {value: 1, label: '1'}, + {value: 5, label: '5'}, + {value: 10, label: '10'}, + {value: 15, label: '15'}, + {value: 20, label: '20'}, + {value: 25, label: '25'}, + {value: 30, label: '30'} + ], null, 0); + makeSlider($('#streamingFramerateSlider'), 1, 30, 0, [ + {value: 1, label: '1'}, + {value: 5, label: '5'}, + {value: 10, label: '10'}, + {value: 15, label: '15'}, + {value: 20, label: '20'}, + {value: 25, label: '25'}, + {value: 30, label: '30'} + ], null, 0); + makeSlider($('#streamingQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#imageQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#frameChangeThresholdSlider'), 0, 10000, 0, null, 3, 0, 'px'); + makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%'); + + /* text validators */ + makeTextValidator($('#adminUsernameEntry'), true); + makeTextValidator($('#adminPasswordEntry'), true); + makeTextValidator($('#normalUsernameEntry'), true); + makeTextValidator($('#normalPasswordEntry'), true); + makeTextValidator($('#deviceNameEntry'), true); + makeTextValidator($('#networkServerEntry'), true); + makeTextValidator($('#networkShareNameEntry'), true); + makeTextValidator($('#networkUsernameEntry'), false); + makeTextValidator($('#networkPasswordEntry'), false); + makeTextValidator($('#rootDirectoryEntry'), true); + makeTextValidator($('#leftTextEntry'), true); + makeTextValidator($('#rightTextEntry'), true); + makeTextValidator($('#imageFileNameEntry'), true); + makeTextValidator($('#movieFileNameEntry'), true); + makeTextValidator($('#emailAddressesEntry'), true); + + /* number validators */ + makeNumberValidator($('#streamingPortEntry'), 1024, 65535, false, false, true); + makeNumberValidator($('#snapshotIntervalEntry'), 1, 86400, false, false, true); + makeNumberValidator($('#gapEntry'), 1, 86400, false, false, true); + makeNumberValidator($('#preCaptureEntry'), 0, 100, false, false, true); + makeNumberValidator($('#postCaptureEntry'), 0, 100, false, false, true); + + /* time validators */ + makeTimeValidator($('#mondayFrom')); + makeTimeValidator($('#mondayTo')); + makeTimeValidator($('#tuesdayFrom')); + makeTimeValidator($('#tuesdayTo')); + makeTimeValidator($('#wednesdayFrom')); + makeTimeValidator($('#wednesdayTo')); + makeTimeValidator($('#thursdayFrom')); + makeTimeValidator($('#thursdayTo')); + makeTimeValidator($('#fridayFrom')); + makeTimeValidator($('#fridayTo')); + makeTimeValidator($('#saturdayFrom')); + makeTimeValidator($('#saturdayTo')); + makeTimeValidator($('#sundayFrom')); + makeTimeValidator($('#sundayTo')); + + /* ui elements that enable/disable other ui elements */ + $('#motionEyeSwitch').change(updateConfigUi); + $('#showAdvancedSwitch').change(updateConfigUi); + $('#storageDeviceSelect').change(updateConfigUi); + $('#autoBrightnessSwitch').change(updateConfigUi); + $('#leftTextSelect').change(updateConfigUi); + $('#rightTextSelect').change(updateConfigUi); + $('#captureModeSelect').change(updateConfigUi); + $('#autoNoiseDetectSwitch').change(updateConfigUi); + $('#videoDeviceSwitch').change(updateConfigUi); + $('#textOverlaySwitch').change(updateConfigUi); + $('#videoStreamingSwitch').change(updateConfigUi); + $('#stillImagesSwitch').change(updateConfigUi); + $('#motionMoviesSwitch').change(updateConfigUi); + $('#motionNotificationsSwitch').change(updateConfigUi); + $('#workingScheduleSwitch').change(updateConfigUi); + + /* fetch & push handlers */ + $('#videoDeviceSelect').change(fetchCameraConfig); + $('input.general').change(pushMainConfig); + $('input.device, select.device, ' + + 'input.storage, select.storage, ' + + 'input.text-overlay, select.text-overlay, ' + + 'input.streaming, select.streaming, ' + + 'input.still-images, select.still-images, ' + + 'input.motion-movies, select.motion-movies, ' + + 'input.motion-detection, select.motion-detection, ' + + 'input.notifications, select.notifications, ' + + 'input.working-schedule, select.working-schedule').change(pushCameraConfig); + + /* apply button */ + $('#applyButton').click(function () { + if ($(this).hasClass('progress')) { + return; /* in progress */ + } + + doApply(); + }); +} + +function updateConfigUi() { + var objs = $('tr.settings-item, div.advanced-setting, table.advanced-setting, div.settings-section-title, table.settings'); + + function markHide() { + this._hide = true; + } + + function unmarkHide() { + this._hide = false; + } + + objs.each(unmarkHide); + + /* general enable switch */ + var motionEyeEnabled = $('#motionEyeSwitch').get(0).checked; + if (!motionEyeEnabled) { + objs.not($('#motionEyeSwitch').parents('div').get(0)).each(markHide); + } + + /* advanced settings */ + var showAdvanced = $('#showAdvancedSwitch').get(0).checked; + if (!showAdvanced) { + $('tr.advanced-setting, div.advanced-setting, table.advanced-setting').each(markHide); + } + + /* storage device */ + if ($('#storageDeviceSelect').val() === 'local-disk') { + $('#networkServerEntry').parents('tr:eq(0)').each(markHide); + $('#networkUsernameEntry').parents('tr:eq(0)').each(markHide); + $('#networkPasswordEntry').parents('tr:eq(0)').each(markHide); + $('#networkShareNameEntry').parents('tr:eq(0)').each(markHide); + } + + /* auto brightness */ + if ($('#autoBrightnessSwitch').get(0).checked) { + $('#brightnessSlider').parents('tr:eq(0)').each(markHide); + } + + /* text */ + if ($('#leftTextSelect').val() !== 'custom-text') { + $('#leftTextEntry').parents('tr:eq(0)').each(markHide); + } + if ($('#rightTextSelect').val() !== 'custom-text') { + $('#rightTextEntry').parents('tr:eq(0)').each(markHide); + } + + /* still images capture mode */ + if ($('#captureModeSelect').val() !== 'interval-snapshots') { + $('#snapshotIntervalEntry').parents('tr:eq(0)').each(markHide); + } + + /* auto noise level */ + if ($('#autoNoiseDetectSwitch').get(0).checked) { + $('#noiseLevelSlider').parents('tr:eq(0)').each(markHide); + } + + /* video device switch */ + if (!$('#videoDeviceSwitch').get(0).checked) { + $('#videoDeviceSwitch').parent().nextAll('div.settings-section-title, table.settings').each(markHide); + } + + /* text overlay switch */ + if (!$('#textOverlaySwitch').get(0).checked) { + $('#textOverlaySwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + /* video streaming switch */ + if (!$('#videoStreamingSwitch').get(0).checked) { + $('#videoStreamingSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + /* still images switch */ + if (!$('#stillImagesSwitch').get(0).checked) { + $('#stillImagesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + /* motion movies switch */ + if (!$('#motionMoviesSwitch').get(0).checked) { + $('#motionMoviesSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + /* motion notifications switch */ + if (!$('#motionNotificationsSwitch').get(0).checked) { + $('#motionNotificationsSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + /* working schedule switch */ + if (!$('#workingScheduleSwitch').get(0).checked) { + $('#workingScheduleSwitch').parent().next('table.settings').find('tr.settings-item').each(markHide); + } + + objs.each(function () { + if (this._hide) { + $(this).hide(200); + } + else { + $(this).show(200); + } + }); + + /* re-validate all the input validators */ + $('div.settings').find('input.text-validator, input.number-validator, input.time-validator').each(function () { + this.validate(); + }); + + /* update all checkboxes and sliders */ + $('div.settings').find('input[type=checkbox], input.range').each(function () { + this.update(); + }); + + /* select the first option for the selects with no current selection */ + $('div.settings').find('select').each(function () { + if (this.selectedIndex === -1) { + this.selectedIndex = 0; + } + }); +} + +function configUiValid() { + var valid = true; + $('div.settings input, select').each(function () { + if (this.invalid) { + valid = false; + return false; + } + }); + + return valid; +} + +function mainUi2Dict() { + return { + 'enabled': $('#motionEyeSwitch')[0].checked, + 'show_advanced': $('#showAdvancedSwitch')[0].checked, + 'admin_username': $('#adminUsernameEntry').val(), + 'admin_password': $('#adminPasswordEntry').val(), + 'normal_username': $('#normalUsernameEntry').val(), + 'normal_password': $('#normalPasswordEntry').val() + }; +} + +function dict2MainUi(dict) { + $('#motionEyeSwitch')[0].checked = dict['enabled']; + $('#showAdvancedSwitch')[0].checked = dict['show_advanced']; + $('#adminUsernameEntry').val(dict['admin_username']); + $('#adminPasswordEntry').val(dict['admin_password']); + $('#normalUsernameEntry').val(dict['normal_username']); + $('#normalPasswordEntry').val(dict['normal_password']); + + updateConfigUi(); +} + +function cameraUi2Dict() { + return { + /* video device */ + 'enabled': $('#videoDeviceSwitch')[0].checked, + 'name': $('#deviceNameEntry').val(), + 'device': $('#deviceEntry').val(), + 'light_switch_detect': $('#lightSwitchDetectSwitch')[0].checked, + 'auto_brightness': $('#autoBrightnessSwitch')[0].checked, + 'brightness': $('#brightnessSlider').val(), + 'contrast': $('#contrastSlider').val(), + 'saturation': $('#saturationSlider').val(), + 'hue': $('#hueSlider').val(), + 'resolution': $('#resolutionSelect').val(), + 'rotation': $('#rotationSelect').val(), + 'framerate': $('#framerateSlider').val(), + + /* file storage */ + 'storage_device': $('#storageDeviceSelect').val(), + 'network_server': $('#networkServerEntry').val(), + 'network_share_name': $('#networkShareNameEntry').val(), + 'network_username': $('#networkUsernameEntry').val(), + 'network_password': $('#networkPasswordEntry').val(), + 'root_directory': $('#rootDirectoryEntry').val(), + + /* text overlay */ + 'text_overlay': $('#textOverlaySwitch')[0].checked, + 'left_text': $('#leftTextSelect').val(), + 'custom_left_text': $('#leftTextEntry').val(), + 'right_text': $('#rightTextSelect').val(), + 'custom_right_text': $('#rightTextEntry').val(), + + /* video streaming */ + 'video_streaming': $('#videoStreamingSwitch')[0].checked, + 'streaming_port': $('#streamingPortEntry').val(), + 'streaming_framerate': $('#streamingFramerateSlider').val(), + 'streaming_quality': $('#streamingQualitySlider').val(), + 'streaming_motion': $('#streamingMotion')[0].checked, + + /* still images */ + 'still_images': $('#stillImagesSwitch')[0].checked, + 'image_file_name': $('#imageFileNameEntry').val(), + 'image_quality': $('#imageQualitySlider').val(), + 'capture_mode': $('#captureModeSelect').val(), + 'snapshot_interval': $('#snapshotIntervalEntry').val(), + 'preserve_images': $('#preserveImagesSelect').val(), + + /* motion movies */ + 'motion_movies': $('#motionMoviesSwitch')[0].checked, + 'movie_file_name': $('#movieFileNameEntry').val(), + 'movie_quality': $('#movieQualitySlider').val(), + 'preserve_movies': $('#preserveMoviesSelect').val(), + + /* motion detection */ + 'show_frame_changes': $('#showFrameChangesSwitch')[0].checked, + 'frame_change_threshold': $('#frameChangeThresholdSlider').val(), + 'auto_noise_detect': $('#autoNoiseDetectSwitch')[0].checked, + 'noise_level': $('#noiseLevelSlider').val(), + 'gap': $('#gapEntry').val(), + 'pre_capture': $('#preCaptureEntry').val(), + 'post_capture': $('#postCaptureEntry').val(), + + /* motion notifications */ + 'motion_notifications': $('#motionNotificationsSwitch')[0].checked, + 'motion_notifications_emails': $('#emailAddressesEntry').val(), + + /* working schedule */ + 'working_schedule': $('#workingScheduleSwitch')[0].checked, + 'monday_from': $('#mondayFrom').val(), + 'monday_to':$('#mondayTo').val(), + 'tuesday_from': $('#tuesdayFrom').val(), + 'tuesday_to': $('#tuesdayTo').val(), + 'wednesday_from': $('#wednesdayFrom').val(), + 'wednesday_to': $('#wednesdayTo').val(), + 'thursday_from': $('#thursdayFrom').val(), + 'thursday_to': $('#thursdayTo').val(), + 'friday_from':$('#fridayFrom').val(), + 'friday_to': $('#fridayTo').val(), + 'saturday_from':$('#saturdayFrom').val(), + 'saturday_to': $('#saturdayTo').val(), + 'sunday_from': $('#sundayFrom').val(), + 'sunday_to': $('#sundayTo').val(), + }; +} + +function dict2CameraUi(dict) { + /* video device */ + $('#videoDeviceSwitch')[0].checked = dict['enabled']; + $('#deviceNameEntry').val(dict['name']); + $('#deviceEntry').val(dict['device']); + $('#lightSwitchDetectSwitch')[0].checked = dict['light_switch_detect']; + $('#autoBrightnessSwitch')[0].checked = dict['auto_brightness']; + $('#brightnessSlider').val(dict['brightness']); + $('#contrastSlider').val(dict['contrast']); + $('#saturationSlider').val(dict['saturation']); + $('#hueSlider').val(dict['hue']); + $('#resolutionSelect').val(dict['resolution']); + $('#rotationSelect').val(dict['rotation']); + $('#framerateSlider').val(dict['framerate']); + + /* file storage */ + $('#storageDeviceSelect').val(dict['storage_device']); + $('#networkServerEntry').val(dict['network_server']); + $('#networkShareNameEntry').val(dict['network_share_name']); + $('#networkUsernameEntry').val(dict['network_username']); + $('#networkPasswordEntry').val(dict['network_password']); + $('#rootDirectoryEntry').val(dict['root_directory']); + + /* text overlay */ + $('#textOverlaySwitch')[0].checked = dict['text_overlay']; + $('#leftTextSelect').val(dict['left_text']); + $('#leftTextEntry').val(dict['custom_left_text']); + $('#rightTextSelect').val(dict['right_text']); + $('#rightTextEntry').val(dict['custom_right_text']); + + /* video streaming */ + $('#videoStreamingSwitch')[0].checked = dict['video_streaming']; + $('#streamingPortEntry').val(dict['streaming_port']); + $('#streamingFramerateSlider').val(dict['streaming_framerate']); + $('#streamingQualitySlider').val(dict['streaming_quality']); + $('#streamingMotion')[0].checked = dict['streaming_motion']; + + /* still images */ + $('#stillImagesSwitch')[0].checked = dict['still_images']; + $('#imageFileNameEntry').val(dict['image_file_name']); + $('#imageQualitySlider').val(dict['image_quality']); + $('#captureModeSelect').val(dict['capture_mode']); + $('#snapshotIntervalEntry').val(dict['snapshot_interval']); + $('#preserveImagesSelect').val(dict['preserve_images']); + + /* motion movies */ + $('#motionMoviesSwitch')[0].checked = dict['motion_movies']; + $('#movieFileNameEntry').val(dict['movie_file_name']); + $('#movieQualitySlider').val(dict['movie_quality']); + $('#preserveMoviesSelect').val(dict['preserve_movies']); + + /* motion detection */ + $('#showFrameChangesSwitch')[0].checked = dict['show_frame_changes']; + $('#frameChangeThresholdSlider').val(dict['frame_change_threshold']); + $('#autoNoiseDetectSwitch')[0].checked = dict['auto_noise_detect']; + $('#noiseLevelSlider').val(dict['noise_level']); + $('#gapEntry').val(dict['gap']); + $('#preCaptureEntry').val(dict['pre_capture']); + $('#postCaptureEntry').val(dict['post_capture']); + + /* motion notifications */ + $('#motionNotificationsSwitch')[0].checked = dict['motion_notifications']; + $('#emailAddressesEntry').val(dict['motion_notifications_emails']); + + /* working schedule */ + $('#workingScheduleSwitch')[0].checked = dict['working_schedule']; + $('#mondayFrom').val(dict['monday_from']); + $('#mondayTo').val(dict['monday_to']); + $('#tuesdayFrom').val(dict['tuesday_from']); + $('#tuesdayTo').val(dict['tuesday_to']); + $('#wednesdayFrom').val(dict['wednesday_from']); + $('#wednesdayTo').val(dict['wednesday_to']); + $('#thursdayFrom').val(dict['thursday_from']); + $('#thursdayTo').val(dict['thursday_to']); + $('#fridayFrom').val(dict['friday_from']); + $('#fridayTo').val(dict['friday_to']); + $('#saturdayFrom').val(dict['saturday_from']); + $('#saturdayTo').val(dict['saturday_to']); + $('#sundayFrom').val(dict['sunday_from']); + $('#sundayTo').val(dict['sunday_to']); + + updateConfigUi(); +} + + + /* apply button */ + +function showApply() { + if (!$('div.settings-container').is(':visible')) { + return; /* settings panel is not open */ + } + + var applyButton = $('#applyButton'); + + applyButton.html('Apply'); + applyButton.css('display', 'inline-block'); + applyButton.animate({'opacity': '1'}, 100); + applyButton.removeClass('progress'); +} + +function showProgress() { + if (!$('div.settings-container').is(':visible')) { + return; /* settings panel is not open */ + } + + var applyButton = $('#applyButton'); + + if (applyButton.hasClass('progress')) { + return; /* progress already visible */ + } + + applyButton.html(''); + applyButton.css('display', 'inline-block'); + applyButton.animate({'opacity': '1'}, 100); + applyButton.addClass('progress'); +} + +function hideApply() { + if (!$('div.settings-container').is(':visible')) { + return; /* settings panel is not open */ + } + + var applyButton = $('#applyButton'); + + applyButton.animate({'opacity': '0'}, 200, function () { + applyButton.removeClass('progress'); + applyButton.css('display', 'none'); + }); +} + +function isProgress() { + var applyButton = $('#applyButton'); + + return applyButton.hasClass('progress'); +} + +function isApplyVisible() { + var applyButton = $('#applyButton'); + + return applyButton.is(':visible'); +} + +function doApply() { + var finishedCount = 0; + var configs = []; + + function testReady() { + if (finishedCount >= configs.length) { + if (Object.keys(pushConfigs).length === 0) { + hideApply(); + } + else { + showApply(); + } + } + } + + for (var key in pushConfigs) { + if (pushConfigs.hasOwnProperty(key)) { + configs.push({key: key, config: pushConfigs[key]}); + } + } + + if (configs.length === 0) { + return; + } + + showProgress(); + + for (var i = 0; i < configs.length; i++) { + var config = configs[i]; + ajax('POST', '/config/' + config.key + '/set/', config.config, function () { + finishedCount++; + testReady(); + }); + + /* update the camera name in the device select */ + if (config.key !== 'main') { + $('#videoDeviceSelect').find('option[value=' + config.key + ']').html(config.config.name); + } + } + + pushConfigs = {}; +} + +function fetchCurrentConfig() { + /* fetch the main configuration */ + ajax('GET', '/config/main/get/', null, function (data) { + dict2MainUi(data); + }); + + /* fetch the camera list */ + ajax('GET', '/config/list/', null, function (data) { + var i, cameras = data.cameras; + var videoDeviceSelect = $('#videoDeviceSelect'); + videoDeviceSelect.html(''); + for (i = 0; i < cameras.length; i++) { + var camera = cameras[i]; + videoDeviceSelect.append(''); + } + + if (cameras.length) { + videoDeviceSelect[0].selectedIndex = 0; + fetchCameraConfig(); + } + }); +} + +function fetchCameraConfig() { + var cameraId = $('#videoDeviceSelect').val(); + if (cameraId != null) { + ajax('GET', '/config/' + cameraId + '/get/', null, function (data) { + dict2CameraUi(data); + }); + } + else { + dict2CameraUi({}); + } +} + +function pushMainConfig() { + var mainConfig = mainUi2Dict(); + + pushConfigs['main'] = mainConfig; + if (!isApplyVisible()) { + showApply(); + } +} + +function pushCameraConfig() { + var cameraConfig = cameraUi2Dict(); + var cameraId = $('#videoDeviceSelect').val(); + + pushConfigs[cameraId] = cameraConfig; + if (!isApplyVisible()) { + showApply(); + } +} + +$(document).ready(function () { + /* open/close settings */ + $('img.settings-button').click(function () { + if ($('div.settings').hasClass('open')) { + $('div.settings').removeClass('open'); + $('div.page-container').removeClass('stretched'); + $('div.settings-top-bar').removeClass('open'); + } + else { + $('div.settings').addClass('open'); + $('div.page-container').addClass('stretched'); + $('div.settings-top-bar').addClass('open'); + + updateConfigUi(); + } + }); + + /* prevent scroll events on settings div from propagating */ + $('div.settings').mousewheel(function (e, d) { + var t = $(this); + if (d > 0 && t.scrollTop() === 0) { + e.preventDefault(); + } + else if (d < 0 && (t.scrollTop() === t.get(0).scrollHeight - t.innerHeight())) { + e.preventDefault(); + } + }); + + initUI(); + fetchCurrentConfig(); +}); diff --git a/templates/base-site.html b/templates/base-site.html deleted file mode 100644 index 6ac6e03..0000000 --- a/templates/base-site.html +++ /dev/null @@ -1,425 +0,0 @@ -{% extends "base.html" %} - -{% block style %} - {{super()}} - - -{% endblock %} - -{% block script %} - {{super()}} - - -{% endblock %} - -{% block body %} -
-
-
- - -
Apply
-
- -
-
-
-
-
-
General Settings
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Show Advanced Settings?
Administrator Username?
Administrator Password?
Surveillance Username?
Surveillance Password?
- -
Video Device
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Camera Name?
Camera Device
Light Switch Detection?
Automatic Brightness?
Brightness?
Contrast?
Saturation?
Hue?
Video Resolution - - ?
Video Rotation - - ?
Frame Rate?
- -
File Storage
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Storage Device - - ?
Network Server?
Share Name?
Share Username?
Share Password?
Root Directory?
- -
Text Overlay
- - - - - - - - - - - - - - - - - - - - - -
Left Text - - ?
?
Right Text - - ?
?
- -
Video Streaming
- - - - - - - - - - - - - - - - - - - - - -
Streaming Frame Rate?
Streaming Quality?
Streaming Port?
Motion Optimization?
- -
Still Images
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Image File Name?
Image Quality?
Capture Mode - - ?
Snapshot Intervalseconds?
Preserve Images - - ?
- -
Motion Movies
- - - - - - - - - - - - - - - - -
Movie File Name?
Movie Quality?
Preserve Movies - - ?
- -
Motion Detection
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Show Frame Changes?
Frame Change Threshold?
Automatic Noise Detection?
Noise Level?
Motion Gapseconds?
Captured Beforeframes?
Captured Afterframes?
- -
Motion Notifications
- - - - - - -
Email Addresses?
- -
Working Schedule
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Monday - from - to - ?
Tuesday - from - to - ?
Wednesday - from - to - ?
Thursday - from - to - ?
Friday - from - to - ?
Saturday - from - to - ?
Sunday - from - to - ?
-
-
-
- {% block page_content %}{% endblock %} -
-
- copyright © Calin Crisan 2013 -
-
-{% endblock %} diff --git a/templates/main.html b/templates/main.html index fd8a865..afba521 100644 --- a/templates/main.html +++ b/templates/main.html @@ -1,16 +1,425 @@ -{% extends "base-site.html" %} -{% import "macros.html" as macros %} +{% extends "base.html" %} {% block style %} {{super()}} + {% endblock %} -{% block page_content %} -
- {{macros.video("/static/img/video1.jpg")}} - {{macros.video("/static/img/video2.jpg")}} - {{macros.video("/static/img/video1.jpg")}} - {{macros.video("/static/img/video2.jpg")}} +{% block script %} + {{super()}} + + +{% endblock %} + +{% block body %} +
+
+
+ + +
Apply
+
+ +
+
+
+
+
+
General Settings
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Show Advanced Settings?
Administrator Username?
Administrator Password?
Surveillance Username?
Surveillance Password?
+ +
Video Device
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Camera Name?
Camera Device
Light Switch Detection?
Automatic Brightness?
Brightness?
Contrast?
Saturation?
Hue?
Video Resolution + + ?
Video Rotation + + ?
Frame Rate?
+ +
File Storage
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Storage Device + + ?
Network Server?
Share Name?
Share Username?
Share Password?
Root Directory?
+ +
Text Overlay
+ + + + + + + + + + + + + + + + + + + + + +
Left Text + + ?
?
Right Text + + ?
?
+ +
Video Streaming
+ + + + + + + + + + + + + + + + + + + + + +
Streaming Frame Rate?
Streaming Quality?
Streaming Port?
Motion Optimization?
+ +
Still Images
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Image File Name?
Image Quality?
Capture Mode + + ?
Snapshot Intervalseconds?
Preserve Images + + ?
+ +
Motion Movies
+ + + + + + + + + + + + + + + + +
Movie File Name?
Movie Quality?
Preserve Movies + + ?
+ +
Motion Detection
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Show Frame Changes?
Frame Change Threshold?
Automatic Noise Detection?
Noise Level?
Motion Gapseconds?
Captured Beforeframes?
Captured Afterframes?
+ +
Motion Notifications
+ + + + + + +
Email Addresses?
+ +
Working Schedule
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Monday + from + to + ?
Tuesday + from + to + ?
Wednesday + from + to + ?
Thursday + from + to + ?
Friday + from + to + ?
Saturday + from + to + ?
Sunday + from + to + ?
+
+
+
+ {% block page_content %}{% endblock %} +
+
+ copyright © Calin Crisan 2013 +
{% endblock %}