FlightAware Discussions

Skyview - customize data presentation

I’ve added a horizon marker for 40,000 feet and an extra range ring. See this post for generating the panorama (but use the URL https://www.heywhatsthat.com/?refraction=1 and enter 0.25 for the refraction) and this post for how to get the JSON data.

In the file script.js search for “terrain” and you can edit the colour and thickness of the terrain rings. I use blue and 2 pixels which you can see in the screenshot on that second link.

    var ringStyle = new ol.style.Style({
            fill: null,
            stroke: new ol.style.Stroke({
                    color: '#0000ff',
                    width: 2
            })
    });

In the file config.js I added a 250 range ring.

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

This is great, I’m enjoying playing with it. One annoyance – I have an Apple “magic mouse” which is really twitchy and sensitive on, eg, Google Maps. On standard Skyview it’s fine, very smooth. But using these map replacements once again it’s very twitchy, to the point of being unusable. Any idea what causes that and what’s different about this config versus the standard config which could cause this annoying Apple problem to once again surface?

If you want dashed-line Terrain-Ring instead of solid-line Terrain-Ring:

In file /usr/share/dump1090-fa/html/script.js, go to line starting with "var ringStyle" and add a new line as shown below

                var ringStyle = new ol.style.Style({
                        fill: null,
                        stroke: new ol.style.Stroke({
                                color: '#0000ff',
                                // add line below for dashed terrain ring
                                lineDash:[4,4],
                                width: 1
                        })
                });

.
.

If you want dashed-line Site-Circles instead of solid-line Site-Circles:

In file /usr/share/dump1090-fa/html/script.js, go to line starting with "var circleStyle" and add a new line as shown below

    var circleStyle = function(distance) {
        return new ol.style.Style({
            fill: null,
            stroke: new ol.style.Stroke({
                    color: '#000000',
                    // add line below for dashed site circle
                    lineDash: [4, 4],   
                    width: 1
            }),


Recommendation

Personally I feel “Terrain Ring with dashed-line + Site Circle with default solid lines” looks better than everything dashed-line OR everything solid-line.

.

4 Likes

A handy tweak, thanks. I had the terrain ring as blue and 2px wide to help it stand out. Making it dashed and reducing back to 1px has a nicer effect, easier on the eyes.

In case anyone cares, I was able to tweak the aircraft data tags to reflect the format I was after. The goal is to teach children about aviation during Aviation Camp and present the live data during a Young Eagles event

What worked for me:
snippet from /usr/share/dump1090-fa/planeObject.js

// LINE ONE - Airline flight information if known (BAW291), otherwise aircraft registration (N1234W)
          labelText = (this.flight ? this.flight : this.registration);

// LINE TWO - Transponder squawk, ---- if unknown
          labelText = labelText + '\n' + (this.squawk ? this.squawk : '----');

           if (this.selected && !SelectedAllPlanes ) {
                    this.labelColour = '#ffff00' //this.labelColour = 'yellow' changed for semi transparency                            
              } else {
                    this.labelColour = '#ffffff' //this.labelColour = 'white'
              }

// LINE THREE - Aircraft altitude in hundreds (flight level) with trend indication (climb/descend/level), and aircraft speed
             labelText = labelText + '\n['+(this.fl ? this.fl : '?')+v+']';
             labelText = labelText + ' '+(this.speed ? this.speed : '--');

// LINE FOUR - Additional aircraft data (Boeing 737NG)
             if (ShowAdditionalData) {
                       labelText = labelText + '\n'+ this.ac_aircraft;
              }

Really appreciate all the assistance, especially the pointer to OL3.

2 Likes

Working on where registrations.js gets it’s data from, if anyone has a pointer…

I just wanted to share my customizations. These were thanks to abcd567 ideas.

My goal was to make my distance rings more readable when viewing them in satellite mode. For that, I added a second set of rings slightly offset from the first. A white ring/text for the background then a black dashed ring/text for the foreground.

The second thing I did was to color terrain rings the appropriate color based on altitude.

These are definitely hacks :slight_smile:

To handle the “upinthehair” terrain ring coloring, this is what my code looks like in script.js

    // kick off an ajax request that will add the rings when it's done
    var request = $.ajax({ url: 'upintheair.json',
                           timeout: 5000,
                           cache: true,
                           dataType: 'json' });
    request.done(function(data) {
            var ringStyle = [new ol.style.Style({
                    fill: null,
                    stroke: new ol.style.Stroke({
                            color: '#12E374',
			lineDash:[4,4],
                            width: 2
                    })
            }),new ol.style.Style({
                    fill: null,
                    stroke: new ol.style.Stroke({
                            color: '#0000ff',
			lineDash:[4,4],
                            width: 2
                    })
            }),new ol.style.Style({
                    fill: null,
                    stroke: new ol.style.Stroke({
                            color: '#ff00ff',
			lineDash:[4,4],
                            width: 2
                    })
            })
	];

            for (var i = 0; i < data.rings.length; ++i) {
                    var geom = new ol.geom.LineString();
                    var points = data.rings[i].points;
                    if (points.length > 0) {
                            for (var j = 0; j < points.length; ++j) {
                                    geom.appendCoordinate([ points[j][1], points[j][0] ]);
                            }
                            geom.appendCoordinate([ points[0][1], points[0][0] ]);
                            geom.transform('EPSG:4326', 'EPSG:3857');

                            var feature = new ol.Feature(geom);
                            //Only Supports 3 rings! If you change the number of rings, change this line as well as the styles above
                            feature.setStyle(ringStyle[i]);
                            StaticFeatures.push(feature);
                    }
            }
    });

To handle the white background and black rings, this is what my code looks like in script.js

function createSiteCircleFeatures() {
    // Clear existing circles first
    SiteCircleFeatures.forEach(function(circleFeature) {
    StaticFeatures.remove(circleFeature); 
    });
   SiteCircleFeatures.clear();
// Draw a white background behind distance circles and text
var circleStyleWhite = function(distance) {
	return new ol.style.Style({
        fill: null,
        stroke: new ol.style.Stroke({
                color: '#ffffff',
                width: 2
        }),
        text: new ol.style.Text({
        	font: 'bold 10px Helvetica Neue, sans-serif',
        	fill: new ol.style.Fill({ color: '#ffffff' }),
			offsetY: -8,
			offsetX: 1,
			text: format_distance_long(distance, DisplayUnits, 0)

		})
	});
};
var circleStyle = function(distance) {
	return new ol.style.Style({
        fill: null,
        stroke: new ol.style.Stroke({
                color: '#000000',
	    lineDash:[4,4],
                width: 1
        }),
        text: new ol.style.Text({
        	font: '10px Helvetica Neue, sans-serif',
        	fill: new ol.style.Fill({ color: '#000' }),
			offsetY: -8,
			text: format_distance_long(distance, DisplayUnits, 0)

		})
	});
};

var conversionFactor = 1000.0;
If (DisplayUnits === "nautical") {
    conversionFactor = 1852.0;
  } else if (DisplayUnits === "imperial") {
    conversionFactor = 1609.0;
  }

  for (var i=0; i < SiteCirclesDistances.length; ++i) {
        var distance = SiteCirclesDistances[i] * conversionFactor;
        var circle = make_geodesic_circle(SitePosition, distance, 360);
        circle.transform('EPSG:4326', 'EPSG:3857');
        //white
    var featureWhite = new ol.Feature(circle);
        featureWhite.setStyle(circleStyleWhite(distance));
        StaticFeatures.push(featureWhite);
        SiteCircleFeatures.push(featureWhite);
        //black
    var feature = new ol.Feature(circle);
        feature.setStyle(circleStyle(distance));
        StaticFeatures.push(feature);
        SiteCircleFeatures.push(feature);
  }
}
2 Likes

I got 404 Not Found from https://mapzen.com/developers/

I assume one has to sign up with Bing maps to get the keys.

Geoff

@send2gl

because they shut-down
https://mapzen.com/blog/shutdown/

1 Like

Ah, so that map option is defunct now then :roll_eyes:

Geoff

Silly question, I love the naming of your distance rings. Where do I put that code?

script.js can be found in the folder

/usr/share/dump1090-fa/html

Reinstalling dump1090-fa will overwrite the files in this folder with originals in case you screw it up.

1 Like

.

An alternative to reinstall:

First create a backup copy of file you are going to edit

cd  /usr/share/dump1090-fa/html/
sudo cp script.js  script.js.orig

Now edit the file

sudo nano script.js

.
If you screw up the file, replace it with a fresh copy from backup

cd  /usr/share/dump1090-fa/html/

#Delete screwed up file
sudo rm script.js

#Create a fresh copy from backup
sudo cp script.js.orig  script.js
1 Like

Planefinder2

On my old setup I could see my polar chart, how do I get this back, I am using version 3.6.3 dump1090-fa, I’m sure it will be something very simple that I have forgotten to do

That looks the coverage map of virtual radar server? At least vrs has the ability to create such a map, but you’ll have to install and configure it to read your feeders output.

It is also possible to create a coverage map directly in Skyview, I think it is included in the customisations @alkissack developed. You’ll have to edit some files and add/copy code.

1 Like

If you are also feeding Planefinder there is one located at http://pi:30053/

EDIT: and click on the P button at the top left to toggle Polar Range Chart

1 Like

Is there a way to turn on the history tracks for aircraft? I thought I found settings for it, but I’m still not seeing them. The old UI had a button to toggle the track lines. I don’t see a settings button on this new UI. Am I missing something?

Which UI do you have now? There should be a “show all tracks” button in the top right.

There was that button on the UI that came with PiAware. I switched to the one that’s being talked about in this thread (https://github.com/alkissack/Dump1090-OpenLayers3-html).

It appears there is one option for showing the track for the selected aircraft, then there is a button to select all aircraft, which essentially gives me what I was looking for.

Someone asked for help in this thread.

I installed Al Kissack’s web files and it works for me, but I have a question.

How/where do you change the settings so the aircraft are colored by altitude. I read the instructions on Al’s Github, but I wasn’t able to understand what to change. I found the reference to AK9C to be rather cryptic. I found that section in planeObjects.js, but didn’t know what to change.

Thanks!