Quick prototype of color-by-altitude.

public_html/planeObject.js

@@ -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() {
+PlaneObject.prototype.getMarkerColor = function() {
-        var col = MarkerColor;
+        // Emergency squawks override everything else
+        if (this.squawk in SpecialSquawks)
+                return SpecialSquawks[this.squawk].markerColor;
 
-	// If this marker is selected we should make it lighter than the rest.
+        var h, s, l;
-	if (this.selected)
+
-		col = SelectedColor;
+        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)
+        if (this.seen_pos > 15) {
-		col = StaleColor;
+                h += ColorByAlt.stale.h;
+                s += ColorByAlt.stale.s;
+                l += ColorByAlt.stale.l;
+        }
 
-	// If the squawk code is one of the international emergency codes,
+        // If this marker is selected, change color
-	// match the info window alert color.
+        if (this.selected){
-        if (this.squawk in SpecialSquawks)
+                h += ColorByAlt.selected.h;
-                col = SpecialSquawks[this.squawk].markerColor;
+                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);