kopia lustrzana https://github.com/cyoung/stratux
Add G Meter to UI.
rodzic
8ce402a33f
commit
f25df87825
|
@ -10,7 +10,7 @@ all:
|
||||||
mkdir -p /var/www/js
|
mkdir -p /var/www/js
|
||||||
cp js/main.js /var/www/js
|
cp js/main.js /var/www/js
|
||||||
cp js/addtohomescreen.min.js /var/www/js
|
cp js/addtohomescreen.min.js /var/www/js
|
||||||
cp js/j3di-all.min.js /var/www/js
|
cp js/svg.min.js /var/www/js
|
||||||
mkdir -p /var/www/img
|
mkdir -p /var/www/img
|
||||||
cp img/logo*.png /var/www/img
|
cp img/logo*.png /var/www/img
|
||||||
cp img/screen*.png /var/www/img
|
cp img/screen*.png /var/www/img
|
||||||
|
|
|
@ -0,0 +1,115 @@
|
||||||
|
/* Thanks to https://codepen.io/fskirschbaum/pen/MYJNaj for the indicator template */
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
margin: 0 1%;
|
||||||
|
width: 18%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ABFF00;
|
||||||
|
border-radius: 10%;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.off {
|
||||||
|
background-color: #F00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.on {
|
||||||
|
background-color: #ABFF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.blink {
|
||||||
|
background-color: #F00;
|
||||||
|
-webkit-animation: blinkRed 1s infinite;
|
||||||
|
-moz-animation: blinkRed 1s infinite;
|
||||||
|
-ms-animation: blinkRed 1s infinite;
|
||||||
|
-o-animation: blinkRed 1s infinite;
|
||||||
|
animation: blinkRed 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes blinkRed {
|
||||||
|
from { background-color: #F22; }
|
||||||
|
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
||||||
|
to { background-color: #F22; }
|
||||||
|
}
|
||||||
|
@-moz-keyframes blinkRed {
|
||||||
|
from { background-color: #F22; }
|
||||||
|
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
||||||
|
to { background-color: #F22; }
|
||||||
|
}
|
||||||
|
@-ms-keyframes blinkRed {
|
||||||
|
from { background-color: #F22; }
|
||||||
|
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
||||||
|
to { background-color: #F22; }
|
||||||
|
}
|
||||||
|
@-o-keyframes blinkRed {
|
||||||
|
from { background-color: #F22; }
|
||||||
|
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
||||||
|
to { background-color: #F22; }
|
||||||
|
}
|
||||||
|
@keyframes blinkRed {
|
||||||
|
from { background-color: #F22; }
|
||||||
|
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
||||||
|
to { background-color: #F22; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For g-meter */
|
||||||
|
.gMeter .reset {
|
||||||
|
fill: #121512;
|
||||||
|
stroke: #222522;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .card {
|
||||||
|
fill: #121512;
|
||||||
|
stroke: #222522;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .center {
|
||||||
|
fill: #172017;
|
||||||
|
stroke: #222522;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .pointer {
|
||||||
|
stroke: #bbbbcc;
|
||||||
|
fill: #ddddee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .pointerBG {
|
||||||
|
fill: #bbbbcc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .marks {
|
||||||
|
fill: #ddddee;
|
||||||
|
stroke: #eeeeff;
|
||||||
|
stroke-width: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .big {
|
||||||
|
stroke-width: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .one {
|
||||||
|
stroke-width: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .limit {
|
||||||
|
fill: #dd2222;
|
||||||
|
stroke: #ff1111;
|
||||||
|
stroke-width: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .text {
|
||||||
|
font-size: 1em;
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-anchor: middle;
|
||||||
|
stroke-width: 0;
|
||||||
|
fill: #ddddee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .card .text {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gMeter .reset .text {
|
||||||
|
text-anchor: start;
|
||||||
|
}
|
||||||
|
|
|
@ -440,57 +440,3 @@ body {
|
||||||
transition: transform 0 ease;
|
transition: transform 0 ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Thanks to https://codepen.io/fskirschbaum/pen/MYJNaj for the indicator template */
|
|
||||||
|
|
||||||
.indicator {
|
|
||||||
margin: 0 1%;
|
|
||||||
width: 18%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #ABFF00;
|
|
||||||
border-radius: 10%;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator.off {
|
|
||||||
background-color: #F00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator.on {
|
|
||||||
background-color: #ABFF00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator.blink {
|
|
||||||
background-color: #F00;
|
|
||||||
-webkit-animation: blinkRed 1s infinite;
|
|
||||||
-moz-animation: blinkRed 1s infinite;
|
|
||||||
-ms-animation: blinkRed 1s infinite;
|
|
||||||
-o-animation: blinkRed 1s infinite;
|
|
||||||
animation: blinkRed 1s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes blinkRed {
|
|
||||||
from { background-color: #F22; }
|
|
||||||
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
|
||||||
to { background-color: #F22; }
|
|
||||||
}
|
|
||||||
@-moz-keyframes blinkRed {
|
|
||||||
from { background-color: #F22; }
|
|
||||||
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
|
||||||
to { background-color: #F22; }
|
|
||||||
}
|
|
||||||
@-ms-keyframes blinkRed {
|
|
||||||
from { background-color: #F22; }
|
|
||||||
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
|
||||||
to { background-color: #F22; }
|
|
||||||
}
|
|
||||||
@-o-keyframes blinkRed {
|
|
||||||
from { background-color: #F22; }
|
|
||||||
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
|
||||||
to { background-color: #F22; }
|
|
||||||
}
|
|
||||||
@keyframes blinkRed {
|
|
||||||
from { background-color: #F22; }
|
|
||||||
50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
|
|
||||||
to { background-color: #F22; }
|
|
||||||
}
|
|
||||||
|
|
|
@ -37,6 +37,7 @@
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/addtohomescreen.css">
|
<link rel="stylesheet" type="text/css" href="css/addtohomescreen.css">
|
||||||
|
<script src="js/svg.min.js"></script>
|
||||||
<script src="js/addtohomescreen.min.js"></script>
|
<script src="js/addtohomescreen.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
addToHomescreen({ displayPace: 480 });
|
addToHomescreen({ displayPace: 480 });
|
||||||
|
@ -47,6 +48,7 @@
|
||||||
<link rel="stylesheet" href="maui/css/mobile-angular-ui-desktop.min.css" />
|
<link rel="stylesheet" href="maui/css/mobile-angular-ui-desktop.min.css" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/main.css" />
|
<link rel="stylesheet" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" href="css/ahrs.css" />
|
||||||
|
|
||||||
<script src="maui/js/angular.min.js"></script>
|
<script src="maui/js/angular.min.js"></script>
|
||||||
<script src="maui/js/angular-ui-router.min.js"></script>
|
<script src="maui/js/angular-ui-router.min.js"></script>
|
||||||
|
@ -61,7 +63,6 @@
|
||||||
<script src="plates/js/towers.js"></script>
|
<script src="plates/js/towers.js"></script>
|
||||||
<script src="plates/js/traffic.js"></script>
|
<script src="plates/js/traffic.js"></script>
|
||||||
<script src="plates/js/weather.js"></script>
|
<script src="plates/js/weather.js"></script>
|
||||||
<script src="js/j3di-all.min.js"></script>
|
|
||||||
<script src="plates/js/ahrs.js"></script>
|
<script src="plates/js/ahrs.js"></script>
|
||||||
<script src="plates/js/gps.js"></script>
|
<script src="plates/js/gps.js"></script>
|
||||||
<script src="plates/js/developer.js"></script>
|
<script src="plates/js/developer.js"></script>
|
||||||
|
|
3240
web/js/j3di-all.js
3240
web/js/j3di-all.js
Plik diff jest za duży
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -34,7 +34,7 @@
|
||||||
<span class="col-xs-12">
|
<span class="col-xs-12">
|
||||||
<div id="ahrs_display">
|
<div id="ahrs_display">
|
||||||
<object id="attitude_indicator" data="../img/ai.svg" type="image/svg+xml">
|
<object id="attitude_indicator" data="../img/ai.svg" type="image/svg+xml">
|
||||||
Your browser doesn't support svg.
|
Please do a hard reload on your browser.
|
||||||
</object>
|
</object>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
@ -122,15 +122,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-sm-6 hider">
|
||||||
|
<div class="panel panel-default">
|
||||||
<!--
|
<div class="panel-heading">
|
||||||
<div class="col-sm-12">
|
<span class="panel_label">G-Meter</span>
|
||||||
<div class="panel panel-default">
|
</div>
|
||||||
<div class="panel-heading">Raw GPS / AHRS Data</div>
|
<div class="panel-body">
|
||||||
<div class="panel-body">
|
<div class="row">
|
||||||
<pre>{{raw_data}}</pre>
|
<span class="col-xs-12">
|
||||||
|
<div id="gMeter_display"></div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
-->
|
|
||||||
|
|
|
@ -70,7 +70,6 @@ ahrsRenderer.prototype = {
|
||||||
var z_inc = ((heading - this.heading) / (FPS * t));
|
var z_inc = ((heading - this.heading) / (FPS * t));
|
||||||
var w_inc = ((slipSkid - this.slipSkid) / (FPS * t));
|
var w_inc = ((slipSkid - this.slipSkid) / (FPS * t));
|
||||||
var _this = this;
|
var _this = this;
|
||||||
//console.log(z_inc);
|
|
||||||
var frames = 0;
|
var frames = 0;
|
||||||
var f = function () {
|
var f = function () {
|
||||||
_this.pitch += x_inc;
|
_this.pitch += x_inc;
|
||||||
|
@ -110,3 +109,98 @@ ahrsRenderer.prototype = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function gMeterRenderer(locationId, plim, nlim) {
|
||||||
|
this.plim = plim;
|
||||||
|
this.nlim = nlim;
|
||||||
|
this.nticks = Math.floor(plim+1) - Math.floor(nlim) + 1;
|
||||||
|
|
||||||
|
this.width = -1;
|
||||||
|
this.height = -1;
|
||||||
|
|
||||||
|
this.locationId = locationId;
|
||||||
|
this.canvas = document.getElementById(locationId);
|
||||||
|
this.resize();
|
||||||
|
|
||||||
|
// State variables
|
||||||
|
this.g = 1;
|
||||||
|
this.min = 1;
|
||||||
|
this.max = 1;
|
||||||
|
|
||||||
|
// Draw the G Meter using the svg.js library
|
||||||
|
var gMeter = SVG(locationId).viewbox(-200, -200, 400, 400).group().addClass('gMeter');
|
||||||
|
|
||||||
|
var el, card = gMeter.group().addClass('card');
|
||||||
|
card.circle(390).cx(0).cy(0);
|
||||||
|
card.line(-150, 0, -190, 0)
|
||||||
|
.addClass('marks one');
|
||||||
|
for (i=Math.floor(nlim); i<=Math.floor(plim+1); i++) {
|
||||||
|
if (i%2 == 0) {
|
||||||
|
el = card.line(-150, 0, -190, 0).addClass('big');
|
||||||
|
card.text(i.toString())
|
||||||
|
.addClass('text')
|
||||||
|
.cx(-105).cy(0)
|
||||||
|
.transform({ rotation: (i-1)/this.nticks*360, cx: 0, cy: 0, relative: true })
|
||||||
|
.transform({ rotation: -(i-1)/this.nticks*360, relative: true });
|
||||||
|
} else {
|
||||||
|
el = card.line(-165, 0, -190, 0);
|
||||||
|
|
||||||
|
}
|
||||||
|
el.addClass('marks')
|
||||||
|
.rotate((i-1)/this.nticks*360, 0, 0);
|
||||||
|
}
|
||||||
|
card.line(-140, 0, -190, 0).addClass('marks limit').rotate((plim-10)/this.nticks*360, 0, 0);
|
||||||
|
card.line(-140, 0, -190, 0).addClass('marks limit').rotate((nlim-10)/this.nticks*360, 0, 0);
|
||||||
|
|
||||||
|
this.pointer_el = gMeter.group().addClass('g');
|
||||||
|
this.pointer_el.polygon('0,0 -170,0 -150,-10 0,-10').addClass('pointer');
|
||||||
|
this.pointer_el.polygon('0,0 -170,0 -150,+10 0,+10').addClass('pointerBG');
|
||||||
|
|
||||||
|
this.max_el = gMeter.group().addClass('max');
|
||||||
|
this.max_el.polygon('0,0 -170,0 -150,-5 0,-5').addClass('pointer');
|
||||||
|
this.max_el.polygon('0,0 -170,0 -150,+5 0,+5').addClass('pointerBG');
|
||||||
|
|
||||||
|
this.min_el = gMeter.group().addClass('min');
|
||||||
|
this.min_el.polygon('0,0 -170,0 -160,-5 0,-5').addClass('pointer');
|
||||||
|
this.min_el.polygon('0,0 -170,0 -160,+5 0,+5').addClass('pointerBG');
|
||||||
|
|
||||||
|
gMeter.circle(40).cx(0).cy(0).addClass('center');
|
||||||
|
|
||||||
|
var reset = gMeter.group().cx(-165).cy(165).addClass('reset');
|
||||||
|
reset.circle(60).cx(0).cy(0).addClass('reset');
|
||||||
|
reset.text("RESET").cx(0).cy(0).addClass('text');
|
||||||
|
reset.on('click', function() {
|
||||||
|
this.reset();
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
gMeterRenderer.prototype = {
|
||||||
|
constructor: gMeterRenderer,
|
||||||
|
|
||||||
|
resize: function () {
|
||||||
|
var canvasWidth = this.canvas.parentElement.offsetWidth - 12;
|
||||||
|
|
||||||
|
if (canvasWidth !== this.width) {
|
||||||
|
this.width = canvasWidth;
|
||||||
|
this.height = canvasWidth * 0.5;
|
||||||
|
|
||||||
|
this.canvas.width = this.width;
|
||||||
|
this.canvas.height = this.height;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function (g) {
|
||||||
|
this.g = g;
|
||||||
|
this.max = g > this.max ? g : this.max;
|
||||||
|
this.min = g < this.min ? g : this.min;
|
||||||
|
|
||||||
|
this.pointer_el.animate(50).rotate((g-1)/this.nticks*360, 0, 0);
|
||||||
|
this.max_el.animate(50).rotate((this.max-1)/this.nticks*360, 0, 0);
|
||||||
|
this.min_el.animate(50).rotate((this.min-1)/this.nticks*360, 0, 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
reset: function() {
|
||||||
|
this.max = this.g;
|
||||||
|
this.min = this.g;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -117,6 +117,8 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
|
||||||
|
|
||||||
$scope.ahrs_heading_mag = Math.round(status.Mag_heading);
|
$scope.ahrs_heading_mag = Math.round(status.Mag_heading);
|
||||||
$scope.ahrs_gload = Math.round(status.GLoad*100)/100;
|
$scope.ahrs_gload = Math.round(status.GLoad*100)/100;
|
||||||
|
gMeter.update($scope.ahrs_gload);
|
||||||
|
|
||||||
if (status.RateOfTurn > 0.001) {
|
if (status.RateOfTurn > 0.001) {
|
||||||
$scope.ahrs_turn_rate = Math.round(360/status.RateOfTurn/60*10)/10; // minutes/turn
|
$scope.ahrs_turn_rate = Math.round(360/status.RateOfTurn/60*10)/10; // minutes/turn
|
||||||
} else {
|
} else {
|
||||||
|
@ -261,5 +263,7 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
|
||||||
|
|
||||||
$scope.IsCaging = function() {
|
$scope.IsCaging = function() {
|
||||||
return statusCal.innerText == "Caging";
|
return statusCal.innerText == "Caging";
|
||||||
}
|
};
|
||||||
|
|
||||||
|
var gMeter = new gMeterRenderer("gMeter_display", 4.4, -1.76);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ CACHE MANIFEST
|
||||||
/maui/css/mobile-angular-ui-hover.min.css
|
/maui/css/mobile-angular-ui-hover.min.css
|
||||||
/maui/css/mobile-angular-ui-desktop.min.css
|
/maui/css/mobile-angular-ui-desktop.min.css
|
||||||
/maui/css/mobile-angular-ui-base.min.css
|
/maui/css/mobile-angular-ui-base.min.css
|
||||||
/js/j3di-all.min.js
|
/js/svg.min.js
|
||||||
/js/addtohomescreen.min.js
|
/js/addtohomescreen.min.js
|
||||||
/js/main.js
|
/js/main.js
|
||||||
/plates/weather-help.html
|
/plates/weather-help.html
|
||||||
|
@ -51,6 +51,7 @@ CACHE MANIFEST
|
||||||
/img/screen-640x920.png
|
/img/screen-640x920.png
|
||||||
/css/addtohomescreen.css
|
/css/addtohomescreen.css
|
||||||
/css/main.css
|
/css/main.css
|
||||||
|
/css/ahrs.css
|
||||||
|
|
||||||
NETWORK:
|
NETWORK:
|
||||||
*
|
*
|
||||||
|
|
Ładowanie…
Reference in New Issue