Homec4science
Diffusion mux0183 (master) Browse

mux0183/d3nav/client/js/windinstrument.js
d7212bddb891master

Last Change
Raw File

windinstrument.js
View Options

// Wind instrument (analog dial)
class WindInstrument {
// Constructor defines geometry constants based on the container's dimensions
// Adds an SVG to the container
constructor(container, ID, unit = "kt") {
this.margin = {top:6, left:6, bottom:6, right:6 };
this.ID = ID;
this.unit = unit;
this.s = container.append("svg");
this.s.attr("width", container.attr("width"));
this.s.attr("height",container.attr("height"));
// Geometry
this.centerx = (this.s.attr("width")-this.margin.left-this.margin.right)/2+this.margin.left;
this.centery = (this.s.attr("height")-this.margin.top-this.margin.bottom)/2+this.margin.top;
this.maxradius = Math.min((this.s.attr("width")-this.margin.left-this.margin.right)/2, (this.s.attr("height")-this.margin.top-this.margin.bottom)/2);
this.init_instrument();
}
init_instrument() {
// Define some constants for dial, ticks, etc.
var translate_to = "translate(" + this.centerx + "," + this.centery + ")";
var dialradius = this.maxradius;
var degreeTickStart = this.maxradius-2;
var degreeTickLength = -6;
// Add SVG group for the dial and add graphical elements
// For this group, the center of the SVG is now the reference (i.e x=0, y=0)
var dial = this.s.append("g").attr("id", "dial").attr("transform", translate_to);
// Add main dial background
dial.append("circle").attr("class", "dial").attr("r", dialradius).attr("class", "instrument-bg");
// Add instrument ID
dial.append('text').attr('class', 'instrument-id').attr('text-anchor','middle').attr('x',0).attr('y',-30).text(this.ID);
// Add ticks (one every 10°, -40° to 40° ticks are different for clause hauled reach)
dial.selectAll('.dial-tick')
.data(d3.range(-180,180, 10))
.enter()
.append('line')
.attr('class', function(d) { if (Math.abs(d)>=140) return 'dial-tick '; else return 'dial-tick';})
.attr('x1',0).attr('x2',0)
.attr('y1',degreeTickStart).attr('y2',degreeTickStart + degreeTickLength)
.attr('transform', function(d) { return 'rotate(' + d + ')';});
// Add degrees labels - one every 30° - port and stb are red and green
dial.selectAll('.degree-label')
.data(d3.range(-150,181,30))
.enter()
.append('text')
.attr('class', function(d) { if (d==0 || d==180) { return 'degree-label'; } else if (d<0) { return 'degree-label port'; } else { return 'degree-label starbord'; } })
.attr('text-anchor','middle')
.attr('x',function(d) { return dialradius*0.8*Math.sin(d/360*(2*Math.PI)); })
.attr('y',function(d) { return -dialradius*0.8*Math.cos(d/360*(2*Math.PI))+3; })
.text(function(d) { return Math.abs(d); });
// Add SVG group for the hands (current, 1 minute, 5 minutes and 15 minutes) and add graphical elements
// For this group, the center of the SVG is now the reference (i.e x=0, y=0)
var hands = this.s.append("g").attr("id", "hands").attr("transform", translate_to);
hands.append('line').attr('class', 'wa-hand-15').attr('x1',0).attr('y1',0).attr('x2',0).attr('y2', -dialradius*0.8);
hands.append('line').attr('class', 'wa-hand-5').attr('x1',0).attr('y1',0).attr('x2',0).attr('y2', -dialradius*0.8);
hands.append('line').attr('class', 'wa-hand-1').attr('x1',0).attr('y1',0).attr('x2',0).attr('y2', -dialradius*0.8);
hands.append('line').attr('class', 'wa-hand').attr('x1',0).attr('y1',0).attr('x2',0).attr('y2', -dialradius);
// Add SVG group for the digits (current only) and add graphical elements
// For this group, the center of the SVG is now the reference (i.e x=0, y=0)
var digit = this.s.append("g").attr("id", "digits").attr("transform", translate_to);
digit.append('text').attr('class', 'ws-digit').attr('text-anchor','middle').attr('x',0).attr('y',30).text("-- kt");
}
// Generic update method
update(angle, hand_class, speed, digit_class = null) {
// Make hand visible if needed
var hand = this.s.select(hand_class);
hand.style('visibility', 'visible');
// Round speed and update digits
if (speed < 15) speed = Math.round(speed*10)/10;
else speed = Math.round(speed);
if (digit_class) this.s.select(digit_class).text(speed+' '+this.unit);
// Update hand (color and angle)
var ramp = d3.scaleLinear().domain([0,15,40]).range(["green", "yellow", "red"]);
hand.transition().duration(500).style("stroke", ramp(speed)).attr('transform', 'rotate('+ angle +')');
}
// Specific update methods (for each hand)
update_as(angle, speed) { this.update(angle, '.wa-hand', speed, '.ws-digit'); }
update_as_1(angle, speed) { this.update(angle, '.wa-hand-1', speed); }
update_as_5(angle, speed) { this.update(angle, '.wa-hand-5', speed); }
update_as_15(angle, speed) { this.update(angle, '.wa-hand-15', speed); }
}
// True Wind Instrument
class TrueWindInstrument extends WindInstrument {
constructor(container) { super(container, 'TRU'); }
}
// True Wind Instrument
class AppWindInstrument extends WindInstrument {
constructor(container) { super(container, 'APP'); }
}
// EOF
c4science · Help