Th3maz1ng/ESP8266_swiss_army_board
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated web app

Browse Source
This commit is contained in:
Anatole SCHRAMM 2019-04-24 16:58:51 +02:00
parent c20e89f1e9
commit 12a6a4d87e
3 changed files with 304 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
sdCard_content/WWW/index.htm
View File

@ -4,11 +4,13 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" href="rsrc/style.css" /> <link rel="stylesheet" href="rsrc/style.css" />
<link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/>
<script src="rsrc/script.js"></script>
<title>ESP8266 DASHBOARD</title> <title>ESP8266 DASHBOARD</title>
</head> </head>
<body> <body onload="init();">
<header> <header>
<h1 class ="title">ESP8266 Embedded System Dashboard</h1> <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> </header>
<nav> <nav>
<div class="menuContainer"> <div class="menuContainer">
@ -34,27 +36,27 @@
</td> </td>
<td> <td>
<h2 class="categorie">STA Info</h2> <h2 class="categorie">STA Info</h2>
<p>Local IP :</p> <p>Local IP : <span id="localIP"></span></p>
</td> </td>
<td> <td>
<h2 class="categorie">System Info</h2> <h2 class="categorie">System Info</h2>
<p>Free ram :</p> <p>Free ram : <span id="ramInfo"></span> Byte(s)</p>
<p>CPU Frequ :</p> <p>CPU Frequ : <span id="cpuInfo"></span> Mhz</p>
<p>Heap frag :</p> <p>Heap frag : <span id="fragInfo"></span> %</p>
<p>Max block :</p> <p>Max block : <span id="blockInfo"></span> Byte(s)</p>
</td> </td>
</TR> </TR>
</table> </table>
</div> </div>
<div class="subSection"> <div class="subSection">
<h2 class="categorie">SdCard</h2> <h2 class="categorie">SdCard</h2>
<p>SDCard size :</p> <p>SDCard size : <span id="cardSize"></span></p>
<p>Unmount SDCard : <button>DO IT !</button></p> <p>Unmount SDCard : <button onclick="sdCardMountUnmnout('unmount');">DO IT !</button></p>
<p>Mount SDCard : <button>DO IT !</button></p> <p>Mount SDCard : <button onclick="sdCardMountUnmnout('mount');">DO IT !</button></p>
</div> </div>
<div class="subSection"> <div class="subSection">
<h2 class="categorie">Real Time Clock</h2> <h2 class="categorie">Real Time Clock</h2>
<p>RTC value : </p> <p>RTC value : <span id="rtcValue" ></span></p>
<p> <p>
Set RTC value : <br /> Set RTC value : <br />
<br /> <br />

276
sdCard_content/WWW/rsrc/script.js
View File

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

16
sdCard_content/WWW/rsrc/style.css
View File

@ -17,6 +17,22 @@ header > h1
margin:0; margin:0;
padding: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 p
{ {
font-family: Arial; font-family: Arial;