Phi: Difference between revisions

From FlightGear wiki
Jump to navigation Jump to search
mNo edit summary
(Quoting cleanup)
Line 1: Line 1:
[[File:Early-Phi-screen shot.PNG|thumb|right|http://forum.flightgear.org/viewtopic.php?f=6&t=25482]]
[[File:Early-Phi-screen shot.PNG|thumb|right|http://forum.flightgear.org/viewtopic.php?f=6&t=25482]]


{{DeQuote}}
== Phi - 'map in browser' ==


{{FGCquote|1= I have just started with Phi a few month ago and the entire system evolves more that it follows a planned route. I have a vision - well sort of - of what I'd like have implemented but it's not a clear picture. Probably the best for you would be to clone fgdata from git and either install a nightly build or compile from source to get the latest features. If that works make yourself familiar with what is there. Some knowledge of jQuery, knockout and require.js will help getting started. If you find something missing or have an idea for improvements, I am happy to work it in ;-)|2= {{cite web | url    = http://sourceforge.net/p/flightgear/mailman/message/33694681/  | title  = <nowiki>Re: [Flightgear-devel] Support to develop new features</nowiki>  | author = <nowiki>Torsten Dreyer</nowiki>  | date  = Apr 2nd, 2015  }}}}
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 Usage section below for further details.  
 
 
{{FGCquote|1= I am planning to rebuild the web-panel feature on the Phi's framework. Some firste steps are already taken, have a look the Seneca's Engine Panel: https://www.dropbox.com/s/wxbl7e4l255uio/Phi_SideBySide.png?dl=1 Responsive SVG elements should be easy to implement, too.|2= {{cite web  | url    = http://sourceforge.net/p/flightgear/mailman/message/34278378/  | title  = <nowiki>Re: [Flightgear-devel] c172p - Show/Hide Yoke</nowiki>  | author = <nowiki>Torsten Dreyer</nowiki>  | date  = Jul 8th, 2015  }}}}


== Background ==
== Background ==
{{FGCquote
  |while working on the new radio/atis implementation, I rediscovered the <br/>
internal httpd (aka webserver) to browse the property tree.<br/>
It's much easier to have multiple browser windows open and point to <br/>
various locations in the property tree than to reopen the internal <br/>
property browser and navigate to the locations after each sim restart.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32068663/
    |title=<nowiki>[Flightgear-devel] FlightGear goes web 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-03-06</nowiki>
  }}
}}
{{FGCquote
  |After a while, I got disappointed by the functionality and the look&feel <br/>
of the http property-browser, so i had a look at the code to see if it <br/>
could be improved. I quickly realized, that the implementation was <br/>
simple but not scalable, so I looked for something allready available on <br/>
the GPL market.<br/>
I found Mongoose as a well maintained, feature rich and yet simple <br/>
implementation of a web server and started to embedd that into FlightGear.
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32068663/
    |title=<nowiki>[Flightgear-devel] FlightGear goes web 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-03-06</nowiki>
  }}
}}
{{FGCquote
  |What I have ready so far and just pushed to next is:<br/>
- A single threaded httpd running in the main loop (should probably get <br/>
it's own thread soon)<br/>
- Running as a replacement for the old httpd<br/>
- Serving FGDATA/Docs as the document root<br/>
- Serving the uri /props/ as a replacement for the old property browser <br/>
(improved functionality, improved l&f, styling via css)<br/>
- Serving the uri /run.cgi as a replacement for the old interface to run <br/>
fg_commands<br/>
- Serving the uri /json/ to return selected properties as JSON <br/>
(read-only so far)
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32068663/
    |title=<nowiki>[Flightgear-devel] FlightGear goes web 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-03-06</nowiki>
  }}
}}
{{FGCquote
  |I think this all has a lot of potential. With the JSON interface <br/>
extended to being able to write properties, the CGI interface  of <br/>
Mongoose turned on, the webserver running stable in it's own thread, It <br/>
should be possible to run e.g. PHP with jQuery or dojo.<br/>
<br/>
If you want to test the new functions, goto<br/>
http://localhost:<httpd-port>/  for FGDATA/Docs<br/>
http://localhost:<httpd-port>/props/  for the internal property browser<br/>
http://localhost:<httpd-port>/json/some/property/name/or/path  for the <br/>
internal property browser<br/>
http://localhost:<httpd-port>/run.cgi?value=pause  to pause/unpause the <br/>
simulation<br/>
<br/>
Please mind the trailing slash for /props/ and /json/ (no, it's not <br/>
bug-free yet.)
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32068663/
    |title=<nowiki>[Flightgear-devel] FlightGear goes web 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-03-06</nowiki>
  }}
}}
{{FGCquote
  |It runs on any device that has a web browser. So yes, if your FlightGear <br/>
computer can run Firefox, Opera or alike you can run it on the same <br/>
computer, too.<br/>
It is not related to the "classical" way of rendering instruments within <br/>
flightgear, so everything in this area works as before.<br/>
<br/>
Probably a video is more descriptive, here is a shot of an earlier <br/>
(incomplete) version:<br/>
http://youtu.be/sYM7uiWIprc<br/>
You can see a FlightGear instance on the top right of the big monitor <br/>
and Firefox on the left showing the EFIS. Both run on the same computer.<br/>
Below the monitor are an old iPod touch (left) and a Nexus 7 (right), <br/>
both running the EFIS as a web-app in full screen mode connected over WLAN.<br/>
The EFIS in the FlightGear window is based on Canvas/Nasal. The other <br/>
EFISes are 100% Nasal free, just HTML/SVG/CSS/JavaScript
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/32840980/
    |title=<nowiki>Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2014-09-17</nowiki>
  }}
}}


