Web Front-End

Having put together the full set of server-side processing software, the finishing touch for the Plane/Sailing project is the web interface by which the data is displayed to the end user.

Luckily, I had already done most of the hard work in UMID1090, the predecessor to this project:

UMID1090 Interface UMID1090 Interface

For Plane/Sailing, I decided to drop some of the more complex options for configuring the software, and instead go for a full-screen map with only a few options hidden inside pop-out panels. I used the dark map background, blue highlights and Exo font from my Career Explorer to give it a more futuristic feel. It’s not just an unnecessary military interface, it’s an unnecessary Hollywood military interface.

Version 1 provided a more limited set of options and no track table:

Plane/Sailing v1 Interface Plane/Sailing v1

Version 2 re-added UMID1090’s track table, and brought across a few extra configuration options, along with the major rewrite in order to have it communicate with a dedicated back-end Plane/Sailing server rather than directly accessing data within Dump1090 and AIS Dispatcher.

Plane/Sailing v2 Interface Plane/Sailing v2

Subsequent minor versions have improved the UI and added more features, such as selectable background layers and overlays, classifying targets, and accessing server telemetry.

Plane/Sailing v2.1 Interface Plane/Sailing v2.1

Plane/Sailing v2.3 Interface Plane/Sailing v2.3

Source code is available on Github and is in the public domain.

I host the front-end using GitHub Pages, as it’s an easy way to make it available given that the software is already hosted there. If you’re replicating this build for yourself, you can of course do the same, or alternatively it could be hosted from the same Raspberry Pi that runs the rest of the software if you prefer.

Comments

Hi, I wanna ask about changing icon of spesific MMSI number ship. How could I do that? For example there is a ship MMSI is 123456789 and I just wanna change that ship’s icon. Thanks for now for help. Also there are some kinda question about client side maybe I can open PR after some changes so I would be appreciate for your helps.

Hi Rowanda,

The server component of Plane/Sailing maintains a list of MMSIs for vessels that get special symbols based on what I know about them. This overrides the symbol that might be automatically generated based on their AIS type codes.

If you would like to give your vessel a particular symbol, just add it in the data/ship_mmsi_to_symbol.csv file in your Plane/Sailing server install, and restart the server.

Plane/Sailing supports most of the MILSTD 2525C tactical symbols set. If you want to play around with the symbols, the easiest way is to use this Unit Symbol Generator which is based on the same library used by Plane/Sailing.

I’m always happy to help and to receive pull requests! :)

Add a Comment