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

Still migrating dashboard to new design

Browse Source
This commit is contained in:
Anatole SCHRAMM 2022-10-10 13:56:57 +02:00
parent 2a51d0cdf6
commit a7033e5c5e
1 changed files with 174 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
sdCard_content/WWW/indexV2.htm
View File

@ -122,12 +122,12 @@
<section id="mainpage_id"> <section id="mainpage_id">
<table> <table>
<tr> <tr>
<td colspan="2" style="width: 50%;"> <td colspan="2" style="width: 50%;margin:0;padding:0;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3"> <div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Connectivity</h5> <h5 class="center-align">Connectivity</h5>
</div> </div>
</td> </td>
<td colspan="2" style="width: 50%;"> <td colspan="2" style="width: 50%;margin:0;padding:0;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3"> <div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">System Info</h5> <h5 class="center-align">System Info</h5>
</div> </div>
@ -135,8 +135,8 @@
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="4">
<div class="row" style="display:flex;"> <div class="row" style="display:flex;margin:0;padding:0;">
<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;"> <div class="teal darken-1 col m3" style="margin: 7px 5px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text"> <div class="white-text">
<h5 style="font-weight:bold;" class="center-align">Access Point Mode</h5> <h5 style="font-weight:bold;" class="center-align">Access Point Mode</h5>
</div> </div>
@ -167,7 +167,7 @@
</div> </div>
</div> </div>
<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;"> <div class="teal darken-1 col m3" style="margin: 7px 20px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text"> <div class="white-text">
<h5 style="font-weight:bold;" class="center-align">Station Mode</h5> <h5 style="font-weight:bold;" class="center-align">Station Mode</h5>
</div> </div>
@ -207,7 +207,7 @@
</div> </div>
</div> </div>
<div class="teal darken-1 col m6" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;"> <div class="teal darken-1 col m6" style="margin: 7px 10px 7px 0px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text"> <div class="white-text">
<h5 style="font-weight:bold;" class="center-align">System State</h5> <h5 style="font-weight:bold;" class="center-align">System State</h5>
</div> </div>
@ -252,23 +252,35 @@
<span id="upTime"></span> <span id="upTime"></span>
</div> </div>
</div> </div>
<hr>
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">System State</h5>
</div>
<div class="row">
<div class="col m6">
Available OTA update :
</div>
<div class="col m6">
<span id="otaUpdateInfo"></span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td style="margin:0;padding:0;width:25%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3"> <div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Clock</h5> <h5 class="center-align">Clock</h5>
</div> </div>
</td> </td>
<td> <td style="margin:0;padding:0;width:25%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3"> <div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Storage</h5> <h5 class="center-align">Storage</h5>
</div> </div>
</td> </td>
<td colspan="2"> <td colspan="2" style="margin:0;padding:0;width:50%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3"> <div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Services</h5> <h5 class="center-align">Services</h5>
</div> </div>
@ -368,62 +380,13 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</td>
</tr>
<tr>
<td>
</td> <div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<td> <div class="white-text">
<h5 style="font-weight:bold;" class="center-align">FTP Server</h5>
</td> </div>
<td> <hr>
<div class="switch center-align">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<div class="row" style="margin-top:-20px;">
<div class="row col m3">
<div class="col m12">
</div>
</div>
<div class="row col m3">
<div class="col m12">
</div>
</div>
<div class="col m6">
<div class="col m6">
</div>
<div class="col m6">
<div class="card teal darken-1">
<div class="card-content white-text">
<span class="card-title center-align" style="font-weight:bold;">FTP Server</span>
</div>
<div class="card-action white-text center-align" style="font-size:1.2em;">
<div class="switch">
<label class="white-text"> <label class="white-text">
Disabled Disabled
<input type="checkbox"> <input type="checkbox">
@ -439,136 +402,153 @@
</table> </table>
<input placeholder="Login" id="ssid" type="text" class="validate white-text"> <input placeholder="Login" id="ssid" type="text" class="validate white-text">
<input placeholder="Password" id="pwd" type="password" class="validate white-text"> <input placeholder="Password" id="pwd" type="password" class="validate white-text">
</div> <hr>
<div class="card-action"> <div class="row">
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply"> <div class="col m6">
Apply &#10004; <button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
</button> Apply &#10004;
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel"> </button>
Cancel &#10008; </div>
</button> <div class="col m6 right-align">
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel">
Cancel &#10008;
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </td>
</div> </tr>
</div> <tr>
<td colspan="4">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">IO's Mode and State</h5>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div class="row" style="display:flex;">
<div class="teal darken-1 col m12" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">IO Expander</h5>
</div>
<div class="white-text center-align" style="font-size:1.2em;">
<table>
<tr>
<td>
</td>
<td>
<p>P0</p>
</td>
<td>
<p>P1</p>
</td>
<td>
<p>P2</p>
</td>
<td>
<p>P3</p>
</td>
<td>
<p>P4</p>
</td>
<td>
<p>P5</p>
</td>
<td>
<p>P6</p>
</td>
<td>
<p>P7</p>
</td>
</tr>
<tr>
<td>
<p>MODE</p>
</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>
<p>LEVEL</p>
</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>
</div>
</div>>
</td>
</tr>
</table>
<div class="row" style="margin-top:-20px;"> <div class="row" style="margin-top:-20px;">
<div class="row col m12"> <div class="row col m12">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">IO's Mode and State</h5>
</div>
<div class="card teal darken-1">
<div class="card-content white-text">
<span class="card-title center-align" style="font-weight:bold;">IO Expander</span>
</div>
<div class="card-action white-text center-align" style="font-size:1.2em;">
<table>
<tr>
<td>
</td>
<td>
<p>P0</p>
</td>
<td>
<p>P1</p>
</td>
<td>
<p>P2</p>
</td>
<td>
<p>P3</p>
</td>
<td>
<p>P4</p>
</td>
<td>
<p>P5</p>
</td>
<td>
<p>P6</p>
</td>
<td>
<p>P7</p>
</td>
</tr>
<tr>
<td>
<p>MODE</p>
</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>
<p>LEVEL</p>
</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>
</div>
</div> </div>
</div> </div>
</section> </section>