kopia lustrzana https://github.com/cyoung/stratux
Merge pull request #80 from cyoung/ui_coloring
color coded METARs; time 'old' for weather; and message volume bar graphpull/81/head
cyoung
commit
a6f302dc13
|
|
@ -85,6 +85,23 @@
|
||||||
content: "\f1d9";
|
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 {
|
.traffic-style1 {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
background-color: cornflowerblue;
|
background-color: cornflowerblue;
|
||||||
|
|
@ -111,6 +128,16 @@
|
||||||
color: darkgoldenrod;
|
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
|
everything below this comment represents tweeks to the mobile-angular-uis CSS
|
||||||
|
|
|
||||||
|
|
@ -33,17 +33,70 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
|
||||||
return false;
|
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) {
|
function utcTimeString(epoc) {
|
||||||
var time = "";
|
var time = "";
|
||||||
var val;
|
var val;
|
||||||
var d = new Date(epoc);
|
var d = new Date(epoc);
|
||||||
|
val = d.getUTCDate();
|
||||||
|
if (val > 0)
|
||||||
|
time += (val < 10 ? "0" + val : "" + val) + ":";
|
||||||
val = d.getUTCHours();
|
val = d.getUTCHours();
|
||||||
time += (val < 10 ? "0" + val : "" + val);
|
if (val > 0)
|
||||||
|
time += (val < 10 ? "0" + val : "" + val) + ":";
|
||||||
val = d.getUTCMinutes();
|
val = d.getUTCMinutes();
|
||||||
time += ":" + (val < 10 ? "0" + val : "" + val);
|
time += (val < 10 ? "0" + val : "" + val) + ":";
|
||||||
val = d.getUTCSeconds();
|
val = d.getUTCSeconds();
|
||||||
time += ":" + (val < 10 ? "0" + val : "" + val);
|
time += (val < 10 ? "0" + val : "" + val);
|
||||||
time += "Z";
|
// time += "Z";
|
||||||
return time;
|
return time;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -57,7 +110,7 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
|
||||||
d.setUTCMinutes(parseInt(s.substring(4, 6)));
|
d.setUTCMinutes(parseInt(s.substring(4, 6)));
|
||||||
d.setUTCSeconds(0);
|
d.setUTCSeconds(0);
|
||||||
d.setUTCMilliseconds(0);
|
d.setUTCMilliseconds(0);
|
||||||
return d.getTime();
|
return d;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setDataItem(obj, data_item) {
|
function setDataItem(obj, data_item) {
|
||||||
|
|
@ -68,9 +121,13 @@ function WeatherCtrl($rootScope, $scope, $state, $http, $interval) {
|
||||||
data_item.type = obj.Type;
|
data_item.type = obj.Type;
|
||||||
data_item.update = false;
|
data_item.update = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
data_item.flight_condition = parseFlightCondition(obj.Type, obj.Data);
|
||||||
data_item.location = obj.Location;
|
data_item.location = obj.Location;
|
||||||
data_item.age = parseShortDatetime(obj.Time);
|
var dThen = parseShortDatetime(obj.Time);
|
||||||
data_item.time = utcTimeString(data_item.age);
|
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.received = utcTimeString(obj.LocaltimeReceived);
|
||||||
data_item.data = obj.Data;
|
data_item.data = obj.Data;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,6 +59,7 @@
|
||||||
<label class="control-label col-xs-5">Mode S Code (Hex)</label>
|
<label class="control-label col-xs-5">Mode S Code (Hex)</label>
|
||||||
<form name="modeForm" ng-submit="updatemodes()" novalidate>
|
<form name="modeForm" ng-submit="updatemodes()" novalidate>
|
||||||
<!-- type="number" not supported except on mobile -->
|
<!-- 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()" />
|
<input class="col-xs-7" type="string" required ng-model="OwnshipModeS" placeholder="FAA HEX code" ng-blur="updatemodes()" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,44 @@
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<p><strong>Version: <span>{{Version}}</span></strong></p>
|
<p><strong>Version: <span>{{Version}}</span></strong></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<span class="panel_label">Status</span>
|
<span class="panel_label">Status</span>
|
||||||
<span ng-show="ConnectState == 'Connected'" class="label label-success">{{ConnectState}}</span>
|
<span ng-show="ConnectState == 'Connected'" class="label label-success">{{ConnectState}}</span>
|
||||||
<span ng-hide="ConnectState == 'Connected'" class="label label-danger">{{ConnectState}}</span>
|
<span ng-hide="ConnectState == 'Connected'" class="label label-danger">{{ConnectState}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="form-horizontal">
|
<div class="form-horizontal">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 label_adj">
|
<div class="col-sm-6 label_adj">
|
||||||
<strong class="col-xs-6">Recent Clients:</strong>
|
<strong class="col-xs-5">Recent Clients:</strong>
|
||||||
<span class="col-xs-2 text-right">{{Connected_Users}}</span>
|
<span class="col-xs-7">{{Connected_Users}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 label_adj">
|
<div class="col-sm-6 label_adj">
|
||||||
<strong class="col-xs-6">RTL-SDR devices:</strong>
|
<strong class="col-xs-5">SDR devices:</strong>
|
||||||
<span class="col-xs-2 text-right">{{Devices}}</span>
|
<span class="col-xs-7">{{Devices}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<label class="col-xs-5">Messages</label>
|
<label class="col-xs-4">Messages</label>
|
||||||
<label class="col-xs-3 text-right">Minute</label>
|
<label class="col-xs-6">Current</label>
|
||||||
<label class="col-xs-3 text-right">Peak</label>
|
<label class="col-xs-2 text-right">Peak</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" ng-class="{'section_invisible': !visible_uat}">
|
<div class="row" ng-class="{'section_invisible': !visible_uat}">
|
||||||
<span class="col-xs-1"></span>
|
<span class="col-xs-1"></span>
|
||||||
<label class="col-xs-4">UAT:</label>
|
<label class="col-xs-3">UAT:</label>
|
||||||
<span class="col-xs-3 text-right">{{UAT_messages_last_minute}}</span>
|
<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-3 text-right">{{UAT_messages_max}}</span>
|
<span class="col-xs-2 text-right">{{UAT_messages_max}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" ng-class="{'section_invisible': !visible_es}">
|
<div class="row" ng-class="{'section_invisible': !visible_es}">
|
||||||
<span class="col-xs-1"></span>
|
<span class="col-xs-1"></span>
|
||||||
<label class="col-xs-4">1090ES:</label>
|
<label class="col-xs-3">1090ES:</label>
|
||||||
<span class="col-xs-3 text-right">{{ES_messages_last_minute}}</span>
|
<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-3 text-right">{{ES_messages_max}}</span>
|
<span class="col-xs-2 text-right">{{ES_messages_max}}</span>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<div id="uat_products" style="display: none;">
|
<div id="uat_products" style="display: none;">
|
||||||
<div class="row"><span class="col-xs-1"> </span></div>
|
<div class="row"><span class="col-xs-1"> </span></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -49,32 +49,32 @@
|
||||||
<div>{{product_rows}}</div>
|
<div>{{product_rows}}</div>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
<div class="row" ng-class="{ 'section_invisible': (!visible_gps && !visible_ahrs)}">
|
<div class="row" ng-class="{ 'section_invisible': (!visible_gps && !visible_ahrs)}">
|
||||||
<span class="col-xs-1"> </span>
|
<span class="col-xs-1"> </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" ng-class="{'section_invisible': !visible_gps}">
|
<div class="row" ng-class="{'section_invisible': !visible_gps}">
|
||||||
<label class="col-xs-6">GPS satellites:</label>
|
<label class="col-xs-6">GPS satellites:</label>
|
||||||
<span class="col-xs-6">{{GPS_satellites_locked}}</span>
|
<span class="col-xs-6">{{GPS_satellites_locked}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" ng-class="{'section_invisible': !visible_ahrs}">
|
<div class="row" ng-class="{'section_invisible': !visible_ahrs}">
|
||||||
<label class="col-xs-6">AHRS:</label>
|
<label class="col-xs-6">AHRS:</label>
|
||||||
<div id="RY835AI_connected-container" class="col-xs-6">
|
<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 ng-class="RY835AI_connected ? 'fa fa-check-circle text-success' : 'fa fa-times-circle text-danger'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row"><span class="col-xs-1"> </span></div>
|
<div class="row"><span class="col-xs-1"> </span></div>
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 label_adj">
|
<div class="col-sm-6 label_adj">
|
||||||
<strong class="col-xs-6">Uptime:</strong>
|
<strong class="col-xs-5">Uptime:</strong>
|
||||||
<span class="col-xs-6">{{Uptime}}</span>
|
<span class="col-xs-7">{{Uptime}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 label_adj">
|
<div class="col-sm-6 label_adj">
|
||||||
<strong class="col-xs-6">CPU Temp:</strong>
|
<strong class="col-xs-5">CPU Temp:</strong>
|
||||||
<span class="col-xs-6">{{CPUTemp}}</span>
|
<span class="col-xs-7">{{CPUTemp}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<span class="col-xs-3"><strong>{{weather.location}}</strong></span>
|
<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>
|
<span class="col-xs-6 text-right">{{weather.time}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<div class="separator"></div>
|
<div class="separator"></div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<span class="col-xs-3"><strong>{{weather.location}}</strong></span>
|
<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>
|
<span class="col-xs-6 text-right">{{weather.time}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue