Updated web app

This commit is contained in:
anschrammh 2019-04-28 15:30:03 +02:00
parent bf3bc4f7f2
commit 1cc886c5a0
2 changed files with 420 additions and 51 deletions

View File

@ -14,13 +14,16 @@
<nav>
<div class="menuContainer">
<div class="item">
<p><span id="sigStrength"></span> dB</p>
<p><span id="sigStrength"></span> dBm</p>
</div>
<div class="item">
<p><span id="sigStrengthPercent"></span> %</p>
</div>
<div class="item" style="margin-left: auto;">
<p><span id="battLevel"></span> %</p>
<p><span id="battLevel"></span></p>
</div>
<div class="item" >
<p>PING : <br /><span id="execTime"></span> ms</p>
</div>
<div class="item-start" id="conIcon">
<img id="imgConn" src="rsrc/conn.png" alt="connected" style="display:none;"><img id="imgDisco" src="rsrc/disco.png" alt="disconnected">
@ -110,36 +113,36 @@
<h2>MODE</h2>
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode('P0_MODE','OUTPUT');" id="P0_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P0_MODE','INPUT');" id="P0_MODE" src="rsrc/out.png" alt="output" >
<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('P1_MODE','OUTPUT');" id="P1_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P1_MODE','INPUT');" id="P1_MODE" src="rsrc/out.png" alt="output" >
<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('P2_MODE','OUTPUT');" id="P2_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P2_MODE','INPUT');" id="P2_MODE" src="rsrc/out.png" alt="output" >
<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('P3_MODE','OUTPUT');" id="P3_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P3_MODE','INPUT');" id="P3_MODE" src="rsrc/out.png" alt="output" >
<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('P4_MODE','OUTPUT');" id="P4_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P4_MODE','INPUT');" id="P4_MODE" src="rsrc/out.png" alt="output" >
<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('P5_MODE','OUTPUT');" id="P5_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P5_MODE','INPUT');" id="P5_MODE" src="rsrc/out.png" alt="output" >
<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('P6_MODE','OUTPUT');" id="P6_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P6_MODE','INPUT');" id="P6_MODE" src="rsrc/out.png" alt="output" >
<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('P7_MODE','OUTPUT');" id="P7_MODE" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode('P7_MODE','INPUT');" id="P7_MODE" src="rsrc/out.png" alt="output" >
<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>
@ -147,36 +150,36 @@
<h2>LEVEL</h2>
</td>
<td>
<img class="mode-img" style="display:none;" id="P0_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P0_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P1_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P1_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P2_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P2_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P3_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P3_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P4_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P4_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P5_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P5_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P6_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P6_LEVEL" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" id="P7_LEVEL" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" id="P7_LEVEL" src="rsrc/off.png" alt="off" >
<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>

View File

