From b7d7d5e18c90e066651485eed54c887f16fe583d Mon Sep 17 00:00:00 2001 From: Mark van Renswoude Date: Sun, 28 Jan 2018 20:03:47 +0100 Subject: [PATCH] Added start of calibration wizard --- web/app.js | 43 +++++++++++++++- web/dist/bundle.css | 2 +- web/index.html | 120 ++++++++++++++++++++++++++++++++------------ web/lang.js | 30 +++++++++-- web/site.scss | 44 ++++++++++++++-- 5 files changed, 200 insertions(+), 39 deletions(-) diff --git a/web/app.js b/web/app.js index 708477c..434a351 100644 --- a/web/app.js +++ b/web/app.js @@ -158,7 +158,9 @@ function startApp() location: '', fixedTimes: [], - relativeTimes: [] + relativeTimes: [], + + calibration: null }, created: function() @@ -785,6 +787,45 @@ function startApp() result += minutes; return result; + }, + + startCalibration: function() + { + var self = this; + self.calibration = { + wizardStep: 0, + stepCount: self.steps.length, + steps: [] + }; + + // TODO load step settings + }, + + stopCalibration: function() + { + this.calibration = null; + }, + + applyCalibration: function() + { + var self = this; + + // TODO applyCalibration + self.stopCalibration(); + }, + + hasNextCalibrationStep: function() + { + return this.calibration.wizardStep < 1; + }, + + nextCalibrationStep: function() + { + var self = this; + self.calibration.wizardStep++; + + if (self.calibration.wizardStep == 2) + self.applyCalibration(); } }, diff --git a/web/dist/bundle.css b/web/dist/bundle.css index 2fd806e..e4ddc12 100644 --- a/web/dist/bundle.css +++ b/web/dist/bundle.css @@ -1 +1 @@ -html{box-sizing:border-box;font-size:62.5%}*,:after,:before{box-sizing:inherit}body{background-color:#000;color:#fff;font-family:Verdana,Arial,sans-serif;font-size:1.3em;font-weight:300;letter-spacing:.01em;line-height:1.3;padding-bottom:3rem}@media screen and (min-width:768px){body{padding-top:3rem}}a{text-decoration:none}[v-cloak]{display:none}#container{background:#202020;margin-top:2rem;padding:1rem;box-shadow:0 0 50px #fcf6cf;border:solid 1px #000}@media screen and (min-width:768px){#container{width:768px;margin-left:auto;margin-right:auto}}.header{position:relative}.header img{float:left;margin-right:1rem}@media screen and (max-width:767px){.header .wifistatus{clear:both;margin-top:3rem}}@media screen and (min-width:768px){.header .wifistatus{position:absolute;right:0;top:0}}.header .wifistatus .indicator{display:inline-block;width:1rem;height:1rem;border-radius:50%;margin-right:.5rem}.header .wifistatus .indicator[data-status=connected]{background-color:#396}.header .wifistatus .indicator[data-status=disconnected]{border:solid 1px grey}.header .wifistatus .indicator[data-status=connecting]{background-color:#f93}.header .wifistatus .indicator[data-status=error]{background-color:#c00}.button,.check .control,.notification,.panel .panel-body,.panel .panel-header,.radio .control,.warning,button,h3,input[type=submit],select{border:1px solid #111;border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -1px 3px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.15)}.button.active,.button:active,button.active,button:active,input[type=number],input[type=password],input[type=submit].active,input[type=submit]:active,input[type=text],textarea{border:1px solid #111;border-color:#000 #111 #111;box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px rgba(255,255,255,.08)}.button,button,input[type=submit]{display:inline-block;padding:0 12px;color:#ddd;background:#404040;cursor:pointer;line-height:3rem}.button.focus,.button:focus,.button:hover,button.focus,button:focus,button:hover,input[type=submit].focus,input[type=submit]:focus,input[type=submit]:hover{color:#ddd;background:#505050;outline:0}.button.active,.button:active,button.active,button:active,input[type=submit].active,input[type=submit]:active{color:#ccc;background:#282828}.button-primary,input[type=submit]{background:#2265a1}.button-primary.focus,.button-primary:focus,.button-primary:hover,input[type=submit].focus,input[type=submit]:focus,input[type=submit]:hover{background:#2672b6}a.button{text-decoration:none}.tabs{clear:both;margin-top:3rem}.tabs>.button{margin-left:-1px;border-radius:0}.tabs>.button:first-child{margin-left:0;border-radius:3px 0 0 3px}.tabs>.button:last-child{border-radius:0 3px 3px 0}.tabs>.button:focus{position:relative;z-index:1}.version{color:grey;font-size:8pt;text-align:center;margin-top:2rem}.notificationContainer{position:fixed;top:2rem;z-index:666}@media screen and (min-width:768px){.notificationContainer{width:512px;left:50%}}.notification{background:#297ab8;box-shadow:0 0 10px #000;color:#fff;cursor:pointer;padding:.5em;margin-bottom:2rem;position:relative}@media screen and (min-width:768px){.notification{left:-50%}}.notification .message{white-space:pre}.notification.error{background:#973a38}.check,.radio{display:inline-block;cursor:pointer;user-select:none;white-space:nowrap}.check .control,.radio .control{background:#404040;display:inline-block;width:16px;height:16px;position:relative}.check .label,.radio .label{display:inline-block;margin-left:.5em;vertical-align:top}.check.checked .control,.radio.checked .control{background:#606060}.check.disabled,.radio.disabled{cursor:not-allowed}.radio .control,.radio .control .inner{border-radius:50%}.radio .control .inner{color:#000;position:absolute;top:5px;left:5px;width:6px;height:6px}.radio.checked .control .inner{background:#ccc;box-shadow:0 1px rgba(0,0,0,.5)}.check .control .inner{position:absolute;top:5px;left:4px;width:6px;height:3px}.check.checked .control .inner{border:solid rgba(255,255,255,.8);border-width:0 0 2px 2px;transform:rotate(-45deg);box-shadow:-1px 0 rgba(0,0,0,.2),0 1px rgba(0,0,0,.5)}.form-control{margin-top:1em}input[type=number],input[type=password],input[type=text],textarea{background:#404040;color:#fff;padding:.5em;width:100%}select{background:#404040;color:#fff;padding:.5em}input[type=range]{margin-top:1rem;margin-bottom:1rem}h1{font-size:2rem;margin:0}h2{color:silver;font-size:1.2rem;margin:0}h3{color:grey;background:#282828;font-size:1.2rem;padding:.5rem}h4{font-size:1.4rem}input[disabled]{cursor:not-allowed;color:grey;background:#262626}label{display:block;margin-top:1em;margin-bottom:.5em}.label-inline{margin-right:2rem}.hint{display:block;font-size:8pt;color:grey;margin-bottom:1.5rem}.loading{margin-top:3rem;text-align:center}.suboptions{margin-left:5rem}.buttons{text-align:center}.sliders{margin-top:2rem}.step{margin-left:3rem;margin-right:3rem;position:relative}.step .slidercontainer{margin-right:4em}.step .value{position:absolute;right:0;top:.1rem;color:grey}.slidercontainer{margin-top:1rem}.slider{-webkit-appearance:none;width:100%;height:.5rem;border-radius:.25rem;background:#404040;outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2rem;height:2rem;border-radius:50%;background:#fcf6cf;cursor:pointer}.slider::-moz-range-thumb{width:2rem;height:2rem;border-radius:50%;background:#fcf6cf;cursor:pointer}.warning{background:#973a38;padding:.5em;margin-bottom:2rem;margin-top:1rem}.nodata{color:grey;text-align:center}.clear{clear:both}.panel{margin-bottom:2rem;padding:0}.panel .panel-header{border-radius:3px 3px 0 0;border-bottom-width:0;padding:.5em;background:#404040;color:#fff}.panel .panel-header label{font-size:1em}@media screen and (min-width:768px){.panel .panel-header .actions{float:right}}.panel .panel-header .label,.panel .panel-header a{color:#fff}.panel .panel-body{border-radius:0 0 3px 3px;background:#303030;padding:2rem}.panel.active .panel-header{background:#3b4a58;color:#fff}.inline{display:inline-block;width:auto}.weekdays{margin-top:1rem}.weekdays .label{width:8em} \ No newline at end of file +html{box-sizing:border-box;font-size:62.5%}*,:after,:before{box-sizing:inherit}body{background-color:#000;color:#fff;font-family:Verdana,Arial,sans-serif;font-size:1.3em;font-weight:300;letter-spacing:.01em;line-height:1.3;padding-bottom:3rem}@media screen and (min-width:768px){body{padding-top:3rem}}a{text-decoration:none}[v-cloak]{display:none}#container{background:#202020;margin-top:2rem;padding:1rem;box-shadow:0 0 50px #fcf6cf;border:solid 1px #000}@media screen and (min-width:768px){#container{width:768px;margin-left:auto;margin-right:auto}}.header{position:relative}.header img{float:left;margin-right:1rem}@media screen and (max-width:767px){.header .wifistatus{clear:both;margin-top:3rem}}@media screen and (min-width:768px){.header .wifistatus{position:absolute;right:0;top:0}}.header .wifistatus .indicator{display:inline-block;width:1rem;height:1rem;border-radius:50%;margin-right:.5rem}.header .wifistatus .indicator[data-status=connected]{background-color:#396}.header .wifistatus .indicator[data-status=disconnected]{border:solid 1px grey}.header .wifistatus .indicator[data-status=connecting]{background-color:#f93}.header .wifistatus .indicator[data-status=error]{background-color:#c00}.button,.check .control,.notification,.panel .panel-body,.panel .panel-header,.radio .control,.warning,button,h3,input[type=submit],select{border:1px solid #111;border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.1),inset 0 -1px 3px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.15)}.button.active,.button:active,button.active,button:active,input[type=number],input[type=password],input[type=submit].active,input[type=submit]:active,input[type=text],textarea{border:1px solid #111;border-color:#000 #111 #111;box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px rgba(255,255,255,.08)}.button,button,input[type=submit]{display:inline-block;padding:0 12px;color:#ddd;background:#404040;cursor:pointer;line-height:3rem}.button.focus,.button:focus,.button:hover,button.focus,button:focus,button:hover,input[type=submit].focus,input[type=submit]:focus,input[type=submit]:hover{color:#ddd;background:#505050;outline:0}.button.active,.button:active,button.active,button:active,input[type=submit].active,input[type=submit]:active{color:#ccc;background:#282828}.button-primary,input[type=submit]{background:#2265a1}.button-primary.focus,.button-primary:focus,.button-primary:hover,input[type=submit].focus,input[type=submit]:focus,input[type=submit]:hover{background:#2672b6}a.button{text-decoration:none}.navigation{clear:both;margin-top:3rem}.tabs>.button{margin-left:-1px;border-radius:0}.tabs>.button:first-child{margin-left:0;border-radius:3px 0 0 3px}.tabs>.button:last-child{border-radius:0 3px 3px 0}.tabs>.button:focus{position:relative;z-index:1}.version{color:grey;font-size:8pt;text-align:center;margin-top:2rem}.notificationContainer{position:fixed;top:2rem;z-index:666}@media screen and (min-width:768px){.notificationContainer{width:512px;left:50%}}.notification{background:#297ab8;box-shadow:0 0 10px #000;color:#fff;cursor:pointer;padding:.5em;margin-bottom:2rem;position:relative}@media screen and (min-width:768px){.notification{left:-50%}}.notification .message{white-space:pre}.notification.error{background:#973a38}.check,.radio{display:inline-block;cursor:pointer;user-select:none;white-space:nowrap}.check .control,.radio .control{background:#404040;display:inline-block;width:16px;height:16px;position:relative}.check .label,.radio .label{display:inline-block;margin-left:.5em;vertical-align:top}.check.checked .control,.radio.checked .control{background:#606060}.check.disabled,.radio.disabled{cursor:not-allowed}.radio .control,.radio .control .inner{border-radius:50%}.radio .control .inner{color:#000;position:absolute;top:4px;left:4px;width:6px;height:6px}.radio.checked .control .inner{background:#ccc;box-shadow:0 1px rgba(0,0,0,.5)}.check .control .inner{position:absolute;top:5px;left:4px;width:6px;height:3px}.check.checked .control .inner{border:solid rgba(255,255,255,.8);border-width:0 0 2px 2px;transform:rotate(-45deg);box-shadow:-1px 0 rgba(0,0,0,.2),0 1px rgba(0,0,0,.5)}.form-control{margin-top:1em}input[type=number],input[type=password],input[type=text],textarea{background:#404040;color:#fff;padding:.5em;width:100%}select{background:#404040;color:#fff;padding:.5em}input[type=range]{margin-top:1rem;margin-bottom:1rem}h1{font-size:2rem;margin:0}h2{color:silver;font-size:1.2rem;margin:0}h3{color:grey;background:#282828;font-size:1.2rem;padding:.5rem}h4{font-size:1.4rem}input[disabled]{cursor:not-allowed;color:grey;background:#262626}label{display:block;margin-top:1em;margin-bottom:.5em}.label-inline{margin-right:2rem}@media screen and (min-width:768px){.horizontal label{display:inline-block}.horizontal input[type=number],.horizontal input[type=password],.horizontal input[type=text],.horizontal textarea{display:inline-block;float:right;width:50%}.horizontal:after{clear:both}}.hint{display:block;font-size:8pt;color:grey;margin-bottom:1.5rem}.loading{margin-top:3rem;text-align:center}.suboptions{margin-left:5rem}.buttons{text-align:center}.sliders{margin-top:2rem}.step{margin-left:3rem;margin-right:3rem;position:relative}.step .slidercontainer{margin-right:4em}.step .value{position:absolute;right:0;top:.1rem;color:grey}.slidercontainer{margin-top:1rem}.slider{-webkit-appearance:none;width:100%;height:.5rem;border-radius:.25rem;background:#404040;outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2rem;height:2rem;border-radius:50%;background:#fcf6cf;cursor:pointer}.slider::-moz-range-thumb{width:2rem;height:2rem;border-radius:50%;background:#fcf6cf;cursor:pointer}.warning{background:#973a38;padding:.5em;margin-bottom:2rem;margin-top:1rem}.nodata{color:grey;text-align:center}.clear{clear:both}.panel{margin-bottom:2rem;padding:0}.panel .panel-header{border-radius:3px 3px 0 0;border-bottom-width:0;padding:.5em;background:#404040;color:#fff}.panel .panel-header label{font-size:1em}@media screen and (min-width:768px){.panel .panel-header .actions{float:right}}.panel .panel-header .label,.panel .panel-header a{color:#fff}.panel .panel-body{border-radius:0 0 3px 3px;background:#303030;padding:2rem}.panel.active .panel-header{background:#3b4a58;color:#fff}.inline{display:inline-block;width:auto}.weekdays{margin-top:1rem}.weekdays .label{width:8em}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0} \ No newline at end of file diff --git a/web/index.html b/web/index.html index 389fcd6..59f45eb 100644 --- a/web/index.html +++ b/web/index.html @@ -37,8 +37,8 @@ {{ $t('loading') }} {{ loadingIndicator }} -
-
+
+
{{ $t('status.tabTitle') }}{{ $t('triggers.tabTitle') }}{{ $t('connection.tabTitle') }}{{ $t('system.tabTitle') }}
@@ -145,7 +145,7 @@
- +
@@ -202,7 +202,7 @@
- +
@@ -248,7 +248,7 @@
- +
@@ -265,7 +265,7 @@
- +
@@ -273,6 +273,14 @@
+

{{ $t('system.calibrateTitle') }}

+ + {{ $t('system.calibrateHint') }} + +
+ {{ $t('system.calibrateButton') }} +
+

{{ $t('system.ntpTitle') }}

@@ -280,20 +288,30 @@ {{ $t('triggers.timeInternet') }} - - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
@@ -303,26 +321,40 @@

{{ $t('system.pinsTitle') }}

- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +

{{ $t('system.mapsTitle') }}

@@ -331,12 +363,38 @@ {{ $t('system.mapsAPIKeyhint') }}
- +
+ +
+
+ « {{ $t('calibration.backButton') }} +
+ +

{{ $t('calibration.title') }}

+ +
+ + +
+ +
+ step 2 +
+ +
+ {{ $t(hasNextCalibrationStep() ? 'calibration.nextButton' : 'calibration.applyButton') }} +
+
+
diff --git a/web/lang.js b/web/lang.js index 5dc8ad1..406e836 100644 --- a/web/lang.js +++ b/web/lang.js @@ -109,6 +109,10 @@ var messages = { pinsTitle: 'Hardware pinout', mapsTitle: 'Google Maps API', firmwareTitle: 'Firmware update', + calibrateTitle: 'Calibrate', + + calibrateButton: 'Calibrate steps', + calibrateHint: 'Use the button below to configure the number of steps, and to adjust the brightness of each individual step', ntpServer: 'NTP server', ntpInterval: 'Refresh interval (in minutes)', @@ -143,6 +147,14 @@ var messages = { searchLocation: 'Could not look up location coordinates', applyTimeTriggers: 'Could not save time trigger settings', applyMotionTriggers: 'Could not save motion trigger settings' + }, + + calibration: { + title: 'Calibration wizard', + backButton: 'Back', + stepCount: 'Number of steps', + nextButton: 'Next', + applyButton: 'Apply' } }, @@ -232,16 +244,16 @@ var messages = { title: 'Verbinding configuratie', accesspoint: 'Access point inschakelen', - accesspointhint: 'Maakt het mogelijk om een directe connectie vanaf een apparaat naar deze Trap module te maken om de module te configureren. De Trap module is te benaderen via http://192.168.1.4/ nadat je connectie hebt gemaakt. Schakel deze optie uit na het configureren, aangezien deze niet beveiligd is. Je kunt deze optie ook inschakelen door op de Access point knop te drukken totdat de LED aan gaat.', + accesspointHint: 'Maakt het mogelijk om een directe connectie vanaf een apparaat naar deze Trap module te maken om de module te configureren. De Trap module is te benaderen via http://192.168.1.4/ nadat je connectie hebt gemaakt. Schakel deze optie uit na het configureren, aangezien deze niet beveiligd is. Je kunt deze optie ook inschakelen door op de Access point knop te drukken totdat de LED aan gaat.', stationmode: 'Verbinding met WiFi maken', - stationmodehint: 'Verbind deze Trap module aan je eigen WiFi router. Vul hieronder het SSID en wachtwoord in, en configureer eventuel de overige opties.', + stationmodeHint: 'Verbind deze Trap module aan je eigen WiFi router. Vul hieronder het SSID en wachtwoord in, en configureer eventuel de overige opties.', ssid: 'SSID', password: 'Wachtwoord', dhcp: 'Gebruik DHCP', - dhcphint: 'Automatisch een IP adres toewijzen aan deze Trap module. Waarschijnlijk wil je deze optie aan laten, tenzij je weet waar je mee bezig bent.', + dhcpHint: 'Automatisch een IP adres toewijzen aan deze Trap module. Waarschijnlijk wil je deze optie aan laten, tenzij je weet waar je mee bezig bent.', ipaddress: 'IP adres', subnetmask: 'Subnet masker', @@ -256,6 +268,10 @@ var messages = { pinsTitle: 'Hardware aansluitingen', mapsTitle: 'Google Maps API', firmwareTitle: 'Firmware bijwerken', + calibrateTitle: 'Kalibratie', + + calibrateButton: 'Kalibreer treden', + calibrateHint: 'Gebruik onderstaande knop om het aantal treden in te stellen, en om de helderheid van elke trede aan te passen', ntpServer: 'NTP server', ntpInterval: 'Ververs interval (in minuten)', @@ -290,6 +306,14 @@ var messages = { searchLocation: 'Kan locatie coordinaten niet bepalen', applyTimeTriggers: 'Kan tijd trigger instellingen niet opslaan', applyMotionTriggers: 'Kan beweging trigger instellingen niet opslaan' + }, + + calibration: { + title: 'Kalibratie wizard', + backButton: 'Terug', + stepCount: 'Aantal treden', + nextButton: 'Volgende', + applyButton: 'Toepassen' } } } \ No newline at end of file diff --git a/web/site.scss b/web/site.scss index b9651cf..4e5ad9f 100644 --- a/web/site.scss +++ b/web/site.scss @@ -165,11 +165,14 @@ a.button } -.tabs +.navigation { clear: both; margin-top: 3rem; +} +.tabs +{ &>.button { margin-left: -1px; @@ -304,8 +307,8 @@ a.button { color: black; position: absolute; - top: 5px; - left: 5px; + top: 4px; + left: 4px; width: 6px; height: 6px; } @@ -418,6 +421,30 @@ label } + +@media #{$mediumScreen} +{ + .horizontal + { + label + { + display: inline-block; + } + + input[type=text], input[type=number], input[type=password], textarea + { + display: inline-block; + float: right; + width: 50%; + } + + &:after + { + clear: both; + } + } +} + .hint { display: block; @@ -600,4 +627,15 @@ label { width: 8em; } +} + + +.fade-enter-active, .fade-leave-active +{ + transition: opacity .5s; +} + +.fade-enter, .fade-leave-to +{ + opacity: 0; } \ No newline at end of file