From b50d24175d74005b0f11c2415faa3185b5967900 Mon Sep 17 00:00:00 2001 From: Calin Crisan Date: Sat, 28 Feb 2015 17:56:03 +0200 Subject: [PATCH] implemented minimizable configuration sections --- src/wifictl.py | 5 ++- static/css/main.css | 55 +++++++++++++++++++++++++ static/css/ui.css | 33 +-------------- static/js/main.js | 52 +++++++++++++++++++----- templates/main.html | 98 ++++++++++++++++++++++++++++++++------------- 5 files changed, 173 insertions(+), 70 deletions(-) diff --git a/src/wifictl.py b/src/wifictl.py index 0890b43..e2e066e 100644 --- a/src/wifictl.py +++ b/src/wifictl.py @@ -93,8 +93,9 @@ def _set_wifi_settings(s): s.setdefault('wifiNetworkName', '') s.setdefault('wifiNetworkKey', '') - logging.debug('writing wifi settings to %s' % WPA_SUPPLICANT_CONF) - + logging.debug('writing wifi settings to %s: enabled=%s, psk="%s"' % ( + WPA_SUPPLICANT_CONF, s['wifiEnabled'], s['wifiNetworkName'])) + enabled = s['wifiEnabled'] ssid = s['wifiNetworkName'] psk = s['wifiNetworkKey'] diff --git a/static/css/main.css b/static/css/main.css index 9b3d87d..fd938d8 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -283,6 +283,9 @@ div.settings-section-title { padding: 5px 0.5em 5px 5px; } +a.settings-section-title { +} + table.settings { width: 100%; padding: 0.5em 0.5em 1em 0.5em; @@ -439,6 +442,58 @@ tr.hidden { display: none !important; } +span.help-mark { + display: inline-block; + visibility: hidden; + text-align: center; + background-color: #414141; + color: #3498db; + font-size: 0.75em; + font-family: monospace; + width: 1.2em; + height: 1.2em; + border-radius: 100em; + cursor: pointer; + vertical-align: middle; + position: relative; + top: -0.1em; +} + +div.settings-section-title > span.help-mark { + background-color: #515151; +} + +div.settings-section-title:HOVER > span.help-mark, +tr:HOVER span.help-mark { + visibility: visible; +} + +span.minimize { + display: inline-block; + background-image: url(../img/combo-box-arrow.svg); + background-size: cover; + width: 0.8em; + height: 0.8em; + cursor: pointer; + vertical-align: middle; + position: relative; + top: -0.1em; + transition: transform 0.1s linear; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); +} + +span.minimize.open { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); +} + /* dialogs */ diff --git a/static/css/ui.css b/static/css/ui.css index bb155a8..1da69b9 100644 --- a/static/css/ui.css +++ b/static/css/ui.css @@ -18,13 +18,13 @@ input[type=checkbox].styled { } a { - color: #317CAD; + color: #3498db; text-decoration: inherit; transition: color 0.1s ease; + cursor: pointer; } a:HOVER { - color: #3498db; } a:ACTIVE { @@ -433,35 +433,6 @@ span.popup-message.error { } - /* misc */ - -span.help-mark { - display: inline-block; - visibility: hidden; - text-align: center; - background-color: #414141; - color: #3498db; - font-size: 0.75em; - font-family: monospace; - width: 1.2em; - height: 1.2em; - border-radius: 100em; - cursor: pointer; - vertical-align: middle; - position: relative; - top: -0.1em; -} - -div.settings-section-title > span.help-mark { - background-color: #515151; -} - -div.settings-section-title:HOVER > span.help-mark, -tr:HOVER span.help-mark { - visibility: visible; -} - - /* media queries */ @media all and (max-width: 400px) { diff --git a/static/js/main.js b/static/js/main.js index 83ec100..7f99441 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -544,6 +544,14 @@ function initUI() { /* input value processors */ makeStrippedInput($('tr[strip=true] input[type=text]')); makeStrippedInput($('tr[strip=true] input[type=password]')); + + function unMinimizeSection() { + var $switch = $(this); + var $minimizeSpan = $switch.parent().find('span.minimize'); + if ($switch.is(':checked') && !$minimizeSpan.hasClass('open')) { + $minimizeSpan.addClass('open'); + } + } /* ui elements that enable/disable other ui elements */ $('#motionEyeSwitch').change(updateConfigUi); @@ -554,19 +562,19 @@ function initUI() { $('#rightTextSelect').change(updateConfigUi); $('#captureModeSelect').change(updateConfigUi); $('#autoNoiseDetectSwitch').change(updateConfigUi); - $('#videoDeviceSwitch').change(updateConfigUi); - $('#textOverlaySwitch').change(updateConfigUi); - $('#videoStreamingSwitch').change(updateConfigUi); + $('#videoDeviceSwitch').change(unMinimizeSection).change(updateConfigUi); + $('#textOverlaySwitch').change(unMinimizeSection).change(updateConfigUi); + $('#videoStreamingSwitch').change(unMinimizeSection).change(updateConfigUi); $('#streamingServerResizeSwitch').change(updateConfigUi); - $('#stillImagesSwitch').change(updateConfigUi); + $('#stillImagesSwitch').change(unMinimizeSection).change(updateConfigUi); $('#preservePicturesSelect').change(updateConfigUi); - $('#motionDetectionSwitch').change(updateConfigUi); - $('#motionMoviesSwitch').change(updateConfigUi); + $('#motionDetectionSwitch').change(unMinimizeSection).change(updateConfigUi); + $('#motionMoviesSwitch').change(unMinimizeSection).change(updateConfigUi); $('#preserveMoviesSelect').change(updateConfigUi); $('#emailNotificationsSwitch').change(updateConfigUi); $('#webHookNotificationsSwitch').change(updateConfigUi); $('#commandNotificationsSwitch').change(updateConfigUi); - $('#workingScheduleSwitch').change(updateConfigUi); + $('#workingScheduleSwitch').change(unMinimizeSection).change(updateConfigUi); $('#mondayEnabledSwitch').change(updateConfigUi); $('#tuesdayEnabledSwitch').change(updateConfigUi); @@ -575,6 +583,16 @@ function initUI() { $('#fridayEnabledSwitch').change(updateConfigUi); $('#saturdayEnabledSwitch').change(updateConfigUi); $('#sundayEnabledSwitch').change(updateConfigUi); + + /* minimizable sections */ + $('span.minimize').click(function () { + $(this).toggleClass('open'); + updateConfigUi(); + }); + + $('a.settings-section-title').click(function () { + $(this).parent().find('span.minimize').click(); + }); /* additional configs */ var seenDependNames = {}; @@ -717,7 +735,15 @@ function updateConfigUi() { $(this).parents('tr:eq(0)').each(markHide); } }); - + + /* minimizable sections */ + $('span.minimize').each(function () { + var $this = $(this); + if (!$this.hasClass('open')) { + $this.parent().next('table.settings').find('tr').each(markHide); + } + }); + /* general enable switch */ var motionEyeEnabled = $('#motionEyeSwitch').get(0).checked; if (!motionEyeEnabled) { @@ -1002,6 +1028,9 @@ function mainUi2Dict() { if (id.endsWith('Entry')) { name = id.substring(0, id.length - 5); value = control.val(); + if (control.hasClass('number')) { + value = Number(value); + } } else if (id.endsWith('Select')) { name = id.substring(0, id.length - 6); @@ -1009,7 +1038,7 @@ function mainUi2Dict() { } else if (id.endsWith('Slider')) { name = id.substring(0, id.length - 6); - value = control.val(); + value = Number(control.val()); } else if (id.endsWith('Switch')) { name = id.substring(0, id.length - 6); @@ -1212,6 +1241,9 @@ function cameraUi2Dict() { if (id.endsWith('Entry')) { name = id.substring(0, id.length - 5); value = control.val(); + if (control.hasClass('number')) { + value = Number(value); + } } else if (id.endsWith('Select')) { name = id.substring(0, id.length - 6); @@ -1219,7 +1251,7 @@ function cameraUi2Dict() { } else if (id.endsWith('Slider')) { name = id.substring(0, id.length - 6); - value = control.val(); + value = Number(control.val()); } else if (id.endsWith('Switch')) { name = id.substring(0, id.length - 6); diff --git a/templates/main.html b/templates/main.html index 2962911..a18e4a4 100644 --- a/templates/main.html +++ b/templates/main.html @@ -95,8 +95,12 @@
-
General Settings - ?
+
+ + ? + General Settings + +
@@ -154,10 +158,13 @@ {% for section in main_sections.values() %} {% if section.get('label') and section.get('configs') %} -
{% if section.get('onoff') %} - {% endif %}{{section['label']}} - {% if section.get('description') %}?{% endif %}
-
Show Advanced Settings
+
+ {% if section.get('onoff') %}{% endif %} + {% if section.get('description') %}?{% endif %} + {{section['label']}} + +
+
{% for config in section['configs'] %} {{config_item(config)}} {% endfor %} @@ -165,8 +172,12 @@ {% endif %} {% endfor %} -
Video Device - ?
+
+ + ? + Video Device + +
@@ -243,8 +254,11 @@ {% endfor %}
Camera Name
-
File Storage - ?
+
+ ? + File Storage + +
@@ -294,8 +308,12 @@ {% endfor %}
Storage Device
-
Text Overlay - ?
+
+ + ? + Text Overlay + +
@@ -336,8 +354,12 @@ {% endfor %}
Left Text
-
Video Streaming - ?
+
+ + ? + Video Streaming + +
@@ -389,8 +411,12 @@ {% endfor %}
Streaming Frame Rate
-
Still Images - ?
+
+ + ? + Still Images + +
@@ -442,8 +468,12 @@ {% endfor %}
Image File Name
-
Motion Detection - ?
+
+ + ? + Motion Detection + +
@@ -493,8 +523,12 @@ {% endfor %}
Show Frame Changes
-
Motion Movies - ?
+
+ + ? + Motion Movies + +
@@ -529,8 +563,11 @@ {{config_item(config)}} {% endfor %}
Movie File Name
-
Motion Notifications - ?
+
+ ? + Motion Notifications + +
@@ -613,8 +650,12 @@ {% endfor %}
Email Notifications
-
Working Schedule - ?
+
+ + ? + Working Schedule + +
@@ -696,9 +737,12 @@ {% for section in camera_sections.values() %} {% if section.get('label') and section.get('configs') %} -
{% if section.get('onoff') %} - {% endif %}{{section['label']}} - {% if section.get('description') %}?{% endif %}
+
+ {% if section.get('onoff') %}{% endif %} + {% if section.get('description') %}?{% endif %} + {{section['label']}} + +
Monday
{% for config in section['configs'] %} {{config_item(config)}} -- 2.39.5