Updated web app
This commit is contained in:
Anatole SCHRAMM
parent
c20e89f1e9
commit
12a6a4d87e
@ -4,11 +4,13 @@
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="rsrc/style.css" />
|
||||
<link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/>
|
||||
<script src="rsrc/script.js"></script>
|
||||
<title>ESP8266 DASHBOARD</title>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="init();">
|
||||
<header>
|
||||
<h1 class ="title">ESP8266 Embedded System Dashboard</h1>
|
||||
<div id="conIcon"><img id="imgConn" src="rsrc/conn.png" alt="connected" style="display:none;"><img id="imgDisco" src="rsrc/disco.png" alt="disconnected"></div>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="menuContainer">
|
||||
@ -34,27 +36,27 @@
|
||||
</td>
|
||||
<td>
|
||||
<h2 class="categorie">STA Info</h2>
|
||||
<p>Local IP :</p>
|
||||
<p>Local IP : <span id="localIP"></span></p>
|
||||
</td>
|
||||
<td>
|
||||
<h2 class="categorie">System Info</h2>
|
||||
<p>Free ram :</p>
|
||||
<p>CPU Frequ :</p>
|
||||
<p>Heap frag :</p>
|
||||
<p>Max block :</p>
|
||||
<p>Free ram : <span id="ramInfo"></span> Byte(s)</p>
|
||||
<p>CPU Frequ : <span id="cpuInfo"></span> Mhz</p>
|
||||
<p>Heap frag : <span id="fragInfo"></span> %</p>
|
||||
<p>Max block : <span id="blockInfo"></span> Byte(s)</p>
|
||||
</td>
|
||||
</TR>
|
||||
</table>
|
||||
</div>
|
||||
<div class="subSection">
|
||||
<h2 class="categorie">SdCard</h2>
|
||||
<p>SDCard size :</p>
|
||||
<p>Unmount SDCard : <button>DO IT !</button></p>
|
||||
<p>Mount SDCard : <button>DO IT !</button></p>
|
||||
<p>SDCard size : <span id="cardSize"></span></p>
|
||||
<p>Unmount SDCard : <button onclick="sdCardMountUnmnout('unmount');">DO IT !</button></p>
|
||||
<p>Mount SDCard : <button onclick="sdCardMountUnmnout('mount');">DO IT !</button></p>
|
||||
</div>
|
||||
<div class="subSection">
|
||||
<h2 class="categorie">Real Time Clock</h2>
|
||||
<p>RTC value : </p>
|
||||
<p>RTC value : <span id="rtcValue" ></span></p>
|
||||
<p>
|
||||
Set RTC value : <br />
|
||||
<br />
|
||||
|
||||
@ -0,0 +1,276 @@
|
||||
/**
|
||||
* JavaScript code for the dashboard logic, refresh and other things
|
||||
*
|
||||
* Anatole SCHRAMM-HENRY - Th3maz1ng
|
||||
**/
|
||||
|
||||
//Variable needed for the app
|
||||
var sigStrenthInter = null;
|
||||
var rtcInter = null;
|
||||
var sysinfoInter = null;
|
||||
|
||||
//This function set the app up
|
||||
function init()
|
||||
{
|
||||
console.log("Body loaded - starting setup");
|
||||
|
||||
refreshRtc();
|
||||
rtcClockInter = setInterval(refreshRtc,1000);
|
||||
|
||||
refreshSysInfo();
|
||||
sysinfoInter = setInterval(refreshSysInfo,10000);
|
||||
|
||||
refreshSigStrength();
|
||||
sigStrenthInter = setInterval(refreshSigStrength,1000);
|
||||
|
||||
sdCardSize();
|
||||
|
||||
console.log("Ending setup");
|
||||
}
|
||||
|
||||
function onTimeOut(e)
|
||||
{
|
||||
console.error("Request timed out");
|
||||
document.getElementById('imgConn').style.display = 'none';
|
||||
document.getElementById('imgDisco').style.display = 'block';
|
||||
}
|
||||
|
||||
function connectedUpdate()
|
||||
{
|
||||
document.getElementById('imgDisco').style.display = 'none';
|
||||
document.getElementById('imgConn').style.display = 'block';
|
||||
}
|
||||
|
||||
function refreshRtc()
|
||||
{
|
||||
console.log("Refreshing RTC");
|
||||
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 != 0){connectedUpdate();}
|
||||
if(this.status == 200)
|
||||
{
|
||||
console.log("Response : " + this.responseText);
|
||||
var rtcObj = JSON.parse(this.responseText);
|
||||
console.log(rtcObj);
|
||||
document.getElementById('rtcValue').innerHTML = rtcObj.time + ' ' + rtcObj.date;
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
document.getElementById('rtcValue').innerHTML = 'ERROR';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
ajaxReq.ontimeout = onTimeOut;
|
||||
ajaxReq.open('GET',"/sab/rtc/get/datetime");
|
||||
ajaxReq.send();
|
||||
}
|
||||
|
||||
function refreshSysInfo()
|
||||
{
|
||||
console.log("Refreshing Sys Infos");
|
||||
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 systemInfoObj = JSON.parse(this.responseText);
|
||||
console.log(systemInfoObj);
|
||||
document.getElementById('ramInfo').innerHTML = systemInfoObj['free RAM'];
|
||||
document.getElementById('cpuInfo').innerHTML = systemInfoObj['CPU freq'];
|
||||
document.getElementById('fragInfo').innerHTML = systemInfoObj['heap frag'];
|
||||
document.getElementById('blockInfo').innerHTML = systemInfoObj['max block'];
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
document.getElementById('ramInfo').innerHTML = 'NaN';
|
||||
document.getElementById('cpuInfo').innerHTML = 'NaN';
|
||||
document.getElementById('fragInfo').innerHTML = 'NaN';
|
||||
document.getElementById('blockInfo').innerHTML = 'NaN';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
ajaxReq.ontimeout = onTimeOut;
|
||||
ajaxReq.open('GET',"/sab/systeminfo");
|
||||
ajaxReq.send();
|
||||
}
|
||||
|
||||
function refreshSigStrength()
|
||||
{
|
||||
console.log("Refreshing Sig Strength");
|
||||
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 wifiStaObj = JSON.parse(this.responseText);
|
||||
console.log(wifiStaObj);
|
||||
document.getElementById('sigStrength').innerHTML = wifiStaObj.RSSI;
|
||||
document.getElementById('localIP').innerHTML = wifiStaObj['local IP'];
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
document.getElementById('sigStrength').innerHTML = 'NaN';
|
||||
document.getElementById('localIP').innerHTML = 'ERROR';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
ajaxReq.ontimeout = onTimeOut;
|
||||
ajaxReq.open('GET',"/sab/wifi/stainfo");
|
||||
ajaxReq.send();
|
||||
}
|
||||
|
||||
function sdCardMountUnmnout(action)
|
||||
{
|
||||
console.log("Sd card action : "+action);
|
||||
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 sdCardObj = JSON.parse(this.responseText);
|
||||
console.log(sdCardObj);
|
||||
|
||||
sdCardSize();
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
ajaxReq.ontimeout = onTimeOut;
|
||||
ajaxReq.open('GET',"/sab/sdcard/"+action);
|
||||
ajaxReq.send();
|
||||
}
|
||||
|
||||
function sdCardSize()
|
||||
{
|
||||
console.log("Refreshing SD card size : ");
|
||||
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 sdCardObj = JSON.parse(this.responseText);
|
||||
console.log(sdCardObj);
|
||||
document.getElementById('cardSize').innerHTML = sdCardObj.size == 0 ? 'NO CARD' : sdCardObj.size + ' GByte(s)';
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log("Error, status is : " + this.status);
|
||||
document.getElementById('cardSize').innerHTML = 'NaN GByte(s)';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log("Unknown state");
|
||||
|
||||
}
|
||||
}
|
||||
ajaxReq.ontimeout = onTimeOut;
|
||||
ajaxReq.open('GET',"/sab/sdcard/size");
|
||||
ajaxReq.send();
|
||||
}
|
||||
@ -17,6 +17,22 @@ header > h1
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
header > #conIcon
|
||||
{
|
||||
margin-top:-105px;
|
||||
background-color:white;
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
top:20vh;
|
||||
left:0px;
|
||||
|
||||
}
|
||||
header > #conIcon > img
|
||||
{
|
||||
width:100px;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
p
|
||||
{
|
||||
font-family: Arial;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user