Mirror
/
ardupilot
mirror of https://github.com/ArduPilot/ardupilot
5
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
ardupilot/Tools/ArdupilotMegaPlanner/hud.html

241 lines
6.9 KiB
HTML
Raw Normal View History

APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
<!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;
APM Planner 1.1.17 add polish thanks GrzegorzSz added french thanks Don Brooks fix posible rc setup lag
2012-01-02 18:53:14 -04:00
function init() {
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
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); };
APM Planner 1.1.3 add kml overlay to flight data screen remember last window location websockets functioning. add sonar types/optical flow hardware options
2011-12-12 08:22:13 -04:00
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);
};
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
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");
}
APM Planner 1.1.3 add kml overlay to flight data screen remember last window location websockets functioning. add sonar types/optical flow hardware options
2011-12-12 08:22:13 -04:00
APM Planner 1.1.17 add polish thanks GrzegorzSz added french thanks Don Brooks fix posible rc setup lag
2012-01-02 18:53:14 -04:00
draw();
}
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
function draw() {
APM Planner 1.1.17 add polish thanks GrzegorzSz added french thanks Don Brooks fix posible rc setup lag
2012-01-02 18:53:14 -04:00
setTimeout ( "draw()", 100 );
APM Planner 1.1.3 add kml overlay to flight data screen remember last window location websockets functioning. add sonar types/optical flow hardware options
2011-12-12 08:22:13 -04:00
//pitch -= 1.2;
//roll += .75;
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
APM Planner 1.1.3 add kml overlay to flight data screen remember last window location websockets functioning. add sonar types/optical flow hardware options
2011-12-12 08:22:13 -04:00
//if (pitch < -90)
//pitch = 90;
//if (roll > 180)
//roll = -180;
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
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 {
APM Planner 1.1.3 add kml overlay to flight data screen remember last window location websockets functioning. add sonar types/optical flow hardware options
2011-12-12 08:22:13 -04:00
//socket.send("test "+pitch+"\n");
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
} catch (ex){ }// alert(ex); }
APM Planner 1.1.17 add polish thanks GrzegorzSz added french thanks Don Brooks fix posible rc setup lag
2012-01-02 18:53:14 -04:00
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
}
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>
APM Planner 1.1.17 add polish thanks GrzegorzSz added french thanks Don Brooks fix posible rc setup lag
2012-01-02 18:53:14 -04:00
<body onload="init();">
APM Planner 1.0.77 misc fix's
2011-10-04 08:19:25 -03:00
<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>
&lt;canvas&gt; feature.</p>
</canvas>
</body>
</html>