Skyview - customize data presentation

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 Mapzen Shutdown :( · Mapzen

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 (GitHub - alkissack/Dump1090-OpenLayers3-html: Modifications to the OL3 html files (part of the dump1090-fa branch)).

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!

Hi

I wonder if someone can help me

I have renamed my /usr/share/dump1090-fa/html folder

I have copied the files from Alkissacks Dump1090 OpenLayers public_html folder into /usr/share/dump1090-fa/html

I have then cleared my browser cache (many times) but I still dont see any of the UK Airspace options

I still see the US options

Any ideas what I might be doing wrong

I’m running PiAware 6.1

Thanks

Graham

Hi

All sorted now - was copying files to the wrong directory

Copied them into /usr/share/skyaware/html folder and all worked

Graham