Merge pull request #398 from AvSquirrel/traffic-ui-new

Traffic UI improvements
pull/405/head
cyoung 2016-04-24 12:32:43 -04:00
commit bd2402f0fb
4 zmienionych plików z 197 dodań i 55 usunięć

0
test/mtk_config.sh 100644 → 100755
Wyświetl plik

Wyświetl plik

@ -6,9 +6,10 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
$scope.$parent.helppage = 'plates/traffic-help.html';
$scope.data_list = [];
$scope.data_list_invalid = [];
function utcTimeString(epoc) {
var time = "";
@ -23,6 +24,7 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
time += "Z";
return time;
}
/*
function dmsString(val) {
return [0 | val,
@ -32,17 +34,37 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
0 | val * 60 % 1 * 60,
'"'].join('');
}
*/
// chop off seconds for space
function dmsString(val) {
var deg;
var min;
deg = 0 | val;
min = 0 | (val < 0 ? val = -val : val) % 1 * 60;
return [deg*deg < 100 ? "0" + deg : deg,
'° ',
min < 10 ? "0" + min : min,
"' "].join('');
}
function setAircraft(obj, new_traffic) {
new_traffic.icao_int = obj.Icao_addr;
new_traffic.targettype = obj.TargetType;
new_traffic.signal = obj.SignalLevel.toFixed(2);
new_traffic.signal = obj.SignalLevel;
new_traffic.addr_symb ='\u2708';
if (new_traffic.targettype > 3) {
new_traffic.addr_symb ='\ud83d\udce1';
}
new_traffic.icao = obj.Icao_addr.toString(16).toUpperCase();
new_traffic.tail = obj.Tail;
if (obj.Squawk == 0) {
new_traffic.squawk = "----";
} else {
new_traffic.squawk = obj.Squawk;
}
new_traffic.addr_type = obj.Addr_type;
new_traffic.lat = dmsString(obj.Lat);
new_traffic.lon = dmsString(obj.Lng);
var n = Math.round(obj.Alt / 25) * 25;
@ -58,8 +80,11 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
new_traffic.vspeed = Math.round(obj.Vvel / 100) * 100
var timestamp = Date.parse(obj.Timestamp);
new_traffic.time = utcTimeString(timestamp);
new_traffic.age = (Math.round(obj.Age * 10)/10).toFixed(1);
new_traffic.age = obj.Age;
new_traffic.ageLastAlt = obj.AgeLastAlt;
new_traffic.src = obj.Last_source; // 1=ES, 2=UAT
new_traffic.bearing = Math.round(obj.Bearing); // degrees true
new_traffic.dist = (obj.Distance/1852); // nautical miles
// return new_aircraft;
}
@ -101,9 +126,11 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
var message = JSON.parse(msg.data);
$scope.raw_data = angular.toJson(msg.data, true);
if (message.Position_valid) {
// we need to use an array so AngularJS can perform sorting; it also means we need to loop to find an aircraft in the traffic set
var found = false;
var foundInvalid = false;
for (var i = 0, len = $scope.data_list.length; i < len; i++) {
if ($scope.data_list[i].icao_int === message.Icao_addr) {
setAircraft(message, $scope.data_list[i]);
@ -111,13 +138,39 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
break;
}
}
if (!found) {
for (var i = 0, len = $scope.data_list_invalid.length; i < len; i++) {
if ($scope.data_list_invalid[i].icao_int === message.Icao_addr) {
setAircraft(message, $scope.data_list_invalid[i]);
foundInvalid = true;
break;
}
}
if ((!found) && (message.Position_valid)) {
var new_traffic = {};
setAircraft(message, new_traffic);
$scope.data_list.unshift(new_traffic); // add to start of array
$scope.data_list.unshift(new_traffic); // add to start of main array if position is valid and removed from the invalid array
for (var i = 0, len = $scope.data_list_invalid.length; i < len; i++) {
if ($scope.data_list_invalid[i].icao_int === message.Icao_addr) {
$scope.data_list_invalid.splice(i, 1);
}
}
} else if ((!foundInvalid) && (!message.Position_valid)) {
var new_traffic = {};
setAircraft(message, new_traffic);
$scope.data_list_invalid.unshift(new_traffic); // otherwise add to start of invalid array
}
$scope.$apply();
}
};
}
@ -137,20 +190,23 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
var tempLocalClock = new Date;
$scope.LocalClock = tempLocalClock.toUTCString();
$scope.SecondsFast = (tempClock-tempLocalClock)/1000;
$scope.GPS_connected = globalStatus.GPS_connected;
}, function (response) {
// nop
});
}, 500, 0, false);
// perform cleanup every 10 seconds
var clearStaleTraffic = $interval(function () {
// remove stale aircraft = anything more than 59 seconds without an update
// remove stale aircraft = anything more than 59 seconds without a position update
var dirty = false;
var dirtyInvalid = false;
var cutoff =59;
for (var i = len = $scope.data_list.length; i > 0; i--) {
@ -163,6 +219,17 @@ function TrafficCtrl($rootScope, $scope, $state, $http, $interval) {
$scope.raw_data = "";
$scope.$apply();
}
for (var i = len = $scope.data_list_invalid.length; i > 0; i--) {
if (($scope.data_list_invalid[i - 1].age >= cutoff) || ($scope.data_list_invalid[i - 1].ageLastAlt >= cutoff)) {
$scope.data_list_invalid.splice(i - 1, 1);
dirtyInvalid = true;
}
}
if (dirtyInvalid) {
$scope.raw_data = "";
$scope.$apply();
}
}, (1000 * 10), 0, false);

Wyświetl plik

@ -1,17 +1,25 @@
<div class="section text-left help-page">
<p>The <strong>Traffic</strong> page provides a list of all aircraft position reports received within the last 60 seconds. Each time a new aircraft is reported, it is added to the list. Each time a new report is received for an existing aircraft, the list is updated. If a report for an aircraft has not been received within the last 60 seconds, the aircraft is removed from the list.</p>
<p>The <strong>Traffic</strong> page provides a list of all aircraft position reports received within the last 60 seconds. Each time a new aircraft is detected, it is added to the list. Each time a new report is received for an existing aircraft, the list is updated. If a valid position for an aircraft has not been received within the last 60 seconds, the aircraft is removed from the list.</p>
<p>For each aircraft, the list includes the following details:</p>
<ul class="list-simple">
<li><strong>Flight</strong> is aircraft tail number / call sign (when available) or the ICAO 24-bit code. When the ICAO code is used, it is displayed in gray.
<ul class="list-simple">
<li><span class="label traffic-style1">1090 ES</span> traffic is displayed with a light blue background.</li>
<li><span class="label traffic-style2">978 UAT</span> traffic is displayed with a light tan background.</li>
</ul>
</li>
<li><strong>Speed</strong> - Reported ground speed, rounded to the nearest 5 knots. Invalid or missing values are shown as '---'.</li>
<ul>
<li><strong>Callsign</strong> is the aircraft callsign or tail number. Unknown callsigns will be shown as <span class="label traffic-style11">[--N/A--]</span>. Color and symbol indicates traffic source:</li>
<ul class="list-simple">
<li><span class="label traffic-style11">&#x2708; ADSB1090</span> 1090 MHz air-to-air ADS-B traffic is displayed with a medium blue background and airplane symbol.</li>
<li><span class="label traffic-style12">&#x2708; ADSR1090</span> 1090 MHz ground-to-air ADS-R rebroadcasts are displayed with a light cyan background and airplane symbol.</li>
<li><span class="label traffic-style14">&#x1f4e1; TISB1090</span> 1090 MHZ TIS-B traffic is displayed with a light cyan background and antenna symbol.</li>
<li><span class="label traffic-style21">&#x2708; ADSB978</span> 978 MHz air-to-air ADS-B traffic is displayed with a light tan background and airplane symbol.</li>
<li><span class="label traffic-style22">&#x2708; ADSR978</span> 978 MHz ground-to-air ADS-R rebroadcasts are displayed with a gold background and airplane symbol.</li>
<li><span class="label traffic-style24">&#x1f4e1; TISB978</span> 978 MHz TIS-B traffic is displayed with a gold background and antenna symbol.</li>
</ul>
<li><strong>Code</strong> is the ICAO 24-bit code (ADS-B/ADS-R targets), 24-bit FAA-assigned track file ID (TIS-B), or Mode C squawk code, if <strong>Show Squawk</strong> is enabled, and if a squawk code has been received for that target.</li>
<li><strong>Location</strong> - Reported latitude and longitude, DD° mm'.</li>
<li><strong>Dist</strong> - Calculated distance to target in nautical miles. Requires GPS position and <strong>Show Distance</strong> slider to be enabled.</li>
<li><strong>Bearing</strong> - Calculated bearing to target in degrees true. Requires GPS position and <strong>Show Distance</strong> slider to be enabled.</li>
<li><strong>Altitude</strong> - Reported pressure altitude, feet MSL. Climb or descent rate is also shown if not in level flight.</li>
<li><strong>Speed</strong> - Reported ground speed, rounded to the nearest 5 knots. Invalid or missing values are shown as '---'.</li>
<li><strong>Course</strong> - Reported true course, rounded to the nearest 5°. Invalid or missing values are shown as '---'</li>
<li><strong>Location</strong> - Reported latitude and longitude, DD° mm' ss''.</li>
<li><strong>Age</strong> - Age of the last traffic report, seconds.</li>
<li><strong>Power</strong> - Signal strength in dB. The maximum signal is about +1.4 dB. For typical unamplified SDRs, the minimum detection threshold is about -35 dB for altitude reports, and -30 dB for position reports.</li>
<li><strong>Age</strong> - Age of the last position report, seconds.</li>
</ul>
<p>Additionally, if <strong>1090 MHz</strong> is enabled on the <strong>Settings</strong> page, most users will see reports from aircraft in the <strong>Basic Mode S and No-Position Messages</strong> table. These are targets that do not transmitting ADS-B position. Instead, Stratux is picking up altitude, squawk code, and occasionally velocity reports from non-ADS-B Mode S reports. These include air-to-air TCAS messages and radar interrogations, and typically make up the majority of all 1090 messages received.</p>
</div>

Wyświetl plik

@ -1,66 +1,133 @@
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel_label">Traffic</span>
<span class="panel_label">ADS-B and TIS-B Traffic</span>
<span ng-show="ConnectState == 'Connected'" class="label label-success">{{ConnectState}}</span>
<span ng-hide="ConnectState == 'Connected'" class="label label-danger">{{ConnectState}}</span>
</div>
<div class="panel-body traffic-page">
<div class="row">
<div class="col-sm-5">
<span class="col-xs-3"><strong>Flight</strong></span>
<span class="col-xs-3 text-right">Speed</span>
<span class="col-xs-3 text-right">Altitude</span><span class="col-xs-1 col-padding-shift-right">&nbsp;</span>
<span class="col-xs-2 text-right">Course</span>
<div class="col-sm-6">
<span class="col-xs-3"><strong>Callsign</strong></span>
<span class="col-xs-2" ng-hide="showSquawk"><strong>Code</strong></span>
<span class="col-xs-2" ng-show="showSquawk"><strong>Squawk</strong></span>
<span class="col-xs-5 text-right" ng-hide="GPS_connected && RelDist"><strong>Location</strong></span>
<span class="col-xs-3 text-right" ng-show="GPS_connected && RelDist"><strong>Dist</strong></span>
<span class="col-xs-2 text-right" ng-show="GPS_connected && RelDist"><strong>Bearing</strong></span>
</div>
<div class="col-sm-7">
<span class="col-xs-2">&nbsp;</span>
<span class="col-xs-5">Location</span>
<span class="col-xs-2">Power (dB)</span>
<span class="col-xs-2 text-right">Age</span>
<div class="col-sm-6">
<span class="col-xs-3 text-right"><strong>Altitude</strong></span><span class="col-xs-1">&nbsp;</span>
<span class="col-xs-2 text-right"><strong>Speed</strong></span>
<span class="col-xs-2 text-right"><strong>Course</strong></span>
<span class="col-xs-2 text-right"><strong>Power</strong></span>
<span class="col-xs-2 text-right"><strong>Age</strong></span>
</div>
</div>
<div class="row" ng-repeat="aircraft in data_list | orderBy: -age">
<div class="row" ng-repeat="aircraft in data_list | orderBy: 'dist'">
<div class="separator"></div>
<div class="col-sm-5">
<div class="col-sm-6">
<span class="col-xs-3">
<span ng-show="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype"><strong>{{aircraft.addr_symb}}&nbsp;{{aircraft.tail}}</strong></span>
<span ng-hide="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype"><strong class="text-muted">{{aircraft.addr_symb}}&nbsp;{{aircraft.icao}}</strong></span>
<span ng-show="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype">{{aircraft.addr_symb}}<strong>&nbsp;{{aircraft.tail}}</strong></span>
<span ng-hide="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype">{{aircraft.addr_symb}}<strong>&nbsp;[--N/A--]</strong></span>
</span>
<span class="col-xs-2">
<span style="font-size:80%" ng-hide="showSquawk">{{aircraft.icao}}<span style="font-size:50%">{{aircraft.addr_type == 3 ? "&nbsp;(TFID)" : ""}}</span></span>
<span ng-show="showSquawk"><span ng-show="aircraft.squawk < 1000">0</span><span ng-show="aircraft.squawk < 100">0</span><span ng-show="aircraft.squawk < 10">0</span>{{aircraft.squawk}}</span>
</span>
<span class="col-xs-5 text-right" ng-hide="GPS_connected && RelDist">{{aircraft.lat}} {{aircraft.lon}}</span>
<span class="col-xs-3 text-right" ng-show="GPS_connected && RelDist">{{aircraft.dist.toFixed(1)}}<span style="font-size:50%">NM</span></span>
<span class="col-xs-2 text-right" ng-show="GPS_connected && RelDist">{{aircraft.bearing}}&deg;</span>
<span class="col-xs-3 text-right">{{aircraft.speed}} KTS</span>
</div>
<div class="col-sm-6">
<span class="col-xs-3 text-right">{{aircraft.alt}}</span>
<span class="col-xs-1 small col-padding-shift-right text-muted">
<span ng-show="aircraft.vspeed > 0"><span class="fa fa-ascent"></span>{{aircraft.vspeed}}</span>
<span ng-show="aircraft.vspeed < 0"><span class="fa fa-descent"></span>{{0-aircraft.vspeed}}</span>
</span>
<span class="col-xs-2 text-right"><span ng-show="aircraft.heading < 10">0</span><span ng-show="aircraft.heading < 100">0</span>{{aircraft.heading}}&deg;</span>
</div>
<div class="col-sm-7">
<span class="col-xs-2">&nbsp;</span>
<span class="col-xs-5">{{aircraft.lat}} {{aircraft.lon}}</span>
<span class="col-xs-2">{{aircraft.signal}}</span>
<!--<span class="col-xs-3 text-right">{{aircraft.time}}</span>-->
<span class="col-xs-2 text-right">{{aircraft.age}}s</span>
<span class="col-xs-2 text-right">{{aircraft.speed}}<span style="font-size:50%">KTS</span></span>
<span class="col-xs-2 text-right"><span ng-show="aircraft.heading < 10">0</span><span ng-show="aircraft.heading < 100">0</span>{{aircraft.heading}}&deg;</span>
<span class="col-xs-2 text-right">{{aircraft.signal.toFixed(2)}}<span style="font-size:50%">dB</span></span>
<span class="col-xs-2 text-right">{{aircraft.age.toFixed(1)}}<span style="font-size:50%">s</span></span>
</div>
</div>
</div>
<!--
<div class="panel-body traffic-footer">
<div class="separator"></div>
<div class="row">
<div class="col-sm-6 label_adj">
<span class="col-xs-4"><strong>Stratux Clock:</strong></span>
<span class="col-xs-8">{{Clock}}</span>
<div class="col-sm-4">
<label class="control-label col-xs-6">Show Squawk</label>
<span class="col-xs-3"><ui-switch ng-model='showSquawk' settings-change></ui-switch></span>
</div>
<div class="col-sm-6 label_adj">
<span class="col-xs-4"><strong>Device Clock:</strong></span>
<span class="col-xs-8">{{LocalClock}}</span>
<div class="col-sm-4">
<label class="control-label col-xs-6">Show Distance</label>
<span class="col-xs-3"><ui-switch ng-model='RelDist' settings-change></ui-switch></span>
</div>
<div class="col-sm-4">
<label class="control-label col-xs-6">GPS Status</label>
<span ng-show="GPS_connected" class="label label-success col-xs-3" style="font-size:100%; display:block; height: 34px; line-height: 34px">Valid</span>
<span ng-hide="GPS_connected" class="label label-danger col-xs-3" style="font-size:100%; display:block; height: 34px; line-height: 34px">No Fix</span>
</div>
</div>
</div>
-->
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel_label">Basic Mode S and No-Position Messages</span>
</div>
<div class="panel-body traffic-page">
<div class="row">
<div class="col-sm-6">
<span class="col-xs-4"><strong>Callsign</strong></span>
<span class="col-xs-3"><strong>Code</strong></span>
<span class="col-xs-3"><strong>Squawk</strong></span>
</div>
<div class="col-sm-6">
<span class="col-xs-3 text-right"><strong>Altitude</strong></span><span class="col-xs-1">&nbsp;</span>
<span class="col-xs-2 text-right"><strong>Speed</strong></span>
<span class="col-xs-2 text-right"><strong>Course</strong></span>
<span class="col-xs-2 text-right"><strong>Power</strong></span>
<span class="col-xs-2 text-right"><strong>Age</strong></span>
</div>
</div>
<div class="row" ng-repeat="aircraft in data_list_invalid | orderBy: 'icao'">
<div class="separator"></div>
<div class="col-sm-6">
<span class="col-xs-4">
<span ng-show="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype">{{aircraft.addr_symb}}<strong>&nbsp;{{aircraft.tail}}</strong></span>
<span ng-hide="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype">{{aircraft.addr_symb}}<strong>&nbsp;[--N/A--]</strong></span>
</span>
<span class="col-xs-3" style="font-size:80%">{{aircraft.icao}}<span style="font-size:50%">{{aircraft.addr_type == 3 ? "&nbsp;(TFID)" : ""}}</span></span>
<span class="col-xs-3"><span ng-show="aircraft.squawk < 1000">0</span><span ng-show="aircraft.squawk < 100">0</span><span ng-show="aircraft.squawk < 10">0</span>{{aircraft.squawk}}</span>
</div>
<div class="col-sm-6">
<span class="col-xs-3 text-right">{{aircraft.alt}}</span>
<span class="col-xs-1 small col-padding-shift-right text-muted">
<span ng-show="aircraft.vspeed > 0"><span class="fa fa-ascent"></span>{{aircraft.vspeed}}</span>
<span ng-show="aircraft.vspeed < 0"><span class="fa fa-descent"></span>{{0-aircraft.vspeed}}</span>
</span>
<span class="col-xs-2 text-right">{{aircraft.speed}}<span style="font-size:50%">KTS</span></span>
<span class="col-xs-2 text-right"><span ng-show="aircraft.heading < 10">0</span><span ng-show="aircraft.heading < 100">0</span>{{aircraft.heading}}&deg;</span>
<span class="col-xs-2 text-right">{{aircraft.signal.toFixed(2)}}<span style="font-size:50%">dB</span></span>
<span class="col-xs-2 text-right">{{aircraft.ageLastAlt.toFixed(1)}}<span style="font-size:50%">s</span></span>
</div>
</div>
</div>
<div class="panel-body traffic-footer">
<div class="separator"></div>
<span class ="col-sm-12 small">Stratux has not received valid ADS-B position transmissions from the aircraft in this section. They will not appear on your EFB map. See help page for details.</span>
</div>
</div>
</div>