You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
6.9 KiB
240 lines
6.9 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<script type="application/x-javascript"> |
|
<!-- |
|
var deg2rad = Math.PI / 180; |
|
var rad2deg = 180 / Math.PI; |
|
|
|
var pitch =70; |
|
var roll =20; |
|
var yaw = 200; |
|
|
|
var socket; |
|
function init() { |
|
|
|
if (window["WebSocket"]) { |
|
var host = "ws://localhost:56781/websocket/server"; |
|
//host = "ws://173.203.100.4:8002/"; |
|
try{ |
|
socket = new WebSocket(host); |
|
//log('WebSocket - status '+socket.readyState); |
|
socket.onopen = function(msg){ socket.send("onopen"); alert("Welcome - status "+this.readyState); }; |
|
socket.onmessage = function(msg){ |
|
var b1 = msg.data.indexOf(",",0); |
|
var b2 = msg.data.indexOf(",",b1+1); |
|
|
|
roll = parseFloat( msg.data.substr(0,b1)); |
|
pitch = parseFloat( msg.data.substr(b1+1,b2 - b1)); |
|
yaw = parseFloat( msg.data.substr(b2+1)); |
|
|
|
//alert("Received: "+msg.data); |
|
}; |
|
socket.onerror = function(msg){ alert("Error: "+msg.data); }; |
|
socket.onclose = function(msg){ alert("Disconnected - status "+this.readyState); }; |
|
} |
|
catch(ex){ alert(ex); } |
|
} else { |
|
alert("This browser doesnt support websockets"); |
|
} |
|
|
|
draw(); |
|
|
|
} |
|
|
|
function draw() { |
|
|
|
setTimeout ( "draw()", 100 ); |
|
|
|
//pitch -= 1.2; |
|
//roll += .75; |
|
|
|
//if (pitch < -90) |
|
//pitch = 90; |
|
//if (roll > 180) |
|
//roll = -180; |
|
|
|
var canvas = document.getElementById("canvas"); |
|
if (canvas.getContext) { |
|
var ctx = canvas.getContext("2d"); |
|
|
|
ctx.save(); |
|
|
|
ctx.translate(canvas.width/2,canvas.height/2); |
|
|
|
ctx.rotate(-roll * deg2rad); |
|
|
|
var font = "Arial"; |
|
var fontsize = canvas.height/30; |
|
var fontoffset = fontsize - 10; |
|
|
|
var halfwidth = canvas.width/2; |
|
var halfheight = canvas.height/2; |
|
|
|
var every5deg = -canvas.height / 60; |
|
|
|
var pitchoffset = -pitch * every5deg; |
|
|
|
var x = Math.sin(-roll * deg2rad); |
|
var y = Math.cos(-roll * deg2rad); |
|
|
|
|
|
gradObj = ctx.createLinearGradient(0,-halfheight * 2 ,0, halfheight *2); |
|
gradObj.addColorStop(0.0, "Blue"); |
|
var offset = 0.5 + pitchoffset / canvas.height / 2 ; |
|
if (offset < 0) { |
|
offset = 0; |
|
} |
|
if (offset > 1) { |
|
offset = 1; |
|
} |
|
gradObj.addColorStop(offset, "LightBlue"); |
|
gradObj.addColorStop(offset, "#9bb824"); |
|
gradObj.addColorStop(1.0, "#414f07"); |
|
|
|
|
|
|
|
ctx.fillStyle = gradObj; |
|
ctx.rect(-halfwidth * 2, -halfheight *2, halfwidth * 4, halfheight * 4); |
|
ctx.fill(); |
|
|
|
|
|
var lengthshort = canvas.width / 12; |
|
var lengthlong = canvas.width / 8; |
|
|
|
for (var a = -90; a <= 90; a += 5) |
|
{ |
|
// limit to 40 degrees |
|
if (a >= pitch - 34 && a <= pitch + 25) |
|
{ |
|
if (a % 10 == 0) |
|
{ |
|
if (a == 0) |
|
{ |
|
DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg); |
|
} |
|
else |
|
{ |
|
DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg); |
|
} |
|
drawstring(ctx, a, font, fontsize + 2, "White", canvas.width / 2 - lengthlong - 30 - halfwidth - (fontoffset * 1.7), pitchoffset + a * every5deg - 8 - fontoffset); |
|
} |
|
else |
|
{ |
|
DrawLine(ctx,"White",4, canvas.width / 2 - lengthshort - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthshort - halfwidth, pitchoffset + a * every5deg); |
|
} |
|
} |
|
} |
|
|
|
|
|
ctx.translate(0,canvas.height/14); |
|
|
|
lengthlong = canvas.height / 66; |
|
|
|
var extra = canvas.height / 15 * 7; |
|
|
|
|
|
var pointlist = new Array(); |
|
pointlist[0] = 0; |
|
pointlist[1] = -lengthlong * 2 - extra; |
|
pointlist[2] = -lengthlong; |
|
pointlist[3] = -lengthlong - extra; |
|
pointlist[4] = lengthlong; |
|
pointlist[5] = -lengthlong - extra; |
|
|
|
DrawPolygon(ctx,"RED",4,pointlist) |
|
|
|
|
|
for (var a = -45; a <= 45; a += 15) |
|
{ |
|
ctx.restore(); |
|
ctx.save(); |
|
ctx.translate(canvas.width / 2, canvas.height / 2 + canvas.height/14); |
|
ctx.rotate(a * deg2rad); |
|
drawstring(ctx, a, font, fontsize, "White", 0 - 6 - fontoffset, -lengthlong * 2 - extra); |
|
DrawLine(ctx,"White",4, 0, -halfheight, 0, -halfheight - 10); |
|
|
|
} |
|
|
|
|
|
ctx.restore(); |
|
ctx.save(); |
|
|
|
DrawEllipse(ctx,"red",4,halfwidth - 10, halfheight - 10, 20, 20); |
|
DrawLine(ctx,"red",4, halfwidth - 10 - 10, halfheight, halfwidth - 10, halfheight); |
|
DrawLine(ctx,"red",4, halfwidth - 10 + 20, halfheight, halfwidth - 10 + 20 + 10, halfheight); |
|
DrawLine(ctx,"red",4, halfwidth - 10 + 20 / 2, halfheight - 10, halfwidth - 10 + 20 / 2, halfheight - 10 - 10); |
|
|
|
|
|
//DrawLine(ctx,"GREEN",4,-halfwidth,0,halfwidth,0); |
|
|
|
} |
|
|
|
try { |
|
|
|
//socket.send("test "+pitch+"\n"); |
|
} catch (ex){ }// alert(ex); } |
|
|
|
|
|
|
|
|
|
} |
|
function DrawEllipse(ctx,color,linewidth,x1,y1,width,height) { |
|
ctx.lineWidth = linewidth; |
|
ctx.strokeStyle = color; |
|
ctx.beginPath(); |
|
ctx.moveTo(x1 + width / 2,y1 + height); |
|
var x, y; |
|
for (var i = 0; i <= 360; i += 1) |
|
{ |
|
x = Math.sin(i * deg2rad) * width / 2; |
|
y = Math.cos(i * deg2rad) * height / 2; |
|
x = x + x1 + width / 2; |
|
y = y + y1 + height / 2; |
|
ctx.lineTo(x,y); |
|
} |
|
|
|
//ctx.moveTo(x1,y1); |
|
|
|
ctx.stroke(); |
|
ctx.closePath(); |
|
} |
|
function DrawLine(ctx,color,width,x1,y1,x2,y2) { |
|
ctx.lineWidth = width; |
|
ctx.strokeStyle = color; |
|
ctx.beginPath(); |
|
ctx.moveTo(x1,y1); |
|
ctx.lineTo(x2,y2); |
|
ctx.stroke(); |
|
ctx.closePath(); |
|
} |
|
function DrawPolygon(ctx,color,width,list) { |
|
ctx.lineWidth = width; |
|
ctx.strokeStyle = color; |
|
ctx.beginPath(); |
|
ctx.moveTo(list[0],list[1]); |
|
for ( var i=2, len=list.length; i<len; i+=2 ){ |
|
ctx.lineTo(list[i],list[i+1]); |
|
} |
|
ctx.lineTo(list[0],list[1]); |
|
ctx.stroke(); |
|
ctx.closePath(); |
|
} |
|
function drawstring(ctx,string,font,fontsize,color,x,y) { |
|
ctx.font = fontsize + "pt "+font; |
|
ctx.fillStyle = color; |
|
ctx.fillText(string,x,y + fontsize); |
|
} |
|
|
|
|
|
--> |
|
</script> |
|
</head> |
|
<body onload="init();"> |
|
<canvas id="canvas" width="640" height="480"> |
|
<p>This example requires a browser that supports the |
|
<a href="http://www.w3.org/html/wg/html5/">HTML5</a> |
|
<canvas> feature.</p> |
|
</canvas> |
|
</body> |
|
</html>
|
|
|