534 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			534 lines
		
	
	
		
			22 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!doctype html>
 | 
						|
<html lang="en">
 | 
						|
  <head>
 | 
						|
	
 | 
						|
	<style>
 | 
						|
		body
 | 
						|
		{
 | 
						|
			display: flex;
 | 
						|
			min-height: 100vh;
 | 
						|
			flex-direction: column;
 | 
						|
		}
 | 
						|
 | 
						|
		section 
 | 
						|
		{
 | 
						|
			flex: 1 0 auto;
 | 
						|
		}
 | 
						|
	  
 | 
						|
		.switch label input[type=checkbox]:checked+.lever
 | 
						|
		{
 | 
						|
		  background-color: #fa3 !important;
 | 
						|
		}
 | 
						|
 | 
						|
		.switch label input[type=checkbox]:checked+.lever:after 
 | 
						|
		{
 | 
						|
		  background-color: #f93 !important;
 | 
						|
		}
 | 
						|
		
 | 
						|
		.mode-img
 | 
						|
		{
 | 
						|
			width:40px;
 | 
						|
		}
 | 
						|
		
 | 
						|
		.cursorPointer:hover
 | 
						|
		{
 | 
						|
			cursor: pointer;
 | 
						|
		}
 | 
						|
		
 | 
						|
	</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">
 | 
						|
		<div class="row">
 | 
						|
			<div class="row col m6">
 | 
						|
					<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 | 
						|
						<h5 class="center-align">Connectivity</h5>
 | 
						|
					</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;">Access Point Mode</span>
 | 
						|
						</div>
 | 
						|
						<div class="card-action center-align">
 | 
						|
							<div class="switch">
 | 
						|
								<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">
 | 
						|
									Connected dev :
 | 
						|
								</div>
 | 
						|
								<div class="col m6">
 | 
						|
									3
 | 
						|
								</div>
 | 
						|
							</div>
 | 
						|
							<input placeholder="SSID" id="ssid" type="text" class="validate white-text">
 | 
						|
							<input onmouseleave="showHidePassword('pwd','hide')" onmouseover="showHidePassword('pwd','show');" value="somePassword" placeholder="Password" id="pwd" type="password" class="validate white-text">
 | 
						|
						</div>
 | 
						|
						<div class="card-action">
 | 
						|
							<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
 | 
						|
								Apply ✔
 | 
						|
							</button>
 | 
						|
							<button class="btn waves-effect waves-light  red darken-3" style=""  type="submit" name="cancel">
 | 
						|
								Cancel ✘
 | 
						|
							</button>
 | 
						|
						</div>
 | 
						|
					</div>
 | 
						|
				</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;">Station Mode</span>
 | 
						|
						</div>
 | 
						|
						<div class="card-action center-align">
 | 
						|
							<div class="switch">
 | 
						|
								<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>
 | 
						|
							<select>
 | 
						|
							  <option value="" disabled selected>Select a network</option>
 | 
						|
							  <option value="1">Network 1</option>
 | 
						|
							  <option value="2">Network 2</option>
 | 
						|
							  <option value="3">Network 3</option>
 | 
						|
							</select>
 | 
						|
							<input placeholder="Password" id="pwd" type="password" class="validate white-text">
 | 
						|
						</div>
 | 
						|
						<div class="card-action">
 | 
						|
							<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
 | 
						|
								Apply ✔
 | 
						|
							</button>
 | 
						|
							<button class="btn waves-effect waves-light  red darken-3" style=""  type="submit" name="cancel">
 | 
						|
								Cancel ✘
 | 
						|
							</button>
 | 
						|
						</div>
 | 
						|
					</div>
 | 
						|
				</div>
 | 
						|
			</div>
 | 
						|
			<div class="row col m6">
 | 
						|
					<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 | 
						|
						<h5 class="center-align">System Info</h5>
 | 
						|
					</div>
 | 
						|
					<div class="col m12">
 | 
						|
					<div class="card teal darken-1">
 | 
						|
							<div class="card-content white-text">
 | 
						|
								<span class="card-title center-align" style="font-weight:bold;">System State</span>
 | 
						|
							</div>
 | 
						|
							<div class="card-action 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>
 | 
						|
						</div>
 | 
						|
					</div>
 | 
						|
					</div>
 | 
						|
			</div>
 | 
						|
		</div>
 | 
						|
		
 | 
						|
		<div class="row" style="margin-top:-20px;">
 | 
						|
			<div class="row col m3">
 | 
						|
					<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 | 
						|
						<h5 class="center-align">Clock</h5>
 | 
						|
					</div>
 | 
						|
					<div class="col m12">
 | 
						|
					<div class="card teal darken-1">
 | 
						|
						<div class="card-content white-text">
 | 
						|
							<span class="card-title center-align" style="font-weight:bold;">DS3231 RTC</span>
 | 
						|
						</div>
 | 
						|
						
 | 
						|
						<div class="card-action" style="font-size:1.2em;">
 | 
						|
							<input type="text" class="datepicker" id="datepicker_id">
 | 
						|
							<input type="text" class="timepicker" id="timepicker_id">
 | 
						|
						</div>
 | 
						|
						<div class="card-action">
 | 
						|
							<button class="btn waves-effect waves-light green darken-3" onclick="setRtcTime();" name="apply">
 | 
						|
								Apply ✔
 | 
						|
							</button>
 | 
						|
							<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>
 | 
						|
			<div class="row col m3">
 | 
						|
				<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 | 
						|
					<h5 class="center-align">Storage</h5>
 | 
						|
				</div>
 | 
						|
				<div class="col m12">
 | 
						|
				<div class="card teal darken-1">
 | 
						|
					<div class="card-content white-text">
 | 
						|
						<span class="card-title center-align" style="font-weight:bold;">SD Card</span>
 | 
						|
					</div>
 | 
						|
					<div class="card-action 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>
 | 
						|
			</div>
 | 
						|
			<div class="col m6">
 | 
						|
				<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 | 
						|
					<h5 class="center-align">Services</h5>
 | 
						|
				</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;">Web Server</span>
 | 
						|
						</div>
 | 
						|
						<div class="card-action white-text center-align" style="font-size:1.2em;">
 | 
						|
							<div class="switch">
 | 
						|
								<label class="white-text">
 | 
						|
									Disabled
 | 
						|
									<input type="checkbox">
 | 
						|
									<span class="lever"></span>
 | 
						|
									Enabled
 | 
						|
								</label>
 | 
						|
							</div>
 | 
						|
							<table>
 | 
						|
								<tr>
 | 
						|
									<td><label for="web_port" class="white-text" style="font-size:1em;">Port :</label></td>
 | 
						|
									<td><input class="validate white-text" id="web_port" type="number" min="0" max="65535" ></td>
 | 
						|
								</tr>
 | 
						|
							</table>
 | 
						|
							<div class="row">
 | 
						|
								<div class="col m6">
 | 
						|
									
 | 
						|
								</div>
 | 
						|
								<div class="col m6">
 | 
						|
									
 | 
						|
								</div>
 | 
						|
								<div class="col m6">
 | 
						|
									
 | 
						|
								</div>
 | 
						|
								<div class="col m6">
 | 
						|
									
 | 
						|
								</div>
 | 
						|
								<div class="col m6">
 | 
						|
									
 | 
						|
								</div>
 | 
						|
							</div>
 | 
						|
						</div>
 | 
						|
						<div class="card-action">
 | 
						|
							<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
 | 
						|
								Apply ✔
 | 
						|
							</button>
 | 
						|
							<button class="btn waves-effect waves-light  red darken-3" style=""  type="submit" name="cancel">
 | 
						|
								Cancel ✘
 | 
						|
							</button>
 | 
						|
						</div>
 | 
						|
					</div>
 | 
						|
				</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">
 | 
						|
									Disabled
 | 
						|
									<input type="checkbox">
 | 
						|
									<span class="lever"></span>
 | 
						|
									Enabled
 | 
						|
								</label>
 | 
						|
							</div>
 | 
						|
							<table>
 | 
						|
								<tr>
 | 
						|
									<td><label for="ftp_port" class="white-text" style="font-size:1em;">Port :</label></td>
 | 
						|
									<td><input class="validate white-text" id="ftp_port" type="number" min="0" max="65535" ></td>
 | 
						|
								</tr>
 | 
						|
							</table>
 | 
						|
							<input placeholder="Login" id="ssid" type="text" class="validate white-text">
 | 
						|
							<input placeholder="Password" id="pwd" type="password" class="validate white-text">
 | 
						|
						</div>
 | 
						|
						<div class="card-action">
 | 
						|
							<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
 | 
						|
								Apply ✔
 | 
						|
							</button>
 | 
						|
							<button class="btn waves-effect waves-light  red darken-3" style=""  type="submit" name="cancel">
 | 
						|
								Cancel ✘
 | 
						|
							</button>
 | 
						|
						</div>
 | 
						|
					</div>
 | 
						|
				</div>
 | 
						|
			</div>
 | 
						|
		</div>
 | 
						|
		<div class="row" style="margin-top:-20px;">
 | 
						|
			<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>
 | 
						|
	</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 class="page-footer blue-grey darken-4 center-align">
 | 
						|
		<p>Anatole SCHRAMM-HENRY, all right reserved | Hosted by the board itself<br /> 2019-2020</p>
 | 
						|
	</footer>
 | 
						|
	<script src="rsrc/scriptV2.js"></script>
 | 
						|
  </body>
 | 
						|
</html> |