improve robot pen canvas layout

set default ws port to 605
modify the extinput command data

@@ -52,10 +52,10 @@
 			text-align: center;
 		}
 		.header {
-			top: 60px;
+			top: 40px;
 			left: 0px;
 			right: 0px;
-			height: 32px;
+			height: 28px;
 			padding:6px;
 		}
 		.footer {
@@ -97,7 +97,7 @@
 		
 		#content{
 			position: absolute;
-			top: 100px;
+			top: 80px;
 			left: 0px;
 			right: 0px;
 			bottom: 46px;
@@ -341,7 +341,8 @@
 
 		
 		var ctx, color = "#000";	
-		var voffset = 100;
+		var voffset = 80;
+		var footerheight = 50;
 		var canvas_width,canvas_height;
 		var ext_input_panel_width,ext_input_panel_height;
 		var ratio_x,ratio_y;
@@ -350,7 +351,7 @@
 		function newCanvas() {
 			//define and resize canvas
 			canvas_width =  window.innerWidth;
-			canvas_height = window.innerHeight - 90;
+			canvas_height = window.innerHeight - voffset - footerheight ;
 			document.getElementById("content").style.height = canvas_height;
 			var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + canvas_height + '"></canvas>';
 			document.getElementById("content").innerHTML = canvas;
@@ -760,8 +761,8 @@
 								ext_input_panel_height = dv.getUint16(11, true);
 								ratio_x = (canvas_width + 0.0) / ext_input_panel_width;
 								ratio_y = (canvas_height + 0.0) / ext_input_panel_height;
-                    		    ext_input_open = true;
-								writeToScreen('<span style="color: green;">panel resolution: ' + width + ',' + height + '</span>');
+								writeToScreen('<span style="color: green;">panel resolution: ' + ext_input_panel_width + ',' + ext_input_panel_height + '</span>');
+								ext_input_open = true;
 							}
 							else if(2 == type ){
 								var nPress = dv.getUint16(9, true);
@@ -771,7 +772,8 @@
 							//	writeToScreen('<span style="color: green;">pen position: ' + x + ',' + y + ',' + nPress + '</span>');
 							}
 							else if( 3 == type ) {
-								ext_input_open = false;
+								var status = dv.getUint8(9, true);
+								writeToScreen('<span style="color: green;">ext_input_status: ' + status + '</span>');
 							}
 						}
 						else {
@@ -829,6 +831,7 @@
 			}
 			else {
 				doCmd("close_ext_input");
+				ext_input_open = false;
 			}
 			ext_input_connecting = !ext_input_connecting;
 		} 
@@ -855,7 +858,7 @@
 				var pos = document.getElementById("mov_pos").value;
 				if (pos.length > 0) {
 					cmd.data_len = 4;
-					var buffer = new ArrayBuffer(cmd.data_len);
+					var buffer = new ArrayBuffer(cmd.data_len);4
 					var Uint32param = new Uint32Array(buffer, 0, 1);
 					Uint32param[0] = parseInt(pos);
 					cmd.data = new Uint8Array(buffer, 0, 4);
@@ -1067,27 +1070,25 @@
 			}
 			else if(cmdName == "open_ext_input") {
 			    cmd.type = 57;
-				cmd.data_len = 4;
+				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
-				var Uint32param = new Uint32Array(buffer, 0, 1);
-				Uint32param[0] = 0;
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
+				cmd.data[0] = 0;
+				
 		    }
 			else if(cmdName == "close_ext_input") {
 				cmd.type = 57;
-				cmd.data_len = 4;
+				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
-				var Uint32param = new Uint32Array(buffer, 0, 1);
-				Uint32param[0] = 1;
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
+				cmd.data[0] = 1;
 			}
 			else if(cmdName == "rotate_ext_input") {
 				cmd.type = 57;
-				cmd.data_len = 4;
+				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
-				var Uint32param = new Uint32Array(buffer, 0, 1);
-				Uint32param[0] = 2;
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
+				cmd.data[0] = 2;
 			}
 
 			doSendWSCmd(cmd);
@@ -1163,7 +1164,7 @@
 		window.onload = function () {
 			output = document.getElementById("output");
 
-			document.getElementById('websocketURL').value = "ws://127.0.0.1:8090";
+			document.getElementById('websocketURL').value = "ws://127.0.0.1:605";
 
 			document.getElementById('inputURL').value = queryParameters['source'];
 
@@ -1565,8 +1566,6 @@
 														<td width="27%" align="left"><a id="disconnectBtn" onclick="javascript:disconnectLiveServ();"><img src="images/disconnect.gif" width="104" height="25" />  
 					  <td><img src="images/spacer.gif" width="50" height="10" /></td>
 					  <td width="27%" align="left"><a id="clearBtn" onclick="javascript:clearOutput();"><img src="images/clear.gif" width="104" height="25" /></a></td>
-					  <td colspan="2" align="center"><button type="button" id="open_ext_input" onclick="onTestClick(this)">open_ext_input</button></td>
-					  <td colspan="2" align="center"><button type="button" id="close_ext_input" onclick="onTestClick(this)">close_ext_input</button></td>
 													</tr>
 												</table>
 											</td>
@@ -1586,8 +1585,9 @@
 			<div id="page">
 				<div class="header">
 					<a id="new" class="navbtn" onclick="newCanvas()">New</a>
-					<a id="rotate_ext_input" class="navbtn" onclick="rotateExtInput()">Rotate</a>
-					<div class="title">Sketch Pad</div>
+					<a id="open_ext_input"  class="navbtn" onclick="onTestClick(this)">open_ext_input</a>
+					<a id="close_ext_input"  class="navbtn" onclick="onTestClick(this)">close_ext_input</a>
+					<a id="rotate_ext_input" class="navbtn" onclick="rotateExtInput()">Rotate 90</a>
 				</div>
 				<div id="content">
 					<p style="text-align:center">Loading Canvas...</p>