Hi,
In installed the Dump1090-Mutability v1.15 development version as described by mgunther in post http://discussions.flightaware.com/post177419.html#p177419.
This version has already colored airplanes icons depending on their altitude by default. I like it. Nice colors!
One thing (I think) is missing: A legend (a bar) in the left bottom corner in which you can lookup the altitude per color. I have added this feature:
If have added a section to the /usr/share/dump1090-mutability/html/config.js configuration file, so you can enable, disable or change it yourself.
// -- Display aircrafts in color depending on their altitude
DisplayAltitudeColorLegendBar = true; // true or false
// Number of altitude zones displayed
NumberOfAltitudeZones = 27;
// Maximum altitude in meters.
MaxAltitudeMeters = 13500;
// Maximum altitude in feet.
MaxAltitudeFeet = 40500;
It works with Metric and non Metric values.
In this file you can also configure:
- your latitude/longitude position of your antenna.
- whether you want to use Metric values.
- the distance circles.
- the title name of your dump1090 webpage.
- etc…
To use my tweak, take the following steps:
- backup the ***.js, .html en .css files in /usr/share/dump1090-mutability/html directory.
- edit the config.js, gmap.html, style.ccs files and create new file called colored_altitude_zones.js.
- reload your browser.
(In case anything goes wrong: Just copy the backup files to the original directory.)
Down here I will explain the modifications step by step:
- create a backup directory:
pi@ted1090-4 ~ $ cd /usr/share/dump1090-mutability/html/
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo mkdir backup
- Copy the *.js, *.html en *.css files in /usr/share/dump1090-mutability/html to the backup directory:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo cp *.js backup/
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo cp *.html backup/
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo cp *.css backup/
- Check if your backup files are created successfully:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ ls -l backup/
total 68
-rw-r--r-- 1 root root 1692 Aug 11 21:19 config.js
-rw-r--r-- 1 root root 10375 Aug 11 21:19 gmap.html
-rw-r--r-- 1 root root 15742 Aug 11 21:19 planeObject.js
-rw-r--r-- 1 root root 31251 Aug 11 21:19 script.js
-rw-r--r-- 1 root root 1920 Aug 11 21:19 style.css
- Edit config.js:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo nano config.js
and add the red text below to this file:
// For a monochrome display try this:
// ColorByAlt = {
// unknown : { h: 0, s: 0, l: 40 },
// ground : { h: 0, s: 0, l: 30 },
// air : { h: { alt: 0, val: 0 } ], s: 0, l: 50 },
// selected : { h: 0, s: 0, l: +30 },
// stale : { h: 0, s: 0, l: +30 }
// };
// – Display aircrafts in color depending on their altitude
DisplayAltitudeColorLegendBar = true; // true or false
// Number of altitude zones displayed
NumberOfAltitudeZones = 27;
// Maximum altitude in meters.
MaxAltitudeMeters = 13500;
// Maximum altitude in feet.
MaxAltitudeFeet = 40500;
SiteCircles = true; // true to show circles (only shown if the center marker is shown)
// In nautical miles or km (depending settings value ‘Metric’)
After modifications, save (Ctrl+o) and exit (Ctrl+x)
- modify style.ccs:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo nano style.ccs
and add the red text below to this file:
div#map_container { float: left; width: 100%; height: 100%; }
div#map_canvas { height: 100%; margin-right: 420px; }
div#colored_altitude_zones li{ list-style-type:none; display:block; width:95px; height:17px; }
div#colored_altitude_zones { position:fixed; bottom:0; left:0; width:95px ;}
div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
After modifications, save (Ctrl+o) and exit (Ctrl+x)
- Create a new file called colored_altitude_zones.js:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo nano colored_altitude_zones.js
and add the red text below to this file:
$(document).ready(function(){
function getAltitudeZoneColors(NumberOfZones){
var html=“”;
var unittype = ‘m’;
if (!Metric) unittype = ‘ft’;
// Number of Meters or feet per zone
var MaximumAltitude = MaxAltitudeMeters;
if (!Metric) MaximumAltitude = MaxAltitudeFeet;
var zone = Math.round(MaximumAltitude / NumberOfAltitudeZones);
// create zone color for every altitude zone
for (var altitude_zone = 0; altitude_zone < NumberOfZones; ++altitude_zone){
var altitude = altitude_zone * zone;
// calculate low and high zone border
var low_altitude_zone_border = Math.round(altitude);
var high_altitude_zone_border = Math.round(((altitude_zone + 1) * zone)) - 1;
// color
s = ColorByAlt.air.s;
l = ColorByAlt.air.l;
if (Metric) altitude = Math.round(altitude * 3.2828);
// 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 (altitude > hpoints*.alt) {
if (i == hpoints.length-1) {
h = hpoints*.val;
} else {
h = hpoints*.val + (hpoints*.val - hpoints*.val) * (altitude - hpoints*.alt) / (hpoints*.alt - hpoints*.alt)
}
break;
}
}
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;
var zone_color = 'hsl(' + h.toFixed(0) + ',' + s.toFixed(0) + '%,' + l.toFixed(0) + '%)';
// Create HTML code
li='<li class="color" style="background-color:'+zone_color+';">'+low_altitude_zone_border+'-'+high_altitude_zone_border+' '+unittype+'</li>';
html=html+li;
}
return html;
}
if (DisplayAltitudeColorLegendBar) document.getElementById(‘colored_altitude_zones’).innerHTML=getAltitudeZoneColors(NumberOfAltitudeZones);
});********
After modifications, save (Ctrl+o) and exit (Ctrl+x)
- Modify gmap.html:
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo nano gmap.html
and add the red text below to this file:
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="coolclock/excanvas.js"></script>
<script type="text/javascript" src="coolclock/coolclock.js"></script>
<script type="text/javascript" src="coolclock/moreskins.js"></script>
<script type="text/javascript" src="colored_altitude_zones.js"></script>
<title>DUMP1090</title>
</head>
<body onload="initialize()">
<div id="loader" class="hidden">
<img src="spinny.gif" id="spinny">
<progress id="loader_progress"></progress>
</div>
<!--
This is hideous. airframes.org insists on getting a POST with a "submit" value specified,
but if we have an input control with that name then it shadows the submit() function that
we need. So steal the submit function off a different form. Surely there is a better way?!
-->
<form id="horrible_hack" class="hidden"></form>
<form id="airframes_post" method="POST" action="http://www.airframes.org/" target="_blank" class="hidden">
<input type="hidden" name="reg1" value="">
<input type="hidden" name="selcal" value="">
<input id="airframes_post_icao" type="hidden" name="ica024" value="">
<input type="hidden" name="submit" value="submit">
</form>
<div id="map_container">
<div id="map_canvas"></div>
<div id="colored_altitude_zones"></div>
</div>
<div id="sidebar_container">
<div id="sidebar_canvas">
After modifications, save (Ctrl+o) and exit (Ctrl+x)
- Refresh your browser (twice): ](http://)/dump1090
Now you should see the altitude/color legend bar in the left lower corner.
I hope you like it 
Something went wrong? Just copy the backup files back:
pi@ted1090-1 /usr/share/dump1090-mutability/html $ sudo cp backup/* .
And refresh your browser (twice). It should work again like before.
Ted
http://flightaware.com/adsb/stats/user/tedsluis#stats-6731
