John Wiseman
112 linhas
3.5 KiB
JavaScript
112 linhas
3.5 KiB
JavaScript
(function (window, document, undefined) {
|
|
'use strict';
|
|
|
|
var headings = ['N', 'E', 'S', 'W'],
|
|
Compass;
|
|
|
|
Compass = function (cockpit) {
|
|
console.log("Adding Compass to Artificial Horizon.");
|
|
|
|
// Instance variables
|
|
this.cockpit = cockpit;
|
|
|
|
// Add required UI elements
|
|
$('#cockpit').append('<div id="compass"></div>');
|
|
var div = $('#compass').get(0);
|
|
|
|
// Listen to navdata updates
|
|
var compass = this;
|
|
this.cockpit.socket.on('navdata', function(data) {
|
|
if (!jQuery.isEmptyObject(data)) {
|
|
requestAnimationFrame(function() {
|
|
compass.moveTo(data.magneto.heading.fusionUnwrapped);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Setup compass canvas
|
|
var divRect = div.getBoundingClientRect(),
|
|
ctx, x, i, needle;
|
|
div.style.position = 'absolute';
|
|
div.style.bottom = '0px';
|
|
div.style.backgroundImage = '-webkit-radial-gradient(50% 50%, circle cover, rgb(68, 68, 68) 0%, black 100%)';
|
|
|
|
this.visibleWidth = divRect.width;
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.width = this.visibleWidth * 2;
|
|
this.canvas.height = divRect.height;
|
|
this.canvas.style.position = 'absolute';
|
|
this.canvas.style.transition = 'all 0.3s ease-out';
|
|
|
|
div.style.overflow = 'hidden';
|
|
|
|
ctx = this.canvas.getContext('2d');
|
|
|
|
x = 0;
|
|
ctx.textAlign = 'center';
|
|
for (i = 0; i < 36 * 2; i += 1.5) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
|
|
if (i % 9 === 0) {
|
|
ctx.fillStyle = 'white';
|
|
ctx.font = 'bold';
|
|
ctx.fillText(headings[i / 9 % 4], x, 24);
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineTo(x, 10);
|
|
ctx.lineWidth = 2;
|
|
} else if (i % 3 === 0) {
|
|
ctx.fillStyle = '#CCC';
|
|
ctx.font = 'normal';
|
|
ctx.fillText(i % 36, x, 24);
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineWidth = 1;
|
|
ctx.lineTo(x, 7);
|
|
} else {
|
|
ctx.strokeStyle = 'white';
|
|
ctx.lineTo(x, 5);
|
|
ctx.lineWidth = 0.5;
|
|
}
|
|
ctx.stroke();
|
|
x += this.visibleWidth / 24;
|
|
}
|
|
div.appendChild(this.canvas);
|
|
|
|
needle = document.createElement('canvas');
|
|
needle.width = 15;
|
|
needle.height = 15;
|
|
needle.style.top = 0;
|
|
|
|
needle.style.left = Math.floor(this.visibleWidth / 2 - needle.width / 2) + 'px';
|
|
needle.style.position = 'absolute';
|
|
ctx = needle.getContext('2d');
|
|
ctx.fillStyle = 'red';
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(Math.ceil(needle.width / 2), needle.height);
|
|
ctx.lineTo(needle.width, 0);
|
|
ctx.lineTo(0, 0);
|
|
ctx.fill();
|
|
div.appendChild(needle);
|
|
this.moveTo(0);
|
|
};
|
|
|
|
Compass.prototype.moveTo = function (angle) {
|
|
var offset,
|
|
compass = this;
|
|
while (angle > 180) {
|
|
angle -= 360;
|
|
}
|
|
while (angle < -180) {
|
|
angle += 360;
|
|
}
|
|
offset = - angle * (this.visibleWidth / 360);
|
|
offset -= (this.visibleWidth / 2);
|
|
// '-webkit-transform'
|
|
window.requestAnimationFrame(function () {
|
|
compass.canvas.style.webkitTransform = 'translateX(' + offset + 'px)';
|
|
});
|
|
};
|
|
window.Cockpit.plugins.push(Compass);
|
|
|
|
}(window, document, undefined));
|