mirror
/
stratux
kopia lustrzana https://github.com/cyoung/stratux
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #80 from cyoung/ui_coloring 

color coded METARs; time 'old' for weather; and message volume bar graph
pull/81/head
cyoung 2015-10-10 15:10:55 -04:00
rodzic 451fec9bbb caba8bab78
commit a6f302dc13
5 zmienionych plików z 160 dodań i 75 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

27
web/css/main.css
Wyświetl plik

@ -85,6 +85,23 @@
content: "\f1d9";
}
.flight_condition_VFR {
background-color:forestgreen;
color:white;
}
.flight_condition_MVFR {
background-color:blue;
color:white;
}
.flight_condition_IFR {
background-color:crimson;
color:white;
}
.flight_condition_LIFR {
background-color:darkorchid;
color:white;
}
.traffic-style1 {
color: #000000;
background-color: cornflowerblue;
@ -111,6 +128,16 @@
color: darkgoldenrod;
}
.bar_container {
display:inline-block;
border:1px solid #cccccc;
width: 100%;
border-radius: 2px;
font-size: 0.75em;
}
.bar_display {
padding: 1px 2px 1px 3px;
}
/* ***************************************************************************
everything below this comment represents tweeks to the mobile-angular-uis CSS

71
web/plates/js/weather.js
Wyświetl plik

@ -33,17 +33,70 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
return false;
}
function parseFlightCondition(msg, body) {
if ((msg !== "METAR") && (msg !== "SPECI"))
return "";
// check the visibility: a value preceeding 'SM' which is either a fraction or a whole number
// we don't care what value of fraction since anything below 1SM is LIFR
// BTW: now I know why no one wants to parse METARs - ther can be spaces in the numbers ARGH
// test for special case of 'X X/X'
var exp = new RegExp("([0-9]) ([0-9])/([0-9])SM");
var match = exp.exec(body);
if ((match !== null) && (match.length === 4)) {
visability = parseInt(match[1]) + (parseInt(match[2]) / parseInt(match[3]));
} else {
exp = new RegExp("([0-9/]{1,5}?)SM");
match = exp.exec(body);
if (match === null)
return "";
// the only way we have 3 or more characters is if the '/' is present which means we need to do extra checking
if (match[1].length === 3)
return "LIFR";
// do we have a usable visability distance
var visability = parseInt(match[1]);
if (visability === 0)
return "";
}
// ceiling is at either the BKN or OVC layer
exp = new RegExp("BKN([0-9]{3})");
match = exp.exec(body);
if (match === null) {
exp = new RegExp("OVC([0-9]{3})");
match = exp.exec(body);
}
var ceiling = 999;
if (match !== null)
ceiling = parseInt(match[1]);
if ((visability > 5) && (ceiling > 30))
return "VFR";
if ((visability >= 3) && (ceiling >= 10))
return "MVFR";
if ((visability >= 1) && (ceiling >= 5))
return "IFR";
return "LIFR";
}
function utcTimeString(epoc) {
var time = "";
var val;
var d = new Date(epoc);
val = d.getUTCDate();
if (val > 0)
time += (val < 10 ? "0" + val : "" + val) + ":";
val = d.getUTCHours();
time += (val < 10 ? "0" + val : "" + val);
if (val > 0)
time += (val < 10 ? "0" + val : "" + val) + ":";
val = d.getUTCMinutes();
time += ":" + (val < 10 ? "0" + val : "" + val);
time += (val < 10 ? "0" + val : "" + val) + ":";
val = d.getUTCSeconds();
time += ":" + (val < 10 ? "0" + val : "" + val);
time += "Z";
time += (val < 10 ? "0" + val : "" + val);
// time += "Z";
return time;
}
@ -57,7 +110,7 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
d.setUTCMinutes(parseInt(s.substring(4, 6)));
d.setUTCSeconds(0);
d.setUTCMilliseconds(0);
return d.getTime();
return d;
}
function setDataItem(obj, data_item) {
@ -68,9 +121,13 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
data_item.type = obj.Type;
data_item.update = false;
}
data_item.flight_condition = parseFlightCondition(obj.Type, obj.Data);
data_item.location = obj.Location;
data_item.age = parseShortDatetime(obj.Time);
data_item.time = utcTimeString(data_item.age);
var dThen = parseShortDatetime(obj.Time);
var dNow = new Date(obj.LocaltimeReceived);
data_item.age = dThen.getTime();
data_item.time = utcTimeString(Math.abs(dNow - dThen)) + " old";
data_item.received = utcTimeString(obj.LocaltimeReceived);
data_item.data = obj.Data;
}

1
web/plates/settings.html
Wyświetl plik

@ -59,6 +59,7 @@
<label class="control-label col-xs-5">Mode S Code (Hex)</label>
<form name="modeForm" ng-submit="updatemodes()" novalidate>
<!-- type="number" not supported except on mobile -->
<!-- RegEx for validation: ^[A-Fa-f0-9]{6}$ -->
<input class="col-xs-7" type="string" required ng-model="OwnshipModeS" placeholder="FAA HEX code" ng-blur="updatemodes()" />
</form>
</div>

132
web/plates/status.html
Wyświetl plik

@ -1,44 +1,44 @@
<div class="col-sm-12">
<div class="text-center">
<p><strong>Version: <span>{{Version}}</span></strong></p>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel_label">Status</span>
<div class="text-center">
<p><strong>Version: <span>{{Version}}</span></strong></p>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel_label">Status</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">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-6 label_adj">
<strong class="col-xs-6">Recent Clients:</strong>
<span class="col-xs-2 text-right">{{Connected_Users}}</span>
</div>
<div class="col-sm-6 label_adj">
<strong class="col-xs-6">RTL-SDR devices:</strong>
<span class="col-xs-2 text-right">{{Devices}}</span>
</div>
</div>
<div class="separator"></div>
<div class="row">
<label class="col-xs-5">Messages</label>
<label class="col-xs-3 text-right">Minute</label>
<label class="col-xs-3 text-right">Peak</label>
</div>
<div class="row" ng-class="{'section_invisible': !visible_uat}">
<span class="col-xs-1"></span>
<label class="col-xs-4">UAT:</label>
<span class="col-xs-3 text-right">{{UAT_messages_last_minute}}</span>
<span class="col-xs-3 text-right">{{UAT_messages_max}}</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_es}">
<span class="col-xs-1"></span>
<label class="col-xs-4">1090ES:</label>
<span class="col-xs-3 text-right">{{ES_messages_last_minute}}</span>
<span class="col-xs-3 text-right">{{ES_messages_max}}</span>
</div>
<!--
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-6 label_adj">
<strong class="col-xs-5">Recent Clients:</strong>
<span class="col-xs-7">{{Connected_Users}}</span>
</div>
<div class="col-sm-6 label_adj">
<strong class="col-xs-5">SDR devices:</strong>
<span class="col-xs-7">{{Devices}}</span>
</div>
</div>
<div class="separator"></div>
<div class="row">
<label class="col-xs-4">Messages</label>
<label class="col-xs-6">Current</label>
<label class="col-xs-2 text-right">Peak</label>
</div>
<div class="row" ng-class="{'section_invisible': !visible_uat}">
<span class="col-xs-1"></span>
<label class="col-xs-3">UAT:</label>
<span class="col-xs-6"><div class="bar_container"><div class="bar_display traffic-style2" ng-attr-style="width:{{100*UAT_messages_last_minute / UAT_messages_max}}%">{{UAT_messages_last_minute}}</div></div></span>
<span class="col-xs-2 text-right">{{UAT_messages_max}}</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_es}">
<span class="col-xs-1"></span>
<label class="col-xs-3">1090ES:</label>
<span class="col-xs-6"><div class="bar_container"><div class="bar_display traffic-style1" ng-attr-style="width:{{100*ES_messages_last_minute / ES_messages_max}}%;">{{ES_messages_last_minute}}</div></div></span>
<span class="col-xs-2 text-right">{{ES_messages_max}}</span>
</div>
<!--
<div id="uat_products" style="display: none;">
<div class="row"><span class="col-xs-1">&nbsp;</span></div>
<div class="row">
@ -49,32 +49,32 @@
<div>{{product_rows}}</div>
</div>
-->
<div class="row" ng-class="{ 'section_invisible': (!visible_gps && !visible_ahrs)}">
<span class="col-xs-1">&nbsp;</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_gps}">
<label class="col-xs-6">GPS satellites:</label>
<span class="col-xs-6">{{GPS_satellites_locked}}</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_ahrs}">
<label class="col-xs-6">AHRS:</label>
<div id="RY835AI_connected-container" class="col-xs-6">
<div ng-class="RY835AI_connected ? 'fa fa-check-circle text-success' : 'fa fa-times-circle text-danger'"></div>
</div>
</div>
<div class="row"><span class="col-xs-1">&nbsp;</span></div>
<div class="separator"></div>
<div class="row">
<div class="col-sm-6 label_adj">
<strong class="col-xs-6">Uptime:</strong>
<span class="col-xs-6">{{Uptime}}</span>
</div>
<div class="col-sm-6 label_adj">
<strong class="col-xs-6">CPU Temp:</strong>
<span class="col-xs-6">{{CPUTemp}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-class="{ 'section_invisible': (!visible_gps && !visible_ahrs)}">
<span class="col-xs-1">&nbsp;</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_gps}">
<label class="col-xs-6">GPS satellites:</label>
<span class="col-xs-6">{{GPS_satellites_locked}}</span>
</div>
<div class="row" ng-class="{'section_invisible': !visible_ahrs}">
<label class="col-xs-6">AHRS:</label>
<div id="RY835AI_connected-container" class="col-xs-6">
<div ng-class="RY835AI_connected ? 'fa fa-check-circle text-success' : 'fa fa-times-circle text-danger'"></div>
</div>
</div>
<div class="row"><span class="col-xs-1">&nbsp;</span></div>
<div class="separator"></div>
<div class="row">
<div class="col-sm-6 label_adj">
<strong class="col-xs-5">Uptime:</strong>
<span class="col-xs-7">{{Uptime}}</span>
</div>
<div class="col-sm-6 label_adj">
<strong class="col-xs-5">CPU Temp:</strong>
<span class="col-xs-7">{{CPUTemp}}</span>
</div>
</div>
</div>
</div>
</div>
</div>

4
web/plates/weather.html
Wyświetl plik

@ -29,7 +29,7 @@
<div class="separator"></div>
<div class="col-sm-12">
<span class="col-xs-3"><strong>{{weather.location}}</strong></span>
<span class="col-xs-3">{{weather.type}}</span>
<span ng-class="weather.flight_condition ? 'col-xs-3 label label-success flight_condition_{{weather.flight_condition}}' : 'col-xs-3'">{{weather.type}}</span>
<span class="col-xs-6 text-right">{{weather.time}}</span>
</div>
<div class="col-sm-12">
@ -62,7 +62,7 @@
<div class="separator"></div>
<div class="col-sm-12">
<span class="col-xs-3"><strong>{{weather.location}}</strong></span>
<span class="col-xs-3">{{weather.type}}</span>
<span ng-class="weather.flight_condition ? 'col-xs-3 label label-success flight_condition_{{weather.flight_condition}}' : 'col-xs-3'">{{weather.type}}</span>
<span class="col-xs-6 text-right">{{weather.time}}</span>
</div>
<div class="col-sm-12">