dump 1090 enhancements


#1

hi,

I made some enhancements to dump1090:

  • Hover with the mouse over a plane icon will display all available flight information, such as position, altitude, speed, mlat, etc.
  • The planes are colored. Each color is referring to a specific altitude.
  • Added a map legend which tells what color is which altitude.

I was actually inspired by the** alternating rings** made by abcd567: How To Get Alternating BLUE/RED Circles In Dump1090?

https://dl.dropboxusercontent.com/u/17865731/Screenshot%20from%202015-07-11%2009%3A52%3A06.png

I am running piaware 2.1-1 and dump1090 1.2-2 supplied by Flightaware.

In order to get this you must add and edit some files in the** /usr/share/dump1090/public_html** directory.
Before you get started it is best practice to copy the files in that directory to a backup directory:


pi@ted1090-2 ~ $ cd /usr/share/dump1090/public_html
pi@ted1090-2 /usr/share/dump1090/public_html $ sudo mkdir /usr/share/dump1090/orig-html
pi@ted1090-2 /usr/share/dump1090/public_html $ sudo cp -r /usr/share/dump1090/public_html/* /usr/share/dump1090/orig-html 

Check if you made your backup successfully:


pi@ted1090-2 /usr/share/dump1090/public_html $ ls -l  /usr/share/dump1090/orig-html
total 64
-rw-r--r-- 1 root root  1198 Jul 10 08:16 config.js
drwxr-xr-x 2 root root  4096 Jul  9 09:58 coolclock
-rw-r--r-- 1 root root   627 Jul  3 23:42 extension.js
-rw-r--r-- 1 root root  3579 Jul 11 09:27 gmap.html
-rw-r--r-- 1 root root   742 Jul  3 23:42 grippie.png
-rw-r--r-- 1 root root   433 Jul  3 23:42 options.js
-rw-r--r-- 1 root root 11322 Jul 11 09:26 planeObject.js
-rw-r--r-- 1 root root 19295 Jul 10 08:21 script.js
-rw-r--r-- 1 root root  2076 Jul 11 09:28 style.css


if you mess editing the files later, you can restore the files from the /usr/share/dump1090/orig-html to the /usr/share/dump1090/public_html directory like this:


sudo cp -r /usr/share/dump1090/orig-html/*  /usr/share/dump1090/public_html

Now start with editing /usr/share/dump1090/public_html/planeObject.js


sudo nano /usr/share/dump1090/public_html/planeObject.js

This will open file planeObject.js for editing in terminal.

File planeObject.js with modifications (for the plane icons in color) below here in red:

                    // If the squawk code is one of the international emergency codes,
                    // match the info window alert color.
                    if (this.squawk == 7500) {
                            this.markerColor = "rgb(255, 85, 85)";
                    }
                    if (this.squawk == 7600) {
                            this.markerColor = "rgb(0, 255, 255)";
                    }
                    if (this.squawk == 7700) {
                            this.markerColor = "rgb(255, 255, 0)";
                    }

                    // Determine the fillcolor based on altitude (rainbow colors):
                    var alti = this.altitude * 0.3048;
                    if (alti > 11499) {
                            alti = 11499;  // max altitude in meters
                    }
                    var alti = Math.round(alti/10000*20);
                    var freq = 5 / 20;
                    var red   = Math.sin(freq * alti + 2) * 127 + 128;
                    var green = Math.sin(freq * alti + 6) * 127 + 128;
                    var blue  = Math.sin(freq * alti + 4) * 127 + 128;
                    function byte2Hex(n)
                    {
                            var nybHexString = "0123456789ABCDEF";
                            return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
                    }
                    var fill_color = '#' + byte2Hex(red) + byte2Hex(green) + byte2Hex(blue);

                    // If we have not overwritten color by now, an extension still could but
                    // just keep on trucking.  :slight_smile:

                    return {
            strokeWeight: (this.is_selected ? 2 : 1),
            strokeColor: this.markerColor,
            path:  "M 0,0 "+ baseSvg"planeData"],
            scale: 0.4,
            fillColor: fill_color,
            fillOpacity: 0.9,
            anchor: new google.maps.Point(32, 32), // Set anchor to middle of plane.
            rotation: this.track
        };

Further modifications in the file planeObject.js (for the mouse hover over function) below here in red:

                    // Setting the marker title
                    if (this.flight.length == 0) {
                            this.marker.setTitle(this.hex);
                    } else {
                            var siteLatLon  = new google.maps.LatLng(52.085624 , 5.0890591);
                            var planeLatLon = new google.maps.LatLng(this.latitude, this.longitude);
                            var dist = Math.round(google.maps.geometry.spherical.computeDistanceBetween (siteLatLon, planeLatLon)/100)/10 ;
                            var updatedtime = new Date (this.updated).getHours()+':'+new Date (this.updated).getMinutes()+':'+new Date (this.updated).getSeconds();
                            var altitude_meters = Math.round(this.altitude * 0.3048);
                            var speed_km = Math.round(this.speed * 1.852);
                            this.marker.setTitle('flight='+this.flight+'

icao=’+this.icao+‘
lat=’+this.latitude+‘
lon=’+this.longitude+‘
speed=’+speed_km+‘km/h
altitude=’+altitude_meters+‘m
distance=’+dist+‘km
time=’+updatedtime+‘
track=’+this.track+‘̛\u00b0
squawk=’+this.squawk+‘
messages=’+this.messages+‘
seen=’+this.seen+‘times
mlat=’+this.mlat);
}
return this.marker;

After modifications, save (Ctrl+o) and exit (Ctrl+x)

If you now reload the web interface you should see the colored plane icons and the mouse hover over function…

Now create a new file** /usr/share/dump1090/public_html/altitude_rainbow.js**:


pi@ted1090-2 /usr/share/dump1090/public_html $ sudo nano /usr/share/dump1090/public_html/altitude_rainbow.js 

You can now edit the new file altitude_rainbow.js.
Add the content below in red (for the rainbow color altitude legend):
$(document).ready(function(){

function byte2Hex(n) {                        
       var nybHexString = "0123456789ABCDEF";
       return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

function getColor(noOfColors){
html="";
frequency=5/noOfColors;
for (var i = 0; i < noOfColors; ++i){
var freq = 5 / 20;
var alti_a = Math.round(i * 10000 / 20);
var alti_b = Math.round((i + 1) * 10000 / 20) - 1;
var offset = 2;
r = Math.sin(freqi + offset + 0) * (127) + 128;
g = Math.sin(freq
i + offset + 4) * (127) + 128;
b = Math.sin(freq*i + offset + 2) * (127) + 128;
var stroke_color = ‘#’ + byte2Hex® + byte2Hex(g) + byte2Hex(b);
li=’

  • ’+alti_a+’-’+alti_b+’
  • ’;
    html=html+li;
    }
    return html;
    }
    document.getElementById(‘altitude_rainbow’).innerHTML=getColor(24);
    });

    Save the new file (Ctrl+o) and exit (Ctrl+x)

    Now edit the file /usr/share/dump1090/public_html/gmap.html

    
    pi@ted1090-2 /usr/share/dump1090/public_html $ sudo nano /usr/share/dump1090/public_html/gmap.html
    
    

    This will open file gmap.html for editing in terminal.

    File gmap.html with modifications in red (for the rainbow color altitude legend):

    The settings feature is coming soon. Keep checking GitHub.

    After modifications, save (Ctrl+o) and exit (Ctrl+x)

    Now edit the file:** /usr/share/dump1090/public_html/style.css**

    
    pi@ted1090-2 /usr/share/dump1090/public_html $ sudo nano /usr/share/dump1090/public_html/style.css
    
    

    This will open file /usr/share/dump1090/public_html/style.css for editing in terminal.

    File style.cssl with modifications in red (for the rainbow color altitude legend):

    html, body {
    margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
    font-size: 10pt; overflow: auto;
    }
    div#altitude_rainbow li{ list-style-type:none; display:block; width:100px; height:17x; }
    div#altitude_rainbow { position:fixed; bottom:0; left:0; width:100x; height:240x ;}
    div#map_container { float: left; width: 100%; height: 100%; }
    div#map_canvas { height: 100%; margin-right: 420px; }

    Save the new file (Ctrl+o) and exit (Ctrl+x)

    Now reload the web interface to see the changes!

    Of course you can choose yourself if you want to do all three modifications (the colored plane icons, the mouse hover over flight information and the colored altitude legend) or just one of them.

    note: I have turned the altitude of feet in to meters, the speed in to km/h and the distance in km. Of course your can change that too.

    Ted
    http://flightaware.com/adsb/stats/user/tedsluis#stats-6731


    dump1090-mutability v1.14 enhancements
    #2

    very nice. have used the flight info for hover over - thanks


    #3

    I like to give a try but i dont have dump1090 in usr/share/ directory any ideas?

    thanks in advanced


    #4

    Cool changes! It is nice to know that the community is willing and able to offer enhancements like this! I have a few ideas myself, and perhaps this is just a good a place as any to ask about them…?

    My own particular interest is being able to walk outside and see the aircraft as they fly close enough to my station. It would be nice to either have an ‘alarm’ of some sort that would warn me of a close proximity (easy) or (harder, for extra bonus points) using the location and current heading to warn me way ahead of time of a close encounter on the way.

    Just as a proof of concept, I whipped up a bit of python code that is fed a port ‘30003’ stream from a ‘netcat’ command, and calculates the distance between the lat/lon of a plane, and prints its location if it is close to my site (arbitrarily 10km or closer). A simple addition would be to generate an email when this occurs. Another variation of the notification is a change of color or icon size on the dump1090 web page, even with an audible alarm (which I know is possible in HTML5).

    Anyways, those are my brain-storming thoughts to offer to the group. What inspired me was the lucky event a few weeks ago where I was able to photograph a jet and trail flying almost directly overhead, which I then added to my own ‘flight tracker’ information web page:

    http://darethehair.duckdns.org/dmenns/flighttracker.html


    #5

    Just in case you missed it, you would need a leading ‘/’ in front of that to indicate an absolute path i.e. /usr/share/dump1090/public_html.


    #6

    Not totally relevant to this discusssion topic, but I’ve been trying in vain to find a file in /usr/share/dump1090/public_html/ where I can extend the value for the time an aircraft is displayed on the webpage to greater than 60 seconds.

    In my area don’t see very many planes so would not created an unmanageable number of entries.

    Any help would be appreciated.


    #7

    I’m not positive but I think line 319 of planeObject.js has that.

    
    	// If no packet in over 58 seconds, clear the plane.
    	if (this.seen > 58) {
    
    

    #8

    Just poking around, what about this section of ‘planeObject.js’? Notice that it is 58 seconds – not 60 seconds:

    
        151                         // If no packet in over 58 seconds, consider the plane reapable
        152                         // This way we can hold it, but not show it just in case the plane comes back
        153                         if (this.seen > 58) {
        154                                 this.reapable = true;
        155                                 if (this.marker) {
        156                                         this.marker.setMap(null);
        157                                         this.marker = null;
        158                                 }
        159                                 if (this.line) {
        160                                         this.line.setMap(null);
        161                                         this.line = null;
        162                                 }
        163                                 if (SelectedPlane == this.icao) {
        164                                         if (this.is_selected) {
        165                                                 this.is_selected = false;
        166                                         }
        167                                         SelectedPlane = null;
        168                                 }
    
    

    There is also a section of code in ‘script.js’ having to do with ‘reapable’ aircraft, but the limit there is 5 minutes. Not sure what the relationship is – maybe aircraft ‘disappear’ from the display after 58 seconds, but they are kept ‘in memory’ for 5 minutes ‘just in case’ (?).


    #9

    dschaper and darethehair -

    You both identified the lines of code that control the “reapable” aircraft and after changing the value to 298, it does the job!

    At first it wouldn’t flush the aircraft from the table on the dump1090 webpage but I think I hadn’t reloaded the page. Once I did that it seems to be working as expected.

    I mentioned that we don’t log very many aircraft here due to being in a valley with mountains on three sides. But many aircraft disappear and then reappear a couple of minutes later. Helps to be able to see on the webpage that they are still around.

    Many thanks!


    #10

    Hi Ted,

    I like your/these enhancements - thnaks for description and howto here.

    I have made a diff-file against the original “public-html” folder of the current version from the Malcom Robb github repo: https://github.com/MalcolmRobb/dump1090 after I have applied your changes from above.

    Just for convenience, e.g you are going to re-install and do not have a backup of your changed files.

    Just save the code into a text file, e.g. dump1090_enhancements.diff, in the original public_html folder, cd to this folder and run the following from the command line:

    
    patch < dump1090_enhancements.diff
    
    
    
    
    diff -NaurwB public_html.bkup/altitude_rainbow.js public_html/altitude_rainbow.js
    --- public_html.bkup/altitude_rainbow.js	1970-01-01 01:00:00.000000000 +0100
    +++ public_html/altitude_rainbow.js	2015-07-16 10:56:46.473250151 +0200
    @@ -0,0 +1,26 @@
    +$(document).ready(function(){
    +
    +function byte2Hex(n) {
    +var nybHexString = "0123456789ABCDEF";
    +return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
    +}
    +function getColor(noOfColors){
    +li='<li class="color" style="background-color: rgb(190, 190, 190) ;">Altitude [m]</li>';
    +html=""+li;
    +frequency=5/noOfColors;
    +for (var i = 0; i < noOfColors; ++i){
    +var freq = 5 / 20;
    +var alti_a = Math.round(i * 10000 / 20);
    +var alti_b = Math.round((i + 1) * 10000 / 20) - 1;
    +var offset = 2;
    +r = Math.sin(freq*i + offset + 0) * (127) + 128;
    +g = Math.sin(freq*i + offset + 4) * (127) + 128;
    +b = Math.sin(freq*i + offset + 2) * (127) + 128;
    +var stroke_color = '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
    +li='<li class="color" style="background-color:'+stroke_color+';">'+alti_a+'-'+alti_b+'</li>';
    +html=html+li;
    +}
    +return html;
    +}
    +document.getElementById('altitude_rainbow').innerHTML=getColor(24);
    +});
    diff -NaurwB public_html.bkup/gmap.html public_html/gmap.html
    --- public_html.bkup/gmap.html	2015-04-03 12:16:12.000000000 +0200
    +++ public_html/gmap.html	2015-07-16 12:02:16.028927798 +0200
    @@ -22,28 +23,43 @@
     		</div>
     		<div id="map_container">
     			<div id="map_canvas"></div>
    +		    <div id="altitude_rainbow"></div> 
     		</div>
     		<div id="sidebar_container">
     			<div id="sidebar_canvas">
    diff -NaurwB public_html.bkup/planeObject.js public_html/planeObject.js
    --- public_html.bkup/planeObject.js	2015-04-03 12:16:12.000000000 +0200
    +++ public_html/planeObject.js	2015-07-16 11:01:01.681037241 +0200
    @@ -109,15 +109,31 @@
     			if (this.squawk == 7700) {
     				this.markerColor = "rgb(255, 255, 0)";
     			}
    -
    +// Determine the fillcolor based on altitude (rainbow colors):
    +var alti = this.altitude * 0.3048;
    +if (alti > 11499) {
    +alti = 11499; // max altitude in meters
    +}
    +var alti = Math.round(alti/10000*20);
    +var freq = 5 / 20;
    +var red = Math.sin(freq * alti + 2) * 127 + 128;
    +var green = Math.sin(freq * alti + 6) * 127 + 128;
    +var blue = Math.sin(freq * alti + 4) * 127 + 128;
    +function byte2Hex(n)
    +{
    +var nybHexString = "0123456789ABCDEF";
    +return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
    +}
    +var fill_color = '#' + byte2Hex(red) + byte2Hex(green) + byte2Hex(blue);
     			// If we have not overwritten color by now, an extension still could but
     			// just keep on trucking.  :)
     
     			return {
                     strokeWeight: (this.is_selected ? 2 : 1),
    +		 strokeColor: this.markerColor,
                     path:  "M 0,0 "+ baseSvg"planeData"],
                     scale: 0.4,
    -                fillColor: this.markerColor,
    +		 fillColor: fill_color,
                     fillOpacity: 0.9,
                     anchor: new google.maps.Point(32, 32), // Set anchor to middle of plane.
                     rotation: this.track
    @@ -234,7 +250,13 @@
     			if (this.flight.length == 0) {
     				this.marker.setTitle(this.hex);
     			} else {
    -				this.marker.setTitle(this.flight+' ('+this.icao+')');
    +			    var siteLatLon = new google.maps.LatLng(SiteLat , SiteLon);
    +			    var planeLatLon = new google.maps.LatLng(this.latitude, this.longitude);
    +			    var dist = Math.round(google.maps.geometry.spherical.computeDistanceBetween (siteLatLon, planeLatLon)/100)/10 ;
    +			    var updatedtime = new Date (this.updated).getHours()+':'+new Date (this.updated).getMinutes()+':'+new Date (this.updated).getSeconds();
    +			    var altitude_meters = Math.round(this.altitude * 0.3048);
    +			    var speed_km = Math.round(this.speed * 1.852);
    +			    this.marker.setTitle('flight='+this.flight+'
    icao='+this.icao+'
    lat='+this.latitude+'
    lon='+this.longitude+'
    speed='+speed_km+'km/h
    altitude='+altitude_meters+'m
    distance='+dist+'km
    time='+updatedtime+'
    track='+this.track+'̛\u00b0
    squawk='+this.squawk+'
    messages='+this.messages+'
    seen='+this.seen+'times
    mlat='+this.mlat);
     			}
     			return this.marker;
     		},
    diff -NaurwB public_html.bkup/script.js public_html/script.js
    --- public_html.bkup/script.js	2015-04-03 12:16:12.000000000 +0200
    +++ public_html/script.js	2015-07-16 10:45:11.779226529 +0200
    @@ -633,6 +633,11 @@
     }
     
     function drawCircle(marker, distance) {
    +
    +var circleColor;
    +if (distance==50||distance==150||distance==250)circleColor="#0000FF";
    +if (distance==100||distance==200||distance==300)circleColor="#FF0000";
    +
         if (typeof distance === 'undefined') {
             return false;
             
    @@ -651,7 +656,8 @@
           map: GoogleMap,
           radius: distance, // In meters
           fillOpacity: 0.0,
    -      strokeWeight: 1,
    +      strokeColor: circleColor,
    +      strokeWeight: 2,
           strokeOpacity: 0.3
         });
         circle.bindTo('center', marker, 'position');
    diff -NaurwB public_html.bkup/style.css public_html/style.css
    --- public_html.bkup/style.css	2015-04-03 12:16:12.000000000 +0200
    +++ public_html/style.css	2015-07-14 21:49:22.480049970 +0200
    @@ -2,6 +2,8 @@
         margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
         font-size: 10pt; overflow: auto; height: 100%;
     }
    +div#altitude_rainbow li{ font-size: 6pt; list-style-type:none; display:block; width:60px; height:17x; }
    +div#altitude_rainbow { position:fixed; bottom:0; left:0; width:60x; height:240x ;}
     div#map_container     { float: left; width: 100%; height: 100%; }
     div#map_canvas        { height: 100%; margin-right: 420px; }
    
    
    

    Maybe this is useful for someone else.

    Regards,
    Marcus


    #11

    really that helps, now i have the directory thanks, but afther i make all tutorial i dont see any changes on my 8080 webpage, can you please share all contents from your files?

    because in gmap.html for my it was completly empty …

    thanks again for help


    #12

    Thanks for the info, I have successfully applied the changes. However, I would prefer the values to be mph, miles and feet

    I know your post states this can be changed and I suspect the changes need to be made here

    var dist = Math.round(google.maps.geometry.spherical.computeDistanceBetween (siteLatLon, planeLatLon)/100)/10 ;
    var altitude_meters = Math.round(this.altitude * 0.3048);
    var speed_km = Math.round(this.speed * 1.852);

    However, I do not know what syntax to use, if anyone could point me in the correct direction I would appreciate it


    #13

    i have done this but no changes on gmap in web interface…

    any ideias?


    #14

    Or an audio warning… “Aauga, aauga, warning, warning… incoming aircraft heading 270 degrees, distance 25 miles, speed 300 knots” :laughing: