Phi: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
 
(32 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[File:Early-Phi-screen shot.PNG|thumb|right|Early Phi screenshot]]
[[File:Early-Phi-screen shot.PNG|thumb|right|Early Phi screenshot]]


== Phi - 'map in browser' ==
'''Phi''' is an HTML5/JavaScript/CSS based multi-platform user interface and instructor station. Phi is capable of being run on any device that has a Web browser or Web apps like Apple's iPad without the browser decorations.


'''Phi''' is an HTML5/JavaScript/CSS based multi-platform user interface and instructor station. The implementation uses some state-of-the-art JavaScript libraries, most notably jQuery, knockoutjs and requirejs (files included for offline usage). Phi is capable of being run on any device that has a web browser or web app's like Apple's iPad without the browser decorations. See [[Phi#Usage | Usage]] section below for further details.
The implementation uses some state-of-the-art JavaScript libraries, most notably [https://jquery.com/ jQuery], [https://knockoutjs.com/ Knockout.js] and [https://requirejs.org/ RequireJS] (files included for offline usage).


== Background ==
== Background ==
{{hatnote|Direct quotes from '''Torsten'''. Original '''Phi''' developer.}}


While working on the new radio/atis implementation, I 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.
While working on the new radio/atis implementation, I 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.<ref>[http://sourceforge.net/p/flightgear/mailman/message/32068663/ Initial motivation]</ref>
<ref>[[http://sourceforge.net/p/flightgear/mailman/message/32068663/ Initial motivation]]</ref>


Probably a video is more descriptive, here is a shot of an earlier (incomplete) version: http://youtu.be/sYM7uiWIprc <br/>
'''''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 {{wikipedia|Phi}} and pick the one that suits best ;-) <ref>[http://sourceforge.net/p/flightgear/mailman/message/33347855/ Why Phi?]</ref>
You can see a FlightGear instance on the top right of the big monitor and Firefox on the left showing the EFIS. Both run on the same computer. Below the monitor are an old iPod touch (left) and a Nexus 7 (right), both running the EFIS as a web-app in full screen mode connected over WLAN. The EFIS in the FlightGear window is based on Canvas/Nasal. The other EFISes are 100% Nasal free, just HTML/SVG/CSS/JavaScript
<ref>[[http://sourceforge.net/p/flightgear/mailman/message/32840980/ Video reference]]</ref>
 
'''''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 http://en.wikipedia.org/wiki/Phi and pick the  
one that suits best ;-)
<ref>[[http://sourceforge.net/p/flightgear/mailman/message/33347855/ Why Phi?]]</ref>


== Usage ==
== Usage ==
==== Qt5 Launcher ====
==== Qt5 Launcher ====
[[File:Phi launcher option.PNG|300px|Qt5 launcher option for Phi]]
{{Main article|Integrated Qt5 Launcher}}
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'''.
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'''.
[[File:Phi launcher option.PNG|300px|Qt5 launcher option for Phi]]


==== FFGo ====
==== FFGo ====
Add the --httpd command switch somewhere in the config file. Please visit [[FFGo]] for further details
[[File:FFGo launcher.PNG|300px|FFGo launcher]]
{{Main article|FFGo}}


Add the <code>--httpd</code> command switch somewhere in the config file.


[[File:FFGo launcher.PNG|300px|FFGo launcher]]
==== Console ====
Run fgfs with the command line switch <code>--httpd</code>:


==== Console ====
run fgfs with the command line switch --httpd Example.
   fgfs --httpd=8080
   fgfs --httpd=8080


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:


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
   http://localhost:8080
   http://localhost:8080


== Screen Shots ==
== Phi UI features ==
You can access the new screenshot handler after starting FlightGear per instructions here [[Phi#Usage|Usage]]  
Phi is at foremost a multi-platform user interface that has two-way data binding with FlightGear via the internal HTTP web server. This allows Phi to be a fully functional user interface that can directly control FlightGear. The following list is a set of features that are currently implemented and working.
 
=== Aircraft ===
This is where you will find all things related to the currently selected aircraft in-sim, if available.
 
:; Help:            Displays the aircraft help file '''Help > Aircraft Help'''
:; Mass & Balance:  Displays aircraft specific fuel and payload options '''Equipment > Fuel and Payload'''
:; Checklist:      Displays aircraft checklist '''Help >'''
:; Failures
:; Panel
:; Select:          ''Known bug in FG for windows versions 7+, assume this feature to not work anytime soon even if you see a list of planes to install''
 
=== Environment ===
:; Date & Time:  Change in-sim time of day and current date
:; Weather
:; Position:    Interface where you can search for airports via ICAO codes and then select a runway/parking spot to load into FlightGear '''Location > Select Airport'''
 
=== Map ===
Loads an OpenStreetMap as the background and updates your current position around the world in real time while you fly. Allows one to not only track current flight, but the ability to drag the plane icon around the map which will instantly update FlightGear with the new longitude and latitude coordinates.
=== Tools ===
Things that make for a more realistic experience. Not exactly needed to fly a plane, but these tools will add to the realism.
 
:; Holding Pattern:  A tool to help one understand how to enter the holding pattern. Enter in the Heading and Inbound Track and the diagram will show you visually the Holding pattern.
:; Wind Calculator
:; Vertical Navigation (VNAV):  ''From my understanding not anytime soon, needs FG integration first''
:; Stopwatch
 
=== Simulator ===
:; Screenshot:    Set the time between screen updates. See [[Phi#Screen Shots]]
:; Properties:    In-sim property tree, two-way data binding, good for debugging!
:: Config:        In-sim config settings
:; AI:            Enable/Disable AI
:; Multi-Player:  Enter callsign and select which server to connect to on the multi-player network.
:; Reset:        Reset the FlightGear Sim
:; Exit:          Quit
 
=== Property plotter ===
You find the property plotter here:
 
* Start fgfs with <code>--httpd=8080</code> (or any other port)
* Open browser at <code>http://yourfgmachine-or-localhost:8080/</code>
* Click Tab "Simulator"
* Select button "Properties"
* Navigate the property tree to the property of interest
* Click the little image symbol just left of the properties value
* You have your plot. The code lives in <code>$FGDATA/data/Phi/topics/Simulator/Properties.[js|html]</code>
 
You need some background knowledge of [http://knockoutjs.com/ Knockout.js] (for HTML data bindings) and [http://www.flotcharts.org/ Flot] (for chart plotting). Let Torsten know if you need some more information.<ref>{{cite web
  |url    =  https://sourceforge.net/p/flightgear/mailman/message/35591702/
  |title  =  <nowiki> Re: [Flightgear-devel] fgplot / currently active canvas developers? </nowiki>
  |author =  <nowiki> Torsten Dreyer </nowiki>
  |date  =  Jan 8th, 2017
  |added  =  Jan 8th, 2017
  |script_version = 0.40
  }}</ref>
 
== Screen shots ==
You can access the new screenshot handler after starting FlightGear per instructions in [[Phi#Usage]].
 
   http://localhost:8080/screenshot
   http://localhost:8080/screenshot


It understands some request parameters:
It understands some request parameters:
   
   
*'''type:''' either png or jpg (guess what this does)
; <code>type</code>:   Either <code>png</code> or <code>jpg</code>
; <code>window</code>:  <code>name</code> of the window to capture (for those with multi screen setups)
; <code>stream</code>:  Provide Motion JPEG stream
 
=== Examples ===
==== Single screenshot ====
Send PNG instead of JPG (JPG is default)


*'''window:''' the name of the window to capture (for those with multi screen setups)
  http://localhost:8080/screenshot?type=png


*'''stream:''' provide mjpeg stream
Send a PNG screenshot from the window named <code>WindowA</code> as defined under <code>rendering/camera-group/window/name</code> in your screen configuration.


===Examples:===
==== Single screenshot ====
send png instead of jpg (jpg is default)
  http://localhost:8080/screenshot?type=png
send a png screenshot from the window named "WindowA" as defined under
rendering/camera-group/window/name in your screen configuration.
   http://localhost:8080/screenshot?type=png&window=WindowA
   http://localhost:8080/screenshot?type=png&window=WindowA
use default jpg encoding
 
Use default JPG encoding
 
   http://localhost:8080/screenshot?window=WindowA
   http://localhost:8080/screenshot?window=WindowA
==== Motion-jpeg ====
 
Send a motion-jpeg encoded video stream.
==== Motion JPEG ====
Send a Motion JPEG encoded video stream.
 
   http://localhost:8080/screenshot?window=WindowA&stream=y
   http://localhost:8080/screenshot?window=WindowA&stream=y
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
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 hard coded to <code>9</code> (highest) and <code>JPEG_QUALITY</code> hardcoded to <code>80</code>. These seem to be a good balance of performance vs. quality
 
== Web based EFIS ==
The web-based EFIS is created from a scale-able vector graphics (SVG), is animated by JavaScript and driven by properties from FlightGear over websockets. The same SVG files that are used for the FlightGear internal canvas based instruments can also be used for the browser based display, so both instruments (that of the 3d model and that in your browser) look 100% alike. Web-socket properties are exchanged at frame rate making animations as smooth as they can get. Because it uses SVG, instruments are always rendered at the highest available resolution of the device without scaling artifacts.<ref name="HelloFGP2.0">[http://sourceforge.net/p/flightgear/mailman/message/32840486/ Goodbye fgPanel, Hello fgPanel 2.0]</ref>
 
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.<ref name="HelloFGP2.0"></ref>
 
Probably, a video is more descriptive, here is a shot of an earlier (incomplete) version:
 
{{#ev:youtube|sYM7uiWIprc}}
 
You can see a FlightGear instance on the top right of the big monitor and Firefox on the left showing the EFIS. Both run on the same computer. Below the monitor are an old iPod touch (left) and a Nexus 7 (right), both running the EFIS as a web-app in full screen mode connected over WLAN. The EFIS in the FlightGear window is based on Canvas/Nasal. The other EFISes are 100% Nasal free, just HTML/SVG/CSS/JavaScript<ref>[http://sourceforge.net/p/flightgear/mailman/message/32840980/ Video reference]</ref>
 
=== Making Web-Panel instruments ===
{{Note| This section should be considered unfinished. If you have something to add, please do so}}
 
I use Inkscape to draw the SVG files. 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 SVG files, you need to set the <code>viewBox</code>: <code>width</code>, <code>height</code>, and <code>preserveAspectRation</code> of the <code>&lt;svg&gt;</code> tag element. It should be also possible to draw SVG files on the fly for example from <code>svg.js</code> and animate this as well. Not much has been on this front.<ref name="HelloFGP2.0"></ref>
 
==== Examples ====
Here you can find code examples that have been added to the Phi project
 
* {{fgdata source|path=Phi/examples}}


== Web-based EFIS ==
The artificial horizon example is a fat free, stripped down basic idea of a web based instrument for Phi.
{{FGCquote
  |I have made some improvement and created a basic JavaScript API.<br/>
<br/>
First victim of my work is the SenecaII.<br/>
Pull latest fgdata and run fgfs --aircraft{{=}}SenecaII --httpd{{=}}8080<br/>
<br/>
Select "Panel in a browser" from the "Seneca" menuentry in the menubar.<br/>
A browser should pop up, showing the Airspeed indicator after a short <br/>
loading-delay.<br/>


  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32846474/
* {{fgdata source|path=Phi/examples/horizon.html}}
    |title=<nowiki>Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
* {{fgdata source|path=Phi/examples/horizon.js}}
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-18</nowiki>
  }}
}}
{{FGCquote
  |for a long time, I have been dreaming of a cross-platform, simple <br/>
solution to render 2d panels on a remote device.<br/>
<br/>
I have just succeeded with my first partial implementation of a EFIS PFD <br/>
rendered in a web browser using nothing but existing web standards and a <br/>
running FlightGear instance having the internal web server enabled.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32840486/
    |title=<nowiki>[Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-17</nowiki>
  }}
}}


{{FGCquote
== Future Development ==
  |The EFIS is created from scalable vector graphics (svg), is animated by <br/>
{{Note|Nothing concrete}}
JavaScript and driven by properties from FlightGear over websockets.<br/>
The same svg files that are used for the FlightGear internal canvas <br/>
based instruments can also be used for the browser based display, so <br/>
both instruments (that of the 3d model and that in your browser) look <br/>
100% alike. Websocket properties are exchanged at frame rate making <br/>
animations as smooth as they can get. Because it uses SVG, instruments <br/>
are always rendered at the highest available resolution of the device <br/>
without scaling artefacts.<br/>


  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32840486/
* Improve the aircraft specific plugin system to allow special widgets and pages for aircraft (thinking of the [[Space Shuttle]] here)
    |title=<nowiki>[Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
* Make layout and theme configurable
    |author=<nowiki>Torsten Dreyer</nowiki>
* Keep settings persistent between sessions
    |date=<nowiki>2014-09-17</nowiki>
* Write a tile renderer to create map tiles from scenery
  }}
* Better support for touch events
}}
* Together with ThorstenR: UI to configure a 3D weather model


{{FGCquote
== References ==
  |The most exciting part is, the web based instrument runs on any modern <br/>
{{Appendix}}
platform without the need to install any spooky software. See a <br/>
screenshot of the EFIS rendered on my iPad. <br/>
https://www.dropbox.com/s/uo6hu7jeubuy0vn/EFIS.png?dl{{=}}0<br/>
It also runs flawless on my Android phone and tablet and of course in a <br/>
standard browser (Firefox and Chrome tested). On mobile OSes, you can <br/>
add it to your home screen, making this a full-screen web-app to get rid <br/>
of the browser navigation and toolbar (like shown in the screenshot).<br/>
<br/>
There is not much required on the FlightGear side - recent git has all <br/>
it needs. Workload for FlightGear is neglible, for the current EFIS, on <br/>
page load a few hundret kilobyte of static files are transmitted and <br/>
once fully loaded, 10 (ten!) properties are observed and transmitted on <br/>
change. All the rendering takes place on the web browser's device.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32840486/
    |title=<nowiki>[Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-17</nowiki>
  }}
}}


{{FGCquote
== Related content ==
  |If you want to give it a try, make sure you have fg and fgdata from <br/>
=== Forum topics ===
latest git HEAD.<br/>
* {{forum link|t=37545|title=How to access Phi from my smartphone}} (June 2020)
Clone my ZivkoEdge repository from <br/>
* {{forum link|t=31230|title=Web Panel on 2016.4.3}} (December 2016)
git@...:t3r-fg-ac/zivkoedge.git, add the folder to your <br/>
* {{forum link|t=25482|title=Heaven or Hell? Phi sneak preview.}} (February 2015-March 2016)
--fg-aircraft option, fire up the Edge and pick "EFIS" from the "EDGE" <br/>
* {{forum link|t=24125|title=FGWebPanel aka FGPanel 2.0 or: FGPanel goes html}} (September 2014-July 2015)
menu item.<br/>
* {{forum link|p=228281|title=Re: Instructor Station}} (December 2014)
<br/>
As always: feedback is welcome.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32840486/
    |title=<nowiki>[Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-17</nowiki>
  }}
}}


== EFIS via SVG ==
=== Source code ===
{{FGCquote
* {{fgdata source|path=Phi}}
  |I use Inkscape to draw the svgs. The elements to animate are selected by <br/>
their id attribute, so you have to set a reasonabl name for those.<br/>
To get proper scaling of the svg, you need to set the viewBox, width, <br/>
height and preserveAspectRation of the <svg> element.<br/>
It should be also possible to draw svg on the fly e.g. from svg.js and <br/>
animate this, too. I havn't looked into this so far.<br/>
<br/>
The port number for the httpd is set from the commandline, use whatever <br/>
suits your needs. No other ports are involved or hardcoded, everything <br/>
runs over http protocol at that port, the websocket included. The <br/>
individual services are distinguished by their url (/props/, /json/, <br/>
/screenshot/, PropertyListener etc). Again, everything runs over port <br/>
8080 (or whatever you told http to bind to).
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32854893/
    |title=<nowiki>Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-22</nowiki>
  }}
}}


{{FGCquote
[[Category:Cockpit building]]
  |Personally, I like to stick with fgdata as the repo. Master branch is a <br/>
[[Category:GUI]]
good enough playground. During the development cycle things don't <br/>
necessarily have to be stable to get checked in there, if they are new <br/>
and mostly unused parts and do not get sucked into the running fgfs <br/>
instance.<br/>
I am planning to move the .js library files out of the aircraft <br/>
directory into common fgdata once they seem to be in someway usable.<br/>
If you want to contribute to that area, I'm happy to handle merge <br/>
requests or appyl diffs.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32854893/
    |title=<nowiki>Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-22</nowiki>
  }}
}}

Latest revision as of 01:09, 4 April 2022

Early Phi screenshot

Phi is an HTML5/JavaScript/CSS based multi-platform user interface and instructor station. Phi is capable of being run on any device that has a Web browser or Web apps like Apple's iPad without the browser decorations.

The implementation uses some state-of-the-art JavaScript libraries, most notably jQuery, Knockout.js and RequireJS (files included for offline usage).

Background

Direct quotes from Torsten. Original Phi developer.

While working on the new radio/atis implementation, I 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.[1]

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 Phi This is a link to a Wikipedia article and pick the one that suits best ;-) [2]

Usage

Qt5 Launcher

Qt5 launcher option for Phi

1rightarrow.png 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.

FFGo

FFGo launcher

1rightarrow.png See FFGo for the main article about this subject.

Add the --httpd command switch somewhere in the config file.

Console

Run fgfs with the command line switch --httpd: 

 fgfs --httpd=8080

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: 

 http://localhost:8080

Phi UI features

Phi is at foremost a multi-platform user interface that has two-way data binding with FlightGear via the internal HTTP web server. This allows Phi to be a fully functional user interface that can directly control FlightGear. The following list is a set of features that are currently implemented and working.

Aircraft

This is where you will find all things related to the currently selected aircraft in-sim, if available.

Help
Displays the aircraft help file Help > Aircraft Help
Mass & Balance
Displays aircraft specific fuel and payload options Equipment > Fuel and Payload
Checklist
Displays aircraft checklist Help >
Failures
Panel
Select
Known bug in FG for windows versions 7+, assume this feature to not work anytime soon even if you see a list of planes to install

Environment

Date & Time
Change in-sim time of day and current date
Weather
Position
Interface where you can search for airports via ICAO codes and then select a runway/parking spot to load into FlightGear Location > Select Airport

Map

Loads an OpenStreetMap as the background and updates your current position around the world in real time while you fly. Allows one to not only track current flight, but the ability to drag the plane icon around the map which will instantly update FlightGear with the new longitude and latitude coordinates.

Tools

Things that make for a more realistic experience. Not exactly needed to fly a plane, but these tools will add to the realism.

Holding Pattern
A tool to help one understand how to enter the holding pattern. Enter in the Heading and Inbound Track and the diagram will show you visually the Holding pattern.
Wind Calculator
Vertical Navigation (VNAV)
From my understanding not anytime soon, needs FG integration first
Stopwatch

Simulator

Screenshot
Set the time between screen updates. See Phi#Screen Shots
Properties
In-sim property tree, two-way data binding, good for debugging!
Config: In-sim config settings
AI
Enable/Disable AI
Multi-Player
Enter callsign and select which server to connect to on the multi-player network.
Reset
Reset the FlightGear Sim
Exit
Quit

Property plotter

You find the property plotter here:

  • Start fgfs with --httpd=8080 (or any other port)
  • Open browser at http://yourfgmachine-or-localhost:8080/
  • Click Tab "Simulator"
  • Select button "Properties"
  • Navigate the property tree to the property of interest
  • Click the little image symbol just left of the properties value
  • You have your plot. The code lives in $FGDATA/data/Phi/topics/Simulator/Properties.[js|html]

You need some background knowledge of Knockout.js (for HTML data bindings) and Flot (for chart plotting). Let Torsten know if you need some more information.[3]

Screen shots

You can access the new screenshot handler after starting FlightGear per instructions in Phi#Usage. 

 http://localhost:8080/screenshot

It understands some request parameters:

type
Either png or jpg
window
name of the window to capture (for those with multi screen setups)
stream
Provide Motion JPEG stream

Examples

Single screenshot

Send PNG instead of JPG (JPG is default) 

 http://localhost:8080/screenshot?type=png

Send a PNG screenshot from the window named WindowA as defined under rendering/camera-group/window/name in your screen configuration. 

 http://localhost:8080/screenshot?type=png&window=WindowA

Use default JPG encoding 

 http://localhost:8080/screenshot?window=WindowA

Motion JPEG

Send a Motion JPEG encoded video stream. 

 http://localhost:8080/screenshot?window=WindowA&stream=y

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 hard coded to 9 (highest) and JPEG_QUALITY hardcoded to 80. These seem to be a good balance of performance vs. quality

Web based EFIS

The web-based EFIS is created from a scale-able vector graphics (SVG), is animated by JavaScript and driven by properties from FlightGear over websockets. The same SVG files that are used for the FlightGear internal canvas based instruments can also be used for the browser based display, so both instruments (that of the 3d model and that in your browser) look 100% alike. Web-socket properties are exchanged at frame rate making animations as smooth as they can get. Because it uses SVG, instruments are always rendered at the highest available resolution of the device without scaling artifacts.[4]

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.[4]

Probably, a video is more descriptive, here is a shot of an earlier (incomplete) version:

You can see a FlightGear instance on the top right of the big monitor and Firefox on the left showing the EFIS. Both run on the same computer. Below the monitor are an old iPod touch (left) and a Nexus 7 (right), both running the EFIS as a web-app in full screen mode connected over WLAN. The EFIS in the FlightGear window is based on Canvas/Nasal. The other EFISes are 100% Nasal free, just HTML/SVG/CSS/JavaScript[5]

Making Web-Panel instruments

Note  This section should be considered unfinished. If you have something to add, please do so

I use Inkscape to draw the SVG files. 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 SVG files, you need to set the viewBox: width, height, and preserveAspectRation of the <svg> tag element. It should be also possible to draw SVG files on the fly for example from svg.js and animate this as well. Not much has been on this front.[4]

Examples

Here you can find code examples that have been added to the Phi project

The artificial horizon example is a fat free, stripped down basic idea of a web based instrument for Phi.

Future Development

Note  Nothing concrete
  • Improve the aircraft specific plugin system to allow special widgets and pages for aircraft (thinking of the Space Shuttle here)
  • Make layout and theme configurable
  • Keep settings persistent between sessions
  • Write a tile renderer to create map tiles from scenery
  • Better support for touch events
  • Together with ThorstenR: UI to configure a 3D weather model

References

References

Related content

Forum topics

Source code

Retrieved from "https://wiki.flightgear.org/w/index.php?title=Phi&oldid=134886"