370 lines
17 KiB
HTML
370 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<!-- shortcut::favicon.ico -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>SCK Setup</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="loading">
|
||
|
|
<h1 style="color:#0C2EFB; font-family:Arial, sans-serif; padding:100px 10px;">Loading... please wait!</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container" id="app" style="display:none;">
|
||
|
|
|
||
|
|
<div class="topnav sticky ">
|
||
|
|
<div class="bg-black">
|
||
|
|
|
||
|
|
<p class="text-center">Smart Citizen Kit Setup</p>
|
||
|
|
|
||
|
|
<div id="topbackbtn">
|
||
|
|
<a v-show="page[currentPage].back" v-on:click="gotoPage(page[currentPage].backTo)" href="#">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><polygon points="55.7,33.8 39.7,50.2 56.1,66.3 58.9,63.4 45.3,50.1 58.6,36.6 "/></g></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="toplogo">
|
||
|
|
<a v-show="!page[currentPage].back" href="/">
|
||
|
|
<svg version="1.1" id="Capa_1" width="36px" height="36px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
|
||
|
|
<g>
|
||
|
|
<path class="st0" d="M97.6,124.8c0.1,4.5-1.1,8.3-3.5,11.5c-1.6,2.2-3.8,3.7-6.6,4.6c-1.6,0.5-3.3,0.7-5.4,0.7 c-3.8,0-6.9-0.9-9.4-2.8c-2.1-1.6-3.7-3.6-5-6.3c-1.2-2.6-1.9-5.7-2.1-9.1l9.2-0.7c0.4,3.7,1.4,6.5,3,8.1c1.2,1.3,2.5,1.9,4,1.8 c2.1-0.1,3.8-1.1,5.1-3.1c0.6-1,1-2.4,1-4.3c0-2.7-1.2-5.3-3.6-8c-1.9-1.8-4.8-4.5-8.6-8.1c-3.2-3.1-5.5-5.9-6.8-8.4 c-1.4-2.8-2.1-5.8-2.1-9c0-5.8,2-10.3,5.9-13.3c2.4-1.8,5.4-2.7,9-2.7c3.4,0,6.4,0.8,8.9,2.3c1.9,1.2,3.5,2.9,4.6,5 c1.2,2.2,1.9,4.6,2.1,7.4l-9.3,1.7c-0.3-2.6-1-4.7-2.3-6.1c-0.9-1.1-2.2-1.6-3.9-1.6c-1.8,0-3.1,0.8-4,2.4 c-0.8,1.3-1.1,2.8-1.1,4.7c0,2.9,1.3,5.9,3.8,9c1,1.2,2.4,2.5,4.3,4.1c2.2,1.9,3.7,3.2,4.5,3.9c2.4,2.4,4.2,4.7,5.5,7.1 c0.6,1.1,1.1,2.1,1.5,3C97.1,121,97.5,123,97.6,124.8"/>
|
||
|
|
<path class="st0" d="M119.3,141.6c-4.2,0-7.8-1.5-10.8-4.4c-3-2.9-4.4-6.5-4.4-10.7V91.8c0-4.2,1.5-7.8,4.5-10.8 c3-3,6.5-4.4,10.7-4.4c4.2,0,7.8,1.5,10.7,4.5c2.9,3,4.4,6.5,4.4,10.7v7.2h-9.9v-7.4c0-1.5-0.5-2.8-1.6-3.9 c-1.1-1.1-2.4-1.6-3.9-1.6c-1.5,0-2.8,0.5-3.9,1.6c-1.1,1.1-1.6,2.4-1.6,3.9v34.7c0,1.5,0.5,2.8,1.6,3.9c1,1.1,2.4,1.6,3.9,1.6 c1.5,0,2.8-0.5,3.9-1.6c1.1-1.1,1.6-2.4,1.6-3.9v-8.8h9.9v8.9c0,4.2-1.5,7.8-4.5,10.7C127,140.1,123.4,141.6,119.3,141.6"/>
|
||
|
|
<path class="st0" d="M158.3,57.5L158.3,57.5c-3.4,2.7-4.2,7.6-1.7,11.2c13.3,19.2,16.7,44.5,6.8,67.5 c-15.3,35.4-56.4,51.8-91.9,36.5C36.1,157.3,19.7,116.2,35,80.7c9.2-21.2,27.6-35.5,48.6-40.4l5.9,19.8c0.6,1.8,1.9,2,3,0.5 l24.6-35.2c1.1-1.6,0.5-3.4-1.2-4.1L76,5.5c-1.8-0.7-2.8,0.2-2.2,2l5.4,17.9c-25.1,6.3-47,23.7-58.1,49.3 c-18.8,43.6,1.3,94.2,44.9,113c43.6,18.8,94.2-1.3,113-44.9c12.3-28.5,7.9-59.9-8.7-83.5C167.5,55.4,162.1,54.5,158.3,57.5z"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="topinfo">
|
||
|
|
<a v-show="currentPage === 0" v-on:click='gotoPage(6)'>
|
||
|
|
<svg width="29px" height="32px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><g><g><path d="M53.1,73h-7.2c-1.1,0-1.9-0.9-1.9-1.9V44h11v27.1C55,72.1,54.1,73,53.1,73z"/></g></g></g><g><g><g><path d="M55,39H44v-9.1c0-1.1,0.9-1.9,1.9-1.9h7.2c1.1,0,1.9,0.9,1.9,1.9V39z"/></g></g></g><g><path d="M50,96C24.6,96,4,75.4,4,50S24.6,4,50,4s46,20.6,46,46S75.4,96,50,96z M50,12c-21,0-38,17-38,38s17,38,38,38s38-17,38-38 S71,12,50,12z"/></g></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="toast-wrapper"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
|
||
|
|
<div v-show="showDebug">
|
||
|
|
<button class="" type="button" v-on:click='gotoPage("0")'>Start</button>
|
||
|
|
<button class="" type="button" v-on:click='gotoPage()'>Next</button>
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[0].visible'>
|
||
|
|
<h2 class="text-blue text-center">WELCOME TO SMART CITIZEN KIT CONFIGURATION</h2>
|
||
|
|
|
||
|
|
<div v-if="kitstatus.updateNeeded == 'true' || allowForceUpdate " class="text-center p10">
|
||
|
|
<h4 v-if="kitstatus.updateNeeded == 'true'" style="color:red;">FIRMWARE UPDATE IS NEEDED!</h4>
|
||
|
|
<h4>Upload your ESP firmware here:</h4>
|
||
|
|
<form @submit.prevent="submitFirmware" @change="checkUploadForm" method="POST" enctype='multipart/form-data'>
|
||
|
|
<input id="firmware_filename" accept=".bin" type='file' name='update' ref="file" class="p10" style="border:1px solid #ccc">
|
||
|
|
<div v-if="file" class="font70">
|
||
|
|
<p>Size: <b>{{file.size}}</b></p>
|
||
|
|
</div>
|
||
|
|
<input id="firmware_button" type='submit' value='Update' class="btn":disabled=!checkIfFileSelected v-bind:class="{ 'bg-yellow': checkIfFileSelected }">
|
||
|
|
</form>
|
||
|
|
<p id="firmware-update-status" class="text-yellow"></p>
|
||
|
|
<p id="firmware-status-extra">If you need more information please visit <span class="text-blue"><a href="https://docs.smartcitizen.me">docs.smartcitizen.me</a></span></p>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<h4 class="content-wrap">Is this your first time here?</h4>
|
||
|
|
<p class="content-wrap">Before you start, make sure you visit <span class="text-blue"><a href="https://start.smartcitizen.me">start.smartcitizen.me</a></span>. </p><p class="content-wrap">In <b>Online mode</b>, you need to obtain a Device Key (<em>token</em>) to send data to the platform.</p>
|
||
|
|
<div class="side-by-side">
|
||
|
|
<button class="btn bg-yellow btn-big" id="start" type="button" v-on:click='gotoPage()'>Online<br>(Wi-Fi)</button>
|
||
|
|
<button class="btn bg-blue btn-big" id="start" type="button" v-on:click='gotoPage(5)'>Offline<br>(SD-Card)</button>
|
||
|
|
<!-- <p>or go to <span class='text-blue'> <a v-on:click='gotoPage(5)'>SD Card mode</a></span> </p> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[1].visible'>
|
||
|
|
<h4>Device key</h4>
|
||
|
|
<div class="field-token">
|
||
|
|
<label>Token: <b>{{usertoken}}</b></label>
|
||
|
|
<input
|
||
|
|
name="token"
|
||
|
|
autocomplete='off'
|
||
|
|
autocorrect='off'
|
||
|
|
autocapitalize='off'
|
||
|
|
spellcheck='false'
|
||
|
|
type="text"
|
||
|
|
maxlength="6"
|
||
|
|
v-model='usertoken'
|
||
|
|
minlength="6"
|
||
|
|
placeholder="6 letters"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div style="height:20px; margin-top:10px;">
|
||
|
|
<!--
|
||
|
|
<p v-show='!usertokenCheck' style="margin:0;">
|
||
|
|
{{ 6 - usertoken.length }} letters missing.
|
||
|
|
</p>
|
||
|
|
-->
|
||
|
|
<p class="text-red"> {{ this.usertokenError }} </p>
|
||
|
|
</div>
|
||
|
|
<button class="btn next bg-yellow" type="button" v-on:click='checkIfTokenIsValid()'>Next</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[2].visible'>
|
||
|
|
<h4>WiFi connection</h4>
|
||
|
|
<div class="field-wifi">
|
||
|
|
<label>SSID (Network name)</label>
|
||
|
|
<select v-model="selectedWifi" name="ssid" id="ssid" type="text" length=64>
|
||
|
|
<!-- Here goes the Access point list -->
|
||
|
|
<option disabled value="">Select your wifi ({{wifis["nets"].length}})</option>
|
||
|
|
<option v-for="x in sortedWifi" :key="x.id" :value="x.ssid">{{x.ssid}}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="field-group">
|
||
|
|
<label>Password</label>
|
||
|
|
<input name="password" type="text" v-model='wifipass' length=64 placeholder="Your wifi password" autocapitalize="none" >
|
||
|
|
</div>
|
||
|
|
<button class="btn" v-bind:class="{ 'bg-yellow': selectedWifiCheck }" type="button" id="connect" :disabled=!selectedWifiCheck v-on:click="jsPost('set','connect')">Connect</button>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[3].visible'>
|
||
|
|
<h4>Trying to connect..</h4>
|
||
|
|
|
||
|
|
<p>Your kit is now trying to connect to the online platform, and this website has no connection to the kit anymore.</p>
|
||
|
|
<p>Check the light on your Kit:</p>
|
||
|
|
<ul>
|
||
|
|
<li>Your Kit light should be <span class="blue-breathe" >blue</span>.<br />If it's blinking fast, there is a problem with the WiFi credentials.<br />Press the button until the light turns <span class="red-breathe" >red</span> and repeat the process.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[4].visible'>
|
||
|
|
<h4 class="text-blue">Your kit status</h4>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>Mode</td>
|
||
|
|
<td>{{ kitstatus.net }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Wifi</td>
|
||
|
|
<td>{{ kitstatus.wifi }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Battery</td>
|
||
|
|
<td>{{ kitstatus.battPercent }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Published</td>
|
||
|
|
<td>{{ kitstatus.last_publish }}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<p>If you want to run a full setup again, press the button on your Kit for 15 seconds and reconnect, and refresh this page.</p>
|
||
|
|
|
||
|
|
<button class="btn bg-yellow" type="button" v-on:click='gotoPage(2)'>Edit Wifi</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div v-show='page[5].visible'>
|
||
|
|
<h4>SD Card</h4>
|
||
|
|
<p>Your Kit can store the data on a microSD card. Later on, you can read it the CSV files with your computer.</p>
|
||
|
|
<p>This is useful when no Wi-Fi is available at your location.</p>
|
||
|
|
<p>You will need to insert a valid microSD card and click the button below.</p>
|
||
|
|
<p>Once you do it, you will be disconnected and the Kit will start recording data.</p>
|
||
|
|
<!--
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>SD CARD</td>
|
||
|
|
<td>{{ kitstatus.sdcard }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>TIME SYNC</td>
|
||
|
|
<td>{{ kitstatus.time }}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
-->
|
||
|
|
<button class="btn bg-yellow" type="button" v-on:click="jsPost('set', 'synctime')">START LOGGING</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[6].visible'>
|
||
|
|
|
||
|
|
<label for="force-firmware-update">
|
||
|
|
<input type="checkbox" id="force-firmware-update" v-on:click="allowFirmwareUpdate()" />
|
||
|
|
Force allow firmware update
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<h4>Kit info:</h4>
|
||
|
|
<div id="kitinfo" class="font70">
|
||
|
|
<ul>
|
||
|
|
<li v-for="value, index in kitstatus"><b>{{index}}</b>: {{value}}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<button id="copied-notification" class="btn bg-yellow" type="button" v-on:click="copyTextToClipboard()">Copy info to clipboard</button>
|
||
|
|
|
||
|
|
<div id="id-logging">
|
||
|
|
<hr />
|
||
|
|
<p>Log:</p>
|
||
|
|
<ul v-show="logging && logging.length">
|
||
|
|
<li v-for="x in logging" class="font70">
|
||
|
|
{{x}}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<label for="label-showDebug" class="font80">
|
||
|
|
<input type="checkbox" name="" id="label-showDebug" value="" v-model="showDebug"/>
|
||
|
|
Enable Debug buttons
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<p class="font70">Vue.js version: {{vueVersion}}</p>
|
||
|
|
<!--
|
||
|
|
<label for="label-experimental" class="font80">
|
||
|
|
<input type="checkbox" name="" id="label-experimental" value="" v-model="showExperimental"/>
|
||
|
|
Show Experimental (UNSTABLE!)
|
||
|
|
</label>
|
||
|
|
-->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-show='page[7].visible'>
|
||
|
|
<h4>Empty page</h4>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div class="text-center text-grey font80">
|
||
|
|
SAM: {{ kitstatus.SAMversion }}
|
||
|
|
-
|
||
|
|
ESP: {{ kitstatus.ESPversion }}
|
||
|
|
<div v-show="showDebug" >
|
||
|
|
<hr />
|
||
|
|
{{ currentPage }} - {{ page[currentPage].footer }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- experimental -->
|
||
|
|
|
||
|
|
<div v-show="showExperimental" id="id-experimental" class="mt20">
|
||
|
|
<p v-show="development">Development mode</p>
|
||
|
|
|
||
|
|
<label for="id-show-interval">
|
||
|
|
<input type="checkbox" name="" id="id-show-interval" value="" v-model="showInterval" />
|
||
|
|
Intervals
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div v-show="showInterval" id="intervals">
|
||
|
|
<h5>Global - Intervals</h5>
|
||
|
|
<div>
|
||
|
|
<p class="font70">How often should the kit go online to publish the data?</p>
|
||
|
|
<label for="pubint">Publish interval hours: {{publishinterval}}</label>
|
||
|
|
<input type="range" name="pubint" id="" v-model="publishinterval" max="100" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p class="font70">How often should the kit poll the sensors?</p>
|
||
|
|
<label for="readint">Reading interval seconds: {{readinginterval}}</label>
|
||
|
|
<input type="range" name="readint" id="" value="60" v-model="readinginterval" max="1000" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p>Estimated battery duration: {{ Number(publishinterval * (readinginterval / 100)).toFixed(1) }} Hours</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<label for="id-showsdcard">
|
||
|
|
<input type="checkbox" name="" id="id-showsdcard" value="" v-model="showSdCard" />
|
||
|
|
SD Card
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div v-show="showSdCard" id="sdcard">
|
||
|
|
|
||
|
|
<h5>SD CARD</h5>
|
||
|
|
<div>
|
||
|
|
<p class="font70">The kit should never post my data with Wifi</p>
|
||
|
|
<label for="sdlog">
|
||
|
|
<input type="checkbox" name="usesdcard" id="sdlog" value="" v-model="sdlog" />
|
||
|
|
Log *only* to SD Card
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div v-if="sdlog">
|
||
|
|
<p class="font70">When your kit runs out of battery, it loses the time. This will allow the kit to go online and fetch the time.</p>
|
||
|
|
<p class="font70">If you don't, all your measurements will be dated from the year 1971</p>
|
||
|
|
<label for="usewifisync">
|
||
|
|
<input type="checkbox" name="usewifisync" id="usewifisync" v-model="wifisync" />
|
||
|
|
Use Wifi to sync time
|
||
|
|
</label>
|
||
|
|
<p v-if="!wifipass && wifisync" class="text-red font80">Don't forget to give the kit your wifi password!</p>
|
||
|
|
</div>
|
||
|
|
<div v-show="browsertime != devicetime" id="timesync">
|
||
|
|
<table>
|
||
|
|
<tr><td>Browser time:</td><td>{{ browsertime }}</td></tr>
|
||
|
|
<tr><td>Device time: </td><td>{{ devicetime }}</td></tr>
|
||
|
|
<tr><td>Diff: </td><td>{{ browsertime - devicetime }}</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="font70">When you click this button the device will go offline and start working. </p>
|
||
|
|
<p class="font70">(You will loose connection to the device)</p>
|
||
|
|
<button class="btn bg-red" type="button" v-on:click="jsPost('set', 'synctime')">Start logging on SD Card</button>
|
||
|
|
|
||
|
|
</div> <!-- /sd card -->
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<label for="id-show-sensors">
|
||
|
|
<input type="checkbox" name="" id="id-show-sensors" value="" v-model="sensors"/>
|
||
|
|
Show sensors
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div id="sensors" v-show="sensors">
|
||
|
|
<h5>Sensors</h5>
|
||
|
|
<p class="font70">The new SCK allows you to configure each sensor independently.</p>
|
||
|
|
<div class="check-sensor">
|
||
|
|
<label for="sensorlight">Light
|
||
|
|
<input type="checkbox" name="sensor1" id="sensorlight" value="" v-model="sensor1" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="check-sensor">
|
||
|
|
<label for="sensormic">Microphone
|
||
|
|
<input type="checkbox" name="sensor2" id="sensormic" value="" v-model="sensor2" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="check-sensor">
|
||
|
|
<label for="sensorco2">CO2
|
||
|
|
<input type="checkbox" name="sensor3" id="sensorco2" value="" v-model="sensor3" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="check-sensor">
|
||
|
|
<label for="sensorthermo">Thermometer
|
||
|
|
<input type="checkbox" name="sensor4" id="sensorthermo" value="" v-model="sensor4" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div><!-- /sensors -->
|
||
|
|
|
||
|
|
</div> <!-- /experimental -->
|
||
|
|
|
||
|
|
</div><!-- /content -->
|
||
|
|
</div><!-- container -->
|
||
|
|
|
||
|
|
<!-- 'gulp compress' will inject the following and create 2 files, final.html and index.html.gz -->
|
||
|
|
<style>
|
||
|
|
/* inject css.css */
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8" >
|
||
|
|
// inject vue.min.js
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
// inject main.js
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|