add some code about PendoTech pen

胡斌
Commit f7ee7b324947c6e10d6b95639c7935006b1a7b48 f7ee7b32 1 parent 76056977
demo.html
--- a/demo.html
查看文件 @f7ee7b3
+++ b/demo.html
查看文件 @f7ee7b3
@@ -347,6 +347,7 @@
 		var ext_input_panel_width,ext_input_panel_height;
 		var ratio_x,ratio_y;
 		var ext_input_open = false;
+		var cur_pen_type = 0;
 		// function to setup a new canvas for drawing
 		function newCanvas() {
 			//define and resize canvas
@@ -368,7 +369,8 @@
 			drawMouse();
 		}
-        var last_ext_press = 0;
+		var last_ext_press = 0;
+		/*
 		function draw_ext_input(px,py,press) {
 			//x = canvas_width - px * ratio_x;
 			//y = canvas_height - py * ratio_y;
@@ -387,9 +389,193 @@
 				ctx.stroke();
 			}
 			last_ext_press = press;
+		}*/
+		function draw_ext_input(px,py,press) {
+			//x = canvas_width - px * ratio_x;
+			//y = canvas_height - py * ratio_y;
+
+			x = px * ratio_x;
+			y = py * ratio_y;
+
+			if(last_ext_press == 0 && press != 0){
+				onTouchDownEvent(x, y, press);
+			}
+			else if(press != 0) {
+				onTouchMoveEvent(x, y, press);
+			}
+			else if(last_ext_press !=0) {
+				onTouchUpEvent(x, y, press);
+			}
+			last_ext_press = press;
 		}
