Added the new dashboard page using materialize, not polished yet
This commit is contained in:
anschrammh
parent
97eba55e35
commit
4855e2c244
@ -3,23 +3,38 @@
|
||||
<head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
body
|
||||
{
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section {
|
||||
section
|
||||
{
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.switch label input[type=checkbox]:checked+.lever {
|
||||
.switch label input[type=checkbox]:checked+.lever
|
||||
{
|
||||
background-color: #fa3 !important;
|
||||
}
|
||||
|
||||
.switch label input[type=checkbox]:checked+.lever:after {
|
||||
.switch label input[type=checkbox]:checked+.lever:after
|
||||
{
|
||||
background-color: #f93 !important;
|
||||
}
|
||||
|
||||
.mode-img
|
||||
{
|
||||
width:40px;
|
||||
}
|
||||
|
||||
.cursorPointer:hover
|
||||
{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
@ -28,66 +43,82 @@
|
||||
<script src="rsrc/materialize.js"></script>
|
||||
<title>ESP8266 DASHBOARD</title>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="init();">
|
||||
<header>
|
||||
<nav>
|
||||
<div class="nav-wrapper green accent-3">
|
||||
<a href="#" class="brand-logo hoverable left" style="padding: 0 10px 0 10px;"> logo</a>
|
||||
<img onclick="sideNavinstance.open();" style="height:64px;" class="brand-logo left hoverable cursorPointer" src="rsrc/logo.png" alt="logo">
|
||||
<ul class="right" style="font-size:1.5em;">
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
12:54:21
|
||||
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Browser time" style="margin:0 10px 0 10px;" id="browsertime_id">
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
17.25 °C
|
||||
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Device time" style="margin:0 10px 0 10px;">
|
||||
<span id="rtcValue"></span>
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
90 %
|
||||
<li class="hoverable" style="margin:0 10px 0 10px;">
|
||||
<span id="temperature"></span>
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
<img style="width:50px;vertical-align:middle;" id="imgSig1" src="rsrc/sigstr4.png" alt="sigstr4">
|
||||
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Link quality between the device and the router" style="margin:0 10px 0 10px;">
|
||||
<span id="sigStrengthPercent"></span> %
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
-66 dBm
|
||||
<li class="hoverable" style="margin:0 10px 0 10px;">
|
||||
<img style="width:50px;vertical-align:middle;" id="imgSig1" src="rsrc/sigstr1.png" alt="sigstr1">
|
||||
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig2" src="rsrc/sigstr2.png" alt="sigstr2" >
|
||||
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig3" src="rsrc/sigstr3.png" alt="sigstr3" >
|
||||
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig4" src="rsrc/sigstr4.png" alt="sigstr4" >
|
||||
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig5" src="rsrc/sigstr5.png" alt="sigstr5" >
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
112 ms
|
||||
<li class="hoverable" style="margin:0 10px 0 10px;">
|
||||
<span id="sigStrength"></span> dBm
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
||||
<img style="width:50px;vertical-align:middle;" id="imgDisco" src="rsrc/disco.png" alt="disconnected">
|
||||
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Device ping" style="margin:0 10px 0 10px;min-width:100px;">
|
||||
<span id="execTime"></span> ms
|
||||
</li>
|
||||
<li class="hoverable" style="margin:0 10px 0 10px;">
|
||||
<img id="imgConn" src="rsrc/conn.png" alt="connected" style="width:50px;vertical-align:middle;display:none;"><img style="width:50px;vertical-align:middle;display:inline;" id="imgDisco" src="rsrc/disco.png" alt="disconnected">
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul id="slide-out" class="sidenav teal darken-3">
|
||||
<li><h2 class="white-text center-align">Settings</h2></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<ul id="slide-out" class="sidenav blue lighten-5" style="padding:0;">
|
||||
<li style="border:1px #00695c solid;background-color:#00695c;"><h2 class="white-text center-align">Settings</h2></li>
|
||||
<hr>
|
||||
<li class="cursorPointer hoverable" onclick="tabInstance.select('mainpage_id');"><p style="margin: 0 0 0 10px;font-size:1.3em;" class="black-text" >Back to the dashboard</p></li>
|
||||
<li class="cursorPointer hoverable" onclick="tabInstance.select('settings_id');"><p style="margin: 0 0 0 10px;font-size:1.3em;" class="black-text" >General settings</p></li>
|
||||
</ul>
|
||||
|
||||
<div class="fixed-action-btn">
|
||||
<a style="font-size:2.5em;" data-target="slide-out" class="btn-floating btn-large red sidenav-trigger">
|
||||
⚙
|
||||
⚙
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<section>
|
||||
<!-- Used to init the tab system -->
|
||||
<ul class="tabs" style="display:none;" id="test">
|
||||
<li class="tab col s3"><a class="active" href="#mainpage_id">Dashboard</a></li>
|
||||
<li class="tab col s3"><a href="#settings_id">General settings</a></li>
|
||||
</ul>
|
||||
<!-- End of the tab system -->
|
||||
<!-- Modal window definition -->
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Connection Lost</h4>
|
||||
<p>It looks like the connection to the device has been lost.<br />We will try to reconnect in 5 seconds</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn-flat">I understand</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of modal window definition -->
|
||||
<section id="mainpage_id">
|
||||
<div class="row">
|
||||
<div class="col m6">
|
||||
<div class="row col m6">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h4 class="center-align">Connectivity</h4>
|
||||
</div>
|
||||
<h5 class="center-align">Connectivity</h5>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h4 class="center-align">System Info</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m3">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">Access Point Mode</span>
|
||||
@ -101,21 +132,28 @@
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="row white-text left-align" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
|
||||
<div class="col m6">
|
||||
Connected dev :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<input placeholder="SSID" id="ssid" type="text" class="validate white-text">
|
||||
<input placeholder="PWD" id="pwd" type="password" class="validate white-text">
|
||||
<input onmouseleave="showHidePassword('pwd','hide')" onmouseover="showHidePassword('pwd','show');" value="somePassword" placeholder="Password" id="pwd" type="password" class="validate white-text">
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
|
||||
<button class="btn waves-effect waves-light red darken-3" style="" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col m3">
|
||||
<div class="col m6">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">Station Mode</span>
|
||||
@ -129,59 +167,365 @@
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="row white-text left-align" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
|
||||
<div class="col m6">
|
||||
Local IP :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="localIP"></span>
|
||||
</div>
|
||||
</div>
|
||||
<select>
|
||||
<option value="" disabled selected>Select a network</option>
|
||||
<option value="1">Network 1</option>
|
||||
<option value="2">Network 2</option>
|
||||
<option value="3">Network 3</option>
|
||||
</select>
|
||||
<input placeholder="PWD" id="pwd" type="password" class="validate white-text">
|
||||
<input placeholder="Password" id="pwd" type="password" class="validate white-text">
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
|
||||
<button class="btn waves-effect waves-light red darken-3" style="" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col m6">
|
||||
</div>
|
||||
<div class="row col m6">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">System Info</h5>
|
||||
</div>
|
||||
<div class="col m12">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">System State</span>
|
||||
</div>
|
||||
<div class="card-action center-align">
|
||||
|
||||
<div class="card-action white-text" style="font-size:1.2em;">
|
||||
<div class="row">
|
||||
<div class="col m6">
|
||||
Cpu frequency :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<label style="margin: 0 10px 0 0;">
|
||||
<input onchange="setCpuFrequ(80);" class="with-gap" id="cpufreq80_id" name="group1" type="radio" />
|
||||
<span class="white-text">80 MHz</span>
|
||||
</label>
|
||||
<label>
|
||||
<input onchange="setCpuFrequ(160);" class="with-gap" id="cpufreq160_id" name="group1" type="radio" />
|
||||
<span class="white-text" >160 MHz</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
Free RAM / Total RAM :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="ramInfo"></span> Bytes / 80 000 Bytes
|
||||
</div>
|
||||
<div class="col m6">
|
||||
Heap fragmentation :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="fragInfo"></span> %
|
||||
</div>
|
||||
<div class="col m6">
|
||||
Max contiguous chunk :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="blockInfo"></span> Bytes
|
||||
</div>
|
||||
<div class="col m6">
|
||||
Device up time :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="upTime"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin-top:-20px;">
|
||||
<div class="row col m3">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">Clock</h5>
|
||||
</div>
|
||||
<div class="col m12">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">DS3231 RTC</span>
|
||||
</div>
|
||||
|
||||
<div class="card-action" style="font-size:1.2em;">
|
||||
<input type="text" class="datepicker" id="datepicker_id">
|
||||
<input type="text" class="timepicker" id="timepicker_id">
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button class="btn waves-effect waves-light green darken-3" onclick="setRtcTime();" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light green darken-3 tooltipped" onclick="setRtc2BrowserTime();" data-position="bottom" data-tooltip="Use the browser time to set the RTC time" name="browserTime">
|
||||
Set browser time ✔
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col m3">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">Storage</h5>
|
||||
</div>
|
||||
<div class="col m12">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">SD Card</span>
|
||||
</div>
|
||||
<div class="card-action white-text center-align" style="font-size:1.2em;">
|
||||
<div class="switch">
|
||||
<label class="white-text">
|
||||
Unmounted
|
||||
<input type="checkbox" id="sdcardmounted_id" onchange="mountUnmountCard('sdcardmounted_id');">
|
||||
<span class="lever"></span>
|
||||
Mounted
|
||||
</label>
|
||||
</div>
|
||||
<div class="row left-align">
|
||||
<div class="col m6">
|
||||
Size :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<span id="cardSize">NaN Gbytes</span>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
Free :
|
||||
</div>
|
||||
<div class="col m6">
|
||||
XX GBytes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">Services</h5>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">Web Server</span>
|
||||
</div>
|
||||
<div class="card-action white-text center-align" style="font-size:1.2em;">
|
||||
<div class="switch">
|
||||
<label class="white-text">
|
||||
Disabled
|
||||
<input type="checkbox">
|
||||
<span class="lever"></span>
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="web_port" class="white-text" style="font-size:1em;">Port :</label></td>
|
||||
<td><input class="validate white-text" id="web_port" type="number" min="0" max="65535" ></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col m6">
|
||||
|
||||
</div>
|
||||
<div class="col m6">
|
||||
|
||||
</div>
|
||||
<div class="col m6">
|
||||
|
||||
</div>
|
||||
<div class="col m6">
|
||||
|
||||
</div>
|
||||
<div class="col m6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red darken-3" style="" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col m6">
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">FTP Server</span>
|
||||
</div>
|
||||
<div class="card-action white-text center-align" style="font-size:1.2em;">
|
||||
<div class="switch">
|
||||
<label class="white-text">
|
||||
Disabled
|
||||
<input type="checkbox">
|
||||
<span class="lever"></span>
|
||||
Enabled
|
||||
</label>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="ftp_port" class="white-text" style="font-size:1em;">Port :</label></td>
|
||||
<td><input class="validate white-text" id="ftp_port" type="number" min="0" max="65535" ></td>
|
||||
</tr>
|
||||
</table>
|
||||
<input placeholder="Login" id="ssid" type="text" class="validate white-text">
|
||||
<input placeholder="Password" id="pwd" type="password" class="validate white-text">
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red darken-3" style="" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top:-20px;">
|
||||
<div class="row col m12">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">IO's Mode and State</h5>
|
||||
</div>
|
||||
<div class="card teal darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title center-align" style="font-weight:bold;">IO Expander</span>
|
||||
</div>
|
||||
<div class="card-action white-text center-align" style="font-size:1.2em;">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<p>P0</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P1</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P2</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P3</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P4</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P5</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P6</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>P7</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>MODE</p>
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P0_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P0_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P1_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P1_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P2_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P2_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P3_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P3_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P4_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P4_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P5_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P5_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P6_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P6_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P7_MODE_I" src="rsrc/in.png" alt="input" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P7_MODE_O" src="rsrc/out.png" alt="output" >
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>LEVEL</p>
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P0_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P0_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P1_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P1_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P2_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P2_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P3_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P3_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P4_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P4_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P5_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P5_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P6_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P6_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
<td>
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P7_LEVEL_H" src="rsrc/on.png" alt="on" >
|
||||
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P7_LEVEL_L" src="rsrc/off.png" alt="off" >
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="page-footer blue-grey darken-4">
|
||||
<section id="settings_id">
|
||||
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
||||
<h5 class="center-align">General settings</h5>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="page-footer blue-grey darken-4 center-align">
|
||||
<p>Anatole SCHRAMM-HENRY, all right reserved | Hosted by the board itself<br /> 2019-2020</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.sidenav');
|
||||
var instances = M.Sidenav.init(elems);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.tooltipped');
|
||||
var instances = M.Tooltip.init(elems);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('select');
|
||||
var instances = M.FormSelect.init(elems);
|
||||
});
|
||||
</script>
|
||||
<script src="rsrc/scriptV2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
sdCard_content/WWW/rsrc/materialize.css
vendored
2
sdCard_content/WWW/rsrc/materialize.css
vendored
File diff suppressed because one or more lines are too long
@ -260,8 +260,7 @@ function refreshSigStrength()
|
||||
document.getElementById('sigStrength').innerHTML = wifiStaObj.RSSI;
|
||||
document.getElementById('sigStrengthPercent').innerHTML = wifiStaObj.RSSI2;
|
||||
document.getElementById('localIP').innerHTML = wifiStaObj['local IP'];
|
||||
setSigStrenthPicture(wifiStaObj.RSSI2
|
||||
);
|
||||
setSigStrenthPicture(wifiStaObj.RSSI2);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
694
sdCard_content/WWW/rsrc/scriptV2.js
Normal file
694
sdCard_content/WWW/rsrc/scriptV2.js
Normal file
@ -0,0 +1,694 @@
|
||||
/**
|
||||
* JavaScript code for the dashboardV2 logic, refresh and other things
|
||||
* Creation date : 01/02/2020
|
||||
* Anatole SCHRAMM-HENRY - Th3maz1ng
|
||||
**/
|
||||
|
||||
//Global variables
|
||||
var App = new Object();
|
||||
var tabInstance = null;
|
||||
var sideNavinstance = null;
|
||||
var modalInstance = null;
|
||||
var connected = true;
|
||||
|
||||
var setFrequencyReq = null;
|
||||
var setRTCReq = null;
|
||||
var sdCardSizeReq = null;
|
||||
var sdCardActionReq = null;
|
||||
var setIoModeReq = null;
|
||||
var setIoLevelReq = null;
|
||||
|
||||
//UI elements initialisation
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.sidenav');
|
||||
var instances = M.Sidenav.init(elems);
|
||||
|
||||
sideNavinstance = M.Sidenav.getInstance(elems[0]);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.tooltipped');
|
||||
var instances = M.Tooltip.init(elems);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('select');
|
||||
var instances = M.FormSelect.init(elems);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.datepicker');
|
||||
var options = {
|
||||
'autoClose':true,
|
||||
'format' : 'd-m-yyyy',
|
||||
'defaultDate': new Date(),
|
||||
'setDefaultDate':true,
|
||||
};
|
||||
var instances = M.Datepicker.init(elems, options);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.timepicker');
|
||||
var options = {
|
||||
'twelveHour':false,
|
||||
};
|
||||
var instances = M.Timepicker.init(elems, options);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.tooltipped');
|
||||
var options = {};
|
||||
var instances = M.Tooltip.init(elems, options);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.tabs');
|
||||
var options = {
|
||||
//'swipeable':true,
|
||||
};
|
||||
var instances = M.Tabs.init(elems, options);
|
||||
tabInstance = M.Tabs.getInstance(elems[0]);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
var elems = document.querySelectorAll('.modal');
|
||||
var options = {
|
||||
};
|
||||
var instances = M.Modal.init(elems, options);
|
||||
|
||||
modalInstance = M.Modal.getInstance(elems[0]);
|
||||
});
|
||||
|
||||
//Dashboard logic initialisation
|
||||
function init()
|
||||
{
|
||||
|
||||
/*Setting default values and intervals*/
|
||||
var browserTimeInt = setInterval(() => {browserTime();},1000);
|
||||
let curDate = new Date();
|
||||
let hours = curDate.getHours() < 10 ? '0'+curDate.getHours() : curDate.getHours();
|
||||
let minutes = curDate.getMinutes() < 10 ? '0'+curDate.getMinutes() : curDate.getMinutes();
|
||||
let day = curDate.getDate();
|
||||
let month = curDate.getMonth()+1;
|
||||
let year = curDate.getFullYear();
|
||||
elemById('timepicker_id').value = hours+':'+minutes;
|
||||
elemById('datepicker_id').value = day+'-'+month+'-'+year;
|
||||
/*Initializing the App object*/
|
||||
App.init();
|
||||
App.registerAutomatedRequest({timeout:500, pollInterval: 1000, apiEndPoint:'/sab/rtc/get/datetime', gotResponse:(data) => {rtcRefreshHandler(data, 'OK');}, gotError:(e) => {rtcRefreshHandler(e, 'FAIL');}});
|
||||
App.registerAutomatedRequest({timeout:500, pollInterval: 10000, apiEndPoint:'/sab/systeminfo', gotResponse:(data) => {sysInfoRefreshHandler(data, 'OK');}, gotError:(e) => {sysInfoRefreshHandler(e, 'FAIL');}});
|
||||
App.registerAutomatedRequest({timeout:500, pollInterval: 1000, apiEndPoint:'/sab/wifi/stainfo', gotResponse:(data) => {staInfoRefreshHandler(data, 'OK');}, gotError:(e) => {staInfoRefreshHandler(e, 'FAIL');}});
|
||||
App.registerAutomatedRequest({timeout:500, pollInterval: 5000, apiEndPoint:'/sab/io/get/mode', gotResponse:(data) => {ioModeRefreshHandler(data, 'OK');}, gotError:(e) => {ioModeRefreshHandler(e, 'FAIL');}});
|
||||
App.registerAutomatedRequest({timeout:500, pollInterval: 1000, apiEndPoint:'/sab/io/get/level', gotResponse:(data) => {ioLevelRefreshHandler(data, 'OK');}, gotError:(e) => {ioLevelRefreshHandler(e, 'FAIL');}});
|
||||
|
||||
//All requests needing an UI action:
|
||||
setFrequencyReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {setFreqHandler(data, 'OK');}, gotError:(e) => {setFreqHandler(e, 'FAIL');}});
|
||||
setRTCReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {setRTCHandler(data, 'OK');}, gotError:(e) => {setRTCHandler(e, 'FAIL');}});
|
||||
sdCardSizeReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {getCardSizeHandler(data, 'OK');}, gotError:(e) => {getCardSizeHandler(e, 'FAIL');}});
|
||||
sdCardActionReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {CardActionHandler(data, 'OK');}, gotError:(e) => {CardActionHandler(e, 'FAIL');}});
|
||||
setIoModeReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {setIoModeHandler(data, 'OK');}, gotError:(e) => {setIoModeHandler(e, 'FAIL');}});
|
||||
setIoLevelReq = App.buildXMLHttpRequest({timeout:500, gotResponse:(data) => {setIoLevelHandler(data, 'OK');}, gotError:(e) => {setIoLevelHandler(e, 'FAIL');}});
|
||||
}
|
||||
|
||||
//Callback functions
|
||||
function browserTime()
|
||||
{
|
||||
let curDate = new Date();
|
||||
let hours = curDate.getHours() < 10 ? '0'+curDate.getHours() : curDate.getHours();
|
||||
let minutes = curDate.getMinutes() < 10 ? '0'+curDate.getMinutes() : curDate.getMinutes();
|
||||
let seconds = curDate.getSeconds() < 10 ? '0'+curDate.getSeconds() : curDate.getSeconds();
|
||||
elemById('browsertime_id').innerHTML = hours+':'+minutes+':'+seconds;
|
||||
}
|
||||
//Helper functions and objects
|
||||
function elemById(id)
|
||||
{
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function rtcRefreshHandler(data,kind)
|
||||
{
|
||||
if(kind !== undefined)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
let rtcObj = JSON.parse(data);
|
||||
elemById('rtcValue').innerHTML = rtcObj.time + ' ' + rtcObj.date;
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('rtcValue').innerHTML = 'ERROR';
|
||||
elemById('execTime').innerHTML = 'NaN';
|
||||
connected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sysInfoRefreshHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
let systemInfoObj = JSON.parse(data);
|
||||
elemById('temperature').innerHTML = systemInfoObj['temperature'].level + systemInfoObj['temperature'].unit;
|
||||
elemById('ramInfo').innerHTML = systemInfoObj['free RAM'];
|
||||
let cpuFreq = systemInfoObj['CPU freq'];
|
||||
if(cpuFreq == 80)
|
||||
{
|
||||
elemById('cpufreq80_id').checked = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('cpufreq160_id').checked = true;
|
||||
}
|
||||
elemById('fragInfo').innerHTML = systemInfoObj['heap frag'];
|
||||
elemById('blockInfo').innerHTML = systemInfoObj['max block'];
|
||||
elemById('upTime').innerHTML = systemInfoObj['up time'].days + ' days ' + systemInfoObj['up time'].hours + ' hours ' + systemInfoObj['up time'].minutes + ' minutes ' + systemInfoObj['up time'].seconds + ' seconds ';
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('temperature').innerHTML = 'NaN';
|
||||
elemById('ramInfo').innerHTML = 'NaN';
|
||||
elemById('fragInfo').innerHTML = 'NaN';
|
||||
elemById('blockInfo').innerHTML = 'NaN';
|
||||
elemById('upTime').innerHTML = 'NaN';
|
||||
}
|
||||
}
|
||||
|
||||
function staInfoRefreshHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
let wifiStaObj = JSON.parse(data);
|
||||
elemById('sigStrength').innerHTML = wifiStaObj.RSSI;
|
||||
elemById('sigStrengthPercent').innerHTML = wifiStaObj.RSSI2;
|
||||
elemById('localIP').innerHTML = wifiStaObj['local IP'];
|
||||
setSigStrenthPicture(wifiStaObj.RSSI2);
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('sigStrength').innerHTML = 'NaN';
|
||||
elemById('sigStrengthPercent').innerHTML = 'NaN';
|
||||
}
|
||||
}
|
||||
|
||||
//Handler pattern
|
||||
/*function Handler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
}
|
||||
}*/
|
||||
|
||||
function setIoLevelHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var ioLevelObj = JSON.parse(data);
|
||||
updateIoLevelImages(ioLevelObj);
|
||||
}
|
||||
else
|
||||
{
|
||||
hideIoLevelImages();
|
||||
}
|
||||
}
|
||||
|
||||
function setIoModeHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var ioModeObj = JSON.parse(data);
|
||||
updateIoModeImages(ioModeObj);
|
||||
}
|
||||
else
|
||||
{
|
||||
hideIoModeImages();
|
||||
}
|
||||
}
|
||||
|
||||
function ioLevelRefreshHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var ioLevelObj = JSON.parse(data);
|
||||
updateIoLevelImages(ioLevelObj);
|
||||
}
|
||||
else
|
||||
{
|
||||
hideIoLevelImages();
|
||||
}
|
||||
}
|
||||
|
||||
function ioModeRefreshHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var ioModeObj = JSON.parse(data);
|
||||
updateIoModeImages(ioModeObj);
|
||||
}
|
||||
else
|
||||
{
|
||||
hideIoModeImages();
|
||||
}
|
||||
}
|
||||
|
||||
function CardActionHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var sdCardObj = JSON.parse(data);
|
||||
if(sdCardObj.status == 'ok')
|
||||
{
|
||||
//Finally we update the card size
|
||||
sdCardSize();
|
||||
}
|
||||
else
|
||||
{
|
||||
if(elemById('sdcardmounted_id').checked)
|
||||
elemById('sdcardmounted_id').checked = false;
|
||||
else
|
||||
elemById('sdcardmounted_id').checked = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function setFreqHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
if(elemById('cpufreq80_id').checked)
|
||||
elemById('cpufreq160_id').checked = true;
|
||||
else
|
||||
elemById('cpufreq80_id').checked = true;
|
||||
}
|
||||
}
|
||||
|
||||
function setRTCHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function getCardSizeHandler(data,kind)
|
||||
{
|
||||
if(kind === 'OK')
|
||||
{
|
||||
var sdCardObj = JSON.parse(data);
|
||||
elemById('cardSize').innerHTML = sdCardObj.size == 0 ? 'NO CARD' : sdCardObj.size + 'GBytes';
|
||||
elemById('sdcardmounted_id').checked = sdCardObj.size != 0;
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('cardSize').innerHTML = 'NaN GBytes';
|
||||
}
|
||||
}
|
||||
|
||||
//All UI action functions are here
|
||||
|
||||
function setCpuFrequ(freq)
|
||||
{
|
||||
console.log('cpu frequ : '+freq);
|
||||
setFrequencyReq.open('GET', '/sab/power/set/freq?FREQ='+freq);
|
||||
setFrequencyReq.send();
|
||||
}
|
||||
|
||||
function setRtc2BrowserTime()
|
||||
{
|
||||
let d = new Date();
|
||||
let data = parseInt(d.getDate())+'_'+parseInt(d.getMonth()+1)+'_'+parseInt(d.getYear())+'_'+parseInt(d.getHours())+'_'+parseInt(d.getMinutes())+'_'+parseInt(d.getSeconds()+5);
|
||||
|
||||
console.log(data);
|
||||
|
||||
setRTCReq.open('GET', '/sab/rtc/set/datetime?datetime='+data);
|
||||
setRTCReq.send();
|
||||
}
|
||||
|
||||
function setRtcTime()
|
||||
{
|
||||
let date = elemById('datepicker_id').value;
|
||||
let time = elemById('timepicker_id').value;
|
||||
|
||||
//We split the date and time :
|
||||
let dtArray = date.split('-');
|
||||
let tiArray = time.split(':');
|
||||
|
||||
let data = parseInt(dtArray[0])+'_'+parseInt(dtArray[1])+'_'+parseInt(dtArray[2])+'_'+parseInt(tiArray[0])+'_'+parseInt(tiArray[1])+'_0';
|
||||
|
||||
console.log(data);
|
||||
setRTCReq.open('GET', '/sab/rtc/set/datetime?datetime='+data);
|
||||
setRTCReq.send();
|
||||
}
|
||||
|
||||
function sdCardSize()
|
||||
{
|
||||
sdCardSizeReq.open('GET','/sab/sdcard/size');
|
||||
sdCardSizeReq.send();
|
||||
}
|
||||
|
||||
function mountUnmountCard(id)
|
||||
{
|
||||
if(elemById(id).checked) //We should mount the sd card
|
||||
{
|
||||
sdCardActionReq.open('GET','/sab/sdcard/action?action=mount');
|
||||
sdCardActionReq.send();
|
||||
}
|
||||
else //We unmount it
|
||||
{
|
||||
sdCardActionReq.open('GET','/sab/sdcard/action?action=unmount');
|
||||
sdCardActionReq.send();
|
||||
}
|
||||
}
|
||||
|
||||
function setIoMode(pin,mode)
|
||||
{
|
||||
var pinOnly = pin.split('_')[0];
|
||||
setIoModeReq.open('GET',"/sab/io/set/mode?"+pinOnly+'='+ (mode == 'OUTPUT' ? 'OUT' : 'IN'));
|
||||
setIoModeReq.send();
|
||||
}
|
||||
|
||||
function setIoLevel(pin,mode)
|
||||
{
|
||||
var pinOnly = pin.split('_')[0];
|
||||
setIoLevelReq.open('GET',"/sab/io/set/level?"+pinOnly+'='+ (mode == 'HIGH' ? '1' : '0'));
|
||||
setIoLevelReq.send();
|
||||
}
|
||||
|
||||
App = {
|
||||
|
||||
init:function()
|
||||
{
|
||||
if(this.heartBeat == null) //we set the heartBeat only once
|
||||
{
|
||||
console.log("Setting heartbeat");
|
||||
let heartBeatAjx = this.buildXMLHttpRequest({timeout:500, apiEndPoint:'/sab/web/apitester', gotResponse:(data) => {console.log('Got heartbeat');connected = true;modalInstance.close();}});
|
||||
this.heartBeat = setInterval(() => {
|
||||
console.log('connected : '+connected);
|
||||
if(!connected)
|
||||
{
|
||||
console.log('Sending heartbeat');
|
||||
heartBeatAjx.open('GET', '/sab/web/apitester');
|
||||
heartBeatAjx.send();
|
||||
}
|
||||
},5000);
|
||||
}
|
||||
},
|
||||
onTimeout:function(e)
|
||||
{
|
||||
console.error("Request timed out");
|
||||
elemById('imgConn').style.display = 'none';
|
||||
elemById('imgDisco').style.display = 'inline';
|
||||
setSigStrenthPicture(0);
|
||||
connected = false;
|
||||
modalInstance.open();
|
||||
|
||||
},
|
||||
updateApp:function()
|
||||
{
|
||||
for(i = 0; i < this.requestMap.length; i++)
|
||||
{
|
||||
let reqObj = this.requestMap[i];
|
||||
reqObj.ajaxObj.open('GET',reqObj.apiEndPoint);
|
||||
reqObj.ajaxObj.send();
|
||||
}
|
||||
},
|
||||
onConnected:function()
|
||||
{
|
||||
if(elemById('imgDisco').style.display == 'inline' && elemById('imgConn').style.display == 'none')
|
||||
{
|
||||
console.log("Connected to Swiss Army Board");
|
||||
elemById('imgDisco').style.display = 'none';
|
||||
elemById('imgConn').style.display = 'inline';
|
||||
/*We need to update everything when we connect*/
|
||||
this.updateApp();
|
||||
sdCardSize();
|
||||
}
|
||||
},
|
||||
registerAutomatedRequest:function(param)
|
||||
{
|
||||
let interval = null;
|
||||
let pollInterval = 1000; //Default to one second
|
||||
|
||||
if(param === undefined)
|
||||
return interval;
|
||||
|
||||
if(!('apiEndPoint' in param))
|
||||
return interval;
|
||||
|
||||
if('pollInterval' in param)
|
||||
pollInterval = param.pollInterval;
|
||||
|
||||
let ajax = this.buildXMLHttpRequest(param);
|
||||
|
||||
|
||||
interval = setInterval(() => {if(connected){ajax.open('GET', param.apiEndPoint); this.execTimeStart = new Date().getTime(); ajax.send();}},pollInterval);
|
||||
|
||||
this.intervalMap.push(interval);
|
||||
this.requestMap.push({ajaxObj:ajax, apiEndPoint : param.apiEndPoint});
|
||||
|
||||
return interval;
|
||||
},
|
||||
buildXMLHttpRequest : function(param)
|
||||
{
|
||||
if(param === undefined)
|
||||
return null;
|
||||
|
||||
let that = this;
|
||||
let ajaxObj = new XMLHttpRequest();
|
||||
|
||||
if('timeout' in param)
|
||||
ajaxObj.timeout = param.timeout;
|
||||
else
|
||||
ajaxObj.timeout = 800;
|
||||
|
||||
ajaxObj.onreadystatechange = function()
|
||||
{
|
||||
switch(this.readyState)
|
||||
{
|
||||
case 0:
|
||||
break;
|
||||
case 1:
|
||||
console.log("Connection established");
|
||||
break;
|
||||
case 2:
|
||||
console.log("Request received");
|
||||
break;
|
||||
case 3:
|
||||
console.log("Processing request");
|
||||
break;
|
||||
case 4:
|
||||
console.log("Response is ready");
|
||||
if(this.status != 0){that.onConnected(); elemById('execTime').innerHTML = new Date().getTime() - that.execTimeStart;}
|
||||
if(this.status == 200)
|
||||
{
|
||||
console.log("Response : " + this.responseText);
|
||||
if('gotResponse' in param)
|
||||
param.gotResponse(this.responseText);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
if('gotError' in param)
|
||||
param.gotError(this.status);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(this.onTimeout !== null)
|
||||
{
|
||||
ajaxObj.ontimeout = this.onTimeout;
|
||||
}
|
||||
|
||||
return ajaxObj;
|
||||
},
|
||||
intervalMap:[],
|
||||
requestMap:[],
|
||||
heartBeat:null,
|
||||
execTimeStart:0,
|
||||
};
|
||||
|
||||
function showHidePassword(id, action)
|
||||
{
|
||||
if(action === 'show')elemById(id).type = 'text';
|
||||
else if(action === 'hide')elemById(id).type = 'password';
|
||||
};
|
||||
|
||||
function setSigStrenthPicture(value)
|
||||
{
|
||||
if(value < 5)
|
||||
{
|
||||
elemById('imgSig1').style.display = 'inline';
|
||||
elemById('imgSig2').style.display = 'none';
|
||||
elemById('imgSig3').style.display = 'none';
|
||||
elemById('imgSig4').style.display = 'none';
|
||||
elemById('imgSig5').style.display = 'none';
|
||||
}
|
||||
else if(value < 20)
|
||||
{
|
||||
elemById('imgSig1').style.display = 'none';
|
||||
elemById('imgSig2').style.display = 'inline';
|
||||
elemById('imgSig3').style.display = 'none';
|
||||
elemById('imgSig4').style.display = 'none';
|
||||
elemById('imgSig5').style.display = 'none';
|
||||
}
|
||||
else if(value < 40)
|
||||
{
|
||||
elemById('imgSig1').style.display = 'none';
|
||||
elemById('imgSig2').style.display = 'none';
|
||||
elemById('imgSig3').style.display = 'inline';
|
||||
elemById('imgSig4').style.display = 'none';
|
||||
elemById('imgSig5').style.display = 'none';
|
||||
}
|
||||
else if(value < 80)
|
||||
{
|
||||
elemById('imgSig1').style.display = 'none';
|
||||
elemById('imgSig2').style.display = 'none';
|
||||
elemById('imgSig3').style.display = 'none';
|
||||
elemById('imgSig4').style.display = 'inline';
|
||||
elemById('imgSig5').style.display = 'none';
|
||||
}
|
||||
else
|
||||
{
|
||||
elemById('imgSig1').style.display = 'none';
|
||||
elemById('imgSig2').style.display = 'none';
|
||||
elemById('imgSig3').style.display = 'none';
|
||||
elemById('imgSig4').style.display = 'none';
|
||||
elemById('imgSig5').style.display = 'inline';
|
||||
}
|
||||
}
|
||||
|
||||
function updateIoModeImages(obj)
|
||||
{
|
||||
elemById('P0_MODE_I').style.display = obj.P0 == 'IN' ? 'block' : 'none';
|
||||
elemById('P0_MODE_O').style.display = obj.P0 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P1_MODE_I').style.display = obj.P1 == 'IN' ? 'block' : 'none';
|
||||
elemById('P1_MODE_O').style.display = obj.P1 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P2_MODE_I').style.display = obj.P2 == 'IN' ? 'block' : 'none';
|
||||
elemById('P2_MODE_O').style.display = obj.P2 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P3_MODE_I').style.display = obj.P3 == 'IN' ? 'block' : 'none';
|
||||
elemById('P3_MODE_O').style.display = obj.P3 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P4_MODE_I').style.display = obj.P4 == 'IN' ? 'block' : 'none';
|
||||
elemById('P4_MODE_O').style.display = obj.P4 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P5_MODE_I').style.display = obj.P5 == 'IN' ? 'block' : 'none';
|
||||
elemById('P5_MODE_O').style.display = obj.P5 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P6_MODE_I').style.display = obj.P6 == 'IN' ? 'block' : 'none';
|
||||
elemById('P6_MODE_O').style.display = obj.P6 == 'IN' ? 'none' : 'block';
|
||||
|
||||
elemById('P7_MODE_I').style.display = obj.P7 == 'IN' ? 'block' : 'none';
|
||||
elemById('P7_MODE_O').style.display = obj.P7 == 'IN' ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function hideIoModeImages()
|
||||
{
|
||||
elemById('P0_MODE_I').style.display = 'none';
|
||||
elemById('P0_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P1_MODE_I').style.display = 'none';
|
||||
elemById('P1_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P2_MODE_I').style.display = 'none';
|
||||
elemById('P2_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P3_MODE_I').style.display = 'none';
|
||||
elemById('P3_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P4_MODE_I').style.display = 'none';
|
||||
elemById('P4_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P5_MODE_I').style.display = 'none';
|
||||
elemById('P5_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P6_MODE_I').style.display = 'none';
|
||||
elemById('P6_MODE_O').style.display = 'none';
|
||||
|
||||
elemById('P7_MODE_I').style.display = 'none';
|
||||
elemById('P7_MODE_O').style.display = 'none';
|
||||
}
|
||||
|
||||
function updateIoLevelImages(obj)
|
||||
{
|
||||
elemById('P0_LEVEL_H').style.display = obj.P0 == '1' ? 'block' : 'none';
|
||||
elemById('P0_LEVEL_L').style.display = obj.P0 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P1_LEVEL_H').style.display = obj.P1 == '1' ? 'block' : 'none';
|
||||
elemById('P1_LEVEL_L').style.display = obj.P1 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P2_LEVEL_H').style.display = obj.P2 == '1' ? 'block' : 'none';
|
||||
elemById('P2_LEVEL_L').style.display = obj.P2 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P3_LEVEL_H').style.display = obj.P3 == '1' ? 'block' : 'none';
|
||||
elemById('P3_LEVEL_L').style.display = obj.P3 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P4_LEVEL_H').style.display = obj.P4 == '1' ? 'block' : 'none';
|
||||
elemById('P4_LEVEL_L').style.display = obj.P4 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P5_LEVEL_H').style.display = obj.P5 == '1' ? 'block' : 'none';
|
||||
elemById('P5_LEVEL_L').style.display = obj.P5 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P6_LEVEL_H').style.display = obj.P6 == '1' ? 'block' : 'none';
|
||||
elemById('P6_LEVEL_L').style.display = obj.P6 == '1' ? 'none' : 'block';
|
||||
|
||||
elemById('P7_LEVEL_H').style.display = obj.P7 == '1' ? 'block' : 'none';
|
||||
elemById('P7_LEVEL_L').style.display = obj.P7 == '1' ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function hideIoLevelImages()
|
||||
{
|
||||
elemById('P0_LEVEL_H').style.display = 'none';
|
||||
elemById('P0_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P1_LEVEL_H').style.display = 'none';
|
||||
elemById('P1_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P2_LEVEL_H').style.display = 'none';
|
||||
elemById('P2_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P3_LEVEL_H').style.display = 'none';
|
||||
elemById('P3_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P4_LEVEL_H').style.display = 'none';
|
||||
elemById('P4_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P5_LEVEL_H').style.display = 'none';
|
||||
elemById('P5_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P6_LEVEL_H').style.display = 'none';
|
||||
elemById('P6_LEVEL_L').style.display = 'none';
|
||||
|
||||
elemById('P7_LEVEL_H').style.display = 'none';
|
||||
elemById('P7_LEVEL_L').style.display = 'none';
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user