From 1cc886c5a05900ff9e879e94fabdbe96fa22528f Mon Sep 17 00:00:00 2001
From: anschrammh <bugreport@laposte.net>
Date: Sun, 28 Apr 2019 15:30:03 +0200
Subject: [PATCH] Updated web app

---
 sdCard_content/WWW/index.htm      |  99 ++++----
 sdCard_content/WWW/rsrc/script.js | 372 +++++++++++++++++++++++++++++-
 2 files changed, 420 insertions(+), 51 deletions(-)

diff --git a/sdCard_content/WWW/index.htm b/sdCard_content/WWW/index.htm
index 0e783d3..763bf05 100644
--- a/sdCard_content/WWW/index.htm
+++ b/sdCard_content/WWW/index.htm
@@ -14,13 +14,16 @@
 	<nav>
 		<div class="menuContainer">
 			<div class="item">
-				<p><span id="sigStrength"></span> dB</p>
+				<p><span id="sigStrength"></span> dBm</p>
 			</div>
 			<div class="item">
 				<p><span id="sigStrengthPercent"></span> %</p>
 			</div>
 			<div  class="item" style="margin-left: auto;">
-				<p><span id="battLevel"></span> %</p>
+				<p><span id="battLevel"></span></p>
+			</div>
+			<div class="item" >
+				<p>PING : <br /><span id="execTime"></span> ms</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">
@@ -110,36 +113,36 @@
 						<h2>MODE</h2>
 					</td>
 					<td>
