Quick prototype of color-by-altitude.

This commit is contained in:
Oliver Jowett 2015-02-21 18:41:59 +00:00
parent ab8c4db85b
commit 8e9220e330

View file

@ -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);