How To Get Alternating BLUE/RED Circles In Dump1090?


#1

HOW TO GET ALTERNATING BLUE/RED CIRCLES IN DUMP1090 IN PIAWARE?

Make a new directory orig-html and copy original files of public_html directory into new directory orig-html
In case you want to revert back, you can copy back these original files to public_html.


cd /usr/share/dump1090/
sudo mkdir orig-html
sudo cp /usr/share/dump1090/public_html/*.* /usr/share/dump1090/orig-html/

#check that files have been successfully copied in new directory orig-html:

cd orig-html
dir

#This will be displayed:
config.js     gmap.html   planeObject.js  style.css
extension.js  options.js  script.js


Now EDIT the file “config.js” in the folder public_html:


cd /usr/share/dump1090/public_html
sudo nano config.js


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

File config.js with modifications in red:

// --------------------------------------------------------
//
// This file is to configure the configurable settings.
// Load this file before script.js file at gmap.html.
//
// --------------------------------------------------------

// – Output Settings -------------------------------------
// Show metric values
Metric = false; // true or false

// – Map settings ----------------------------------------
// The Latitude and Longitude in decimal format
CONST_CENTERLAT = 45.0;
CONST_CENTERLON = 9.0;
// The google maps zoom level, 0 - 16, lower is further out
CONST_ZOOMLVL = 10;

// – Marker settings -------------------------------------
// The default marker color
MarkerColor = “rgb(127, 127, 127)”;
SelectedColor = “rgb(225, 225, 225)”;

// – Site Settings ---------------------------------------
SiteShow = true; // true or false
// The Latitude and Longitude in decimal format
//Insert here YOUR Latitude & Longitude
SiteLat = 43.6; //YOUR Latitude
SiteLon = -79.6; //YOUR Longitude

SiteCircles = true; // true or false (Only shown if SiteShow is true)
// In nautical miles or km (depending settings value ‘Metric’)
SiteCirclesDistances = new Array(50,100,150,200,250,300);

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

Now modify file script.js in folder public_html


sudo nano script.js

This will open file script.js for editing.
Now press “Ctrl+w” then type “function drawCircle” and press Enter.
The cursor will move to "function drawCircle"
Following code will be displayed. Make changes as shown in red:

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;

    if (!(!isNaN(parseFloat(distance)) && isFinite(distance)) || distance <$
        return false;
    }
}

distance *= 1000.0;
if (!Metric) {
    distance *= 1.852;
}

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: GoogleMap,
  radius: distance, // In meters
  fillOpacity: 0.0,
  **strokeColor: circleColor,**
  strokeWeight: **2**,
  strokeOpacity: 0.3
});
circle.bindTo('center', marker, 'position');

}

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

now run the web interface and you will see colored circles.


dump 1090 enhancements
How to add Area Coverage Rings and Antenna Coverage to map?
So how does this ADS-b thing work?
Ver 3.5 range circles
New Antenna - 10x Increase (Not even outside yet)
#2

Thanks,

I did change mine to start at 50 and stop at 200. I see very few out that far unless C-GRTB comes through.

Mark


#3

I hope this thread isn’t considered too old to add to.

My wish would be to toggle the circles on and off. Because I’m old and lazy, I’d like someone more familiar with Javascript to implement such a toggle perhaps with each click on Reset Map.

My attempt to put the line:

SiteShow = !SiteShow;

at the beginning of the resetMap function fails because the script does not appear to reenter the SiteShow and/or the SiteCircles routines after a resetMap.


#4

I liked the alternating RED and BLUE but found it hard to remember the interval so I added some code in the script.js file to make the RED circle thicker so it would stand out more:

In the drawCircle function, I added at the beginning:

var circleStroke;
if (distance==27||distance==81||distance==135)circleStroke=“2”;
if (distance==54||distance==108||distance==162)circleStroke=“4”;

(my distance interval have been modified to represent metric kilometers while the rest of the script still operates in english units. Just make sure the distance values are the same as in the “circleColor” if statements.

Then further down change the strokeWeight to use the circleStroke value you’ve defined. See below.

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: GoogleMap,
  radius: distance, // In meters
  fillOpacity: 0.0,
  strokeColor: circleColor,
  **strokeWeight: circleStroke,**
  strokeOpacity: 0.3
});

The modification will show the RED circle with twice the thickness of the blue making it easier to estimate distance at a glance. The BLUE are 50km markers and the RED are 100km markers.


#5

Howe can i get this circles in dump1090-mutability .


#6

HOW TO GET ALTERNATING BLUE/RED CIRCLES IN DUMP1090-MUTABILITY?
Open console and follow these steps:



cd /usr/share/dump1090-mutability/
dir
#you will see following:
config-template  html


STEP-1: Make a new directory orig-html and copy original files of html directory into new directory orig-html
In case you want to revert back, you can copy back these original files to html.



cd /usr/share/dump1090-mutability/
sudo mkdir orig-html
sudo cp /usr/share/dump1090-mutability/html/*.* /usr/share/dump1090-mutability/orig-html/

#check that files have been successfully copied in new directory orig-html:

dir /usr/share/dump1090-mutability/orig-html/

#This will be displayed:
config.js  gmap.html  planeObject.js  script.js  spinny.gif  style.css


STEP-2: Now EDIT the file “config.js” in the folder html:



cd /usr/share/dump1090-mutability/html
sudo nano config.js


This will open file config.js for editing in terminal.
Make changes shown in red.

// --------------------------------------------------------
//
// This file is to configure the configurable settings.
// Load this file before script.js file at gmap.html.
//
// --------------------------------------------------------

// – Output Settings -------------------------------------
// Show metric values
// This controls the units used in the plane table,
// and whether metric or imperial units are shown first
// in the detailed plane info.
Metric = false; // true or false

// – Map settings ----------------------------------------
// These settings are overridden by any position information
// provided by dump1090 itself. All positions are in decimal
// degrees.

// Default center of the map.
DefaultCenterLat = 45.0;
DefaultCenterLon = 9.0;
// The google maps zoom level, 0 - 16, lower is further out
DefaultZoomLvl = 7;

SiteShow = true; // true to show a center marker
SiteLat = xx.xxxx; //your Latitude position of the marker
SiteLon = yy.yyyy; //your Longitude
SiteName = “My Radar Site”; // tooltip of the marker

// – Marker settings -------------------------------------
// The default marker color
MarkerColor = “rgb(127, 127, 127)”;
SelectedColor = “rgb(225, 225, 225)”;
StaleColor = “rgb(190, 190, 190)”;

SiteCircles = true; // true to show circles (only shown if the center marker is$
// In nautical miles or km (depending settings value ‘Metric’)
SiteCirclesDistances = new Array(50,100,150,200,250,300);

// Show the clocks at the top of the righthand pane? You can disable the clocks$
ShowClocks = true;

// Controls page title, righthand pane when nothing is selected
PageName = “DUMP1090”;

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

STEP-3: Now modify file script.js in folder html



cd /usr/share/dump1090-mutability/html
sudo nano script.js


This will open file script.js for editing.
Now press “Ctrl+w” then type “function drawCircle” and press Enter.
The cursor will move to "function drawCircle"
Following code will be displayed. Make changes as shown in red:

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;

if (!(!isNaN(parseFloat(distance)) && isFinite(distance)) || distance <$
return false;
}
}

distance *= 1000.0;
if (!Metric) {
distance *= 1.852;
}

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: GoogleMap,
radius: distance, // In meters
fillOpacity: 0.0,
strokeColor: circleColor,
strokeWeight: 2,
strokeOpacity: 0.3
});
circle.bindTo(‘center’, marker, ‘position’);
}

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

now run the web interface and you will see colored circles.
[/FONT]


#7

dump1090-mutability: How to change the clock “Last Update” to show your “Local Time” on gmap.html page.

Step-1: Open script.js for Editing



cd /usr/share/dump1090-mutability/html
sudo nano script.js


This will open in nano, the file script.js for editing.

**Step-2: Press Ctrl+w and type the search keyword getUTC, and press Enter. **
The cursor will jump to first getUTC in the following code:

  • if (ReceiverClock) {*
  • var rcv = new Date(now * 1000);*
  • ReceiverClock.render(rcv.getUTCHours(),rcv.getUTCMinutes(),rcv.getUTCSeconds());*
  • }*

comment out these 4 lines of code (i.e. type // at the start of each line) . It will look like following:

  • // if (ReceiverClock) {*
    // var rcv = new Date(now * 1000);
    ***//*ReceiverClock.render(rcv.getUTCHours(),rcv.getUTCMinutes(),rcv.getUTCSeconds());
    // }

**STEP-3: Press Ctrl+w and type keyword ticking and press Enter. **
[FONT=arial]Cursor will jump to word ticking of following code:

  • // disable ticking on the receiver clock, we will update it ourselves*

  • ReceiverClock.tick = (function(){})*
    comment out the 2nd line of code (i.e. type // at the start of the line) . It will look like following:

  • // disable ticking on the receiver clock, we will update it ourselves*

  • **//*ReceiverClock.tick = (function(){})

Step-4: Save the file (Ctrl+o) then exit (Ctrl+x).
Step-5: Reboot RPi. After RPi has rebooted, reload page gmap.html

To change the Title of top-right clock from “Last Update” to “Local Time”:
Step 1: Open gmap.html to edit.



cd /usr/share/dump1090-mutability/html
sudo nano gmap.html


This will open in nano, the file gmap.html for editing.

**Step-2: Press Ctrl+w and type keyword Last Update, and press Enter. **
The cursor will jump to the following line:

  •    <td align="center">Last Update</td>*
    

Change Last Update to Local Time.

The line in gmap.html will become:

  •    <td align="center">Local Time</td>*
    

Now save (Ctrl+o) and exit (Ctrl+x). Reload gmap.html web page.


#8

Thanks for the awesome HOWTO! It worked perfectly for me.

I’d like to suggest one addition for those of us in places with relatively low plane traffic – resetting the default map center to our location (the same as the site location). This solves the (slightly annoying) thing where the map defaults to Italy whenever we pull up an empty map.

In config.js:
*
// – Map settings ----------------------------------------
// The Latitude and Longitude in decimal format
CONST_CENTERLAT =** xx.xxxx**; // your latitude
CONST_CENTERLON = yy.yyyy; // your longitude
// The google maps zoom level, 0 - 16, lower is further out
CONST_ZOOMLVL =** 6**; // set lower default zoom to see your distance rings*

* // -- Site Settings --------------------------------------- SiteShow = **true**; // true or false // The Latitude and Longitude in decimal format SiteLat = **CONST_CENTERLAT**; // Re-use the location you set above SiteLon = **CONST_CENTERLON**; // Re-use the location you set above

#9

This is great stuff especially for those like me that are really rusty with there Linux skills. I wish we could sticky and unify a couple of top favorite modifications like this so they don’t get buried. Thanks for the hard work in putting this post together. Now I just need to find some time to add some of these great mods to mine.


#10

Thanks for any help. :smiley:
I really appreciate it.

Now I gotit to what I want.
Iam completely green on Linux and Raspberry Pi.

// Johan


#11

Thank! This trick working fine at modified dump1090 utility which is forked by FR24 from Malcolm Robb’s branch.


#12

Is it possible for the developers to add this to the PiAware distribution directly and add a toggle on our home pages to turn it off and on just like the other commands we can send to the PiAware ?


#13

I did all of this and when I load the local ip:8080 page the map portion is blank. I triple checked that I didn’t mistype something. Any thoughts?

When I copy the orig-html/config.js and script.js the page comes right back.

Feeder Type: PiAware (SD Card) 2.1-2


#14

As someone that has dabbled with Javascript development, my guess is that some small error was present in what you changed, and so the code refused to run. On Firefox, I use a plugin called ‘Firebug’ that helps to diagnose problems. You might want to try that – or, if you would like me to test it for you, send me the scripts and I’ll try them on my RPi (or I could send you my own). I use the ‘regular’ dump1090 – not the ‘mutability’ version. I have other changes in my code that you may or may not be interested in…


#15

Thanks for the offer, I retyped everything and now it works. I do remember now that when I first started typing in nano last night, I might have hit some CTRL or something key combo by accident, maybe that added something I just wasn’t see. Clearly my fault, now working.

Thanks again.


#16

I know this is a bit of an old thread but I just got this done, setting concentric rings from 25 miles to 275 miles. Easy edits. :mrgreen:


#17

Rather than hard code the colors for specific distances, I started by adding this to the top of script.js:


var circleColor = "#FF0000";

Then, in the drawCircle function, I flip the colors every time a new circle is drawn… (In retrospect I could just xor the value with #FF00FF)


 if (circleColor=="#0000FF") {
        circleColor="#FF0000";
    } else {
        circleColor="#0000FF";
    }

And then set the circle color in the “new google.maps.Circle” command


 strokeColor: circleColor,

Full code is on github https://github.com/RobAltenburg/dump1090/blob/master/public_html/script.js


#18

I appreciate this is an old thread but I’m trying to add the coloured circles and I’m running into difficulties.

I’m running the latest ADS-B Receiver Project install but I’ve overwritten the mutability map with the original map using the instructions here.

However, when I edit the script.js file and do the search for “function drawCircle”, that doesn’t appear in the file at all.

Which is odd. I do have the default three circles in black.

If I go back to the original files I copied out before changing the map from the mutability version and look at script.js, “function drawCircle” doesn’t appear there either.

So it looks as though the format of these files has changed - Perhaps this was when things changed from Google maps to OpenStreetMap.

Is there another method to get the radial rings on the map please? I’m rusty (but learning) when it comes to Linux so I will need a little hand-holding.

Thanks,

Keith.


#19

my settings are located here
/usr/share/dump1090-mutability/html/config.js

SiteCircles = true; // true to show circles (only shown if the center marker is shown)
// In nautical miles or km (depending settings value ‘Metric’)
SiteCirclesDistances = new Array(100,150,200,225,250);

// Show the clocks at the top of the righthand pane? You can disable the clocks if you want here
ShowClocks = true;

Colours are the same(not alternating, but it shouldn’t be too difficult to change)


#20

Thanks Jon - Those settings were OK to find, no problem there. It was changing the actual range ring colours I was having problems with. I found some more instructions over on the Fr24 forums which give slightly different details. The format of script.js wasn’t quite the same but it’s worked perfectly well now.