胡斌 / liveAssistant_web_demo

转到一个项目
Toggle navigation Toggle navigation pinning
胡斌
31a5693c 1 parent cac9d12c

add demo webpage for android webview

内嵌 并排对比
正在显示 1 个修改的文件 包含 795 行增加 和 0 行删除
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pen Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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-ui.min.js"></script>
<style type="text/css">
body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
font-family:Arial;
/* prevent text selection on ui */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* prevent scrolling in windows phone */
-ms-touch-action: none;
/* prevent selection highlight */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.header, .footer{
position: absolute;
background-color: #222;
text-align: center;
}
.header {
top: 0px;
left: 0px;
right: 0px;
height: 228px;
padding:6px;
}
.footer {
bottom: 0px;
left: 0px;
right: 0px;
height: 42px;
padding:2px;
}
.title {
width: auto;
line-height: 32px;
font-size: 20px;
font-weight: bold;
color: #eee;
text-shadow: 0px -1px #000;
padding:0 60px;
}
.navbtn {
cursor: pointer;
float:left;
padding: 6px 10px;
font-weight: bold;
line-height: 18px;
font-size: 14px;
color: #eee;
text-shadow: 0px -1px #000;
border: solid 1px #111;
border-radius: 4px;
background-color: #404040;
box-shadow: 0 0 1px 1px #555,inset 0 1px 0 0 #666;
}
.navbtn-hover, .navbtn:active {
color: #222;
text-shadow: 0px 1px #aaa;
background-color: #aaa;
box-shadow: 0 0 1px 1px #444,inset 0 1px 0 0 #ccc;
}
#content{
position: absolute;
top: 160px;
left: 0px;
right: 0px;
bottom: 0px;
overflow:hidden;
background-color:#ddd;
}
#canvas{
cursor:crosshair ;
background-color:#fff;
}
.palette-case {
width:260px;
margin:auto;
text-align:center;
}
.palette-box {
float:left;
padding:2px 6px 2px 6px;
}
.palette {
border:2px solid #777;
height:36px;
width:36px;
}
.red{
background-color:#c22;
}
.blue{
background-color:#22c;
}
.green{
background-color:#2c2;
}
.white{
background-color:#fff;
}
.black{
background-color:#000;
border:2px dashed #fff;
}
</style>
<style type="text/css">
td img {
display: block;
}
body {
background-color: #191919;
}
a:link {
text-decoration: none;
color: #F00;
}
a:hover {
text-decoration: underline;
color: #F00;
}
a:visited {
text-decoration: none;
color: #F00;
}
a:active {
text-decoration: none;
color: #F00;
}
.style22 {
color: #666666;
}
.style23 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style31 {
font-family: "Arial";
color: #999999;
font-size: 12px;
font-weight: bold;
}
.style34 {
font-family: "Arial";
}
.style24 {
font-size: 11px;
color: #999999;
font-family: Arial, Helvetica, sans-serif;
}
.style62 {
font-size: 12px;
color: #999999;
font-family: "myriad Pro";
}
.style67 {
font-family: "myriad Pro";
color: #999999;
font-size: 12px;
font-weight: bold;
}
.style69 {
font-family: "Arial";
color: #999999;
font-weight: bold;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 14px;
font-weight: bold;
}
.style3 {
font-family: "Arial";
font-size: 12px;
line-height: normal;
height: 10px;
}
.style71 {
font-family: "myriad Pro";
}
.style73 {
font-family: Arial;
color: #999999;
font-size: 12px;
font-weight: bold;
}
.style74 {
font-size: 12px;
color: #999999;
font-family: Arial;
}
.style75 {
font-family: Arial;
color: #CCC;
font-size: 12px;
font-weight: bold;
}
.style76 {
font-size: 12px;
font-family: Arial;
color: #FF0000;
}
.style81 {
font-family: Arial;
}
.style82 {
color: #999999;
font-size: 12px;
}
.style83 {
font-size: 12px;
font-weight: bold;
color: #999999;
}
</style>
<script language="javascript">
var initload = true;
var ctx, color = "#000";
var voffset = 160;
var footerheight = 50;
var canvas_width,canvas_height;
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
canvas_width = window.innerWidth-100;
canvas_height = window.innerHeight - voffset - footerheight ;
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 = 0.2;
ctx.translate(0.5, 0.5);
// setup to trigger drawing on mouse or touch
drawTouch();
drawPointer();
drawMouse();
}
function Point(x , y, p) {
this.x = x;
this.y = y;
this.p = p;
}
var previousPoint = new Point(0, 0, 0), currentPoint = new Point(0, 0, 0);
var previousWidth = 0;
var kWIDTH_MIN = 0.2;
var kWIDTH_MAX = 3.0;
//current width
var strokeWidth = 3.0;
var rotate_degree = 0;
var pressure_level = 2048.0 - 1;
var draw_method = 0;
function draw_method_change(){
draw_method = document.getElementById("draw_method").selectedIndex;
}
function draw_ext_input(px,py,p) {
if(p > pressure_level) {
//something maybe wrong
return ;
}
if(draw_method == 0) {
draw_ext_input_dda(px,py,p);
}
else if(draw_method == 1) {
draw_ext_input_line(px,py,p);
}
}
function draw_ext_input_line(px,py,p) {
if(currentPoint.p == 0){
if (p != 0) {
currentPoint.x = px * ratio_x;
currentPoint.y = py * ratio_y;
currentPoint.p = p;
draw_point(currentPoint);
}
}
else if(p != 0) {
ctx.beginPath();
ctx.moveTo(currentPoint.x, currentPoint.y);
ctx.lineWidth = previousWidth;
currentPoint.x = px * ratio_x;
currentPoint.y = py * ratio_y;
ctx.lineTo(currentPoint.x, currentPoint.y);
ctx.stroke();
currentPoint.p = p;
draw_point(currentPoint);
}
else {
currentPoint.p = p;
}
}
function draw_ext_input_dda(px, py, p) {
if(p == 0) {
previousPoint.p = 0;
}
else {
//currentPoint.x = Math.round( px * ratio_x);
//currentPoint.y = Math.round( py * ratio_y);
currentPoint.x = px * ratio_x;
currentPoint.y = py * ratio_y;
currentPoint.p = p;
if(previousPoint.p == 0) {
draw_point(currentPoint);
}
else {
draw_line(currentPoint);
}
previousPoint.x = currentPoint.x;
previousPoint.y = currentPoint.y;
previousPoint.p = currentPoint.p;
}
}
$( function() {
$( "#line_width_slider" ).slider({
range: true,
min: 1,
max: 100,
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) {
strokeWidth = strokeWidth;
kWIDTH_MAX = strokeWidth;
kWIDTH_MIN = strokeWidth / 3;
}
function draw_point(pt){
var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * pt.p + kWIDTH_MIN;
ctx.beginPath(); //Start path
ctx.lineWidth = 0.1;
ctx.arc(pt.x, pt.y, line_width/2, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
previousWidth = line_width;
}
function draw_line(pt) {
var dy = pt.y - previousPoint.y;
var dx = pt.x - previousPoint.x;
var abs_dy = Math.abs(dy);
var abs_dx = Math.abs(dx);
if(abs_dy < 0.1 && abs_dx < 0.1) {
if(pt.p > previousPoint.p) {
draw_point(pt);
}
return;
}
else if(abs_dy <= 1 && abs_dx <=1) {
draw_point(pt);
return;
}
var stepx, stepy ,stepw;
var times = 0;
var w0 = previousWidth;
var w1 = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * pt.p + kWIDTH_MIN;
var dw = w1 - w0;
if (abs_dy >= abs_dx) {
times += abs_dy;
stepx = dx * 1.0 / abs_dy;
stepy = dy / abs_dy;
stepw = dw * 1.0 / abs_dy;
}
else
{
times += abs_dx;
stepx = dx / abs_dx;
stepy = dy * 1.0 / abs_dx;
stepw = dw * 1.0 / abs_dx;
}
var x = previousPoint.x + stepx;
var y = previousPoint.y + stepy;
var w = w0 + stepw;
while (times > 0) {
times = times - 1;
ctx.beginPath(); //Start path
if(w < kWIDTH_MIN) {
w = kWIDTH_MIN;
}
ctx.arc(x, y, w /2, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
x += stepx;
y += stepy;
w += stepw;
}
ctx.beginPath(); //Start path
ctx.arc(pt.x, pt.y, w1 /2, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
previousWidth = w1;
}
function onTouchDownEvent(x, y, p) {
previousPoint = null;
currentPoint = null;
currentPoint = new Point(x, y, 0);
previousPoint = currentPoint;
}
function onTouchMoveEvent(x, y, p) {
if (previousPoint == null) {
return;
}
previousPoint = currentPoint;
currentPoint = new Point(x, y, p);
draw_line(currentPoint);
}
function onTouchUpEvent(x, y, p) {
if (previousPoint == null) {
return;
}
previousPoint = currentPoint;
currentPoint = new Point(x, y, 0);
draw_line(currentPoint);
}
//------end
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();
ctx.lineWidth = kWIDTH_MIN;
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();
ctx.lineWidth = kWIDTH_MIN;
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 dummy(){
var nPress = dv.getUint16(9, true);
var x = dv.getUint16(11, true);
var y = dv.getUint16(13, true);
if(14 == type) {
if(rotate_degree == 0) {
draw_ext_input(x,y,nPress);
}
else if(rotate_degree == 90) {
draw_ext_input(y, ext_input_panel_width - x ,nPress);
}
else if(rotate_degree == 180) {
draw_ext_input(ext_input_panel_width - x, ext_input_panel_height - y, nPress);
}
else {
draw_ext_input(ext_input_panel_height - y, x, nPress);
}
}
else {
draw_ext_input(x,y,nPress);
}
if(4 == type || 16 == type){
var nPoint = dv.getUint16(9,true);
for (var i = 0; i < nPoint; i++) {
var nPress = dv.getUint16(11 + i * 6, true);
var x = dv.getUint16(13 + i * 6, true);
var y = dv.getUint16(15 + i * 6, true);
if (14 == type) {
if (rotate_degree == 0) {
draw_ext_input(x, y, nPress);
}
else if (rotate_degree == 90) {
draw_ext_input(y, ext_input_panel_width - x, nPress);
}
else if (rotate_degree == 180) {
draw_ext_input(ext_input_panel_width - x, ext_input_panel_height - y, nPress);
}
else {
draw_ext_input(ext_input_panel_height - y, x, nPress);
}
}
else {
draw_ext_input(x, y, nPress);
}
}
}
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.className = "style75";
pre.innerHTML = message;
output.appendChild(pre);
}
function getExplorerTitle() {
var explorer = window.navigator.userAgent.toLowerCase();
//ie
if (explorer.indexOf("msie") >= 0 || explorer.indexOf("trident") > 0) {
return "Internet Explorer";
}
//firefox
else if (explorer.indexOf("firefox") >= 0) {
return "Mozilla Firefox";
}
//Chrome
else if (explorer.indexOf("chrome") >= 0) {
return "Google Chrome";
}
//Opera
else if (explorer.indexOf("opera") >= 0) {
return "Opera";
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return "";
}
return "";
}
window.onload = function () {
newCanvas();
ext_input_panel_width = 21000;
ext_input_panel_height = 29800;
pressure_level = 2048.0 - 1;
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;
rotate_degree = 0;
}
function onTestClick(obj) {
send_pen_cmd(obj.id);
}
function rotateExtInput() {
if(cur_pen_type == 0) {
rotate_degree = rotate_degree + 90;
if( rotate_degree == 360) {
rotate_degree = 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;
ratio_x = (canvasw + 0.0) / w;
ratio_y = (canvas_height + 0.0) / h;
}
else {
var w = ext_input_panel_height * 1.0;
var h = ext_input_panel_width * 1.0;
var canvasw = w / h * canvas_height;
ratio_x = (canvasw + 0.0) / w;
ratio_y = (canvas_height + 0.0) / h;
}
}
}
function send_pen_cmd(cmd){
window.Native.pen_cmd(cmd);
}
function on_pen_cmd_result(cmd,result){
}
function on_pen_point(x,y,nPress){
if (rotate_degree == 0) {
draw_ext_input(x, y, nPress);
}
else if (rotate_degree == 90) {
draw_ext_input(y, ext_input_panel_width - x, nPress);
}
else if (rotate_degree == 180) {
draw_ext_input(ext_input_panel_width - x, ext_input_panel_height - y, nPress);
}
else {
draw_ext_input(ext_input_panel_height - y, x, nPress);
}
}
</script>
</head>
<body>
<div >
<a id="new" class="navbtn" onclick="newCanvas()">Clear</a>
<a id="open" class="navbtn" onclick="onTestClick(this)">open</a>
<a id="close" class="navbtn" onclick="onTestClick(this)">close</a>
<a id="rotate_ext_input" class="navbtn" onclick="rotateExtInput()">Rotate</a>
</div >
<table >
<tr>
<td>
<div class="palette white" onclick="selectColor(this)"></div>
</td>
<td>
<div class="palette red" onclick="selectColor(this)"></div>
</td>
<td>
<div class="palette blue" onclick="selectColor(this)"></div>
</td>
<td>
<div class="palette green" onclick="selectColor(this)"></div>
</td>
<td>
<div class="palette black" onclick="selectColor(this)"></div>
</td>
</tr>
</table >
<table>
<tr>
<td>
<table width = "150">
<tr>
<td id="line_width_slider"></td>
</tr>
</table>
</td>
<td>
<input type="text" id="line_width" size="4" readonly style="border:0; color:#f6931f; font-weight:bold;"/>
</td>
<td>
<div colspan="2"><select id="draw_method" name="draw_method" onchange='javascript:draw_method_change();'><option value ="use_arc">use dda</option><option value ="use_line">use line</option></select>
</td>
</tr>
<div id="content">
<p style="text-align:center">Loading Canvas...</p>
</div>
<p id="info"></p>
</body>
</html>
\ No newline at end of file
... ...