@ -8,6 +8,10 @@
var sigStrenthInter = null;
var rtcInter = null;
var sysinfoInter = null;
var ioModeLevelInter = null;
var powerInfoInter = null;
var execTimeStart = null;
//This function set the app up
function init()
@ -24,7 +28,13 @@ function init()
sigStrenthInter = setInterval(refreshSigStrength,1000);
sdCardSize();
getIoMode();
getIoLevel();
ioModeLevelInter = setInterval(() => {getIoMode();getIoLevel();},1000);
powerInfo();
powerInfoInter = setInterval(powerInfo,10000);
console.log("Ending setup");
}
@ -37,8 +47,65 @@ function onTimeOut(e)
function onConnected()
{
document.getElementById('imgDisco').style.display = 'none';
document.getElementById('imgConn').style.display = 'block';
if(document.getElementById('imgDisco').style.display != 'none' && document.getElementById('imgConn').style.display != 'block')
{
console.log("Connected to Swiss Army Board");
document.getElementById('imgDisco').style.display = 'none';
document.getElementById('imgConn').style.display = 'block';
refreshRtc();
refreshSysInfo();
refreshSigStrength();
sdCardSize();
getIoMode();
getIoLevel();
powerInfo();
}
}
function powerInfo()
{
console.log("Getting board power info");
var ajaxReq = new XMLHttpRequest();
ajaxReq.timeout = 5000;
ajaxReq.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 == 200)
{
console.log("Response : " + this.responseText);
var powerInfoObj = JSON.parse(this.responseText);
console.log(powerInfoObj);
document.getElementById('battLevel').innerHTML = powerInfoObj['power type'] == 'USB' ? 'USB' : 'BATTERY : <br/>' + powerInfoObj.level + ' %';
}
else
{
console.log("Error, status is : " + this.status);
document.getElementById('battLevel').innerHTML = 'NaN %';
}
break;
default:
console.log("Unknown state");
}
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/power/info");
ajaxReq.send();
}
function refreshRtc()
@ -63,7 +130,7 @@ function refreshRtc()
break;
case 4:
console.log("Response is ready");
if(this.status != 0){onConnected();}
if(this.status != 0){onConnected(); document.getElementById('execTime').innerHTML = new Date().getTime() - execTimeStart;}
if(this.status == 200)
{
console.log("Response : " + this.responseText);
@ -75,6 +142,7 @@ function refreshRtc()
{
console.log("Error, status is : " + this.status);
document.getElementById('rtcValue').innerHTML = 'ERROR';
document.getElementById('execTime').innerHTML = 'NaN';
}
break;
default:
@ -84,6 +152,7 @@ function refreshRtc()
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/rtc/get/datetime");
execTimeStart = new Date().getTime();
ajaxReq.send();
}
@ -166,12 +235,14 @@ function refreshSigStrength()
var wifiStaObj = JSON.parse(this.responseText);
console.log(wifiStaObj);
document.getElementById('sigStrength').innerHTML = wifiStaObj.RSSI;
document.getElementById('sigStrengthPercent').innerHTML = wifiStaObj.RSSI2;
document.getElementById('localIP').innerHTML = wifiStaObj['local IP'];
}
else
{
console.log("Error, status is : " + this.status);
document.getElementById('sigStrength').innerHTML = 'NaN';
document.getElementById('sigStrengthPercent').innerHTML = 'NaN';
document.getElementById('localIP').innerHTML = 'ERROR';
}
break;
@ -273,4 +344,299 @@ function sdCardSize()
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/sdcard/size");
ajaxReq.send();
}
function getIoMode()
{
console.log("Getting IO mode for all IO's");
var ajaxReq = new XMLHttpRequest();
ajaxReq.timeout = 5000;
ajaxReq.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 == 200)
{
console.log("Response : " + this.responseText);
var ioModeObj = JSON.parse(this.responseText);
console.log(ioModeObj);
updateIoModeInfo(ioModeObj);
}
else
{
console.log("Error, status is : " + this.status);
hideIoMode();
}
break;
default:
console.log("Unknown state");
}
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/io/get/mode");
ajaxReq.send();
}
function updateIoModeInfo(obj)
{
document.getElementById('P0_MODE_I').style.display = obj.P0 == 'IN' ? 'block' : 'none';
document.getElementById('P0_MODE_O').style.display = obj.P0 == 'IN' ? 'none' : 'block';
document.getElementById('P1_MODE_I').style.display = obj.P1 == 'IN' ? 'block' : 'none';
document.getElementById('P1_MODE_O').style.display = obj.P1 == 'IN' ? 'none' : 'block';
document.getElementById('P2_MODE_I').style.display = obj.P2 == 'IN' ? 'block' : 'none';
document.getElementById('P2_MODE_O').style.display = obj.P2 == 'IN' ? 'none' : 'block';
document.getElementById('P3_MODE_I').style.display = obj.P3 == 'IN' ? 'block' : 'none';
document.getElementById('P3_MODE_O').style.display = obj.P3 == 'IN' ? 'none' : 'block';
document.getElementById('P4_MODE_I').style.display = obj.P4 == 'IN' ? 'block' : 'none';
document.getElementById('P4_MODE_O').style.display = obj.P4 == 'IN' ? 'none' : 'block';
document.getElementById('P5_MODE_I').style.display = obj.P5 == 'IN' ? 'block' : 'none';
document.getElementById('P5_MODE_O').style.display = obj.P5 == 'IN' ? 'none' : 'block';
document.getElementById('P6_MODE_I').style.display = obj.P6 == 'IN' ? 'block' : 'none';
document.getElementById('P6_MODE_O').style.display = obj.P6 == 'IN' ? 'none' : 'block';
document.getElementById('P7_MODE_I').style.display = obj.P7 == 'IN' ? 'block' : 'none';
document.getElementById('P7_MODE_O').style.display = obj.P7 == 'IN' ? 'none' : 'block';
}
function hideIoMode()
{
document.getElementById('P0_MODE_I').style.display = 'none';
document.getElementById('P0_MODE_O').style.display = 'none';
document.getElementById('P1_MODE_I').style.display = 'none';
document.getElementById('P1_MODE_O').style.display = 'none';
document.getElementById('P2_MODE_I').style.display = 'none';
document.getElementById('P2_MODE_O').style.display = 'none';
document.getElementById('P3_MODE_I').style.display = 'none';
document.getElementById('P3_MODE_O').style.display = 'none';
document.getElementById('P4_MODE_I').style.display = 'none';
document.getElementById('P4_MODE_O').style.display = 'none';
document.getElementById('P5_MODE_I').style.display = 'none';
document.getElementById('P5_MODE_O').style.display = 'none';
document.getElementById('P6_MODE_I').style.display = 'none';
document.getElementById('P6_MODE_O').style.display = 'none';
document.getElementById('P7_MODE_I').style.display = 'none';
document.getElementById('P7_MODE_O').style.display = 'none';
}
function updateIoLevelInfo(obj)
{
document.getElementById('P0_LEVEL_H').style.display = obj.P0 == '1' ? 'block' : 'none';
document.getElementById('P0_LEVEL_L').style.display = obj.P0 == '1' ? 'none' : 'block';
document.getElementById('P1_LEVEL_H').style.display = obj.P1 == '1' ? 'block' : 'none';
document.getElementById('P1_LEVEL_L').style.display = obj.P1 == '1' ? 'none' : 'block';
document.getElementById('P2_LEVEL_H').style.display = obj.P2 == '1' ? 'block' : 'none';
document.getElementById('P2_LEVEL_L').style.display = obj.P2 == '1' ? 'none' : 'block';
document.getElementById('P3_LEVEL_H').style.display = obj.P3 == '1' ? 'block' : 'none';
document.getElementById('P3_LEVEL_L').style.display = obj.P3 == '1' ? 'none' : 'block';
document.getElementById('P4_LEVEL_H').style.display = obj.P4 == '1' ? 'block' : 'none';
document.getElementById('P4_LEVEL_L').style.display = obj.P4 == '1' ? 'none' : 'block';
document.getElementById('P5_LEVEL_H').style.display = obj.P5 == '1' ? 'block' : 'none';
document.getElementById('P5_LEVEL_L').style.display = obj.P5 == '1' ? 'none' : 'block';
document.getElementById('P6_LEVEL_H').style.display = obj.P6 == '1' ? 'block' : 'none';
document.getElementById('P6_LEVEL_L').style.display = obj.P6 == '1' ? 'none' : 'block';
document.getElementById('P7_LEVEL_H').style.display = obj.P7 == '1' ? 'block' : 'none';
document.getElementById('P7_LEVEL_L').style.display = obj.P7 == '1' ? 'none' : 'block';
}
function hideIoLevel()
{
document.getElementById('P0_LEVEL_H').style.display = 'none';
document.getElementById('P0_LEVEL_L').style.display = 'none';
document.getElementById('P1_LEVEL_H').style.display = 'none';
document.getElementById('P1_LEVEL_L').style.display = 'none';
document.getElementById('P2_LEVEL_H').style.display = 'none';
document.getElementById('P2_LEVEL_L').style.display = 'none';
document.getElementById('P3_LEVEL_H').style.display = 'none';
document.getElementById('P3_LEVEL_L').style.display = 'none';
document.getElementById('P4_LEVEL_H').style.display = 'none';
document.getElementById('P4_LEVEL_L').style.display = 'none';
document.getElementById('P5_LEVEL_H').style.display = 'none';
document.getElementById('P5_LEVEL_L').style.display = 'none';
document.getElementById('P6_LEVEL_H').style.display = 'none';
document.getElementById('P6_LEVEL_L').style.display = 'none';
document.getElementById('P7_LEVEL_H').style.display = 'none';
document.getElementById('P7_LEVEL_L').style.display = 'none';
}
function getIoLevel()
{
console.log("Getting IO level for all IO's");
var ajaxReq = new XMLHttpRequest();
ajaxReq.timeout = 5000;
ajaxReq.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 == 200)
{
console.log("Response : " + this.responseText);
var ioLevelObj = JSON.parse(this.responseText);
console.log(ioLevelObj);
updateIoLevelInfo(ioLevelObj);
}
else
{
console.log("Error, status is : " + this.status);
hideIoLevel();
}
break;
default:
console.log("Unknown state");
}
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/io/get/level");
ajaxReq.send();
}
function setIoMode(pin,mode)
{
var pinOnly = pin.split('_')[0];
console.log("Setting IO mode : "+mode+" for " + pinOnly);
var ajaxReq = new XMLHttpRequest();
ajaxReq.timeout = 5000;
ajaxReq.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 == 200)
{
console.log("Response : " + this.responseText);
var ioModeObj = JSON.parse(this.responseText);
console.log(ioModeObj);
updateIoModeInfo(ioModeObj);
getIoLevel();
}
else
{
console.log("Error, status is : " + this.status);
hideIoMode();
}
break;
default:
console.log("Unknown state");
}
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/io/set/mode?"+pinOnly+'='+ (mode == 'OUTPUT' ? 'OUT' : 'IN'));
ajaxReq.send();
}
function setIoLevel(pin,mode)
{
var pinOnly = pin.split('_')[0];
console.log("Setting IO level : "+mode+" for " + pinOnly);
var ajaxReq = new XMLHttpRequest();
ajaxReq.timeout = 5000;
ajaxReq.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 == 200)
{
console.log("Response : " + this.responseText);
var ioLevelObj = JSON.parse(this.responseText);
console.log(ioLevelObj);
updateIoLevelInfo(ioLevelObj);
}
else
{
console.log("Error, status is : " + this.status);
hideIoLevel();
}
break;
default:
console.log("Unknown state");
}
}
ajaxReq.ontimeout = onTimeOut;
ajaxReq.open('GET',"/sab/io/set/level?"+pinOnly+'='+ (mode == 'HIGH' ? '1' : '0'));
ajaxReq.send();
}