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

54
sdCard_content/WWW/index.htm
View File

@ -10,7 +10,6 @@
<body onload="init();"> <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">
@ -20,9 +19,12 @@
<div class="item"> <div class="item">
<p><span id="sigStrengthPercent"></span> %</p> <p><span id="sigStrengthPercent"></span> %</p>
</div> </div>
<div class="item"> <div class="item" style="margin-left: auto;">
<p><span id="battLevel"></span> %</p> <p><span id="battLevel"></span> %</p>
</div> </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> </div>
</nav> </nav>
<section> <section>
@ -108,28 +110,36 @@
<h2>MODE</h2> <h2>MODE</h2>
</td> </td>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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> </td>
</tr> </tr>
<tr> <tr>
@ -137,28 +147,36 @@
<h2>LEVEL</h2> <h2>LEVEL</h2>
</td> </td>
<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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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>
<td> <td>
<h2>1</h2> <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> </td>
</tr> </tr>
</table> </table>

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

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

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

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