Bookmarklet: Adding ATC radio callsigns to flightradar24


I've recently spent some time using the website flightradar24, because it has some similarities to the system I'm designing for my A-level Computing project. It crowd-sources radar data from volunteers to provide a live map of all aircraft flying in the world, where they're from, where they're going, and plenty more.

flightradar24 screenshot

In viewing this website, I've fallen down the rabbit hole of aviation enthusiasm, and in my fascination as to how the air-traffic system can actually cope with so much going on, I've found myself spending hours on YouTube channels such as VASAviation, H89SA, and Daniel Mori. From here, I've seen that on ATC, aircraft use callsigns which may differ from their airline's actual name. One of the most famous being British airways using callsign SPEEDBIRD. They also add HEAVY to the end if they are big enough to cause a lot of turbulance, and SUPER if they are specifically an A380. So the 747 in the above screenshot would have callsign 'SPEEDBIRD 9-CHARLIE-GOLF HEAVY' when read out over the radio using the NATO phonetic alphabet. I've heard that some enthusiasts are interested in knowing these callsigns while watching a site like flightradar24, as it allows them to associate it with ATC radio that they might be listening into online.

Therefore, I have created a bookmarklet which adds this functionality to the flightradar24 website!

Using fr24.js

Your best option is to enable your bookmark bar, which can be done with Ctrl+Shift+B on Google Chrome, and then drag the following 'fr24.js' link into the bookmarks bar. Then:

  • Go to flightradar24
  • Click the bookmarklet
  • Now it will show up on any plane you click!

Here's the bookmarklet link: fr24.js*

Screenshot of fr24.js in use

Because I can't consider myself the master of all that is JavaScript, the system isn't perfect, and there are a few issues I'd like to fix

  • Doesn't currently cope with private planes using their registration as callsigns (to be fixed soon)
  • Currently the database may favour some old callsigns over the correct one (not too common, can be fixed case-by-case or by finding an up-to-date database)
  • Sometimes panics or gives the wrong callsign when fr24 is being supplied an unusual or incorrect callsign

But if you're just using it for general enthusiasm, it should be fine!

The technical side

This is one of those projects that I wrote fast for personal or close-circle use, and decided others might like it. As a result, the code is occasionally barbaric.

It first makes itself a nice new row in which it will later put the callsign. Then (and here's where the barbaric code comes in), it periodically checks the information in the black box below the aircraft's picture to determine the callsign. Sometimes that appears as the only thing in the box, as the large text (this can usually be determined by seeing if the third character is a letter). However with a lot of commercial planes, it appears next to it, in the slightly smaller format.

Then the system looks up the three-digit callsign on a list about 5000-long which currently resides within the .js file. It puts that into a string.

Then it takes the rest of the callsign (everything after those first three letters) and runs through it one character at a time, replacing the letters with their phonetic equivilents. It adds this to the final string.

It then checks the turbulance rating of the aircraft, also taken from an ICAO document. The list of aircraft codes considered 'heavies' are in the .js file (I am aware that some areas call the 757 'heavy' due to it's ususual wake turbulance given it's weight, but I've not included it currently). If it see's that the code of the aircraft (which is in the table that fr24 loads) is a heavy, it adds 'HEAVY' to the final string, but it first checks to see if it is specifically an A388 (in which case it would instead add 'SUPER').

It then puts this callsign into the table.

The bookmarklet simply adds a script element to the page and references the full script with an additional query of a random number for cache-busting (Avoiding your caching as well as my Cloudflare account by forcing it to grab the latest copy from my server under the white lie that the random number it's sending makes any difference).

I'm interested in hearing your comments on this small script. I'm still writing my blog (as in, writing the code that makes my blog work) so feel free to drop me a line on [email protected] and let me know if I can credit you on any subsequent post if you have a nice idea.

Joel Russell has no official ties with flightradar24.com and has created this script for the sake of it, and for a bit of fun.

Next post: Exploring Images in Posts with MarkdownExtra


Exploring Images in Posts with MarkdownExtra


I'm still finalising the CSS for my site, and particularly that which surrounds my blog posts. This is a bit of a test post to deal with images. Images on a blog like this will be a little bit of a challenge given that there are a couple of intricacies. They need to be linked, sized, and positioned. I think I'll tidy it up later, but for now essentially have two options: big spanning images, or smaller ones that the text wraps around.

Twitter cover

That, for instance, is my twitter cover photo, taken from my window. The styling is such that it is width: 75% on most screens, but width:100% on mobile (or any sub-600-css-pixels screen) because otherwise it looks too small. Markdown images are ![alt text](link "optional title") but you should be able to put {.class} after that and, for example, tell it to be a smaller image for the text to wrap around.

My mugshot Here is an example of that. I've added {.l} to left-align it with some floaty stuff. Here's some lipsum for filler. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

My mugshot And here's a new paragraph. The wrap still works, and we have a similar right-floated image. Some more lipsum: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Last post: Bookmarklet: Adding ATC radio callsigns to flightradar24

Next post: Styling all of the features of MarkdownExtra


Styling all of the features of MarkdownExtra


This is my first post, and I'm also using whilst I style the various things that could come up.

Essentially, I throw MarkdownExtra-formatted blogposts on my server with some extra metadata in a JSON, and it sorts it all out for me.

You can view the MarkdownExtra source for this post here.

Start a line with between one and six #s to make headers

This is header 1

This is h2

This is h3

This is h4

This is h5
This is h6

Here's a nice long paragraph. (the rest of this paragraph is copy-pasted)The public API of PHP Markdown consist of the two parser classes Markdown and MarkdownExtra, their constructors, the transform and defaultTransform functions and their configuration variables. The public API is stable for a given major version number. It might get additions when the minor version number increments.

Wasn't that boring interesting. (for that strikethrough, i actually used the html <s>boring</s>, which you can do with MarkdownExtra, but it does try to clean it up a bit).

An example link.

Email-style angle brackets are used for blockquotes.

And, they can be nested.

Headers in blockquotes

  • You can quote a list.
  • Etc.

<code> spans are delimited by backticks.

You can include literal backticks like `this`.

can ` i * escape \ these?

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

code tag with no other text

This is a normal paragraph.

It also makes <abbr> tags. Essentially you can put a glossary-of-sorts at the top of the file, and whenever it sees a glossary-defined item like PHP, it calls up the tag.

This is a preformatted
code block
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

...and now, some CSS in a highlighted code block (thanks to highlight.js)

article p code {
    border-left:1px solid #0085ca;
    border-radius:2px;
    padding:0 0.25em;
}

article pre {
    padding:0.5em;
    box-sizing:border-box;
    border:1px solid #0085ca;
    border-left:0.5em solid #0085ca; /*test*/
    border-top-right-radius:0.5em;
    border-bottom-right-radius:0.5em;
    width:100%;
    white-space: pre-wrap;

}

Line break. Can be done a number of ways, such as ---

Put four spaces at the end of this line
and it breaks in this line, without a separate <p> tag

Last post: Exploring Images in Posts with MarkdownExtra