From: Calin Crisan Date: Fri, 2 Jan 2015 10:50:00 +0000 (+0200) Subject: merged frame template with main; fixed full-screen frame authentication X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=41dfcd208714a9ed4137841cd903114edd032388;p=motioneye-debian merged frame template with main; fixed full-screen frame authentication issue --- diff --git a/src/handlers.py b/src/handlers.py index 8c2df63..af8ecbf 100644 --- a/src/handlers.py +++ b/src/handlers.py @@ -146,6 +146,7 @@ class MainHandler(BaseHandler): timezones = pytz.common_timezones self.render('main.html', + frame=False, version=motioneye.VERSION, wpa_supplicant=settings.WPA_SUPPLICANT_CONF, enable_reboot=settings.ENABLE_REBOOT, @@ -757,29 +758,33 @@ class PictureHandler(BaseHandler): remote.list_media(camera_config, media_type='picture', prefix=self.get_argument('prefix', None), callback=on_response) - @BaseHandler.auth() def frame(self, camera_id): camera_config = config.get_camera(camera_id) if utils.local_camera(camera_config) or self.get_argument('title', None) is not None: - self.render('frame.html', + self.render('main.html', + frame=True, camera_id=camera_id, camera_config=camera_config, - title=self.get_argument('title', camera_config.get('@name', ''))) + title=self.get_argument('title', camera_config.get('@name', '')), + admin_username=config.get_main().get('@admin_username')) else: # remote camera, we need to fetch remote config def on_response(remote_ui_config=None, error=None): if error: - return self.render('frame.html', + return self.render('main.html', + frame=True, camera_id=camera_id, camera_config=camera_config, title=self.get_argument('title', '')) remote_config = config.camera_ui_to_dict(remote_ui_config) - self.render('frame.html', + self.render('main.html', + frame=True, camera_id=camera_id, camera_config=remote_config, - title=self.get_argument('title', remote_config['@name'])) + title=self.get_argument('title', remote_config['@name']), + admin_username=config.get_main().get('@admin_username')) remote.get_config(camera_config, on_response) diff --git a/static/css/frame.css b/static/css/frame.css index db630c6..ff0b35f 100644 --- a/static/css/frame.css +++ b/static/css/frame.css @@ -2,53 +2,20 @@ /* basic */ -* { - padding: 0px; - border: 0px solid black; - margin: 0px; - outline: 0px; - border-spacing: 0px; - border-collapse: separate; -} - -html { - height: 100%; -} - body { - height: 100%; color: #dddddd; background-color: #212121; } - /* layout */ - -img.main-loading-progress { - display: block; - margin: auto; - margin-top: 50px; -} - -div.add-camera-message { - text-align: center; - margin-top: 30px; -} - - /* camera frame */ div.camera-frame { position: relative; + padding: 0px; + margin: 0px; width: 100%; height: 100%; - transition: all 0.2s, opacity 0s; - opacity: 0; - vertical-align: top; -} - -div.camera-frame.motion-detected { - background-color: #712727; } div.camera-container { @@ -58,58 +25,19 @@ div.camera-container { } img.camera { - width: 100%; height: auto; - transition: opacity 0.2s linear; - opacity: 1; + margin: auto; } img.camera.error, img.camera.loading { - opacity: 0; height: 100% !important; } div.camera-placeholder { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - text-align: center; - transition: opacity 0.2s linear; overflow: hidden; } -img.no-camera { - padding-top: 20%; - width: 30%; - opacity: 0.8; -} - div.camera-progress { - background: rgba(0, 0, 0, 0.001); /* otherwise IE would not extend this as expected */ - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - opacity: 0; - transition: all 0.2s linear; - text-align: center; -} - -div.camera-progress.visible { - opacity: 0.4; -} - -img.camera-progress { - border: 10px solid white; - border-radius: 10px; - position: absolute; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; - margin: auto; + cursor: default; } diff --git a/static/js/frame.js b/static/js/frame.js index ce07f24..932e7c3 100644 --- a/static/js/frame.js +++ b/static/js/frame.js @@ -1,54 +1,5 @@ var refreshDisabled = false; -var inProgress = false; -var refreshInterval = 50; /* milliseconds */ - - - /* utils */ - -function getCookie(name) { - if (document.cookie.length <= 0) { - return null; - } - - var start = document.cookie.indexOf(name + '='); - if (start == -1) { - return null; - } - - var start = start + name.length + 1; - var end = document.cookie.indexOf(';', start); - if (end == -1) { - end = document.cookie.length; - } - - return unescape(document.cookie.substring(start, end)); -} - - - /* progress */ - -function beginProgress() { - if (inProgress) { - return; /* already in progress */ - } - - inProgress = true; - - /* show the camera progress indicator */ - $('div.camera-progress').addClass('visible'); -} - -function endProgress() { - if (!inProgress) { - return; /* not in progress */ - } - - inProgress = false; - - /* hide the camera progress indicator */ - $('div.camera-progress').removeClass('visible'); -} /* camera frame */ @@ -158,6 +109,7 @@ function refreshCameraFrame() { uri += '&width=' + img.width; } + uri = addAuthParams('GET', uri); img.src = uri; img.loading = 1; @@ -168,27 +120,11 @@ function refreshCameraFrame() { setTimeout(refreshCameraFrame, refreshInterval); } -function checkCameraErrors() { - /* properly triggers the onerror event on the cameras whose imgs were not successfully loaded, - * but the onerror event hasn't been triggered, for some reason (seems to happen in Chrome) */ - var cameraFrame = $('div.camera-frame').find('img.camera'); - - cameraFrame.each(function () { - if (this.complete === true && this.naturalWidth === 0 && !this.error && this.src) { - $(this).error(); - } - }); - - setTimeout(checkCameraErrors, 500); -} - /* startup function */ $(document).ready(function () { - beginProgress(); setupCameraFrame(); refreshCameraFrame(); - checkCameraErrors(); }); diff --git a/static/js/main.js b/static/js/main.js index f2b4507..e0fa8e0 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,8 +4,8 @@ var refreshDisabled = {}; /* dictionary indexed by cameraId, tells if refresh is var fullScreenCameraId = null; var inProgress = false; var refreshInterval = 50; /* milliseconds */ -var username = null; -var password = null; +var username = ''; +var password = ''; /* utils */ @@ -1861,7 +1861,7 @@ function runLoginDialog(retry) { $('body').append(tempFrame); var form = - $('
' + + $('' + '' + '' + '' + @@ -2854,7 +2854,8 @@ function addCameraFrameUi(cameraConfig) { fullScreenButton.click(function (cameraId) { return function () { - window.open(window.location.href + 'picture/' + cameraId + '/frame/', '_blank'); + var url = window.location.href + 'picture/' + cameraId + '/frame/'; + window.open(url, '_blank'); }; }(cameraId)); @@ -3100,10 +3101,22 @@ function checkCameraErrors() { /* startup function */ $(document).ready(function () { + /* detect base uri */ + if (frame) { + baseUri = qualifyUri('../../../'); + + } + else { + baseUri = qualifyUri(''); + + /* restore the username from cookie */ + window.username = getCookie('username'); + } + /* open/close settings */ $('div.settings-button').click(function () { if (isSettingsOpen()) { - closeSettings(); + closeSettings(); } else { openSettings(); @@ -3124,14 +3137,13 @@ $(document).ready(function () { } }); - /* restore the username from cookie */ - window.username = getCookie('username'); - initUI(); beginProgress(); - ajax('GET', 'login/', null, function () { - fetchCurrentConfig(endProgress); + ajax('GET', baseUri + 'login/', null, function () { + if (!frame) { + fetchCurrentConfig(endProgress); + } }); refreshCameraFrames(); diff --git a/static/js/ui.js b/static/js/ui.js index 49edb69..1f711fa 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -5,6 +5,10 @@ var _modalDialogContexts = []; /* UI widgets */ function makeCheckBox($input) { + if (!$input.length) { + return; + } + var mainDiv = $('
'); var buttonDiv = $('
'); var text = $(''); @@ -64,6 +68,10 @@ function makeCheckBox($input) { } function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decimals, unit) { + if (!$input.length) { + return; + } + unit = unit || ''; var slider = $('
'); @@ -301,6 +309,10 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima /* validators */ function makeTextValidator($input, required) { + if (!$input.length) { + return; + } + if (required == null) { required = true; } @@ -345,6 +357,10 @@ function makeTextValidator($input, required) { } function makeComboValidator($select, required) { + if (!$select.length) { + return; + } + if (required == null) { required = true; } @@ -389,6 +405,10 @@ function makeComboValidator($select, required) { } function makeNumberValidator($input, minVal, maxVal, floating, sign, required) { + if (!$input.length) { + return; + } + if (minVal == null) { minVal = -Infinity; } @@ -483,6 +503,10 @@ function makeNumberValidator($input, minVal, maxVal, floating, sign, required) { } function makeTimeValidator($input) { + if (!$input.length) { + return; + } + function isValid(strVal) { if (!$input.is(':visible')) { return true; /* an invisible element is considered always valid */ @@ -524,6 +548,10 @@ function makeTimeValidator($input) { } function makeUrlValidator($input) { + if (!$input.length) { + return; + } + function isValid(strVal) { if (!$input.is(':visible')) { return true; /* an invisible element is considered always valid */ @@ -560,6 +588,10 @@ function makeUrlValidator($input) { } function makeProgressBar($div) { + if (!$div.length) { + return; + } + $div.addClass('progress-bar-container'); var fillDiv = $('
'); var textSpan = $(''); diff --git a/templates/frame.html b/templates/frame.html deleted file mode 100644 index 386f15c..0000000 --- a/templates/frame.html +++ /dev/null @@ -1,24 +0,0 @@ -{% extends "base.html" %} - -{% block title %}{{title}}{% endblock %} - -{% block style %} - {{super()}} - -{% endblock %} - -{% block script %} - {{super()}} - -{% endblock %} - -{% block body %} -
- -
-
-
-
-{% endblock %} diff --git a/templates/main.html b/templates/main.html index 136a7eb..51bbd6a 100644 --- a/templates/main.html +++ b/templates/main.html @@ -1,24 +1,32 @@ {% extends "base.html" %} -{% block title %}motionEye{% endblock %} +{% block title %}{% if title %}{{title}}{% else %}motionEye{% endif %}{% endblock %} {% block style %} {{super()}} + {% if frame %} + + {% endif %} {% endblock %} {% block script %} {{super()}} - + {% if frame %} + + {% endif %} {% endblock %} {% block body %} + {% if not frame %}
@@ -38,6 +46,8 @@
+ {% endif %} + {% if not frame %}
@@ -613,6 +623,16 @@
copyright © Calin Crisan
+ {% else %} +
+ +
+
+
+
+ {% endif %}