altitude/color legend for the Dump1090-Mutability v1.15 dev

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:

https://dl.dropboxusercontent.com/u/17865731/dump1090-mutability.20150812/Screenshot%20from%202015-08-12%2021%3A41%3A16.png

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:

  1. create a backup directory:

pi@ted1090-4 ~ $ cd /usr/share/dump1090-mutability/html/
pi@ted1090-4 /usr/share/dump1090-mutability/html $ sudo mkdir backup

  1. 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/

  1. 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

  1. 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)

  1. 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)

  1. 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)

  1. 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)

  1. 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 :wink:

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

Ted,

I really like the colored altitude legend, but couldn’t get the code to work. I cut and pasted all the new lines and rechecked everything but still not changing anything.

Nothing bad happened either so left everything as is and did not restore backups. I have made other changes to gmap.html and config.js with no issues.

Any suggestions?

Thanks!

Richard

I think he forgot to show the necessary change to style.css

Did you force your web browser to reload everything? ie, not just pressing the reload button. On Firefox, hold down shift and press the reload button to force the browser to re-pull everything off the server.

Add the following line:


div#colored_altitude_zones  { position: absolute; bottom: 0; left: 0; list-style-type: none; text-align: right; }

to the file “style.css” near the top just after the line that starts with “div#map_canvas”

In context, it looks like this:


div#map_container     { float: left; width: 100%; height: 100%; }
div#map_canvas        { height: 100%; margin-right: 420px; }
div#colored_altitude_zones  { position: absolute; bottom: 0; left: 0; list-style-type: none; text-align: right; }

div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }


Add the following line:

Code:
div#colored_altitude_zones { position: absolute; bottom: 0; left: 0; list-style-type: none; text-align: right; }

to the file “style.css” near the top just after the line that starts with “div#map_canvas”

That did the trick! Thanks for the resolution. Now I have range circles, modified the clock to my local time and added the color legend. Looking quite good

I am sorry for the mistake. I got publish the style.css changes ;-( But I toverfield fixed it.

(I have edit my first post to correct it).

Thanks!

Add the following line:

I am sorry for the mistake. I got publish the style.css changes ;-( But I toverfield fixed it.

(I have edit my first post to correct it).

Thanks!

No problem.

Thank you for the good work – really like the colored legend !

I played around with this some more and added a couple of new buttons next to the Reset Map ] button.

Changes from dump1090-mutability v1.15~dev:

  1. The colored altitude map legend, already done by tedsluis.

  2. Added a button to toggle the altitude coloring of airplanes (and the legend) on and off.
    When off, it shows MLAT vs. ADS-B colors and a different legend.

  3. Added a map legend for the range rings.

  4. Added a button to toggle the range rings (and the legend) on and off.

  5. Made it easier to customize the range ring distances, colors and stroke weights.

  6. Added config options to enable or disable range rings and/or altitude coloring at start up.

  7. Added config options to enable/disable each legend.

For git users, the changes are here:


https://github.com/toverfield/dump1090/tree/master/public_html

For anyone else, you could choose one of these two scripts to download the files.

This script will download the files to your current directory, but it will not overwrite or install the files.



#! /bin/sh
for fname in gmap.html config.js legend.js planeObject.js script.js style.css
do
    wget -nc https://raw.githubusercontent.com/toverfield/dump1090/cf6dbacf80b85ab8f1f9d4af64e097466bf128eb/public_html/$fname
done


This script will make a backup copy of the entire html directory and install (overwrite) the files in place. Refresh your browser to see changes.



#! /bin/sh
DMUT=/usr/share/dump1090-mutability/html
MBAK=$DMUT.original
if  -d $DMUT ]; then
  if  ! -d $MBAK ]; then
    sudo cp -a $DMUT $MBAK
    sudo echo > $DMUT/crud
    diff -rq   $DMUT $MBAK
    if  $? -eq 0 ]; then
      for fname in gmap.html config.js legend.js planeObject.js script.js style.css
      do
        sudo wget -nv -O $DMUT/$fname https://raw.githubusercontent.com/toverfield/dump1090/cf6dbacf80b85ab8f1f9d4af64e097466bf128eb/public_html/$fname
      done
      echo $DMUT was copied to $MBAK
      echo The downloaded files were installed in $DMUT
    else
      echo Could not verify copy of $DMUT to $MBAK
    fi  
  else
    echo The backup directory $MBAK already exists!
  fi
