Added start of calibration wizard

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();
       }
     },
 

web/index.html

@@ -37,8 +37,8 @@
           {{ $t('loading') }} {{ loadingIndicator }}
         </div>
 
-        <div v-if="!loading">
+        <div v-if="!loading && calibration === null">
-          <div class="tabs">
+          <div class="navigation tabs">
             <a class="button" :class="{ 'active': activeTab == 'status' }" @click="activeTab = 'status'">{{ $t('status.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'triggers' }" @click="activeTab = 'triggers'">{{ $t('triggers.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'connection' }" @click="activeTab = 'connection'">{{ $t('connection.tabTitle') }}</a><a class="button" :class="{ 'active': activeTab == 'system' }" @click="activeTab = 'system'">{{ $t('system.tabTitle') }}</a>
           </div>
 
@@ -145,7 +145,7 @@
               </div>
 
               <div class="buttons">
-                <input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
+                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
               </div>
             </form>
 
@@ -202,7 +202,7 @@
               </div>
 
               <div class="buttons">
-                <input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
+                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
               </div>
             </form>
           </div>
@@ -248,7 +248,7 @@
               <input type="text" :placeholder="$t('connection.hostnamePlaceholder')" id="hostname" v-model="connection.hostname" :disabled="!connection.station">
 
               <div class="buttons">
-                <input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
+                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
               </div>
             </form>
           </div>
@@ -265,7 +265,7 @@
               <input type="file" id="firmwareFile">
 
               <div class="buttons">
-                <input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
+                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
               </div>
 
               <div v-if="uploadProgress !== false">
@@ -273,6 +273,14 @@
               </div>
             </form>
 
+            <h3>{{ $t('system.calibrateTitle') }}</h3>
+
+            <span class="hint">{{ $t('system.calibrateHint') }}</span>
+
+            <div class="buttons">
+              <a class="button button-primary" @click.prevent="startCalibration">{{ $t('system.calibrateButton') }}</a>
+            </div>
+
             <form @submit.prevent="applySystem">
               <h3>{{ $t('system.ntpTitle') }}</h3>
 
@@ -280,20 +288,30 @@
                 {{ $t('triggers.timeInternet') }}
               </div>
 
+              <div class="horizontal">
                 <label for="ntpServer">{{ $t('system.ntpServer') }}</label>
                 <input type="text" id="ntpServer" v-model="system.ntpServer">
+              </div>
 
+              <div class="horizontal">
                 <label for="ntpInterval">{{ $t('system.ntpInterval') }}</label>
                 <input type="number" id="ntpInterval" v-model="system.ntpInterval">
+              </div>
 
+              <div class="horizontal">
                 <label for="lat">{{ $t('system.ntpLat') }}</label>
                 <input type="text" id="lat" v-model="system.lat">
+              </div>
 
+              <div class="horizontal">
                 <label for="lat">{{ $t('system.ntpLat') }}</label>
                 <input type="text" id="lat" v-model="system.lat">
+              </div>
 
+              <div class="horizontal">
                 <label for="lng">{{ $t('system.ntpLng') }}</label>
                 <input type="text" id="lng" v-model="system.lng">
+              </div>
 
               <div class="suboptions">
                 <label for="location" class="label-inline">{{ $t('system.ntpLocation') }}</label>
@@ -303,26 +321,40 @@
 
               <h3>{{ $t('system.pinsTitle') }}</h3>
 
+              <div class="horizontal">
                 <label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
                 <input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
+              </div>
 
+              <div class="horizontal">
                 <label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
                 <input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
+              </div>
 
+              <div class="horizontal">
                 <label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
                 <input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
+              </div>
 
+              <div class="horizontal">
                 <label for="pinPWMDriverSDA">{{ $t('system.pinPWMDriverSDA') }}</label>
                 <input type="number" id="pinPWMDriverSDA" v-model.number="system.pins.pwmSDA">
+              </div>
 
+              <div class="horizontal">
                 <label for="pinPWMDriverSCL">{{ $t('system.pinPWMDriverSCL') }}</label>
                 <input type="number" id="pinPWMDriverSCL" v-model.number="system.pins.pwmSCL">
+              </div>
 
+              <div class="horizontal">
                 <label for="pwmAddress">{{ $t('system.pwmAddress') }}</label>
                 <input type="number" id="pwmAddress" v-model.number="system.pwmAddress">
+              </div>
 
+              <div class="horizontal">
                 <label for="pwmFrequency">{{ $t('system.pwmFrequency') }}</label>
                 <input type="number" id="pwmFrequency" v-model.number="system.pwmFrequency">
+              </div>
 
               <h3>{{ $t('system.mapsTitle') }}</h3>
 
@@ -331,12 +363,38 @@
               <span class="hint">{{ $t('system.mapsAPIKeyhint') }}</span>
 
               <div class="buttons">
-                <input class="button-primary" type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
+                <input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
               </div>
             </form>
           </div>
         </div>
 
+        <!--
+
+          Calibration
+
+        -->
+        <div v-if="!loading && calibration !== null">
+          <div class="navigation">
+            <a class="button" @click.prevent="stopCalibration">&laquo; {{ $t('calibration.backButton') }}</a>
+          </div>
+
+          <h3>{{ $t('calibration.title') }}</h3>
+
+          <div class="horizontal">
+            <label for="stepCount">{{ $t('calibration.stepCount') }}</label>
+            <input type="number" id="stepCount" v-model.number="calibration.stepCount">
+          </div>
+
+          <div v-if="calibration.wizardStep >= 1">
+            step 2
+          </div>
+
+          <div class="buttons">
+            <a class="button button-primary" @click.prevent="nextCalibrationStep">{{ $t(hasNextCalibrationStep() ? 'calibration.nextButton' : 'calibration.applyButton') }}</a>
+          </div>
+        </div>
+
         <div class="clearfix"></div>
       </div>
       <div class="version">

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'
     }
   }
 }

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;
+    top: 4px;
-    left: 5px;
+    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;
@@ -601,3 +628,14 @@ label
     width: 8em;
   }
 }
+
+
+.fade-enter-active, .fade-leave-active
+{
+  transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to
+{
+  opacity: 0;
+}