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-26 17:39:39 +02:00
parent 42c280e5d2
commit bf3bc4f7f2
3 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
sdCard_content/WWW/index.htm
View File

@ -10,7 +10,6 @@
<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">
@ -20,9 +19,12 @@
<div class="item">
<p><span id="sigStrengthPercent"></span> %</p>
</div>
<div class="item">
<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>
@ -108,28 +110,36 @@
<h2>MODE</h2>
</td>
<td>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
<h2>OUT</h2>
<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>
@ -137,28 +147,36 @@
<h2>LEVEL</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
</td>
<td>
<h2>1</h2>
<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>

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

@ -35,7 +35,7 @@ function onTimeOut(e)
document.getElementById('imgDisco').style.display = 'block';
}
function connectedUpdate()
function onConnected()
{
document.getElementById('imgDisco').style.display = 'none';
document.getElementById('imgConn').style.display = 'block';
@ -63,7 +63,7 @@ function refreshRtc()
break;
case 4:
console.log("Response is ready");
if(this.status != 0){connectedUpdate();}
if(this.status != 0){onConnected();}
if(this.status == 200)
{
console.log("Response : " + this.responseText);

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

@ -17,19 +17,9 @@ header > h1
margin:0;
padding:0;
}
header > #conIcon
#conIcon > img
{
margin-top:-105px;
background-color:white;
display:inline-block;
position:absolute;
top:20vh;
left:0px;
}
header > #conIcon > img
{
width:100px;
width:70px;
padding:0;
margin:0;
}
@ -78,7 +68,8 @@ input[type='number']
{
display:flex;
align-items: stretch;
flex-direction: row-reverse
flex-direction: row-reverse;
justify-content:flex-end;
}
.item
@ -88,8 +79,20 @@ input[type='number']
background-color:white;
min-width:60px;
}
.item-start
{
border:1px black solid;
margin:0 10px 0 10px;
background-color:white;
min-width:60px;
}
.inline
{
display:inline-block;
border:1px black solid;
}
.mode-img
{
width:40px;
}