kopia lustrzana https://github.com/cyoung/stratux
Add G Meter to UI.
Eric Westphal
rodzic
8ce402a33f
commit
f25df87825
|
|
@ -10,7 +10,7 @@ all:
|
|||
mkdir -p /var/www/js
|
||||
cp js/main.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
|
||||
cp img/logo*.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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">
|
||||
<script src="js/svg.min.js"></script>
|
||||
<script src="js/addtohomescreen.min.js"></script>
|
||||
<script>
|
||||
addToHomescreen({ displayPace: 480 });
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
<link rel="stylesheet" href="maui/css/mobile-angular-ui-desktop.min.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-ui-router.min.js"></script>
|
||||
|
|
@ -61,7 +63,6 @@
|
|||
<script src="plates/js/towers.js"></script>
|
||||
<script src="plates/js/traffic.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/gps.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">
|
||||
<div id="ahrs_display">
|
||||
<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>
|
||||
</div>
|
||||
</span>
|
||||
|
|
@ -122,15 +122,18 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Raw GPS / AHRS Data</div>
|
||||
<div class="panel-body">
|
||||
<pre>{{raw_data}}</pre>
|
||||
<div class="col-sm-6 hider">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span class="panel_label">G-Meter</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<span class="col-xs-12">
|
||||
<div id="gMeter_display"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ ahrsRenderer.prototype = {
|
|||
var z_inc = ((heading - this.heading) / (FPS * t));
|
||||
var w_inc = ((slipSkid - this.slipSkid) / (FPS * t));
|
||||
var _this = this;
|
||||
//console.log(z_inc);
|
||||
var frames = 0;
|
||||
var f = function () {
|
||||
_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_gload = Math.round(status.GLoad*100)/100;
|
||||
gMeter.update($scope.ahrs_gload);
|
||||
|
||||
if (status.RateOfTurn > 0.001) {
|
||||
$scope.ahrs_turn_rate = Math.round(360/status.RateOfTurn/60*10)/10; // minutes/turn
|
||||
} else {
|
||||
|
|
@ -261,5 +263,7 @@ function GPSCtrl($rootScope, $scope, $state, $http, $interval) {
|
|||
|
||||
$scope.IsCaging = function() {
|
||||
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-desktop.min.css
|
||||
/maui/css/mobile-angular-ui-base.min.css
|
||||
/js/j3di-all.min.js
|
||||
/js/svg.min.js
|
||||
/js/addtohomescreen.min.js
|
||||
/js/main.js
|
||||
/plates/weather-help.html
|
||||
|
|
@ -51,6 +51,7 @@ CACHE MANIFEST
|
|||
/img/screen-640x920.png
|
||||
/css/addtohomescreen.css
|
||||
/css/main.css
|
||||
/css/ahrs.css
|
||||
|
||||
NETWORK:
|
||||
*
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue