Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Flight Instruments in Snap SVG and JavaScript (csb.app)
149 points by duncanmeech on May 11, 2020 | hide | past | favorite | 35 comments

I wrote these a while ago with some intention of creating flight training tools. I'm making them available to all the other programmer / pilots out there who might find them useful. https://codesandbox.io/s/six-pack-flight-instruments-fl7b8

This is one of those things that "someone must have already done, it must be out there." Thank you for being that person.

Those type of awesome contributions are what drives humanity ahead :)

This is really nice - you know what it inspires me to do: make a synthesiser interface with the same tech/look and feel. Do you have a repo link where I might contribute something in that regard?

Wired up to MIDI, this could be the basis of a very nice set of synth visualisation tools ..

Originally, the code was in this repo but its a full nodejs / express app. https://bitbucket.org/duncanmeech/flying/src/master/ Just the frontend part can be found here...https://codesandbox.io/s/six-pack-flight-instruments-fl7b8

Sweet, thanks for sharing!

Nice! These would be great as web components :)

Hey, they look great & realistic!

Possible issue with the Altimeter. I'm not sure if this was meant as an accurate simulation, or just a technical demonstration of what is possible with the component, but I've noticed that the Altimeter pressure setting (small window) is changing on its own as the altitude hand sweeps around.

That never happens, the altimeter setting is a fixed setting set by the pilot used to calibrate the altimeter readout to be relative to a known/shared pressure setting.

Looks like the site is demoing the altimeter reading changing as the setting is changed. Note the altitude is changing properly with respect to altimeter setting.

Correct! If you play with the source on codesandbox you can disable the demo mode and actually rotate the Kollsman window using the BARO button. The calculations for pressure and resulting altitude are from standard physics texts.

Imagine the next jumbo jet using avionics rendered on Electron.

I could have done without that thought thank you.

* your plane crashes because the avionics computer OOM’s because you’re running chrome

* your plane crashes because JS decides that the pitch angle is suddenly NaN and plows the plane into the ground.

* your plane won’t take off, because there’s been yet another NPM dependency breakage because someone got annoyed and removed their single line “right pad” package, which causes the avionics to break because some dependency 400 layers down the tree used it to align an ad that displays on the command line at startup

* the plane crashes because in an emergency the pilots couldn’t find the instrumentation they were looking for, because the UI was updated for the 15th time that month and that disk has been removed “because A/B testing showed nobody clicked on it”.

* the plane crashes because there was an undiscovered bug in an important library whose sole maintainer is currently in a penal colony.

Oddly specific

If you are out-of-the-loop, it’s a reference to this:


Associated HN thread:


* the plane crashes because its not connected to the internet and the auto pilot cannot get a gps route via the google maps directions api

I remember seeing some stuff about ultralights using an iPad app for flight instruments. That was scary enough.

The truth is, for VFR flight you do not really need instruments. Pitch and Power, that's where it is ;)

Presumably that's for planes that aren't legally required to carry said instruments?

> > ultralights

Marking this to reference it in a couple of years or decades, when it probably has become a laughable understatement instead of a sarcastic exaggeration.

This could be a game where you have to fly a plane, looking only at the instruments (this kind of training exists for real pilots).

Also check out Project Magenta for MS FSX and Pr3par3d pro flight controls (FMC, etc.):


It's commercial software, but there's free demo versions of the controls, and a personal license is 600 euros, which is a good deal if it does what you want.

Looks great. I have have a mind to make a VOR + map combo sometime, but I haven't mustered the effort yet.

Very nice work! Unfortunately it appears Snap.svg has been sunsetted and has not been updated for a few years.

Too bad, was only a thin wrapper at best though. Maybe time for a new open source SVG library.

d3 would be the obvious choice to me. I have only taken a cursory look at your code but strikes me that it could be fairly straight forward to rewrite it using d3.

d3 is just a low-level combination of HTML, CSS, JS and SVG. It's seldom obvious how anything is easy to do "using d3," unless manipulating a table of data.

Essentially, if you're a raw d3 programmer, you're a front-end web engineer.

What’s considered the goto one now days?

Any plans to use these in tandem with X-Plane?

Looks really fantastic!

Upload the source code to github

The original app is on bitbucket git clone git@bitbucket.org:duncanmeech/flying.git

Well done! They look gorgeous ...


Unfair and needlessly condescending criticism. He implemented them for training materials. The knee-jerk assumption of stupidity around here is getting really old.

Applications are open for YC Winter 2022

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact