add slider to select pen width,improve rotate

@@ -25,7 +25,9 @@
 	<title>LiveAssistant Demo</title>
 	<title>LiveAssistant Demo</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<link rel="stylesheet" href="./jqx/styles/jqx.base.css" type="text/css" />
 	<link rel="stylesheet" href="./jqx/styles/jqx.base.css" type="text/css" />
+	<link rel="stylesheet" href="./jqx/styles/jquery-ui.css"/>
 	<script type="text/javascript" src="./jqx/jquery-1.11.1.min.js"></script>
 	<script type="text/javascript" src="./jqx/jquery-1.11.1.min.js"></script>
+	<script type="text/javascript" src="./jqx/jquery-ui.min.js"></script>
 	<script type="text/javascript" src="./jqx/jqxcore.js"></script>
 	<script type="text/javascript" src="./jqx/jqxcore.js"></script>
 	<script type="text/javascript" src="./jqx/jqxtabs.js"></script>
 	<script type="text/javascript" src="./jqx/jqxtabs.js"></script>
 	<style type="text/css">
 	<style type="text/css">
@@ -419,6 +421,22 @@
 			var rotate_degree = 0;
 			var rotate_degree = 0;
 			var pressure_level = 2048.0;
 			var pressure_level = 2048.0;
 
 
+	$( function() {
+    $( "#line_width_slider" ).slider({
+      range: true,
+      min: 1,
+      max: 50,
+      values: [ 2, 32 ],
+      slide: function( event, ui ) {
+        $( "#line_width" ).val(  ui.values[ 0 ] /10.0+ " - " + ui.values[ 1 ] /10.0);
+		kWIDTH_MIN =  ui.values[ 0 ] /10.0;
+		kWIDTH_MAX =  ui.values[ 1 ] /10.0;
+      }
+    });
+    $( "#line_width" ).val( $( "#line_width_slider" ).slider( "values", 0 )/10.0 +
+      " - " + $( "#line_width_slider" ).slider( "values", 1 )/10.0 );
+  } );
+
 
 
 			function setStrokeWidth(strokeWidth) {
 			function setStrokeWidth(strokeWidth) {
 				strokeWidth = strokeWidth;
 				strokeWidth = strokeWidth;
@@ -485,7 +503,7 @@
 			function onTouchDownEvent(x, y, p) {
 			function onTouchDownEvent(x, y, p) {
 				previousPoint = null;
 				previousPoint = null;
 				currentPoint = null;
 				currentPoint = null;
-				currentPoint = new Point(x, y, p);
+				currentPoint = new Point(x, y, 0);
 				previousPoint = currentPoint;
 				previousPoint = currentPoint;
 			}
 			}
 
 
@@ -569,6 +587,7 @@
 			var start = function (e) {
 			var start = function (e) {
 				clicked = 1;
 				clicked = 1;
 				ctx.beginPath();
 				ctx.beginPath();
+				ctx.lineWidth = kWIDTH_MIN;
 				x = e.pageX;
 				x = e.pageX;
 				y = e.pageY - voffset;
 				y = e.pageY - voffset;
 				ctx.moveTo(x, y);
 				ctx.moveTo(x, y);
@@ -1339,19 +1358,19 @@
 					  rotate_degree = 0;
 					  rotate_degree = 0;
 				  }
 				  }
 				 
 				 
-				 if (rotate_degree == 0 || rotate_gree == 180) {
-						var w = ext_input_panel_height * 1.0;
-						var h = ext_input_panel_width  * 1.0;
+				 if (rotate_degree == 0 || rotate_degree == 180) {
+						var w = ext_input_panel_width * 1.0;
+						var h = ext_input_panel_height  * 1.0;
 						var canvasw = w / h * canvas_height;
 						var canvasw = w / h * canvas_height;
 						ratio_x = (canvasw + 0.0) / w;
 						ratio_x = (canvasw + 0.0) / w;
 						ratio_y = (canvas_height + 0.0) / h;
 						ratio_y = (canvas_height + 0.0) / h;
 				}
 				}
 				else {
 				else {
-					    var w = ext_input_panel_width * 1.0;
-						var h = ext_input_panel_height * 1.0;
+					    var w = ext_input_panel_height * 1.0;
+						var h = ext_input_panel_width * 1.0;
 						var canvasw = w / h * canvas_height;
 						var canvasw = w / h * canvas_height;
-						ratio_x = (canvasw + 0.0) / ext_input_panel_width;
-						ratio_y = (canvas_height + 0.0) / ext_input_panel_height;
+						ratio_x = (canvasw + 0.0) / w;
+						ratio_y = (canvas_height + 0.0) / h;
 				}
 				}
 
 
 				  return;
 				  return;
@@ -1942,10 +1961,9 @@
 		</td><td ><div style="height:600px; overflow:scroll;"><div id="output" /></div></td> </tr>
 		</td><td ><div style="height:600px; overflow:scroll;"><div id="output" /></div></td> </tr>
 	</table>
 	</table>
 		</div>
 		</div>
-		<div>
 			<div id="page">
 			<div id="page">
 				<div class="header">
 				<div class="header">
-					<select id="pen_type" name="pen_type"><option value ="PendoTech">PendoTech PH-1820-A</option><option value ="robot">Nebula T7</option></select>
+					
 					<a id="new" class="navbtn" onclick="newCanvas()">New</a>
 					<a id="new" class="navbtn" onclick="newCanvas()">New</a>
 					<a id="open_ext_input"  class="navbtn" onclick="onTestClick(this)">open_ext_input</a>
 					<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="close_ext_input"  class="navbtn" onclick="onTestClick(this)">close_ext_input</a>
@@ -1967,12 +1985,30 @@
 					<div class="palette-box">
 					<div class="palette-box">
 						<div class="palette black" onclick="selectColor(this)"></div>
 						<div class="palette black" onclick="selectColor(this)"></div>
 					</div>
 					</div>
-				</div>
+			
+  
+					<table width = "500" align="top">
+						<tr>
+							<td><label for="line_width" style="color:#a3bd97;">line width:</label></td>
+							<td>
+							<table width = "100">
+							<tr>
+								<td id="line_width_slider"></td>
+							</tr>
+							</table>
+						  </td>
+						  
+						<td><input type="text" id="line_width" size="10" readonly style="border:0; color:#f6931f; font-weight:bold;"/></td>>
+	
+						  <td colspan="2"><select id="pen_type" name="pen_type"><option value ="PendoTech">PendoTech PH-1820-A</option><option value ="robot">Nebula T7</option></select></td>
+						</tr>
+					</table>
+    			</div>
+			
 				<div id="content">
 				<div id="content">
 					<p style="text-align:center">Loading Canvas...</p>
 					<p style="text-align:center">Loading Canvas...</p>
 				</div>
 				</div>
-			</div>
-		</div>
+    	</div>
 		<div>
 		<div>
 			<table>
 			<table>
 					<tr>
 					<tr>