Skyview - customize data presentation


#1

Looking for pointers to modify Skyview’s presentation of data…

For a Young Eagles event I would like to show only the pilots flying YEs, and display a data tag (similar to ATC radar) for each plane with their YE callsign, and maybe path.

piaware seems like a good starting point, but perhaps something else would be better/easier

I don’t even know where to start… very familiar with Raspi, lighttpd, mysql, etc but I don’t know how the pieces are glued together. Anybody have a pointer to get me started? Happy to share if I can make it work, and there’s further interest.


#2

hi

if you need something like this

modified%20skyview

there is more info at [https://github.com/alkissack/Dump1090-OpenLayers3-html]

HTH

Evangel


#3

Awesome suggestion, this will likely do most of what I wanted to accomplish. Confirmed I’m running dump1090-fa but don’t find public-html (or public_html) referenced in dump1090-fa and Dump1090-OpenLayers3-html.

dump1090-fa:
_ Installed: 3.5.3_
_ Candidate: 3.5.3_
_ Version table:_
_ *** 3.5.3 0_
_ 500 http://flightaware.com/adsb/piaware/files/packages/ jessie/piaware armhf Packages_
_ 100 /var/lib/dpkg/status_

/var/www/html# ls
index.html index.js index.lighttpd.html lib logo.gif translations

What am i missing?

Brand new SD image of latest piaware, which is working as expected.

Should I expect to find the html files in /var/www/html?

Is OL3 not part of base dump1090-fa, and requires I do something prior?


#4

ok, what works for me:

dump1090-fa web server ‘lives’ in /usr/share/dump1090-fa/html

just rename it, say, html-original

then create a new folder /html and copy there, the contents from the OpenLayers…zip file.

next edit usr/share/dump1090-fa/html/config.js to match your site location (Lat,Long).

refresh your browser under Windows/Linux and the ‘new’ Skyview will display the changes.

this solution is for installation via Joe Prochazka’s scripts for rasbian/debian/ubuntu installations

but works ok with FA SD card images.

OL3 modified by Al Kissack not part of base dump1090-fa.

Evangel

ED1 : and if you feel artistic and have extra time you may end-up with something like this :wink:
note top left corner display of mouse position coords in the map which I find really cool !

ED2: top right you see ‘Gain n/a’. this is my own attempt to display receiver gain and create
under it a Gain slider to change gain on-the-fly instead of editing the parameter file
all the time, but don’t have the knowledge to do it. maybe someone or Al can help ?

and the Options tab


#5

Thank you, shortly after my last post I found /usr/share/dump1090-fa, and you’ve confirmed what I suspected.

I don’t see how lighttpd links to /usr/share/dump1090-fa/html, doesn’t really matter other than it would have saved me some time.

So making progress… how do I turn off the blue tracks from site origin to aircraft? really clutters the map.

Perhaps lastly, where can I find more details about dump1090-fa database updates to lighttpd? And what’s the format of the json files in db directory?

Thank you so much for the help, I would have likely never got this far on my own.


#6

https://discussions.flightaware.com/t/one-pi-two-dongles-two-maps-two-receivers/33978/15
Go to STEP-3

/etc/lighttpd/conf-available/89-dump1090-fa.conf

.


#7

glad I could be of help

like I mentioned don’t know enough to help with technical stuff.
maybe user abcd567 ?

now top right on map click the blue button to display the options.
there at the bottom click the options ‘Range’ and ‘Range Plot’ .
the polar plot will continue in the background. you can also
select the OSM light map for more clarity.
if need more permanent solution not displaying range,
edit /usr/share/dump1090-fa/html/config.js
lines ShowMaxRange = true ; to false ; and
ShowSleafordRange = true ; to false ;
near the bottom of that file.

Evangel


#8

if you referring to the layers under .../html/layers in .geojson text format.
in ..../html/db in .json text format.


#9

Ok, got it, /etc/lighttpd/conf-enable/89-dump1090-fa.conf redirects / to /usr/share/dump1090-fa/html.
And /run/dump1090-fa are where all the dynamic database updates reside, mysteries solved.

Thank you


#10

Sorry for being ambiguous, I was looking for the data format inside the aircraft.json updates coming from dump1090-fa, at the time of asking I didn’t even know where they were located but now know they are in /run.


#11

Ahh, I hadn’t read all the way through your post and found ShowMaxRange as config.js option myself, that’s exactly what I wanted to accomplish. I would have saved myself some time had I paid attention.

A nice to have, where to change opacity of base maps… I know, I know, I help him out and he keeps asking for more. I’ve been through some of the CSS files but not being a web guy not sure where to look.

Again, thank you very much, with some minor tweaks this will do exactly what I wanted, and I learned a ton about piaware and what’s going on under the covers.


#12

I guess this could be of help https://www.w3schools.com/cssref/func_rgba.asp
then you can dig in the /html/script.js and/or /html/style.css

HTH


#13

That part I had figured out, just looking for where the appropriate CSS is referenced so I could change opacity. No worries.

I have figured out the aircraft db file formats… wondering how old the data is, my aircraft is not in the db yet been registered since 2012, some newer registrations are included.

I’m having fun poking around so really appreciate the pointers and suggestions


#14

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);

#15

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?


#16

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.

.


#17

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.


#18

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.


#19

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


#20

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);
  }
}