mirror of https://github.com/ArduPilot/ardupilot
241 lines
6.9 KiB
HTML
241 lines
6.9 KiB
HTML
<!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>
|