Customizing aircraft icons in PiAware3

FlightAware ADS-B Flight Tracking
1

Hi,
I have been looking at how the icons are drawn in PiAware3 with the view to see if I can customize them (I am a bit OCD and all the “Heavies” having four engines bugs me a wee bit :smiley: ).

This is what I have found. The files used are found in /usr/share/dump1090-fa/html. There seem to me two main files involved, the first is the markers.js file which is responsible for the design and classification of the actual icons, and the second is planeObject.js

In the planeObject.js file there are a number of categories assigned to aircraft type:

[size=85]PlaneObject.prototype.getMarkerIconType = function() {
var lookup = {
‘A1’ : ‘light’,
‘A2’ : ‘medium’,
‘A3’ : ‘medium’,
‘A5’ : ‘heavy’,
‘A7’ : ‘rotorcraft’

These terms light, medium etc are used in the markers.js file to define which icon is used:

var MarkerIcons = {
generic : {
scale : 0.4,
size : [64, 64],
anchor : [32, 32],
path : _generic_plane_svg
},

    light : {
            scale : 0.4,
            size : [64, 64],
            anchor : [32, 25],
            path : _beechcraft_svg
    },

    medium : {
            scale : 0.4,
            size : [64, 64],
            anchor : [32, 32],
            path : _generic_plane_svg
    },

etc

Each of the paths seems to refer to the actual SVG data in the markers.js file, for example:

// 64x49
var _beechcraft_svg =
"m 31.9375,0.21875 c -0.06777,0.0107988 -0.115451,0.0391469 -0.15625,0.0625 C 31.672725,0.37187346 31.571656,0.508205 31.5,0.625 c -0.03614,0.0602071 -0.06208,0.095702 -0.09375,0.15625 -0.07403,0.15902301 -0.135583,0.3268225 -0.1875,0.5 -0.04551,0.1172902 -0.09299,0.229501 -0.125,0.34375 C 31.061962,1.7428305 31.051772,1.8837099 31.03125,2 31.013723,2.1172825 31.001884,2.2232944 31,2.34375 etc…

Two things I can’t figure out.

What is the correct SVG format to used? I have copied the data out of a SVG file and used that but it doesn’t draw the icon (tried all sorts of variations, sizes etc).

Second what defines if a given aircraft is a A1 or A2 etc which defines which icon it will use.

Hope this makes sense![/size]

2

Heavies are heavies. Unless you get the actual A/C info, you can’t tell a 777 from 747 or A380.

From rtl1090.web99.de/homepage/index. … 02%20(0-44&dm=rtl1090&USER=rtl1090&goto=1&XURL=rtl1090&WB=1&EXTRAX=X&PIDX=104415
Here is a list
A- = Unspecified powered aircraft
A1 = Light (< 15 500 lbs.)
A2 = Small (15 500 to 75 000 lbs.)
A3 = Large (75 000 to 300 000 lbs.)
A4 = High Vortex Large(aircraft such as B-757)
A5 = Heavy (> 300 000 lbs.)
A6 = High Performance ( > 5 g acceleration and > 400kts)
A7 = Rotorcraft
B- = Unspecified unpowered aircraft or UAV or spacecraft
B1 = Glider/sailplane
B2 = Lighter-than-Air
B3 = Parachutist/Skydiver
B4 = Ultralight/hang-glider/paraglider
B5 = Reserved
B6 = Unmanned Aerial Vehicle
B7 = Space/Trans-atmospheric vehicle
C- = Unspecified ground installation or vehicle
C1 = Surface Vehicle - Emergency Vehicle
C2 = Surface Vehicle - Service Vehicle
C3 = Fixed Ground or Tethered Obstruction

I think I saw one website that had a unique Icon for Gliders.
Vehicles would be nice as I an often see ground traffic for EWR, LGA and JFK.
I wonder if the DC Tethered balloon shows up?

3

Hi jonhawkes2030

Thanks for that, exactly what I was looking for, confirms I can’t fix my four engined 777’s though.

4

Take a look at svgPathToSvg in markers.js, that is what constructs the full svg from the svg path plus some parameters from the caller.

If you wanted to do something more complex than sticking it in a element then you could, that code is just a simple port from the older google maps stuff which only supported markers defined as a path.
It is called from PlaneObject.updateIcon which looks up the path to use from MarkerIcons.

5

OK that gave me enough info to sort out basically how to drive it. The following test created a box icon:

var _twin_svg =
“M 0,0 0,64 64,64 64,0 z”;

If only the data in the SVG files I had worked without editing!

Will figure this out…

6

And then there is the issue where in my area the vast majority of aircraft are falling under generic.

I could be wasting my time.

7

This is very common, I’d say that 80% of aircraft report A0.

8

i think to get very specific aircraft images, you are going to need a local database. I do exactly that with fast jets etc by classifying aircraft in a mySql database and querying that for the image https://dl.dropboxusercontent.com/u/12973352/refuel.jpg ← not the best image as the Osprey probably ought not be a helicopter, but illustrates the ‘hercules’

9

That’s fantastic! Shouldn’t be too hard to get a reasonable DB, the data seems to be out there… In this region there are regular so could probably create something a bit customized for the majority.

There are also a couple of Hercs and P3s I am picking up regularly doing the rounds.

10

Does anyone know what the source of the Ax designation is? Does it come from DUMP1090 or is it the airframes lookup or something else?

11

It is decoded by dump1090 from the “Aircraft Identification and Category” extended squitter ADS-B message.

12

Great thanks, I am hatching a plan to hijack that part of the code to lookup the aircraft type vs ICAO24 address. Will probably work OK down here most of the time as there are only a limited number of aircraft in this region.

13

The static json db is set up to be fairly extendable, if you wanted to stash extra data in there and then use it when available to pick a more precise icon that should be relatively easy to do.

14

I figured out that if I change the section that matches the classification with aircraft type in the planObject.js file to lookup the ICAO instead of classification, I can add to the options there and match ICAO to a list of options in the file (beyond the original ones):

PlaneObject.prototype.getMarkerIconType = function() {
var lookup = {
‘3a2641’ : ‘small_twin_jet’,
‘75823d’ : ‘small_twin_jet’,
‘7c6b0b’ : ‘small_twin_jet’,
‘7c6b0d’ : ‘small_twin_jet’, etc etc
};

    if (this.icao === null || !(this.icao in lookup))
            return 'generic'
    else
            return lookup[this.icao];

}

Then I can add aircraft types to the markers.js, next up are some custom graphics…

Unfortunately, I am still learning JavaScript, it would be better if I could get the above to reference anther file, I lack the expertise to utilise the existing JSON DB files. There are a limited number of aircraft in the area, so far my text “DB” has about 160 entries.

15

Not looking too shabby:
https://dl.dropboxusercontent.com/u/50785283/Screenshot2016-08-24.jpg

16

Can you share a recent screenshot so I can see how this progressed? Exciting!

17

Mine is here (although not too much variety in the air at the moment)
https://allan.kissack.co.uk/public/latest-ac-view.png

18

Looks awesome! Is there anyway to test my code updates without pushing to my Rasp Pi? I’d hate to waste time uploading frequently.

19

Do you mean something like the image test page?

I think you’d still need to upload some files unless you run a local webserver (and id you did, testing should be fine locally)