{{FGCquote
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.
  |I have just pushed my first draft of a HTML5/CSS/JavaScript based user <br/>
<ref>http://sourceforge.net/p/flightgear/mailman/message/32068663/</ref>
interface to FGDATA/master.<br/>
For the impatient: get latest fg and fgdata from git, start fgfs <br/>
--httpd=8080 and browse to http://localhost:8080/gui/<br/>
<br/>
Somewhat longer abstract:<br/>
This is very much work in progress, it has many layout quirks and <br/>
runtime bugs, not every clickable item does something useful by now.<br/>
It should work with any aircraft, the Mass and Balance page currently <br/>
works best with the c172p and the SenecaII, other Aircraft may work but <br/>
will lack some features.<br/>
<br/>
The implementation uses some state-of-the-art JavaScript libraries, most <br/>
notably jQuery, knockoutjs and requirejs. I have included these so there <br/>
is no active internet connection required for base functionality <br/>
(exception: the moving map won't show tiles without internet).
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/33347855/
    |title=<nowiki>[Flightgear-devel] Introducing Phi - a multiplatform user interface
& instructor station</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2015-02-04</nowiki>
  }}
}}


{{FGCquote
Probably a video is more descriptive, here is a shot of an earlier (incomplete) version: http://youtu.be/sYM7uiWIprc <br/>
  |The design pattern is based on MVVM (Model-View-ViewModel).<br/>
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
<br/>
<ref>http://sourceforge.net/p/flightgear/mailman/message/32840980/</ref>
Communication with the flightgear instance is through AJAX calls and a <br/>
websocket for realtime updates of property changes.<br/>
It is web-app capable so you can not only run it on your mobile device <br/>
but also install it to it's home screen and run it without the browser <br/>
decoration. It prefers screen sizes of at least 7" (looks OK on Nexus 7 <br/>
and good on iPad - looks crappy on a Nexus 4 or the iPod - looks <br/>
fantastic on a 27" retina iMac).<br/>
<br/>
I'll try to get this into a stable and usable state during this release <br/>
cycle to have a functional version for the release of 3.6 in summer this <br/>
year.<br/>
<br/>
Feedback and comments are welcome, co-workers are more than welcome ;-)
  |{{cite web |url=http://sourceforge.net/p/flightgear/mailman/message/33347855/
    |title=<nowiki>[Flightgear-devel] Introducing Phi - a multiplatform user interface
& instructor station</nowiki>
    |author=<nowiki>Torsten Dreyer</nowiki>
    |date=<nowiki>2015-02-04</nowiki>
  }}
}}


== Instruments via Phi ==
== Instruments via Phi ==

Revision as of 12:36, 21 March 2016

http://forum.flightgear.org/viewtopic.php?f=6&t=25482

Phi - 'map in browser'

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 Usage section below for further details.

Background

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]

Probably a video is more descriptive, here is a shot of an earlier (incomplete) version: http://youtu.be/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 [2]

Instruments via Phi

Cquote1.png during the last couple of weeks, I have developed and now added a new FGPanel implementation to FlightGear.

FGWebPanel or FGPanel 2.0, whatever it will be called, is based on current web standards and runs in any modern web browser and on a wide variety of devices.

Without the need for writing a single line of code you can now create almost any kind of instrument. This is the perfect solution for cockpit builders who want to display great looking instruments on a separate screen. No matter if you need classic steam gauges or want a state of the art PFD. FGWebPanel does them all.


— Torsten (Mon Sep 22). FGWebPanel aka FGPanel 2.0 or: FGPanel goes html.
(powered by Instant-Cquotes)
 Cquote2.png

Gallery