-						<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" >
+						<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('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" >
+						<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('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" >
+						<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('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" >
+						<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('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" >
+						<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('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" >
+						<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('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" >
+						<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('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" >
+						<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>
@@ -147,36 +150,36 @@
 						<h2>LEVEL</h2>
 					</td>
 					<td>
-						<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" >
+						<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>
diff --git a/sdCard_content/WWW/rsrc/script.js b/sdCard_content/WWW/rsrc/script.js
index 1d72340..03c1eff 100644
--- a/sdCard_content/WWW/rsrc/script.js
+++ b/sdCard_content/WWW/rsrc/script.js
@@ -8,6 +8,10 @@
 var sigStrenthInter = null;
 var rtcInter = null;
 var sysinfoInter = null;
+var ioModeLevelInter = null;
+var powerInfoInter = null;
+
+var execTimeStart = null;
 
 //This function set the app up
 function init()
@@ -24,7 +28,13 @@ function init()
 	sigStrenthInter = setInterval(refreshSigStrength,1000);
 	
 	sdCardSize();
+	getIoMode();
+	getIoLevel();
 	
+	ioModeLevelInter = setInterval(() => {getIoMode();getIoLevel();},1000);
+	
+	powerInfo();
+	powerInfoInter = setInterval(powerInfo,10000);
 	console.log("Ending setup");
 }
 
@@ -37,8 +47,65 @@ function onTimeOut(e)
 
 function onConnected()
 {
-	document.getElementById('imgDisco').style.display = 'none';
-	document.getElementById('imgConn').style.display = 'block';
+	if(document.getElementById('imgDisco').style.display != 'none' && document.getElementById('imgConn').style.display != 'block')
+	{
+		console.log("Connected to Swiss Army Board");
+		document.getElementById('imgDisco').style.display = 'none';
+		document.getElementById('imgConn').style.display = 'block';
+		refreshRtc();
+		refreshSysInfo();
+		refreshSigStrength();
+		sdCardSize();
+		getIoMode();
+		getIoLevel();
+		powerInfo();
+	}
+}
+
+function powerInfo()
+{
+	console.log("Getting board power info");
+	
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var powerInfoObj = JSON.parse(this.responseText);
+					console.log(powerInfoObj);
+					document.getElementById('battLevel').innerHTML = powerInfoObj['power type'] == 'USB' ? 'USB' : 'BATTERY : <br/>' + powerInfoObj.level + ' %';
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					document.getElementById('battLevel').innerHTML = 'NaN %';
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/power/info");
+	ajaxReq.send();
 }
 
 function refreshRtc()
@@ -63,7 +130,7 @@ function refreshRtc()
 				break;
 			case 4:
 				console.log("Response is ready");
-				if(this.status != 0){onConnected();}
+				if(this.status != 0){onConnected(); document.getElementById('execTime').innerHTML = new Date().getTime() - execTimeStart;}
 				if(this.status == 200)
 				{
 					console.log("Response : " + this.responseText);
@@ -75,6 +142,7 @@ function refreshRtc()
 				{
 					console.log("Error, status is : " + this.status);
 					document.getElementById('rtcValue').innerHTML = 'ERROR';
+					document.getElementById('execTime').innerHTML = 'NaN';
 				}
 				break;
 			default:
@@ -84,6 +152,7 @@ function refreshRtc()
 	}
 	ajaxReq.ontimeout = onTimeOut;
 	ajaxReq.open('GET',"/sab/rtc/get/datetime");
+	execTimeStart = new Date().getTime();
 	ajaxReq.send();
 }
 
@@ -166,12 +235,14 @@ function refreshSigStrength()
 					var wifiStaObj = JSON.parse(this.responseText);
 					console.log(wifiStaObj);
 					document.getElementById('sigStrength').innerHTML = wifiStaObj.RSSI;
+					document.getElementById('sigStrengthPercent').innerHTML = wifiStaObj.RSSI2;
 					document.getElementById('localIP').innerHTML = wifiStaObj['local IP'];
 				}
 				else
 				{
 					console.log("Error, status is : " + this.status);
 					document.getElementById('sigStrength').innerHTML = 'NaN';
+					document.getElementById('sigStrengthPercent').innerHTML = 'NaN';
 					document.getElementById('localIP').innerHTML = 'ERROR';
 				}
 				break;
@@ -273,4 +344,299 @@ function sdCardSize()
 	ajaxReq.ontimeout = onTimeOut;
 	ajaxReq.open('GET',"/sab/sdcard/size");
 	ajaxReq.send();
+}
+
+function getIoMode()
+{
+	console.log("Getting IO mode for all IO's");
+	
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var ioModeObj = JSON.parse(this.responseText);
+					console.log(ioModeObj);
+					updateIoModeInfo(ioModeObj);
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					hideIoMode();
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/io/get/mode");
+	ajaxReq.send();
+}
+
+function updateIoModeInfo(obj)
+{
+	document.getElementById('P0_MODE_I').style.display = obj.P0 == 'IN' ? 'block' : 'none';
+	document.getElementById('P0_MODE_O').style.display = obj.P0 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P1_MODE_I').style.display = obj.P1 == 'IN' ? 'block' : 'none';
+	document.getElementById('P1_MODE_O').style.display = obj.P1 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P2_MODE_I').style.display = obj.P2 == 'IN' ? 'block' : 'none';
+	document.getElementById('P2_MODE_O').style.display = obj.P2 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P3_MODE_I').style.display = obj.P3 == 'IN' ? 'block' : 'none';
+	document.getElementById('P3_MODE_O').style.display = obj.P3 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P4_MODE_I').style.display = obj.P4 == 'IN' ? 'block' : 'none';
+	document.getElementById('P4_MODE_O').style.display = obj.P4 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P5_MODE_I').style.display = obj.P5 == 'IN' ? 'block' : 'none';
+	document.getElementById('P5_MODE_O').style.display = obj.P5 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P6_MODE_I').style.display = obj.P6 == 'IN' ? 'block' : 'none';
+	document.getElementById('P6_MODE_O').style.display = obj.P6 == 'IN' ? 'none' : 'block';
+	
+	document.getElementById('P7_MODE_I').style.display = obj.P7 == 'IN' ? 'block' : 'none';
+	document.getElementById('P7_MODE_O').style.display = obj.P7 == 'IN' ? 'none' : 'block';
+}
+
+function hideIoMode()
+{
+	document.getElementById('P0_MODE_I').style.display = 'none';
+	document.getElementById('P0_MODE_O').style.display = 'none';
+
+	document.getElementById('P1_MODE_I').style.display = 'none';
+	document.getElementById('P1_MODE_O').style.display = 'none';
+
+	document.getElementById('P2_MODE_I').style.display = 'none';
+	document.getElementById('P2_MODE_O').style.display = 'none';
+
+	document.getElementById('P3_MODE_I').style.display = 'none';
+	document.getElementById('P3_MODE_O').style.display = 'none';
+
+	document.getElementById('P4_MODE_I').style.display = 'none';
+	document.getElementById('P4_MODE_O').style.display = 'none';
+
+	document.getElementById('P5_MODE_I').style.display = 'none';
+	document.getElementById('P5_MODE_O').style.display = 'none';
+
+	document.getElementById('P6_MODE_I').style.display = 'none';
+	document.getElementById('P6_MODE_O').style.display = 'none';
+
+	document.getElementById('P7_MODE_I').style.display = 'none';
+	document.getElementById('P7_MODE_O').style.display = 'none';
+}
+
+function updateIoLevelInfo(obj)
+{
+	document.getElementById('P0_LEVEL_H').style.display = obj.P0 == '1' ? 'block' : 'none';
+	document.getElementById('P0_LEVEL_L').style.display = obj.P0 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P1_LEVEL_H').style.display = obj.P1 == '1' ? 'block' : 'none';
+	document.getElementById('P1_LEVEL_L').style.display = obj.P1 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P2_LEVEL_H').style.display = obj.P2 == '1' ? 'block' : 'none';
+	document.getElementById('P2_LEVEL_L').style.display = obj.P2 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P3_LEVEL_H').style.display = obj.P3 == '1' ? 'block' : 'none';
+	document.getElementById('P3_LEVEL_L').style.display = obj.P3 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P4_LEVEL_H').style.display = obj.P4 == '1' ? 'block' : 'none';
+	document.getElementById('P4_LEVEL_L').style.display = obj.P4 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P5_LEVEL_H').style.display = obj.P5 == '1' ? 'block' : 'none';
+	document.getElementById('P5_LEVEL_L').style.display = obj.P5 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P6_LEVEL_H').style.display = obj.P6 == '1' ? 'block' : 'none';
+	document.getElementById('P6_LEVEL_L').style.display = obj.P6 == '1' ? 'none' : 'block';
+	
+	document.getElementById('P7_LEVEL_H').style.display = obj.P7 == '1' ? 'block' : 'none';
+	document.getElementById('P7_LEVEL_L').style.display = obj.P7 == '1' ? 'none' : 'block';
+}
+
+function hideIoLevel()
+{
+	document.getElementById('P0_LEVEL_H').style.display = 'none';
+	document.getElementById('P0_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P1_LEVEL_H').style.display = 'none';
+	document.getElementById('P1_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P2_LEVEL_H').style.display = 'none';
+	document.getElementById('P2_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P3_LEVEL_H').style.display = 'none';
+	document.getElementById('P3_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P4_LEVEL_H').style.display = 'none';
+	document.getElementById('P4_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P5_LEVEL_H').style.display = 'none';
+	document.getElementById('P5_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P6_LEVEL_H').style.display = 'none';
+	document.getElementById('P6_LEVEL_L').style.display = 'none';
+	
+	document.getElementById('P7_LEVEL_H').style.display = 'none';
+	document.getElementById('P7_LEVEL_L').style.display = 'none';
+}
+
+function getIoLevel()
+{
+	console.log("Getting IO level for all IO's");
+	
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var ioLevelObj = JSON.parse(this.responseText);
+					console.log(ioLevelObj);
+					updateIoLevelInfo(ioLevelObj);
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					hideIoLevel();
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/io/get/level");
+	ajaxReq.send();
+}
+
+function setIoMode(pin,mode)
+{
+	var pinOnly = pin.split('_')[0];
+	console.log("Setting IO mode : "+mode+" for " + pinOnly);
+	
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var ioModeObj = JSON.parse(this.responseText);
+					console.log(ioModeObj);
+					updateIoModeInfo(ioModeObj);
+					getIoLevel();
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					hideIoMode();
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/io/set/mode?"+pinOnly+'='+ (mode == 'OUTPUT' ? 'OUT' : 'IN'));
+	ajaxReq.send();
+}
+
+function setIoLevel(pin,mode)
+{
+	var pinOnly = pin.split('_')[0];
+	console.log("Setting IO level : "+mode+" for " + pinOnly);
+	
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var ioLevelObj = JSON.parse(this.responseText);
+					console.log(ioLevelObj);
+					updateIoLevelInfo(ioLevelObj);
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					hideIoLevel();
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/io/set/level?"+pinOnly+'='+ (mode == 'HIGH' ? '1' : '0'));
+	ajaxReq.send();
 }
\ No newline at end of file