246 lines
9.6 KiB
HTML
246 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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 onload="init();">
|
|
<header>
|
|
<h1 class ="title">ESP8266 Embedded System Dashboard</h1>
|
|
</header>
|
|
<nav>
|
|
<div class="menuContainer">
|
|
<div class="item">
|
|
<p><span id="sigStrength"></span> dBm</p>
|
|
</div>
|
|
<div class="item" id="strIco">
|
|
<img id="imgSig1" src="rsrc/sigstr1.png" alt="sigstr1">
|
|
<img id="imgSig2" src="rsrc/sigstr2.png" alt="sigstr2" style="display:none;">
|
|
<img id="imgSig3" src="rsrc/sigstr3.png" alt="sigstr3" style="display:none;">
|
|
<img id="imgSig4" src="rsrc/sigstr4.png" alt="sigstr4" style="display:none;">
|
|
<img id="imgSig5" src="rsrc/sigstr5.png" alt="sigstr5" style="display:none;">
|
|
<p style="position:absolute;bottom:-15px;left:0;">
|
|
<span id="sigStrengthPercent"></span> %
|
|
</p>
|
|
</div>
|
|
<div class="item">
|
|
<p><span id="battLevel"></span></p>
|
|
</div>
|
|
<div class="item" style="margin-left: auto;">
|
|
<p><span id="temperature"></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">
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<section>
|
|
<div class="subSection">
|
|
<table>
|
|
<tr>
|
|
<th>
|
|
<h2 class="categorie">AP Info</h2>
|
|
</th>
|
|
<th>
|
|
<h2 class="categorie">STA Info</h2>
|
|
</th>
|
|
<th>
|
|
<h2 class="categorie">System Info</h2>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p>SSID : </p>
|
|
</td>
|
|
<td>
|
|
<p>Local IP : <span id="localIP"></span></p>
|
|
</td>
|
|
<td>
|
|
<p>Free ram : <span id="ramInfo"></span> Byte(s)</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<p>Password : </p>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<p>CPU Frequ : <span id="cpuInfo"></span> Mhz</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<p>Heap frag : <span id="fragInfo"></span> %</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<p>Max block : <span id="blockInfo"></span> Byte(s)</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<p>Up time : <span id="upTime"></span></p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="subSection inline" style="width:30%;">
|
|
<div class="subSection">
|
|
<h2 class="categorie">SdCard</h2>
|
|
<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 : <span id="rtcValue" ></span></p>
|
|
<p>
|
|
Set RTC value : <br />
|
|
<br />
|
|
Time : <input id="hour" type="number" min="0" max="23">h:<input id="minute" type="number" min="0" max="59">m:<input id="second" type="number" min="0" max="59">s<br />
|
|
Date : <input id="day" type="number" min="1" max="31">d/<input id="month" type="number" min="1" max="12">m/<input id="year" type="number" min="2000" max="3000">y<br /><br />
|
|
<button onclick="setRtcClock();">DO IT !</button><p><span id="rtcSetMsg" ></span></p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="subSection inline" style="width:65%;">
|
|
<table>
|
|
<tr>
|
|
<th colspan="9">
|
|
<h2>PINS</h2>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
|
|
</td>
|
|
<td>
|
|
<h2>P0</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P1</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P2</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P3</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P4</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P5</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P6</h2>
|
|
</td>
|
|
<td>
|
|
<h2>P7</h2>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h2>MODE</h2>
|
|
</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>
|
|
<h2>LEVEL</h2>
|
|
</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>
|
|
</section>
|
|
<footer>
|
|
<p class="footerText">Th3maz1ng, all right reserved | Hosted by the board itself</p>
|
|
</footer>
|
|
</body>
|
|
</html> |