webui/webpage/main.html

<!DOCTYPE HTML>
 <html>
   <head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <style>
	body {
		margin       :  0px;
		padding      :  0px;
         }
	#rtxData {
		float        :  left;
		margin-left  :  100px;
		margin-right :  auto;
		width        :  470px;
	}

	#gPanel{
		float        :  left;
		margin-left  :  100px;
		margin-right :  auto;
		width        :  470px;
	}

	h2{
		text-align   :  center;
	}

	#btnHolder, #sliderTxt{
		text-align   :  center;
	}
    </style>

        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script src="http://smoothiecharts.org/smoothie.js"></script>
    
    <script>

	window.requestAnimFrame = (function(callback) {	
		return window.requestAnimationFrame    || 
			window.webkitRequestAnimationFrame || 
			window.mozRequestAnimationFrame    || 
			window.oRequestAnimationFrame      || 
			window.msRequestAnimationFrame     ||
		
		function(callback) 
		{
			window.setTimeout(callback, 1000 / 30);  // 30 frames per second
		};
	})();
	
	var iosocket;
	var toggleVal1 = 0;
	var toggleVal2 = 0;
	var toggleVal3 = 0;
	var toggleVal4 = 0;
	var toggleVal5 = 0;
	var toggleVal6 = 0;
	var toggleVal7 = 0;
	var toggleVal8 = 0;
	
	var tempData  = 0; 
	var txData = '';
	
	var analogData1 =  0;
	var analogData2 =  0;
	var analogData3 =  0;
	var analogData4 =  0;
	var analogData5 =  0;
	var analogData6 =  0;
	var analogData7 =  0;
	var analogData8 =  0;
	
	var accDataX    =  0;
	var accDataY    =  0;
	var accDataZ    =  0;
	
	var data1 = 0;
	var data2 = 0;
	var data3 = 0;
		
	function initGraph1()  //Initialize Graph 1
	{
		var smoothie1 = new SmoothieChart();
		var plot1 = new TimeSeries();
		
		smoothie1.streamTo(document.getElementById("myGraph1"));
		smoothie1.addTimeSeries(plot1, { strokeStyle:'rgb(0, 255, 0)', lineWidth:2 });
		
		setInterval(function() {
					plot1.append(new Date().getTime(), data1 );
			}, 100);
	}
	
	function initGraph2()
	{
		var smoothie2 = new SmoothieChart();
		var plot2 = new TimeSeries();
		
		smoothie2.streamTo(document.getElementById("myGraph2"));
		smoothie2.addTimeSeries(plot2, { strokeStyle:'rgb(0, 0, 255)', lineWidth:2 });
		
		setInterval(function() {
					plot2.append(new Date().getTime(), data2 );
			}, 100);
	}
	
	function initGraph3()
	{
		var smoothie3 = new SmoothieChart();
		var plot3 = new TimeSeries();
		
		smoothie3.streamTo(document.getElementById("myGraph3"));
		smoothie3.addTimeSeries(plot3, { strokeStyle:'rgb(255, 0, 0)', lineWidth:2 });
		
		setInterval(function() {
					plot3.append(new Date().getTime(), data3 );
			}, 100);
	}
	
	function initSocketIO()
	{
		iosocket = io.connect();
		iosocket.on('onconnection', function(value) {
		initButton();
		initSlider();
				
		iosocket.on('updateData', function (recievedData) 
		{
			tempData = recievedData.pollOneValue  //receivedData
			
			if(tempData[tempData.length-1] == 'A')  //ADC Channel 1 Data
			{
				analogData1  = document.getElementById("Ch0");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData1.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'B')  
			{
				analogData2  = document.getElementById("Ch1");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData2.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'C')
			{
				analogData3  = document.getElementById("Ch2");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData3.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'D')
			{
				analogData4  = document.getElementById("Ch3");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData4.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'E')
			{
				var analogData5  = document.getElementById("Ch4");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData5.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'F')
			{
				analogData6  = document.getElementById("Ch5");
				tempData = tempData.substring(0, tempData.length - 1)
				analogData6.value = tempData;
			}
			
			if(tempData[tempData.length-1] == 'X')
			{
				accDataX  = document.getElementById("AccX");
				tempData = tempData.substring(0, tempData.length - 1)
				accDataX.value = tempData;
				
				window.data1 = Number(tempData);   //AccX graphData
			}
			
			if(tempData[tempData.length-1] == 'Y')
			{
				accDataY  = document.getElementById("AccY");
				tempData = tempData.substring(0, tempData.length - 1)
				accDataY.value = tempData;
				
				window.data2 = Number(tempData);  //AccY graphData
			}
			
			if(tempData[tempData.length-1] == 'Z')
			{
				accDataZ  = document.getElementById("AccZ");
				tempData = tempData.substring(0, tempData.length - 1)
				accDataZ.value = tempData;
				
				window.data3 = Number(tempData);  //AccZ graphData
			}
		});
	    });
	}
	  
	function initButton()
	{
	   $( "#check1" ).button();
	   $( "#check2" ).button();
	   $( "#check3" ).button();
	   $( "#check4" ).button();
	   $( "#check5" ).button();
	   $( "#check6" ).button();
	   $( "#check7" ).button();
	   $( "#check8" ).button();
	}
	
	function startCOM()
	{
		iosocket.emit('buttonval', 'S');
		document.getElementById("text1").value = "UART Reception started!";
	}
	
	function stopCOM()
	{
		iosocket.emit('buttonval', 's');
		document.getElementById("text1").value = "UART Reception stopped!";
	}
	
	function initSlider()
	{
	     $( "#slider" ).slider({
	     min:0,
	     max:9,
	     change: function(event,ui) {
		  iosocket.emit('sliderval', ui.value);
	        }
	     });
	}
	
	window.onload = function() {
	     initSocketIO();
	     initGraph1();
	     initGraph2();
	     initGraph3();
        };
      
        $(document).ready(function() {
          $('#check1').click(function() {
			toggleVal1 += 1;
			toggleVal1 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal1 == 1) { txData = 'A'; }
	        else { txData = 'a';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check2').click(function() {
			toggleVal2 += 1;
			toggleVal2 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal2 == 1) { txData = 'B'; }
	        else { txData = 'b';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check3').click(function() {
			toggleVal3 += 1;
			toggleVal3 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal3 == 1) { txData = 'C'; }
	        else { txData = 'c';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check4').click(function() {
			toggleVal4 += 1;
			toggleVal4 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal4 == 1) { txData = 'D'; }
	        else { txData = 'd';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check5').click(function() {
			toggleVal5 += 1;
			toggleVal5 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal5 == 1) { txData = 'E'; }
	        else { txData = 'e';}
			iosocket.emit('buttonval',txData);
		  });
		 
		  $('#check6').click(function() {
			toggleVal6 += 1;
			toggleVal6 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal6 == 1) { txData = 'F'; }
	        else { txData = 'f';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check7').click(function() {
			toggleVal7 += 1;
			toggleVal7 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal7 == 1) { txData = 'G'; }
	        else { txData = 'g';}
			iosocket.emit('buttonval',txData);
		  });
		  
		  $('#check8').click(function() {
			toggleVal8 += 1;
			toggleVal8 %= 2;   //Either '0' or '1'
	        
	        if(toggleVal8 == 1) { txData = 'H'; }
	        else { txData = 'h';}
			iosocket.emit('buttonval',txData);
		  });
	});

    </script>
  </head>

  <body>
   <div id="rtxData">
	<h2>Data from MSP430</h2>
    	<p style="color:blue">ADC Data:</p>
	<div id="AnalogData1" style="width: 50%; float:left">
	    <p style="display:inline">Channel 1:</p> &nbsp &nbsp <input type="text" id = "Ch0" style="width:80px"/> <br><br>
	    <p style="display:inline">Channel 2:</p> &nbsp &nbsp <input type="text" id = "Ch1" style="width:80px"/> <br><br>
	    <p style="display:inline">Channel 3:</p> &nbsp &nbsp <input type="text" id = "Ch2" style="width:80px"/> <br><br>
	</div>
	<div id="AnalogData2" style="width: 50%; float:left">
	    <p style="display:inline">Channel 4:</p> &nbsp &nbsp <input type="text" id = "Ch3" style="width:80px"/> <br><br>
	    <p style="display:inline">Channel 5:</p> &nbsp &nbsp <input type="text" id = "Ch4" style="width:80px"/> <br><br>
	    <p style="display:inline">Channel 6:</p> &nbsp &nbsp <input type="text" id = "Ch5" style="width:80px"/> <br><br>
	    <hr style="height:0pt; visibility:hidden; margin-bottom:6px;" />
	</div>
	<div id="AccData">
	    <p style="color:blue">Accelerometer Data:</p>
	    <p style="display:inline">X:</p> &nbsp &nbsp <input type="text" id = "AccX" style="width:80px"/> &nbsp &nbsp
	    <p style="display:inline">Y:</p> &nbsp &nbsp <input type="text" id = "AccY" style="width:80px"/> &nbsp &nbsp
	    <p style="display:inline">Z:</p> &nbsp &nbsp <input type="text" id = "AccZ" style="width:80px"/> &nbsp &nbsp
	    <br><br><br>
	</div>
	<div id="txData">
	    <h2>Data to MSP430</h2>
	    <p style="color:blue">Toggle LEDs:</p>
	    <div id = "btnHolder">
	    <input type = "checkbox" id = "check1" value = "toggle"/><label for = "check1">1</label>
	    <input type = "checkbox" id = "check2" value = "toggle"/><label for = "check2">2</label>
	    <input type = "checkbox" id = "check3" value = "toggle"/><label for = "check3">3</label>
	    <input type = "checkbox" id = "check4" value = "toggle"/><label for = "check4">4</label>
	    <input type = "checkbox" id = "check5" value = "toggle"/><label for = "check5">5</label>
	    <input type = "checkbox" id = "check6" value = "toggle"/><label for = "check6">6</label>
	    <input type = "checkbox" id = "check7" value = "toggle"/><label for = "check7">7</label>
	    <input type = "checkbox" id = "check8" value = "toggle"/><label for = "check8">8</label>
	    </div>
	    <p id="sliderTxt">Send Data</p>
	    <div id="slider"></div> 
	</div>
  </div> 
 
  <div id="gPanel">
       
        <h2>Accelerometer Plot:</h2>

	<div align="center">
		<p>X Axis:</p>
		<canvas id="myGraph1" width="400" height="100"></canvas>
	</div>
	
	<div align="center">
		<p>Y Axis:</p>
		<canvas id="myGraph2" width="400" height="100"></canvas>
	</div>
	
	<div align="center">
		<p>Z Axis:</p>
		<canvas id="myGraph3" width="400" height="100"></canvas>
		<br>
	</div>
	<br>
	
	<div align="center">
		<input type="button" id="start" value="Start" style="width:70px" onclick="startCOM()"/>
		<input type="button" id="stop" value="Stop" style="width:70px" onclick="stopCOM()"/>
		<input type="text"  id="text1" style="width:250px" value="Click Start button!"/>
	</div>
  </div>

</body>
</html>