Cquote1.png do you know Phi? It's a new HTML5 based user interface/instructor station integrated into FlightGear 3.5 ff.

I'd like to share some screenshots of what is already available in current GIT. All screenshots were taken on my iPad where Phi is installed as a a web app (installed to home-screen) to run full screen without the browser's decoration


— Torsten (Wed Feb 25). Heaven or Hell? .
(powered by Instant-Cquotes)
 Cquote2.png

Screen Shots

Cquote1.png You can access the new screenshot handler after starting with

--httpd=8080 at http://localhost:8080/screenshot

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


— Torsten Dreyer (2014-10-02). [Flightgear-devel] Heads up: --jpg-httpd is gone.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png Torsten Dreyer (2014-10-02). [Flightgear-devel] Heads up: --jpg-httpd is gone.


Cquote2.png
Cquote1.png http://localhost:8080/screenshot?window=WindowA&stream=y

same as before, but not just send a single image but a motion-jpeg
encoded video stream.
Can be used by ffmpeg to directly encode various video formats.
try 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.


— Torsten Dreyer (2014-10-02). [Flightgear-devel] Heads up: --jpg-httpd is gone.
(powered by Instant-Cquotes)
 Cquote2.png

Web-based EFIS

Cquote1.png I have made some improvement and created a basic JavaScript API.


First victim of my work is the SenecaII.
Pull latest fgdata and run fgfs --aircraft=SenecaII --httpd=8080

Select "Panel in a browser" from the "Seneca" menuentry in the menubar.
A browser should pop up, showing the Airspeed indicator after a short
loading-delay.


— Torsten Dreyer (2014-09-18). Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png for a long time, I have been dreaming of a cross-platform, simple

solution to render 2d panels on a remote device.

I have just succeeded with my first partial implementation of a EFIS PFD
rendered in a web browser using nothing but existing web standards and a
running FlightGear instance having the internal web server enabled.


— Torsten Dreyer (2014-09-17). [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png The EFIS is created from scalable 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. Websocket 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 artefacts.


— Torsten Dreyer (2014-09-17). [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png The most exciting part is, the web based instrument runs on any modern

platform without the need to install any spooky software. See a
screenshot of the EFIS rendered on my iPad.
https://www.dropbox.com/s/uo6hu7jeubuy0vn/EFIS.png?dl=0
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 git has all
it needs. Workload for FlightGear is neglible, for the current EFIS, on
page load a few hundret kilobyte 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.


— Torsten Dreyer (2014-09-17). [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png If you want to give it a try, make sure you have fg and fgdata from

latest git HEAD.
Clone my ZivkoEdge repository from
git@...:t3r-fg-ac/zivkoedge.git, add the folder to your
--fg-aircraft option, fire up the Edge and pick "EFIS" from the "EDGE"
menu item.

As always: feedback is welcome.


— Torsten Dreyer (2014-09-17). [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png

EFIS via SVG

Cquote1.png I use Inkscape to draw the svgs. The elements to animate are selected by

their id attribute, so you have to set a reasonabl name for those.
To get proper scaling of the svg, you need to set the viewBox, width,
height and preserveAspectRation of the <svg> element.
It should be also possible to draw svg on the fly e.g. from svg.js and
animate this, too. I havn't looked into this so far.

The port number for the httpd is set from the commandline, use whatever
suits your needs. No other ports are involved or hardcoded, everything
runs over http protocol at that port, the websocket included. The
individual services are distinguished by their url (/props/, /json/,
/screenshot/, PropertyListener etc). Again, everything runs over port
8080 (or whatever you told http to bind to).


— Torsten Dreyer (2014-09-22). Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png
Cquote1.png Personally, I like to stick with fgdata as the repo. Master branch is a

good enough playground. During the development cycle things don't
necessarily have to be stable to get checked in there, if they are new
and mostly unused parts and do not get sucked into the running fgfs
instance.
I am planning to move the .js library files out of the aircraft
directory into common fgdata once they seem to be in someway usable.
If you want to contribute to that area, I'm happy to handle merge
requests or appyl diffs.


— Torsten Dreyer (2014-09-22). Re: [Flightgear-devel] Goodbye fgpanel - hello fgpanel 2.0.
(powered by Instant-Cquotes)
 Cquote2.png

Why Phi ?

Cquote1.png Torsten Dreyer (2015-02-04). [Flightgear-devel] Introducing Phi - a multiplatform user interface & instructor station.


Cquote2.png
  1. ↑ http://sourceforge.net/p/flightgear/mailman/message/32068663/
  2. ↑ http://sourceforge.net/p/flightgear/mailman/message/32840980/
Retrieved from "https://wiki.flightgear.org/w/index.php?title=Phi&oldid=96022"