189 lines
7.2 KiB
HTML
189 lines
7.2 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> dB</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>
|
|
</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>
|
|
<td>
|
|
<h2 class="categorie">AP Info</h2>
|
|
<p>SSID : </p>
|
|
<p>Password : </p>
|
|
</td>
|
|
<td>
|
|
<h2 class="categorie">STA Info</h2>
|
|
<p>Local IP : <span id="localIP"></span></p>
|
|
</td>
|
|
<td>
|
|
<h2 class="categorie">System Info</h2>
|
|
<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 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 type="number">:<input type="number">:<input type="number"><br />
|
|
Date : <input type="number">/<input type="number">/<input type="number"><br /><br />
|
|
<button>DO IT !</button>
|
|
</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('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" >
|
|
</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" >
|
|
</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" >
|
|
</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" >
|
|
</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" >
|
|
</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" >
|
|
</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" >
|
|
</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" >
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<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" >
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<footer>
|
|
<p class="footerText">Th3maz1ng, all right reserved | Hosted by the board itself</p>
|
|
</footer>
|
|
</body>
|
|
</html> |