Fetch the repository succeeded.
This action will force synchronization from uav360/MissionPlanner, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<title>Hud</title>
<script src="http://smoothiecharts.org/smoothie.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="/mav/Cesium/Cesium.js"></script>
<script src="/mav/bundle.js"></script>
<style>
@import url(/mav/Cesium/Widgets/widgets.css);
</style>
<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 jsoncount=0;
var markers = [];
var wpmarkers = [];
var flightPath;
var pathHistoryPoly;
var pathHistory = [];
var socket;
var socket2;
var line1item = "cs.altasl";
var line2item = "cs.ter_alt";
function graphitem(item)
{
line1item = "cs."+item;
}
function init() {
var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("graphcanvas"),250);
// Data
var line1 = new TimeSeries();
var line2 = new TimeSeries();
// Add to SmoothieChart
smoothie.addTimeSeries(line1);
smoothie.addTimeSeries(line2);
if (window["WebSocket"]) {
var host = "ws://"+window.location.hostname+":56781/websocket/server";
if(window.location.hostname == "")
host = "ws://localhost:56781/websocket/server";
try{
socket = new WebSocket(host);
window.onbeforeunload = function(){ socket.close(); socket2.close(); }
//log('WebSocket - status '+socket.readyState);
socket.onopen = function(msg){ document.getElementById("serverStatus").innerHTML = "onopen"; jsoncount=0; };
socket.onmessage = function(msg){
jsoncount++;
var data = JSON.parse(msg.data);
if(data.hasOwnProperty('FrameString'))
{
MAV = data;
}
else if(data.hasOwnProperty('rateattitude'))
{
cs = data;
var status = "<ul style='columns: 3;'>";
a=1;
var sortable = [];
for (i in cs)
{
sortable.push(i);
}
sortable.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
for (i in sortable)
{
var name = sortable[i];
var data = cs[sortable[i]];
if(typeof data != 'object')
status += "<li style='overflow:hidden; white-space: nowrap;'><b onclick=graphitem('" + name + "')>" + name + ":</b><br> " + data + "</li>";
//if(a%3==0)
//status += "<br>";
a++;
}
status+="</ul>";
document.getElementById("serverStatus").innerHTML = status;
map.setCenter({lat: cs.lat, lng: cs.lng});
if(jsoncount < 5)
{
map.setZoom(18);
}
roll = cs.roll;
pitch = cs.pitch;
yaw = cs.yaw;
lat = cs.lat;
lng = cs.lng;
alt = cs.alt;
try {
var myLatLng = {lat: lat, lng: lng};
if(markers.length > 0)
{
markers[0].setPosition(myLatLng);
} else {
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'ArduPilot'
});
markers.push(marker);
}
map.setOptions({maxZoom: 21});
//socket.send("test "+pitch+"\n");
} catch (ex){ }// alert(ex); }
line1.append(new Date().getTime(), eval(line1item));
line2.append(new Date().getTime(), eval(line2item));
addData();
pathHistory.push({lat: lat, lng: lng});
pathHistory = pathHistory.slice(-200,200);
if(pathHistoryPoly == null) {
pathHistoryPoly = new google.maps.Polyline({
path: pathHistory,
geodesic: true,
strokeColor: '#191970',
strokeOpacity: 0.56,
strokeWeight: 4
});
pathHistoryPoly.setMap(map);
} else {
pathHistoryPoly.setPath(pathHistory);
}
}
else if(data[0].hasOwnProperty('mission_type'))
{
wps = data;
var wpscoords = [];
for (i in wps)
{
if (wps[i].x != 0 && wps[i].y != 0)
{
wpscoords.push({lat: wps[i].x, lng: wps[i].y, alt: wps[i].z, frame: wps[i].frame, label: wps[i].seq });
}
}
if(wpmarkers.length == wpscoords.length)
{
i=0;
wpmarkers.forEach(function(element)
{
element.setPosition(wpscoords[i]);
i++;
});
} else {
wpmarkers.forEach(function(element)
{element.setMap(null)});
wpmarkers = [];
// Create markers.
wpscoords.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature,
icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/green.png',
map: map,
label: (feature.label == 0) ? "Home" : feature.label+"",
draggable:true,
title: (feature.label == 0) ? "Home" : feature.label+""
});
wpmarkers.push(marker);
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});
});
}
var pnts = [];
wpscoords.forEach(function(feature)
{
pnts.push(feature.lng);
pnts.push(feature.lat);
pnts.push(feature.alt + cs.HomeAlt);
});
if (typeof viewer !== 'undefined') {
var orangeOutlined = viewer.entities.add({
name : 'Orange line with black outline at height and following the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights(pnts),
width : 4,
material : new Cesium.PolylineOutlineMaterialProperty({
color : Cesium.Color.ORANGE,
outlineWidth : 2,
outlineColor : Cesium.Color.BLACK
})
}
});
//orangeOutlined.position = Cesium.Cartesian3.fromDegrees(lng, lat);
//viewer.trackedEntity = orangeOutlined;
}
if(flightPath == null) {
flightPath = new google.maps.Polyline({
path: wpscoords,
geodesic: true,
strokeColor: '#FFFF00',
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath.setMap(map);
} else {
flightPath.setPath(wpscoords);
}
} else { return; }
};
socket.onerror = function(msg){ document.getElementById("serverStatus").innerHTML = "Error: "+msg.data; };
socket.onclose = function(msg){ document.getElementById("serverStatus").innerHTML = "Disconnected - status "+this.readyState; setTimeout ( "init()", 1000 ); };
}
catch(ex){ if (window.console) console.log(exception); document.getElementById("serverStatus").innerHTML = ex; }
} else {
document.getElementById("serverStatus").innerHTML = "This browser doesnt support websockets";
}
draw();
}
function draw() {
setTimeout ( "draw()", 250 );
//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);
}
}
}
lengthlong = canvas.height / 66;
var extra = canvas.height / 15 * 4.9;
var lengthlongex = lengthlong + 2;
var pointlist = new Array();
pointlist[0] = 0;
pointlist[1] = -lengthlongex * 2 - extra;
pointlist[2] = -lengthlongex;
pointlist[3] = -lengthlongex - extra;
pointlist[4] = lengthlongex;
pointlist[5] = -lengthlongex - extra;
DrawPolygon(ctx,"RED",4,pointlist)
for (var a = -60; a <= 60; a += 15)
{
ctx.restore();
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(a * deg2rad);
drawstring(ctx, a.toString(), font, fontsize, "White", 0 - 6 - fontoffset, -lengthlong * 8 - extra + 10);
DrawLine(ctx,"White",4, 0, -lengthlong * 3 - extra, 0,
-lengthlong * 3 - extra - lengthlong);
}
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);
///////////////////////
var headbg = {Left:0, Top: 0, Width: canvas.width - 0, Height: canvas.height / 14, Bottom: canvas.height / 14, Right: canvas.width - 0 };
_targetheading = yaw;
_heading = yaw;
_groundcourse = yaw;
DrawRectangle(ctx,"black", headbg);
//FillRectangle(ctx,"", headbg);
//bottom line
DrawLine(ctx, "white", 2, headbg.Left + 5, headbg.Bottom - 5, headbg.Width - 5,
headbg.Bottom - 5);
var space = (headbg.Width - 10) / 120.0;
var start = Math.round((_heading - 60), 1);
// draw for outside the 60 deg
if (_targetheading < start)
{
DrawLine(ctx,"green", 2, headbg.Left + 5 + space * 0, headbg.Bottom,
headbg.Left + 5 + space * (0), headbg.Top);
}
if (_targetheading > _heading + 60)
{
DrawLine(ctx,"green", 2, headbg.Left + 5 + space * 60, headbg.Bottom,
headbg.Left + 5 + space * (60), headbg.Top);
}
for (var a = start; a <= _heading + 60; a += 1)
{
// target heading
if (( (a + 360) % 360) == Math.round(_targetheading))
{
DrawLine(ctx,"green", 2, headbg.Left + 5 + space * (a - start),
headbg.Bottom, headbg.Left + 5 + space * (a - start), headbg.Top);
}
if (( (a + 360) % 360) == Math.round(_groundcourse))
{
DrawLine(ctx,"black", 2, headbg.Left + 5 + space * (a - start),
headbg.Bottom, headbg.Left + 5 + space * (a - start), headbg.Top);
}
if ( a % 15 == 0)
{
//Console.WriteLine(a + " " + Math.Round(a, 1, MidpointRounding.AwayFromZero));
//Console.WriteLine(space +" " + a +" "+ (headbg.Left + 5 + space * (a - start)));
DrawLine(ctx,"white", 2, headbg.Left + 5 + space * (a - start),
headbg.Bottom - 5, headbg.Left + 5 + space * (a - start), headbg.Bottom - 10);
var disp = a;
if (disp < 0)
disp += 360;
disp = disp % 360;
if (disp == 0)
{
drawstring(ctx, "N", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 45)
{
drawstring(ctx, "NE", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 90)
{
drawstring(ctx, "E", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 135)
{
drawstring(ctx, "SE", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 180)
{
drawstring(ctx, "S", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 225)
{
drawstring(ctx, "SW", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 270)
{
drawstring(ctx, "W", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else if (disp == 315)
{
drawstring(ctx, "NW", font, fontsize + 4, "white",
headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
else
{
drawstring(ctx, Math.round(disp % 360,0), font, fontsize,
"white", headbg.Left - 5 + space * (a - start) - fontoffset,
headbg.Bottom - 24 - (fontoffset * 1.7));
}
}
else if ( a % 5 == 0)
{
DrawLine(ctx,"white", 2, headbg.Left + 5 + space * (a - start),
headbg.Bottom - 5, headbg.Left + 5 + space * (a - start), headbg.Bottom - 10);
}
}
}
}
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 DrawRectangle(ctx,color, headbg) {
DrawLine(ctx,color,2,headbg.Left, headbg.Top, headbg.Right, headbg.Top);
DrawLine(ctx,color,2,headbg.Right, headbg.Top, headbg.Right, headbg.Bottom);
DrawLine(ctx,color,2,headbg.Right, headbg.Bottom, headbg.Left, headbg.Bottom);
DrawLine(ctx,color,2,headbg.Left, headbg.Bottom, headbg.Left, headbg.Top);
}
function drawstring(ctx,string,font,fontsize,color,x,y) {
ctx.font = fontsize + "pt "+font;
ctx.fillStyle = color;
ctx.fillText(string,x,y + fontsize);
}
</script>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body onload="init();">
<div id="message" style="position:absolute;">message</div>
<div style="height: 100%; display: flex; flex-direction: column; float: left; resize: horizontal; overflow: auto;">
<div style="float: left;">
<canvas id="canvas" width="500" height="375">
<p>
This example requires a browser that supports the
<a href="http://www.w3.org/html/wg/html5/">HTML5</a>
<canvas> feature.
</p>
</canvas><br>
Lat: <input id="latbox" name="lat" val="40.713956" />Long: <input id="lngbox" name="long" val="74.006653" />
<br />
<canvas id="graphcanvas" width="500" height="80"></canvas><br />
<div id="curve_chart" style="width: 500px; height: 200px;"></div>
</div>
<div id="serverStatus" style="width: 500px; overflow-y: auto; flex-grow: 0;"></div>
</div>
<div style="height: 100%; display: flex; flex-direction: column; resize: horizontal; overflow: auto;">
<!--<canvas id="canvas" width="300" height="200" style=""></canvas><br>
<div id="log"></div>
-->
<div id="cesiumContainer" style="height: 50%; display: none;"></div>
<div id="map"></div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: -35, lng: 117.89 },
zoom: 8,
mapTypeId: 'satellite',
maxZoom: 21
});
map.setMapTypeId('satellite');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDW05vWXeNIfZAN4Ter8gf4YLg8rPHZToc&callback=initMap"
async defer></script>
<script>
// var viewer = new Cesium.Viewer('cesiumContainer');
</script>
<script>
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
var options;
var data;
var chart;
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number', line1item);
data.addColumn('number', line2item);
data.addRows([]);
options = {
title: 'Graph',
curveType: 'function',
legend: { position: 'top' },
hAxis: {
format: 'hh:mm:ss',
gridlines: { count: 15 }
},
chartArea: { left: '5%', top: '15%', width: '90%', height: '80%' }
};
chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
setTimeout("redrawchart()", 1000);
}
function addData() {
if (data.getNumberOfRows() > 200)
data.removeRow(0);
data.addRows([
[new Date(), eval(line1item), eval(line2item)]
]);
}
function redrawchart() {
setTimeout("redrawchart()", 1000);
chart.draw(data, options);
}
</script>
<script type="text/javascript">
var jsilConfig = {
printStackTrace: true,
xna: 4,
showProgressBar: true,
winForms: true,
libraryRoot: "/mav/Libraries/",
scriptRoot: "/mav/mavlink/",
fileRoot: "/mav/file/",
bclMode11: "translated",
manifests: [
"/mav/mavlink/MAVLink.dll"
],
};
</script>
<!--
<script src="/mav/Libraries/JSIL.js" type="text/javascript"></script>
-->
<script>
//runMain();
//onLoad();
//JSIL.Initialize();
//var asm = JSIL.GetAssembly("MAVLink");
function runMain() {
//################################################
try {
var host = "ws://" + window.location.hostname + ":56781/websocket/raw";
if (window.location.hostname == "")
host = "ws://localhost:56781/websocket/raw";
socket2 = new WebSocket(host);
//log('WebSocket - status '+socket.readyState);
socket2.onopen = function (msg) { document.getElementById("serverStatus").innerHTML = "onopen"; };
socket2.onmessage = function (msg) {
var reader = new FileReader();
reader.addEventListener("loadend", function () {
var m = new MAVLink();
var buf = Buffer.from(this.result);
var msg2 = m.parseBuffer(buf);
//var packet = new asm.MAVLink_MAVLinkMessage(new Uint8Array(this.result));
document.getElementById("message").innerHTML = msg2[0].name + '';
});
reader.readAsArrayBuffer(msg.data);
};
socket2.onerror = function (msg) {
document.getElementById("serverStatus").innerHTML = "Error: " + msg.data;
};
socket2.onclose = function (msg) {
document.getElementById("serverStatus").innerHTML = "Disconnected - status " + this.readyState;
setTimeout("runMain()", 1000);
};
} catch (ex) {
if (window.console) console.log(exception);
document.getElementById("serverStatus").innerHTML = ex;
}
//############################################################
//var test = new asm.MAVLink();
//var test2 = new asm.MAVLink_MAVLinkMessage();
//var parse = new asm.MAVLink_MavlinkParse();
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
