|Note This article is currently in the process of being updated/rewritten by Jaxsin|
Phi - 'map in browser'
While working on the new radio/atis implementation, Torsten rediscovered the internal httpd (aka web-server) to browse the property tree. It's much easier to have multiple browser windows open and point to various locations in the property tree than to reopen the internal property browser and navigate to the locations after each sim restart. After a while, I got disappointed by the functionality, look, and feel of the http property-browser. So I had a look at the code to see if it could be improved. I quickly realized, that the implementation was simple but not scale-able. I looked for alternatives already available on the GPL market. I found Mongoose as a well maintained, feature rich and yet simple implementation of a web server and started to embed that into FlightGear. 
Probably, a video is more descriptive, here is a shot of an earlier (incomplete) version:
FI = Flight Instructor (you sure know that), or FlightGear Interface. In Deutsch (my native language) the spoken FI sounds like the Greek letter Phi. And I like the uppercase letter of Phi for it's symmetry. It's vertical bar reminds me of the projector screen in a simulator, watched from both sides: the trainer and the trainee. For the less philosophical meanings of Phi, check out and pick the one that suits best ;-) 
See Integrated Qt5 Launcher for the main article about this subject.
To use Phi you need to start the internal httpd server before FlightGear is started. The easiest way to do this is using the built-in Qt5 launcher and add the following line to Settings > Additional options.
See FFGo for the main article about this subject.
Add the --httpd command switch somewhere in the config file.
run fgfs with the command line switch --httpd Example.
Once FlightGear is up and running we can access the Phi user interface from the main menu in FlightGear. Select Equipment > Map (opens in browser) or launch a web browser and enter the URL
You can access the new screenshot handler after starting FlightGear per instructions here Usage
It understands some request parameters:
- type: either png or jpg (guess what this does)
- window: the name of the window to capture (for those with multi screen setups)
- stream: provide mjpeg stream
send png instead of jpg (jpg is default)
send a png screenshot from the window named "WindowA" as defined under rendering/camera-group/window/name in your screen configuration.
use default jpg encoding
Send a motion-jpeg encoded video stream.
Can be used by ffmpeg to directly encode various video formats.
ffplay -f mjpeg http://localhost:8080/screenshot/stream=y
Compression level for PNG is hardcoded to 9 (highest) and JPEG_QUALITY hardcoded to 80. These seem to be a good balance of performance vs. quality
The most exciting part is, the web based instrument runs on any modern platform without the need to install any spooky software. It also runs flawless on my Android phone and tablet and of course in a standard browser (Firefox and Chrome tested). On mobile OSes, you can add it to your home screen, making this a full-screen web-app to get rid of the browser navigation and toolbar (like shown in the screenshot). There is not much required on the FlightGear side - recent 2016.1.1 has all it needs. Workload for FlightGear is negligible, for the current EFIS, on page load a few hundred kilobytes of static files are transmitted and once fully loaded, 10 (ten!) properties are observed and transmitted on change. All the rendering takes place on the web browser's device. 
Making Web-Panel instruments
I use Inkscape to draw the SVGs. The objects to animate are selected by their id attribute, so you should set a reasonable name for those. To get proper scaling of the SVGs, you need to set the viewBox: width,
height, and preserveAspectRation of the <svg> tag element. It should be also possible to draw SVG's on the fly e.g. from svg.js and animate this as well. Not much has been on this front. 
Open the SVG file in inkscape and enter the xml editor (Ctrl + shift + X) to view the data-bind attributes for the objects that need animating