619 lines
25 KiB
HTML
619 lines
25 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<style>
|
|
body
|
|
{
|
|
/*display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;*/
|
|
}
|
|
|
|
section
|
|
{
|
|
/*flex: 1 0 auto;*/
|
|
}
|
|
|
|
td,tr
|
|
{
|
|
}
|
|
|
|
.switch label input[type=checkbox]:checked+.lever
|
|
{
|
|
background-color: #fa3 !important;
|
|
}
|
|
|
|
.switch label input[type=checkbox]:checked+.lever:after
|
|
{
|
|
background-color: #f93 !important;
|
|
}
|
|
|
|
table.no-padding-margin tr td
|
|
{
|
|
margin:0px;padding:0px;
|
|
}
|
|
|
|
.mode-img
|
|
{
|
|
width:40px;
|
|
}
|
|
|
|
.cursorPointer:hover
|
|
{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hide
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.show
|
|
{
|
|
display:block;
|
|
}
|
|
|
|
</style>
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="rsrc/materialize.css"/>
|
|
<link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/>
|
|
<script src="rsrc/materialize.js"></script>
|
|
<title>ESP8266 DASHBOARD</title>
|
|
</head>
|
|
<body onload="init();">
|
|
<header>
|
|
<nav>
|
|
<div class="nav-wrapper green accent-3">
|
|
<img onclick="sideNavinstance.open();" style="height:64px;" class="brand-logo left hoverable cursorPointer" src="rsrc/logo.png" alt="logo">
|
|
<ul class="right" style="font-size:1.5em;">
|
|
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Browser time" style="margin:0 10px 0 10px;" id="browsertime_id">
|
|
</li>
|
|
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Device time" style="margin:0 10px 0 10px;">
|
|
<span id="rtcValue"></span>
|
|
</li>
|
|
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Device power information">
|
|
<span id="battLevel">NaN</span>
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px 0 10px;">
|
|
<span id="temperature"></span>
|
|
</li>
|
|
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Link quality between the device and the router" style="margin:0 10px 0 10px;">
|
|
<span id="sigStrengthPercent"></span> %
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px 0 10px;">
|
|
<img style="width:50px;vertical-align:middle;" id="imgSig1" src="rsrc/sigstr1.png" alt="sigstr1">
|
|
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig2" src="rsrc/sigstr2.png" alt="sigstr2" >
|
|
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig3" src="rsrc/sigstr3.png" alt="sigstr3" >
|
|
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig4" src="rsrc/sigstr4.png" alt="sigstr4" >
|
|
<img style="width:50px;vertical-align:middle;display:none;" id="imgSig5" src="rsrc/sigstr5.png" alt="sigstr5" >
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px 0 10px;">
|
|
<span id="sigStrength"></span> dBm
|
|
</li>
|
|
<li class="hoverable tooltipped" data-position="bottom" data-tooltip="Device ping" style="margin:0 10px 0 10px;min-width:100px;">
|
|
<span id="execTime"></span> ms
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px 0 10px;">
|
|
<img id="imgConn" src="rsrc/conn.png" alt="connected" style="width:50px;vertical-align:middle;display:none;"><img style="width:50px;vertical-align:middle;display:inline;" id="imgDisco" src="rsrc/disco.png" alt="disconnected">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<ul id="slide-out" class="sidenav blue lighten-5" style="padding:0;">
|
|
<li style="border:1px #00695c solid;background-color:#00695c;"><h2 class="white-text center-align">Settings</h2></li>
|
|
<hr>
|
|
<li class="cursorPointer hoverable" onclick="tabInstance.select('mainpage_id');"><p style="margin: 0 0 0 10px;font-size:1.3em;" class="black-text" >Back to the dashboard</p></li>
|
|
<li class="cursorPointer hoverable" onclick="tabInstance.select('settings_id');"><p style="margin: 0 0 0 10px;font-size:1.3em;" class="black-text" >General settings</p></li>
|
|
</ul>
|
|
|
|
<div class="fixed-action-btn">
|
|
<a style="font-size:2.5em;" data-target="slide-out" class="btn-floating btn-large red sidenav-trigger">
|
|
⚙
|
|
</a>
|
|
</div>
|
|
|
|
</header>
|
|
<!-- Used to init the tab system -->
|
|
<ul class="tabs" style="display:none;" id="test">
|
|
<li class="tab col s3"><a class="active" href="#mainpage_id">Dashboard</a></li>
|
|
<li class="tab col s3"><a href="#settings_id">General settings</a></li>
|
|
</ul>
|
|
<!-- End of the tab system -->
|
|
<!-- Modal window definition -->
|
|
<!-- Modal Structure -->
|
|
<div id="modal1" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Connection Lost</h4>
|
|
<p>It looks like the connection to the device has been lost.<br />We will try to reconnect in 5 seconds</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">I understand</a>
|
|
</div>
|
|
</div>
|
|
<!-- End of modal window definition -->
|
|
<section id="mainpage_id">
|
|
<table>
|
|
<tr>
|
|
<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">
|
|
<h5 class="center-align">Connectivity</h5>
|
|
</div>
|
|
</td>
|
|
<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">
|
|
<h5 class="center-align">System Info</h5>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div class="row" style="display:flex;margin:0;padding:0;">
|
|
<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">Access Point Mode</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="switch center-align">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox" id="ap_enabled_id">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
|
|
<div class="white-text" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
|
|
<div class="row">
|
|
<div class="col m6">
|
|
Connected devices :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="ap_connected_dev_count_id">0</span>
|
|
</div>
|
|
<div class="col m2">
|
|
AP IP :
|
|
</div>
|
|
<div class="col m4">
|
|
<span id="ap_IP"></span>
|
|
</div>
|
|
<div class="col m2">
|
|
MAC :
|
|
</div>
|
|
<div class="col m4">
|
|
<span id="ap_MAC"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="no-padding-margin">
|
|
<tr>
|
|
<td><label for="ssid" class="white-text" style="font-size:1em;">Advertised SSID :</label></td>
|
|
<td colspan="2"><input placeholder="SSID" id="ssid" type="text" class="validate white-text"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="ap_password" class="white-text" style="font-size:1em;">Password :</label></td>
|
|
<td><input placeholder="Password" id="ap_password" type="password" class="validate white-text"></td>
|
|
<td><img onmouseleave="showHidePassword('ap_password','hide')" onmouseover="showHidePassword('ap_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<div class="center-align">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="teal darken-1 col m3" style="margin: 7px 20px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">Station Mode</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="switch center-align">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<div class="row white-text left-align" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
|
|
<div class="col m6">
|
|
Local IP :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="localIP"></span>
|
|
</div>
|
|
<div class="col m6">
|
|
MAC :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="sta_mac"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="no-padding-margin">
|
|
<tr>
|
|
<td><label for="networksSelect" class="white-text" style="font-size:1em;">APs :</label></td>
|
|
<td colspan="2">
|
|
<select id="networksSelect">
|
|
<option value="" disabled selected>Click on scan</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="sta_password" class="white-text" style="font-size:1em;">Password :</label></td>
|
|
<td><input placeholder="Password" id="sta_password" type="password" class="validate white-text"></td>
|
|
<td><img onmouseleave="showHidePassword('sta_password','hide')" onmouseover="showHidePassword('sta_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col m6">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Connect
|
|
</button>
|
|
</div>
|
|
<div class="col m6 right-align">
|
|
<button class="btn waves-effect waves-light lime darken-3" onclick="scanAvailableNetworks();" type="submit" name="Scan">
|
|
Scan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="teal darken-1 col m6" style="margin: 7px 10px 7px 0px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">System State</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="white-text" style="font-size:1.2em;">
|
|
<div class="row">
|
|
<div class="col m6">
|
|
Cpu frequency :
|
|
</div>
|
|
<div class="col m6">
|
|
<label style="margin: 0 10px 0 0;">
|
|
<input onchange="setCpuFrequ(80);" class="with-gap" id="cpufreq80_id" name="group1" type="radio" />
|
|
<span class="white-text">80 MHz</span>
|
|
</label>
|
|
<label>
|
|
<input onchange="setCpuFrequ(160);" class="with-gap" id="cpufreq160_id" name="group1" type="radio" />
|
|
<span class="white-text" >160 MHz</span>
|
|
</label>
|
|
</div>
|
|
<div class="col m6">
|
|
Free RAM / Total RAM :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="ramInfo"></span> Bytes / 80 000 Bytes
|
|
</div>
|
|
<div class="col m6">
|
|
Heap fragmentation :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="fragInfo"></span> %
|
|
</div>
|
|
<div class="col m6">
|
|
Max contiguous chunk :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="blockInfo"></span> Bytes
|
|
</div>
|
|
<div class="col m6">
|
|
Device up time :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="upTime"></span>
|
|
</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">
|
|
<button class="btn waves-effect waves-light lime darken-3" id="otaUpdateAction"><span id="ota_update_message">refresh</span></button>
|
|
<button class="btn waves-effect waves-light green darken-3 hide" id="otaUpdateAction">update device to <span id="ota_update_version"></span> !</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="margin:0;padding:0;width:25%;">
|
|
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
|
<h5 class="center-align">Clock</h5>
|
|
</div>
|
|
</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">
|
|
<h5 class="center-align">Storage</h5>
|
|
</div>
|
|
</td>
|
|
<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">
|
|
<h5 class="center-align">Services</h5>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div class="row" style="display:flex;margin:0;padding:0;">
|
|
<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">DS3231 RTC</h5>
|
|
</div>
|
|
<hr>
|
|
<div style="font-size:1.2em;">
|
|
<input type="text" class="datepicker white-text" id="datepicker_id">
|
|
<input type="text" class="timepicker white-text" id="timepicker_id">
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col m6 left-align">
|
|
<button class="btn waves-effect waves-light green darken-3" onclick="setRtcTime();" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
</div>
|
|
<div class="col m6 right-align">
|
|
<button class="btn waves-effect waves-light green darken-3 tooltipped" onclick="setRtc2BrowserTime();" data-position="bottom" data-tooltip="Use the browser time to set the RTC time" name="browserTime">
|
|
Set browser time ✔
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="teal darken-1 col m3" style="margin: 7px 20px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">SD Card</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="white-text center-align" style="font-size:1.2em;">
|
|
<div class="switch">
|
|
<label class="white-text">
|
|
Unmounted
|
|
<input type="checkbox" id="sdcardmounted_id" onchange="mountUnmountCard('sdcardmounted_id');">
|
|
<span class="lever"></span>
|
|
Mounted
|
|
</label>
|
|
</div>
|
|
<div class="row left-align">
|
|
<div class="col m6">
|
|
Size :
|
|
</div>
|
|
<div class="col m6">
|
|
<span id="cardSize">NaN Gbytes</span>
|
|
</div>
|
|
<div class="col m6">
|
|
Free :
|
|
</div>
|
|
<div class="col m6">
|
|
XX GBytes
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 0px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">WEB Server</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="switch center-align">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<table class="no-padding-margin">
|
|
<tr>
|
|
<td><label for="web_port" class="white-text" style="font-size:1em;">Port :</label></td>
|
|
<td><input placeholder="WEB Server port" class="validate white-text" id="web_port" type="number" min="0" max="65535" ></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="web_root" class="white-text" style="font-size:1em;">Server root :</label></td>
|
|
<td><input placeholder="Server root" class="validate white-text" id="web_root" type="text" ></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<div class="center-align">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="teal darken-1 col m3" style="margin: 7px 10px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">FTP Server</h5>
|
|
</div>
|
|
<hr>
|
|
<div class="switch center-align">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<table class="no-padding-margin">
|
|
<tr>
|
|
<td><label for="ftp_port" class="white-text" style="font-size:1em;">Port :</label></td>
|
|
<td colspan="2"><input placeholder="FTP Server port" class="validate white-text" id="ftp_port" type="number" min="0" max="65535" ></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="username" class="white-text" style="font-size:1em;">User :</label></td>
|
|
<td colspan="2"><input placeholder="Login" id="username" type="text" class="validate white-text"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="user_password" class="white-text" style="font-size:1em;">Password :</label></td>
|
|
<td><input placeholder="Password" id="user_password" type="password" class="validate white-text"></td>
|
|
<td><img onmouseleave="showHidePassword('user_password','hide')" onmouseover="showHidePassword('user_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
<div class="center-align">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" style="margin:0;padding:0;width:50%;">
|
|
<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;margin:0;padding:0;">
|
|
<div class="teal darken-1 col m12" style="margin: 7px 10px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
|
|
<div class="white-text">
|
|
<h5 style="font-weight:bold;" class="center-align">IO Expander</h5>
|
|
</div>
|
|
<hr>
|
|
<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 col m12">
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="settings_id">
|
|
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
|
<h5 class="center-align">General settings</h5>
|
|
</div>
|
|
</section>
|
|
<footer style="padding:10px;" class="page-footer blue-grey darken-4 center-align">
|
|
<p>Anatole SCHRAMM-HENRY, all right reserved | Hosted by the board itself<br /> 2019-2022</p>
|
|
</footer>
|
|
<script src="rsrc/scriptV2.js"></script>
|
|
</body>
|
|
</html> |