code about PendoTech pen support

胡斌
Commit cf586ce7282e5f9e116218fb5eba7d473698f0d9 cf586ce7 1 parent f7ee7b32
demo.html
--- a/demo.html
查看文件 @cf586ce
+++ b/demo.html
查看文件 @cf586ce
@@ -97,10 +97,10 @@
 		#content{
 			position: absolute;
-			top: 80px;
+			top: 90px;
 			left: 0px;
 			right: 0px;
-			bottom: 46px;
+			bottom: 0px;
 			overflow:hidden;
 			background-color:#ddd;
 		}
@@ -341,8 +341,8 @@
 		var ctx, color = "#000";	
-		var voffset = 80;
-		var footerheight = 50;
+		var voffset = 90;
+		var footerheight = 0;//50;
 		var canvas_width,canvas_height;
 		var ext_input_panel_width,ext_input_panel_height;
 		var ratio_x,ratio_y;
@@ -360,7 +360,7 @@
 			// setup canvas
 			ctx = document.getElementById("canvas").getContext("2d");
 			ctx.strokeStyle = color;
-			ctx.lineWidth = 1;
+			ctx.lineWidth = 0.2;
 			ctx.translate(0.5, 0.5);
 			// setup to trigger drawing on mouse or touch
@@ -395,8 +395,8 @@
 			//x = canvas_width - px * ratio_x;
 			//y = canvas_height - py * ratio_y;
-			x = px * ratio_x;
-			y = py * ratio_y;
+			var x = px * ratio_x;
+			var y = py * ratio_y;
 			if(last_ext_press == 0 && press != 0){
 				onTouchDownEvent(x, y, press);
@@ -431,6 +431,7 @@
 			var P_LOW = 200;
 			var P_MIDDLE = 500;
 			var P_HIGN = 800;
+			//var kWIDTH_MIN = 1.0;
 			var kWIDTH_MIN = 1.0;
 			var kWIDTH_MAX = 3.0;
 			//current width
@@ -1107,27 +1108,6 @@
 			doCmd(obj.id);
 		}
-        var ext_input_connecting = false;
-
-		function onConnectClick(obj) {
-			var cur_pen_type = document.getElementById("pen_type").selectedIndex;
-			if(cur_pen_type == 0) {
-				ext_input_panel_width = 21000;
-				ext_input_panel_height = 29800;
-				ratio_x = (canvas_width + 0.0) / ext_input_panel_width;
-				ratio_y = (canvas_height + 0.0) / ext_input_panel_height;
-			}
-
-			if( !ext_input_connecting ) {
-				doCmd("open_ext_input");
-			}
-			else {
-				doCmd("close_ext_input");
-				ext_input_open = false;
-			}
-			ext_input_connecting = !ext_input_connecting;
-		} 
-
 		function rotateExtInput() {
 			doCmd("rotate_ext_input");
 		}
@@ -1361,11 +1341,30 @@
 				cmd.type = 54;
 			}
 			else if(cmdName == "open_ext_input") {
+			   cur_pen_type = document.getElementById("pen_type").selectedIndex;
+			   if(cur_pen_type == 0) {
+				  ext_input_panel_width = 21000;
+				  ext_input_panel_height = 29800;
+				  var w = ext_input_panel_width * 1.0;
+				  var h = ext_input_panel_height * 1.0;
+				  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;
+				  P_LOW = 300;
+                  P_MIDDLE = 1000;
+                  P_HIGN = 1800;
+			   }
+			   else {
+				   P_LOW = 200;
+			       P_MIDDLE = 500;
+			       P_HIGN = 800;
+			    }
+
 			    cmd.type = 57;
 				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
-				if(pen_type == 0) {
+				if(cur_pen_type == 0) {
 					cmd.data[0] = 10;
 				}
 				else {
@@ -1378,7 +1377,7 @@
 				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
-				if(pen_type == 0) {
+				if(cur_pen_type == 0) {
 					cmd.data[0] = 11;
 				}
 				else {
@@ -1978,30 +1977,27 @@
 					<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 class="palette-box">
+					</div>
+					<div class="palette-box">
+						<div class="palette white" onclick="selectColor(this)"></div>
+					</div>
+					<div class="palette-box">
+						<div class="palette red" onclick="selectColor(this)"></div>
+					</div>
+					<div class="palette-box">
+						<div class="palette blue" onclick="selectColor(this)"></div>
+					</div>
+					<div class="palette-box">
+						<div class="palette green" onclick="selectColor(this)"></div>
+					</div>
+					<div class="palette-box">
+						<div class="palette black" onclick="selectColor(this)"></div>
+					</div>
 				</div>
 				<div id="content">
 					<p style="text-align:center">Loading Canvas...</p>
 				</div>
-				<div class="footer">
-					<div class="palette-case">
-						<div class="palette-box">
-							<div class="palette white" onclick="selectColor(this)"></div>
-						</div>
-						<div class="palette-box">
-							<div class="palette red" onclick="selectColor(this)"></div>
-						</div>
-						<div class="palette-box">
-							<div class="palette blue" onclick="selectColor(this)"></div>
-						</div>
-						<div class="palette-box">
-							<div class="palette green" onclick="selectColor(this)"></div>
-						</div>
-						<div class="palette-box">
-							<div class="palette black" onclick="selectColor(this)"></div>
-						</div>
-						<div style="clear:both"></div>
-					</div>
-				</div>
 			</div>
 		</div>
 		<div>