simple draw using ext_input

胡斌
Commit dbb2ef74306fece1a9760fca0240d029b76b1cd9 dbb2ef74 1 parent 8a8b655d
demo.html
--- a/demo.html
查看文件 @dbb2ef7
+++ b/demo.html
查看文件 @dbb2ef7
@@ -339,6 +339,133 @@
 			wsState = "idle";
 		}
+		
+		var ctx, color = "#000";	
+		var voffset = 100;
+		var canvas_width,canvas_height;
+		var ext_input_panel_width,ext_input_panel_height;
+		var ratio_x,ratio_y;
+		var ext_input_open = false;
+		// function to setup a new canvas for drawing
+		function newCanvas() {
+			//define and resize canvas
+			canvas_width =  window.innerWidth;
+			canvas_height = window.innerHeight - 90;
+			document.getElementById("content").style.height = canvas_height;
+			var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + canvas_height + '"></canvas>';
+			document.getElementById("content").innerHTML = canvas;
+
+			// setup canvas
+			ctx = document.getElementById("canvas").getContext("2d");
+			ctx.strokeStyle = color;
+			ctx.lineWidth = 1;
+			ctx.translate(0.5, 0.5);
+
+			// setup to trigger drawing on mouse or touch
+			drawTouch();
+			drawPointer();
+			drawMouse();
+		}
+
+        var last_ext_press = 0;
+		function draw_ext_input(px,py,press) {
+			x = px * ratio_x;
+			y = py * ratio_y;
+
+			//y = canvas_height - py * ratio_y;
+
+			if(last_ext_press == 0 && press == 1){
+				ctx.beginPath();
+
+				ctx.moveTo(x, y);
+				last_ext_press = 1;
+			}
+			else if(press == 1) {
+				ctx.lineTo(x, y);
+				ctx.stroke();
+			}
+			last_ext_press = press;
+
+		}
+
+		function selectColor(el) {
+			for (var i = 0; i < document.getElementsByClassName("palette").length; i++) {
+				document.getElementsByClassName("palette")[i].style.borderColor = "#777";
+				document.getElementsByClassName("palette")[i].style.borderStyle = "solid";
+			}
+			el.style.borderColor = "#fff";
+			el.style.borderStyle = "dashed";
+			color = window.getComputedStyle(el).backgroundColor;
+			ctx.beginPath();
+			ctx.strokeStyle = color;
+		}
+
+		// prototype to	start drawing on touch using canvas moveTo and lineTo
+		var drawTouch = function () {
+			var start = function (e) {
+				ctx.beginPath();
+				x = e.changedTouches[0].pageX;
+				y = e.changedTouches[0].pageY - voffset;
+				ctx.moveTo(x, y);
+			};
+			var move = function (e) {
+				e.preventDefault();
+				x = e.changedTouches[0].pageX;
+				y = e.changedTouches[0].pageY -voffset;
+				ctx.lineTo(x, y);
+				ctx.stroke();
+			};
+			document.getElementById("canvas").addEventListener("touchstart", start, false);
+			document.getElementById("canvas").addEventListener("touchmove", move, false);
+		};
+
+		// prototype to	start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
+		var drawPointer = function () {
+			var start = function (e) {
+				e = e.originalEvent;
+				ctx.beginPath();
+				x = e.pageX;
+				y = e.pageY - voffset;
+				ctx.moveTo(x, y);
+			};
+			var move = function (e) {
+				e.preventDefault();
+				e = e.originalEvent;
+				x = e.pageX;
+				y = e.pageY - voffset;
+				ctx.lineTo(x, y);
+				ctx.stroke();
+			};
+			document.getElementById("canvas").addEventListener("MSPointerDown", start, false);
+			document.getElementById("canvas").addEventListener("MSPointerMove", move, false);
+		};
+
+		// prototype to	start drawing on mouse using canvas moveTo and lineTo
+		var drawMouse = function () {
+			var clicked = 0;
+			var start = function (e) {
+				clicked = 1;
+				ctx.beginPath();
+				x = e.pageX;
+				y = e.pageY - voffset;
+				ctx.moveTo(x, y);
+			};
+			var move = function (e) {
+				if (clicked) {
+					x = e.pageX;
+					y = e.pageY - voffset;
+					ctx.lineTo(x, y);
+					ctx.stroke();
+				}
+			};
+			var stop = function (e) {
+				clicked = 0;
+			};
+			document.getElementById("canvas").addEventListener("mousedown", start, false);
+			document.getElementById("canvas").addEventListener("mousemove", move, false);
+			document.addEventListener("mouseup", stop, false);
+		};
+
 		function playRTMPStream(url) {
 			document.getElementById('inputURL').value = url;
 			queryParameters['source'] = url;
@@ -479,22 +606,23 @@
 		function onMessage(evt) {
 			if (typeof (evt.data) == "string") {
-				writeToScreen('<span style="color: green;">receive string</span>');
+			//	writeToScreen('<span style="color: green;">receive string</span>');
 			}
 			else {
-				writeToScreen('<span style="color: green;">receive binary</span>');
+			//	writeToScreen('<span style="color: green;">receive binary</span>');
 				var reader = new FileReader();
 				reader.onload = function (evt) {
 					if (evt.target.readyState == FileReader.DONE) {
 						var dv = new DataView(evt.target.result);
-						writeToScreen('<span style="color: green;">receive string ' + dv.byteLength + '</span>');
 						var result = dv.getUint16(0, true);
 						var byte_order = dv.getUint8(2, true);
 						var data_len = dv.getUint32(4, true);
-						if (result >= 0 && result < wsResult.length) {
+						if (result >= 0 && result < wsResult.length ) {
 							var resultString = wsResult[result];
-							writeToScreen('<span style="color: green;">result: ' + resultString + ' </span>');
+							if(!ext_input_open) {
+						       writeToScreen('<span style="color: green;">result: ' + resultString + ' </span>');
+							}
 						}
 						else {
 							writeToScreen('<span style="color: green;">result:  unknown result  </span>');
@@ -627,15 +755,22 @@
 						else if (119 == result) {
 							var type = dv.getUint8(8, true);
 							if( 1  == type ){
-								var width = dv.getUint16(9, true);
-								var height = dv.getUint16(11, true);
+								ext_input_panel_width = dv.getUint16(9, true);
+								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>');
 							}
 							else if(2 == type ){
 								var nPress = dv.getUint16(9, true);
 								var x = dv.getUint16(11, true);
 								var y = dv.getUint16(13, true);
-								writeToScreen('<span style="color: green;">panel resolution: ' + x + ',' + y + ',' + nPress + '</span>');
+								draw_ext_input(x,y,nPress);
+							//	writeToScreen('<span style="color: green;">pen position: ' + x + ',' + y + ',' + nPress + '</span>');
+							}
+							else if( 3 == type ) {
+								ext_input_open = false;
 							}
 						}
 						else {
@@ -1167,104 +1302,6 @@
 			newCanvas();
 		});
-		var ctx, color = "#000";	
-		var voffset = 100;
-		// function to setup a new canvas for drawing
-		function newCanvas() {
-			//define and resize canvas
-			document.getElementById("content").style.height = window.innerHeight - 90;
-			var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + (window.innerHeight - 90) + '"></canvas>';
-			document.getElementById("content").innerHTML = canvas;
-
-			// setup canvas
-			ctx = document.getElementById("canvas").getContext("2d");
-			ctx.strokeStyle = color;
-			ctx.lineWidth = 1;
-			ctx.translate(0.5, 0.5);
-
-			// setup to trigger drawing on mouse or touch
-			drawTouch();
-			drawPointer();
-			drawMouse();
-		}
-
-		function selectColor(el) {
-			for (var i = 0; i < document.getElementsByClassName("palette").length; i++) {
-				document.getElementsByClassName("palette")[i].style.borderColor = "#777";
-				document.getElementsByClassName("palette")[i].style.borderStyle = "solid";
-			}
-			el.style.borderColor = "#fff";
-			el.style.borderStyle = "dashed";
-			color = window.getComputedStyle(el).backgroundColor;
-			ctx.beginPath();
-			ctx.strokeStyle = color;
-		}
-
-		// prototype to	start drawing on touch using canvas moveTo and lineTo
-		var drawTouch = function () {
-			var start = function (e) {
-				ctx.beginPath();
-				x = e.changedTouches[0].pageX;
-				y = e.changedTouches[0].pageY - voffset;
-				ctx.moveTo(x, y);
-			};
-			var move = function (e) {
-				e.preventDefault();
-				x = e.changedTouches[0].pageX;
-				y = e.changedTouches[0].pageY -voffset;
-				ctx.lineTo(x, y);
-				ctx.stroke();
-			};
-			document.getElementById("canvas").addEventListener("touchstart", start, false);
-			document.getElementById("canvas").addEventListener("touchmove", move, false);
-		};
-
-		// prototype to	start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
-		var drawPointer = function () {
-			var start = function (e) {
-				e = e.originalEvent;
-				ctx.beginPath();
-				x = e.pageX;
-				y = e.pageY - voffset;
-				ctx.moveTo(x, y);
-			};
-			var move = function (e) {
-				e.preventDefault();
-				e = e.originalEvent;
-				x = e.pageX;
-				y = e.pageY - voffset;
-				ctx.lineTo(x, y);
-				ctx.stroke();
-			};
-			document.getElementById("canvas").addEventListener("MSPointerDown", start, false);
-			document.getElementById("canvas").addEventListener("MSPointerMove", move, false);
-		};
-
-		// prototype to	start drawing on mouse using canvas moveTo and lineTo
-		var drawMouse = function () {
-			var clicked = 0;
-			var start = function (e) {
-				clicked = 1;
-				ctx.beginPath();
-				x = e.pageX;
-				y = e.pageY - voffset;
-				ctx.moveTo(x, y);
-			};
-			var move = function (e) {
-				if (clicked) {
-					x = e.pageX;
-					y = e.pageY - voffset;
-					ctx.lineTo(x, y);
-					ctx.stroke();
-				}
-			};
-			var stop = function (e) {
-				clicked = 0;
-			};
-			document.getElementById("canvas").addEventListener("mousedown", start, false);
-			document.getElementById("canvas").addEventListener("mousemove", move, false);
-			document.addEventListener("mouseup", stop, false);
-		};
 	</script>
 </head>
@@ -1514,7 +1551,9 @@
 														<td align="left">&nbsp;</td>
 														<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 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>