Quick prototype of color-by-altitude.
This commit is contained in:
parent
ab8c4db85b
commit
8e9220e330
|
@ -1,5 +1,42 @@
|
|||
"use strict";
|
||||
|
||||
// Temporary config; this will move to config.js.
|
||||
// All color values are given as Hue (0-359) / Saturation (0-100) / Lightness (0-100)
|
||||
var ColorByAlt = {
|
||||
// HSL for planes with unknown altitude:
|
||||
unknown : { h: 0, s: 0, l: 40 },
|
||||
|
||||
// HSL for planes that are on the ground:
|
||||
ground : { h: 120, s: 100, l: 30 },
|
||||
|
||||
air : {
|
||||
// These define altitude-to-hue mappings
|
||||
// at particular altitudes; the hue
|
||||
// for intermediate altitudes that lie
|
||||
// between the provided altitudes is linearly
|
||||
// interpolated.
|
||||
//
|
||||
// Mappings must be provided in increasing
|
||||
// order of altitude.
|
||||
//
|
||||
// Altitudes below the first entry use the
|
||||
// hue of the first entry; altitudes above
|
||||
// the last entry use the hue of the last
|
||||
// entry.
|
||||
h: [ { alt: 2000, val: 20 }, // orange
|
||||
{ alt: 10000, val: 140 }, // light green
|
||||
{ alt: 40000, val: 300 } ], // magenta
|
||||
s: 85,
|
||||
l: 50,
|
||||
},
|
||||
|
||||
// Changes added to the color of the currently selected plane
|
||||
selected : { h: 0, s: 0, l: +10 },
|
||||
|
||||
// Changes added to the color of planes that have stale position info
|
||||
stale : { h: 0, s: 0, l: +30 }
|
||||
};
|
||||
|
||||
var PlaneSvg = "M 0,0 " +
|
||||
"M 1.9565564,41.694305 C 1.7174505,40.497708 1.6419973,38.448747 " +
|
||||
"1.8096508,37.70494 1.8936398,37.332056 2.0796653,36.88191 2.222907,36.70461 " +
|
||||
|
@ -185,22 +222,72 @@ PlaneObject.prototype.clearLines = function() {
|
|||
}
|
||||
};
|
||||
|
||||
PlaneObject.prototype.updateIcon = function() {
|
||||
var col = MarkerColor;
|
||||
|
||||
// If this marker is selected we should make it lighter than the rest.
|
||||
if (this.selected)
|
||||
col = SelectedColor;
|
||||
|
||||
// If we have not seen a recent position update, change color
|
||||
if (this.seen_pos > 15)
|
||||
col = StaleColor;
|
||||
|
||||
// If the squawk code is one of the international emergency codes,
|
||||
// match the info window alert color.
|
||||
PlaneObject.prototype.getMarkerColor = function() {
|
||||
// Emergency squawks override everything else
|
||||
if (this.squawk in SpecialSquawks)
|
||||
col = SpecialSquawks[this.squawk].markerColor;
|
||||
|
||||
return SpecialSquawks[this.squawk].markerColor;
|
||||
|
||||
var h, s, l;
|
||||
|
||||
if (this.altitude === null) {
|
||||
h = ColorByAlt.unknown.h;
|
||||
s = ColorByAlt.unknown.s;
|
||||
l = ColorByAlt.unknown.l;
|
||||
} else if (this.altitude === "ground") {
|
||||
h = ColorByAlt.ground.h;
|
||||
s = ColorByAlt.ground.s;
|
||||
l = ColorByAlt.ground.l;
|
||||
} else {
|
||||
s = ColorByAlt.air.s;
|
||||
l = ColorByAlt.air.l;
|
||||
|
||||
// find the pair of points the current altitude lies between,
|
||||
// and interpolate the hue between those points
|
||||
var hpoints = ColorByAlt.air.h;
|
||||
h = hpoints[0].val;
|
||||
for (var i = hpoints.length-1; i >= 0; --i) {
|
||||
if (this.altitude > hpoints[i].alt) {
|
||||
if (i == hpoints.length-1) {
|
||||
h = hpoints[i].val;
|
||||
} else {
|
||||
h = hpoints[i].val + (hpoints[i+1].val - hpoints[i].val) * (this.altitude - hpoints[i].alt) / (hpoints[i+1].alt - hpoints[i].alt)
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If we have not seen a recent position update, change color
|
||||
if (this.seen_pos > 15) {
|
||||
h += ColorByAlt.stale.h;
|
||||
s += ColorByAlt.stale.s;
|
||||
l += ColorByAlt.stale.l;
|
||||
}
|
||||
|
||||
// If this marker is selected, change color
|
||||
if (this.selected){
|
||||
h += ColorByAlt.selected.h;
|
||||
s += ColorByAlt.selected.s;
|
||||
l += ColorByAlt.selected.l;
|
||||
}
|
||||
|
||||
if (h < 0) {
|
||||
h = (h % 360) + 360;
|
||||
} else if (h >= 360) {
|
||||
h = h % 360;
|
||||
}
|
||||
|
||||
if (s < 5) s = 5;
|
||||
else if (s > 95) s = 95;
|
||||
|
||||
if (l < 5) l = 5;
|
||||
else if (l > 95) l = 95;
|
||||
|
||||
return 'hsl(' + h.toFixed(0) + ',' + s.toFixed(0) + '%,' + l.toFixed(0) + '%)'
|
||||
}
|
||||
|
||||
PlaneObject.prototype.updateIcon = function() {
|
||||
var col = this.getMarkerColor();
|
||||
var weight = this.selected ? 2 : 1;
|
||||
var rotation = (this.track === null ? 0 : this.track);
|
||||
|
||||
|
|
Loading…
Reference in a new issue