kopia lustrzana https://github.com/cyoung/stratux
224 wiersze
7.8 KiB
JavaScript
224 wiersze
7.8 KiB
JavaScript
function ahrsRenderer(locationId) {
|
|
this.width = -1;
|
|
this.height = -1;
|
|
|
|
this.locationId = locationId;
|
|
this.canvas = document.getElementById(locationId);
|
|
this.resize();
|
|
|
|
// State variables
|
|
this.pitch = 0;
|
|
this.roll = 0;
|
|
this.heading = 0;
|
|
this.slipSkid = 0;
|
|
this.altitude = 0;
|
|
|
|
var ai = SVG(locationId).viewbox(-200, -200, 400, 400).group().addClass('ai'),
|
|
defs = ai.defs(),
|
|
earthClip = defs.rect(2400, 1200).x(-1200).y(0),
|
|
screenClip = defs.rect(400, 400).cx(0).cy(0);
|
|
this.pitchClip = defs.circle(320).cx(0).cy(0);
|
|
this.rollClip = defs.polygon('0,0 -200,-200 200,-200');
|
|
|
|
ai = ai.clipWith(screenClip).group();
|
|
|
|
// card is the earth+sky+pitch marks, moves with both pitch and roll.
|
|
this.card = ai.group();
|
|
this.card.circle(2400).cx(0).cy(0).addClass('sky'); // Sky
|
|
this.card.line(-1200, 0, 1200, 0).addClass('marks'); // Horizon line
|
|
this.card.circle(2400).cx(0).cy(0).addClass('earth').clipWith(earthClip); // Earth
|
|
|
|
var pitchMarks = this.card.group().addClass('marks').clipWith(this.pitchClip);
|
|
for (i = -1050; i <= 1050; i+=25) {
|
|
switch (i%100) {
|
|
case 0:
|
|
pitchMarks.line(-40, i, 40, i);
|
|
if (i!=0) {
|
|
pitchMarks.text(Math.abs(i) <= 900 ? Math.abs(i / 10).toString() : '80').x(-55).cy(i).addClass('markText');
|
|
pitchMarks.text(Math.abs(i) <= 900 ? Math.abs(i / 10).toString() : '80').x(+55).cy(i).addClass('markText');
|
|
}
|
|
break;
|
|
case 50:
|
|
pitchMarks.line(-20, i, 20, i);
|
|
break;
|
|
default:
|
|
pitchMarks.line(-10, i, 10, i);
|
|
}
|
|
}
|
|
|
|
this.rollMarks = ai.group().addClass('marks').clipWith(this.rollClip);
|
|
for (i=-180; i<180; i+=10) {
|
|
if (i == 0) {
|
|
this.rollMarks.polygon('-10,-189 0,-175 10,-189').style('stroke-width', 0);
|
|
}
|
|
else if (i % 30 == 0) {
|
|
this.rollMarks.line(0, -175, 0, -195).rotate(i, 0, 0);
|
|
} else {
|
|
this.rollMarks.line(0, -175, 0, -189).rotate(i, 0, 0);
|
|
}
|
|
}
|
|
|
|
var rollPointer = ai.group().addClass('marks');
|
|
rollPointer.polygon('-10,-160 0,-174 10,-160').style('stroke-width', 0);
|
|
rollPointer.polygon('-10,+160 0,+174 10,+160').style('stroke-width', 0);
|
|
this.skidBar = ai.rect(20, 6).cx(0).y(-158).style('stroke-width', 0).addClass('marks');
|
|
|
|
var pointer = ai.group().addClass('pointer');
|
|
pointer.polygon('-150,-3 -78,-3 -75,0 -78,3 -150,3');
|
|
pointer.polygon('+150,-3 +78,-3 +75,0 +78,3 +150,3');
|
|
pointer.polygon('-75,25 0,0 75,25 25,25 25,20 -25,20 -25,25').addClass('pointerBG');
|
|
pointer.polygon('-75,25 0,0 75,25 0,10');
|
|
pointer.line(0, 0, 0, 10);
|
|
|
|
this.headingMarks = ai.group().addClass('marks');
|
|
for (i=-200; i<=920; i+=20) {
|
|
if (i%60==0) {
|
|
this.headingMarks.line(i, 175, i, 178);
|
|
this.headingMarks.text((i<0 ? (i/2+360) : i/2).toString()).x(i).cy(185).addClass('markText');
|
|
this.headingMarks.line(i, 192, i, 195);
|
|
} else {
|
|
this.headingMarks.line(i, 175, i, 195).style('stroke-width', 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
ahrsRenderer.prototype = {
|
|
constructor: ahrsRenderer,
|
|
|
|
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 (pitch, roll, heading, slipSkid) {
|
|
this.pitch = pitch;
|
|
this.roll = roll;
|
|
this.heading = heading;
|
|
this.slipSkid = slipSkid;
|
|
|
|
this.pitchClip.translate(0, -10 * this.pitch);
|
|
this.rollClip.rotate(this.roll, 0, 0);
|
|
this.card.rotate(0, 0, 0).translate(0, 10 * this.pitch);
|
|
this.card.rotate(-this.roll, 0, -10 * this.pitch);
|
|
this.rollMarks.rotate(-this.roll, 0, 0);
|
|
this.headingMarks.translate(-2 * (this.heading % 360), 0);
|
|
this.skidBar.translate(-2 * this.slipSkid, 0);
|
|
}
|
|
};
|
|
|
|
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-1)/this.nticks*360, 0, 0);
|
|
card.line(-140, 0, -190, 0).addClass('marks limit').rotate((nlim-1)/this.nticks*360, 0, 0);
|
|
|
|
var ax = -Math.cos(2*Math.PI/this.nticks),
|
|
ay = -Math.sin(2*Math.PI/this.nticks);
|
|
card.path('M -170 0, A 170 170 0 0 1 ' + 170*ax + ' ' + 170*ay)
|
|
.rotate(-Math.floor(plim)/this.nticks*360, 0, 0)
|
|
.addClass('marks')
|
|
.style('fill-opacity', '0');
|
|
card.path('M -175 0, A 175 175 0 0 1 ' + 175*ax + ' ' + 175*ay)
|
|
.rotate(-Math.floor(plim)/this.nticks*360, 0, 0)
|
|
.addClass('marks')
|
|
.style('fill-opacity', '0');
|
|
|
|
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');
|
|
|
|
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');
|
|
|
|
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() {
|
|
reset.animate(200).rotate(20, 0, 0);
|
|
this.reset();
|
|
reset.animate(200).rotate(0, 0, 0);
|
|
}, 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.g = 1;
|
|
this.max = 1;
|
|
this.min = 1;
|
|
}
|
|
};
|