胡斌 / liveAssistant_web_demo

转到一个项目
Toggle navigation Toggle navigation pinning
胡斌
dbb2ef74 1 parent 8a8b655d

simple draw using ext_input

内嵌 并排对比
正在显示 1 个修改的文件 包含 146 行增加 和 107 行删除
... ... @@ -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>
... ...