else 
  echo The $DMUT directory was not found.
fi


Great work toverfield!

I found one minor bug in your code and I have fixed it: When I clicked on the Colors ] button to toggle the altitude legend and the color of the planes only the legend changed. The plane colors didn’t changes.

I looked in the planeObject.js script and I found no action for toggling the ShowAltitudesByColor variable and selecting the correct ASD-B or MLAT color. Here is my fix. Just add the red lines:


PlaneObject.prototype.getMarkerColor = function() {
// Emergency squawks override everything else
if (this.squawk in SpecialSquawks)
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 if (!ShowAltitudesByColor) {
            if (!this.position_from_mlat) {
                    return '#80FF80';
            } else {
                    return '#8080FF';
            }
    } 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

@Toverfield: May be you have this already, but you just forgot to commit this to your github fork?

This is an animated gif of the result:
https://dl.dropboxusercontent.com/u/17865731/dump1090-mutability.20150816/legends.gif

Toverfield made it possible to toggle the altitude legend and the distance rings legend using the buttons [Colors] and **[Rings] **in the side bar. I love it!

Ted

Thanks to toverfield and tedsluis for providing this beautiful enhancemant to the map and especially for the scripts which help those of us less gifted to install it.

It really does make the view a lot more interesting. :smiley:

Very nice… works great!

Now if all these great additions found on this forum could get into an official release of 1.15 we could avoid making modifications everytime a worthwhile enhancement comes out. ( I realize it’s always changing but it’s time! 1.15 dev is mature enough IMHO.

https://github.com/mutability/dump1090 Feel free to submit a pull request with the code you’d like to see!

No, I didn’t forget that. That change was already in my commit, but you missed it somehow. How did you download the changes? Can you investigate?

I’m glad you like the changes.

I have added all the changes (by toverfield, DinoM en me) to a fork of the original dump1090-mutability v1.15 dev. This includes:

  • Distance rings, legend, toggle button and with improved configuration options (by toverfield).
  • Country flags based on ICAO (by DinoM),
  • Button to toggle between altitude colors and ADS-B/MLAT colors and legend (by toverfield).
  • Added flags (226), downloaded from Free Country Flags Pack 1 from http://www.free-country-flags.com. (12 x 20 pixels)

Anyone can try it. After some more tests I can do a pull request. Be may be toverfield will do that? :wink:

You can install my Dump1090-Mutability v1.15 development version as described by mgunther in post http://discussions.flightaware.com/post177419.html#p177419.

This is how it looks like:
https://dl.dropboxusercontent.com/u/17865731/dump1090-mutability.20150816/flags.png

Ted

@toverfield: I already suspected something like that. You did not forgot it, but something went wrong.

I just looked to your code and I assumed that these lines were missing:


} else if (!ShowAltitudesByColor) {
if (!this.position_from_mlat) {
return '#80FF80';
} else {
return '#8080FF';
}

Are they the same as your missing lines? Then that’s really coincidence and I’m a good guesser :wink:

Ted

Well, there were no missing lines. Your change looks the same, but it works differently.

My code simply indicates MLAT vs ADS-B. The goal is to indicate how the position was obtained.

Your version uses other colors (not included in the legend, BTW) for targets with missing (or ground) altitudes, so you can’t tell whether those are MLAT or ADS-B.

I have the same thing with SpecialSquawks, but I figured those extra colors were “special” enough to leave them off the legend.

@toverfield:I am sorry for the misunderstanding. It is clear: I made a mistake. My apologies.

I think I used a wrong planeObject.js version, which I though it was yours. But now I see on Github that you versions is different…

I think you are right. I have changed my version into only MLAT or ADS-B colors like yours.

Thanks,

Ted

You just version mutability? Check the paths to dump1090