Added start of calibration wizard

This commit is contained in:
Mark van Renswoude 2018-01-28 20:03:47 +01:00
parent 5d6514f6e2
commit b7d7d5e18c
5 changed files with 200 additions and 39 deletions

View File

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

2
web/dist/bundle.css vendored

File diff suppressed because one or more lines are too long

View File

@ -37,8 +37,8 @@
{{ $t('loading') }} {{ loadingIndicator }}
</div>
<div v-if="!loading">
<div class="tabs">
<div v-if="!loading && calibration === null">
<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>
<label for="ntpServer">{{ $t('system.ntpServer') }}</label>
<input type="text" id="ntpServer" v-model="system.ntpServer">
<div class="horizontal">
<label for="ntpServer">{{ $t('system.ntpServer') }}</label>
<input type="text" id="ntpServer" v-model="system.ntpServer">
</div>
<label for="ntpInterval">{{ $t('system.ntpInterval') }}</label>
<input type="number" id="ntpInterval" v-model="system.ntpInterval">
<div class="horizontal">
<label for="ntpInterval">{{ $t('system.ntpInterval') }}</label>
<input type="number" id="ntpInterval" v-model="system.ntpInterval">
</div>
<label for="lat">{{ $t('system.ntpLat') }}</label>
<input type="text" id="lat" v-model="system.lat">
<div class="horizontal">
<label for="lat">{{ $t('system.ntpLat') }}</label>
<input type="text" id="lat" v-model="system.lat">
</div>
<label for="lat">{{ $t('system.ntpLat') }}</label>
<input type="text" id="lat" v-model="system.lat">
<div class="horizontal">
<label for="lat">{{ $t('system.ntpLat') }}</label>
<input type="text" id="lat" v-model="system.lat">
</div>
<label for="lng">{{ $t('system.ntpLng') }}</label>
<input type="text" id="lng" v-model="system.lng">
<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>
<label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
<input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
<div class="horizontal">
<label for="pinLEDAP">{{ $t('system.pinLEDAP') }}</label>
<input type="number" id="pinLEDAP" v-model.number="system.pins.ledAP">
</div>
<label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
<input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
<div class="horizontal">
<label for="pinLEDSTA">{{ $t('system.pinLEDSTA') }}</label>
<input type="number" id="pinLEDSTA" v-model.number="system.pins.ledSTA">
</div>
<label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
<input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
<div class="horizontal">
<label for="pinAPButton">{{ $t('system.pinAPButton') }}</label>
<input type="number" id="pinAPButton" v-model.number="system.pins.apButton">
</div>
<label for="pinPWMDriverSDA">{{ $t('system.pinPWMDriverSDA') }}</label>
<input type="number" id="pinPWMDriverSDA" v-model.number="system.pins.pwmSDA">
<div class="horizontal">
<label for="pinPWMDriverSDA">{{ $t('system.pinPWMDriverSDA') }}</label>
<input type="number" id="pinPWMDriverSDA" v-model.number="system.pins.pwmSDA">
</div>
<label for="pinPWMDriverSCL">{{ $t('system.pinPWMDriverSCL') }}</label>
<input type="number" id="pinPWMDriverSCL" v-model.number="system.pins.pwmSCL">
<div class="horizontal">
<label for="pinPWMDriverSCL">{{ $t('system.pinPWMDriverSCL') }}</label>
<input type="number" id="pinPWMDriverSCL" v-model.number="system.pins.pwmSCL">
</div>
<label for="pwmAddress">{{ $t('system.pwmAddress') }}</label>
<input type="number" id="pwmAddress" v-model.number="system.pwmAddress">
<div class="horizontal">
<label for="pwmAddress">{{ $t('system.pwmAddress') }}</label>
<input type="number" id="pwmAddress" v-model.number="system.pwmAddress">
</div>
<label for="pwmFrequency">{{ $t('system.pwmFrequency') }}</label>
<input type="number" id="pwmFrequency" v-model.number="system.pwmFrequency">
<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">

View File

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

View File

@ -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;
}