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(freqi + offset + 4) * (127) + 128;
b = Math.sin(freq*i + offset + 2) * (127) + 128;
var stroke_color = ‘#’ + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
li=‘
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