+		function Point(x , y, time) {
+			this.x = x;
+			this.y = y;
+			this.time = time;
+       }
+
+
+	   var previousPoint, startPoint, currentPoint;
+       var MIN_PEN_SIZE = 1.0;
+       var MIN_INCREMENT = 0.01;
+       var INCREMENT_CONSTANT = 0.0005;
+       var DRAWING_CONSTANT = 0.0085;
+       var MAX_VELOCITY_BOUND = 15;
+       var MIN_VELOCITY_BOUND = 1.6;
+       var STROKE_DES_VELOCITY = 1.0;
+       var VELOCITY_FILTER_WEIGHT = 0.2;
+       var lastVelocity, lastWidth;
+			//------begin
+			var P_LOW = 200;
+			var P_MIDDLE = 500;
+			var P_HIGN = 800;
+			var kWIDTH_MIN = 1.0;
+			var kWIDTH_MAX = 3.0;
+			//current width
+			var strokeWidth = 3.0;
+
+
+			function setStrokeWidth(strokeWidth) {
+				strokeWidth = strokeWidth;
+				kWIDTH_MAX = strokeWidth;
+				kWIDTH_MIN = strokeWidth / 3;
+			}
+
+			function changeWidth(P) {
+
+				if (P > P_LOW && P < P_MIDDLE) {
+					strokeWidth -= 0.01;
+
+					if (strokeWidth < kWIDTH_MIN) {
+						strokeWidth = kWIDTH_MIN;
+					}
+
+				} else if (P >= P_MIDDLE && P < P_HIGN) {
+					strokeWidth += 0.005;
+					if (strokeWidth > kWIDTH_MAX) {
+						strokeWidth = kWIDTH_MAX;
+					}
+
+
+				} else if (P >= P_HIGN) {
+					strokeWidth += 0.01;
+
+					if (strokeWidth > kWIDTH_MAX) {
+						strokeWidth = kWIDTH_MAX;
+					}
+
+
+				} else {
+					strokeWidth -= 0.003;
+
+					if (strokeWidth < kWIDTH_MIN) {
+						strokeWidth = kWIDTH_MIN;
+					}
+
+				}
+
+			}
+
+			function velocityFrom(a,b) {
+				var dx = a.x - b.x;
+				var dy = a.y - b.y;
+				var dist = Math.sqrt(a*a + b*b);
+				var v = dist / (a.time - b.time)
+				return v;
+			}
+
+			function onTouchDownEvent(x, y, p) {
+				previousPoint = null;
+				startPoint = null;
+				currentPoint = null;
+				lastVelocity = 0;
+				//lastWidth = penSize;
+                var d = new Date();
+				currentPoint = new Point(x, y, d.getTime());
+				previousPoint = currentPoint;
+				startPoint = previousPoint;
+			}
+
+			function onTouchMoveEvent(x, y, p) {
+
+
+				if (previousPoint == null) {
+					return;
+				}
+				startPoint = previousPoint;
+				previousPoint = currentPoint;
+				var d = new Date();
+				currentPoint = new Point(x, y,  d.getTime());
+
+				var velocity = velocityFrom(currentPoint , previousPoint);
+				drawLine(strokeWidth, velocity, p);
+				lastVelocity = velocity;
+
+			}
+
+			function onTouchUpEvent(x, y, p) {
+				if (previousPoint == null) {
+					return;
+				}
+				startPoint = previousPoint;
+				previousPoint = currentPoint;
+				var d = new Date();
+				currentPoint = new Point(x, y, d.getTime());
+
+				drawLine(0, lastVelocity, p);
+
+			}
+
+			function getStrokeWidth(velocity) {
+				return penSize - (velocity * STROKE_DES_VELOCITY);
+			}
+
+
+			function drawLine(currentWidth, velocity, Presure) {
+				var mid1 = midPoint(previousPoint, startPoint);
+				var mid2 = midPoint(currentPoint, previousPoint);
+
+				draw(mid1, previousPoint, mid2,
+					currentWidth, velocity, Presure);
+			}
+
+			function getPt(n1, n2, perc) {
+				var diff = n2 - n1;
+				return n1 + (diff * perc);
+			}
+
+				function draw(p0, p1, p2, currentWidth, velocity, p) {
+					var xa, xb, ya, yb, x, y;
+					var increment;
+					if (velocity > MIN_VELOCITY_BOUND && velocity < MAX_VELOCITY_BOUND) {
+						increment = DRAWING_CONSTANT - (velocity * INCREMENT_CONSTANT);
+					} else {
+						increment = MIN_INCREMENT;
+					}
+
+					for (var i = 0.0; i < 1.0; i += increment) {
+						xa = getPt(p0.x, p1.x, i);
+						ya = getPt(p0.y, p1.y, i);
+						xb = getPt(p1.x, p2.x, i);
+						yb = getPt(p1.y, p2.y, i);
+
+						x = getPt(xa, xb, i);
+						y = getPt(ya, yb, i);
+						changeWidth(p);
+						ctx.lineWidth = strokeWidth;
+						ctx.beginPath(); //Start path
+						ctx.arc(x, y, strokeWidth, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
+						ctx.fill();
+					}
+				}
+
+			function midPoint(p1, p2) {
+				return new Point((p1.x + p2.x) / 2.0, (p1.y + p2.y) / 2, (p1.time + p2.time) / 2);
+			}
+		//------end
+
 		function selectColor(el) {
 			for (var i = 0; i < document.getElementsByClassName("palette").length; i++) {
 				document.getElementsByClassName("palette")[i].style.borderColor = "#777";
@@ -782,7 +968,7 @@
 								writeToScreen('<span style="color: green;">panel resolution: ' + ext_input_panel_width + ',' + ext_input_panel_height + '</span>');
 								ext_input_open = true;
 							}
-							else if(2 == type ){
+							else if(2 == type || 14 == type){
 								var nPress = dv.getUint16(9, true);
 								var x = dv.getUint16(11, true);
 								var y = dv.getUint16(13, true);
@@ -922,7 +1108,16 @@
 		}
         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");
 			}
@@ -1170,7 +1365,12 @@
 				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
-				cmd.data[0] = 0;
+				if(pen_type == 0) {
+					cmd.data[0] = 10;
+				}
+				else {
+				    cmd.data[0] = 0;
+				}
 		    }
 			else if(cmdName == "close_ext_input") {
@@ -1178,7 +1378,12 @@
 				cmd.data_len = 1;
 				var buffer = new ArrayBuffer(cmd.data_len);
 				cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
-				cmd.data[0] = 1;
+				if(pen_type == 0) {
+					cmd.data[0] = 11;
+				}
+				else {
+				    cmd.data[0] = 1;
+				}
 			}
 			else if(cmdName == "rotate_ext_input") {
 				cmd.type = 57;
@@ -1505,7 +1710,7 @@
 	<div id='jqxTabs' width="100%">
 		<ul style='margin-left: 20px;'>
 			<li>live streaming</li>
-			<li>robot pen input</li>
+			<li>Pen input</li>
 			<li>Agora Screen Share</li>
 		</ul>
@@ -1768,6 +1973,7 @@
 		<div>
 			<div id="page">
 				<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="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>
@@ -1798,7 +2004,6 @@
 				</div>
 			</div>
 		</div>
-		
 		<div>
 			<table>
 					<tr>