{{PropertyTree}}
== Abstract ==
Beginning with the developer version 3.1 and the indroduction of the advanced internal web server, the access to internal properties via web services have been introduced. The properties are represented as [http://www.json.org/ JSON]. This Article contains the format description of JSON properties.

=== Example ===
This is an example of the /sim/time subtree:

<syntaxhighlight lang="javascript">
{
"path": "/sim/time",
"name": "time",
"type": "-",
"index": 0,
"nChildren": 12,
"children": [{
"path": "/sim/time/cur-time-override",
"name": "cur-time-override",
"value": "0",
"type": "long",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/delta-sec",
"name": "delta-sec",
"value": "0.01666666667",
"type": "double",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/warp",
"name": "warp",
"value": "-28320",
"type": "int",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/warp-delta",
"name": "warp-delta",
"value": "0",
"type": "int",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/delta-realtime-sec",
"name": "delta-realtime-sec",
"value": "0.01666666667",
"type": "double",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/local-offset",
"name": "local-offset",
"value": "3600",
"type": "int",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/utc",
"name": "utc",
"type": "-",
"index": 0,
"nChildren": 8
}, {
"path": "/sim/time/real",
"name": "real",
"type": "-",
"index": 0,
"nChildren": 7
}, {
"path": "/sim/time/elapsed-sec",
"name": "elapsed-sec",
"value": "7072.525",
"type": "double",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/gmt",
"name": "gmt",
"value": "2014-03-27T13:25:10",
"type": "string",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/gmt-string",
"name": "gmt-string",
"value": "13:25:10",
"type": "string",
"index": 0,
"nChildren": 0
}, {
"path": "/sim/time/sun-angle-rad",
"name": "sun-angle-rad",
"value": "0.9883239645",
"type": "double",
"index": 0,
"nChildren": 0
}]
}
</syntaxhighlight>

== Definitions ==
* JavaScript Object Notation (JSON), and the terms object, name, value, array, and number, are defined in [http://www.ietf.org/rfc/rfc4627.txt IETF RTC 4627].
* The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in [http://www.ietf.org/rfc/rfc2119.txt IETF RFC 2119].

== Property Objects ==
A Property Object always consist of a single object. This object represents a single property node or a complete (sub) tree of nodes.

* Each object must have a member with the name ''path''. The members value is a string naming the absolute path of the node in the property tree. Example: '''/engines/engine[1]'''
* Each object must have a member with the name ''name''. The members value is a string that determines the name of the node. Example: '''engine'''
* Each object may have a member with the name ''value''. The members value contains the property nodes value. The current server implementation returns property node values by using the getStringValue() function.
* Each object must have a member with the name ''type''. The members value must be on of "-" (for no type), "alias", "bool", "int", "long", "float", "double", "string", "unspecified", "extended", "vec3d" or "vec4d".
* Each object may have a member with the name ''index''. The members value determines the index of the node in the parents node. Example: For a node /engines/engine[1] this would be 1. A missing ''index'' attribute results in an index of 0 (zero).
* Each object may have a member with the name ''ts''. The members value represents the time when the server read node from the property tree. This is the time of /sim/time/elapsed-sec.
* Each object may have a member with the name ''nChildren''. The members value determines the number of children under this node. It is optional to actually display the children itself within the JSON object.
* Each object may have a member with the name ''children''. The members value is an array of JSON Property Objects.

== Accessing the Property Tree ==
=== The web service ===
A simple web service provides read-only access to the property tree. This web service can be reached at the URL http://localhost:port/json
where port is the portnumber provided to the -httpd= startup option. Path elements following that URL are interpreted as a property path, so http://localhost:port/json/sim/time returnes the JSON representation of the property node /sim/time and its immediate children (see example above).
The service understands the following request parameters:
* i - if the request parameter i is set to 'y', the output will be indented to make it more readable by humans. If the parameter is missing or assigned any other value, the output will be compressed.
* t - if the request parameter t is set to 'y', the returned properties will be time stamped with the value of simulation time
* d - the recursion depth of the resulting tree. The default and minimum depth is implemented as 1 resulting in the node itself and - if existing - the immediate children of the node. A value of 2 would return the node itself, it's children and their children. A very high value combined with a request for the root node returns a complete dump of the property tree (use this with caution!)

=== The /PropertyListener websocket ===
The property change listener websocket also sends property objects as change events for the subscribed nodes. The following is a simple HTML page that shows its usage:

<syntaxhighlight lang="javascript">



<!DOCTYPE html>
<html>
<body>GMT time in Flightgear: <input type="text" id="myText" value="">
<p>Click the button to launch the property listener for property /sim/time/gmt.</p>
<button onclick="myFunction()">Launch</button>

<script>
function myFunction() {
var textfield = document.getElementById("myText");
var ws = new WebSocket('ws://localhost:5701/PropertyListener')
console.log('web socket readyState is ' + ws.readyState)
ws.onopen = function (ev) {
console.log('onopen')
ws.send(JSON.stringify({
command: 'addListener',
node: 'sim/time/gmt'
}))
}
ws.onmessage = function (ev) {
try {
var data = JSON.parse(ev.data)
textfield.value = data.value
} catch (e) {
console.log('Exception in onmessage:' + e)
}
}
ws.onclose = function (ev) {
var msg = 'Lost connection to FlightGear.'
alert(msg)
}
ws.onerror = function (ev) {
var msg = 'Error communicating with FlightGear.'
alert(msg)
}
}
</script>
</body>
</html>

</syntaxhighlight>

== Pitfalls ==
* calling http://localhost:port/json results in a 404 (Not found) error. Use http://localhost:port/json/ to access the root node.
* asking for a nonexistant node returns an empty object ''{}''

[[Category:Core development]]

Json Properties

2019-02-18T05:26:06Z

ThomasS: /* The /PropertyListener websocket */

Read canvas image by HTTP

2019-01-23T06:53:25Z

ThomasS:

{{infobox subsystem
|image = Canvas-ND-served-via-httpd.png
|name = Canvas/HTTP Server
|started= 10/2016
|description = Serving Canvas textures via httpd
|status = Available as of 2018.3.1 (still might cause stability problems)
|developers = ThomasS (since 10/2016)

}}

== Objective ==
{{See also|Howto:Multi-instance Canvas use}}


[[File:ND-Dialog-with-DisplayMode-support.png|thumb]]

There are situations, e.g., for home cockpit builders <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=296448#p296448
|title = <nowiki> Canvas remote drawing </nowiki>
|author = <nowiki> ThomasS </nowiki>
|date = Oct 10th, 2016
|added = Oct 10th, 2016
|script_version = 0.40
}}</ref>, where it is useful to display instruments like a [[PFD]], [[ND]], EICAS or any [[MFD]] externally from the FlightGear 3D main window in a separate window or on a separate monitor, computer or a mobile device <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=214980#p214980
|title = <nowiki> Need to Create a Standalone PFD </nowiki>
|author = <nowiki> deena102 </nowiki>
|date = Jul 18th, 2014
|added = Jul 18th, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=199428#p199428
|title = <nowiki> Re: TQ/Panel for FG made with Kivy </nowiki>
|author = <nowiki> pommesschranke </nowiki>
|date = Jan 31st, 2014
|added = Jan 31st, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=169150#p169150
|title = <nowiki> Re: using FGpanel to display various instruments and electri </nowiki>
|author = <nowiki> someguy </nowiki>
|date = Oct 23rd, 2012
|added = Oct 23rd, 2012
|script_version = 0.40
}}</ref>.

Many of these avionics/graphics are created by FlightGear's 2D drawing [[Canvas]] system internally.

In addition there, are a number of other use-cases where being able to obtain a Canvas from fgfs using a network protocol like http may be desirable (e.g. imagine getting a tilemap based on actual scenery from FlightGear <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=203495#p203495
|title = <nowiki> Re: Atlas still in use ? </nowiki>
|author = <nowiki> Torsten </nowiki>
|date = Mar 17th, 2014
|added = Mar 17th, 2014
|script_version = 0.40
}}</ref>) <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=192817#p192817
|title = <nowiki> How to simulate capturing an image using a camera </nowiki>
|author = <nowiki> roy111 </nowiki>
|date = Oct 29th, 2013
|added = Oct 29th, 2013
|script_version = 0.40
}}</ref><ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=219105#p219105
|title = <nowiki> FGWebPanel aka FGPanel 2.0 or: FGPanel goes html </nowiki>
|author = <nowiki> Torsten </nowiki>
|date = Sep 22nd, 2014
|added = Sep 22nd, 2014
|script_version = 0.40
}}</ref>.

This article provides a patch to FlightGear for downloading any canvas image from a running FlightGear process by HTTP by serializing it to a raster image and serving that via the built-in mongoose based httpd server <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=213146#p213146
|title = <nowiki> Serializing a </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 22nd, 2014
|added = Jun 22nd, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=203550#p203550
|title = <nowiki> Re: Atlas still in use ? </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Mar 18th, 2014
|added = Mar 18th, 2014
|script_version = 0.40
}}</ref>.

This could be considered the groundwork needed for more sophisticated use-cases such as e.g. actually streaming a live video of a certain MFD to a browser.

An additional option for displaying canvas images on remote computer is [[FGQCanvas]], which doesn't require to patch the core FlightGear code.

== Problem ==
a modern biz jet will need to be able to display certain MFDs - fgpanel is not too useful for that (unless you are primarily dealing with steam gauges) - the most useful search terms for the forum/wiki will be '''Phi''' and '''FGCanvas''' - the latter of which is a special startup mode of FlightGear itself that can render Canvas based MFDs in a separate instance.

If you don't need fancy MFDs, you could probably use fgfs standalone and/or fgpanel. Phi has the lowest barrier to entry probably for people familiar with HTML and JavaScript, i.e. you don't even need to know much about fgfs.
The Canvas stuff will really only be needed if you want to render things like the 747 PFD/ND or CDU in a distributed fashion, i.e. using multiple independent displays.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=287810#p287810
|title = <nowiki> Re: Instruments on a second monitor </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 6th, 2016
|added = Jun 6th, 2016
|script_version = 0.40
}}</ref>

you should be aware of glass cockpit related efforts, especially Canvas - most airliners and jets will sooner or later benefit from being ported to Canvas, e.g. to use Gijs' NavDisplay framework, or at least Philosopher's MapStructure framework for mapping purposes.

Thus, if this is also about the actual display itself, people should be aware of related canvas efforts, especially FGCanvas: [[FGCanvas]]

The my mid-term plan involves supporting a standalone mode for all Canvas-based glass instruments, including the ND, but also other instruments like the PFD, EICAS, CDU or EFB. This may sound like a lot of work, but it's mainlyy a matter of introducing a a few helper classes and ensuring that people actually adopt and use those.

In the long-term, we really want to support distributed FlightGear setups like those at FSWeekend/LinuxTag, where multiple computers may be used to run a single simulator session - including properly synchronized glass instruments like the PFD/ND etc. This would also help improve the multiplayer experience, especially dual-pilot setups etc.
Regarding a pure panel with switches, kobs and buttons, we'd prefer something like that to be aircraft-agnostic, i.e. just consist of property-mapped controls that can be individually assigned, so that this could be reused for other MFDs, not just the ND - but also the PFD or EFB.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=211984#p211984
|title = <nowiki> Re: computer2cockpit </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 7th, 2014
|added = Jun 7th, 2014
|script_version = 0.40
}}</ref>

There's the long-term plan to eventually port FGPanel back into FG and come up with some sort of "FGCanvas" mode, where Canvas-based displays could be run in a separate "standalone" mode and interface to the main/master FG instance.

I don't think that the Canvas system currently builds against just OpenGL ES - but it should be possible to identify problematic use-cases and make the Canvas support OpenGL ES by setting some OSG traits accordingly - at some point, i.e. 12+ months from now
In general, it pays off to unify things - otherwise, there's lots of duplication and re-invention involved.

Technically, we could definitely run an OpenGL ES-based Canvas on a mobile device, we just need people interested in pursuing this and playing with it - as well as report any issues/showstoppers
Such an integrated solution would also make it possible to show any canvas texture (instrument, dialog/window, MFD etc) on external devices:

[[File:Navigation display centered MAP mode.png|250px]]

[[FGCanvas]]<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=199081#p199081
|title = <nowiki> & OpenGL ES (Rasberry PI, Android etc) </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jan 28th, 2014
|added = Jan 28th, 2014
|script_version = 0.40
}}</ref>

== Implementation ==
This solution was created roughly by:
*adding a DrawCallback to the canvas camera
*attach an image to the canvas camera
*duplicate Torstens http ScreenshotUriHandler to a CanvasImageUriHandler that subscribes to the callback in the canvas camera

== Alternatives ==
There are possible alternative solutions for rendering canvases on a remote system, that remove the rendering load from the main flightgear process. These might be based on Nasal, Javascript, Python, etc.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=296627#p296627
|title = <nowiki> Re: Canvas remote drawing </nowiki>
|author = <nowiki> ThomasS </nowiki>
|date = Oct 14th, 2016
|added = Oct 14th, 2016
|script_version = 0.40
}}</ref>

One currently available solution is [[FGQCanvas]], created by James.

== Gallery ==
<gallery mode="packed">
Canvas-in-firefox.png|Screenshot showing a Canvas camera rendered to an image streamed to FireFox
Map-canvas dialog streamed via httpd.png|Canvas Map dialog streamed to FireFox
Pui2canvas dialog served via httpd.png|FlightGear [[PUI]] XML dialog rendered via [[Pui2canvas]] and streamed to FireFox
Canvas-ND-served-via-httpd.png|Screenshot showing a FlightGear [[PUI]] GUI dialog with two independent [[NavDisplay]] instances streamed to FireFox
Screenshot-streaming.png|Screenshot showing [[Canvas]] MFDs streamed to Firefox<ref>https://forum.flightgear.org/viewtopic.php?f=71&t=30642&p=297413#p297413</ref>
Canvas-ND-live-streaming-via-httpd.png|Screenshot showing a single Canvas texture ([[NavDisplay]]) streamed to firefox via httpd at 2hz <ref>https://forum.flightgear.org/viewtopic.php?f=71&t=30642&p=297716#p297716</ref>
</gallery>

== Status (1/2019) ==
This feature was merged into the official 2018.3.1 release. It works so far. However, there are latencies and the solution isn't efficient. Just creating the PNG image from OSG takes up to 100ms.
For the time being, this should still be considered a "proof-of-concept" that may go through more iterations of optmizations. Integrating it into 2018.3.1 makes it possible to explore a number of opportunities to optimize the whole thing for different use-cases and solicit community feedback. Special attention might be required with situations where the canvas and/or the connection are shut down, but also to support [[Reset & re-init]] without causing a race condition.

{{Note|In its current form, the streaming capability <ref>https://forum.flightgear.org/viewtopic.php?f=71&p=297716#p297716</ref> is available but might overburden the flightgear process, depending on the number of canvases displayed. Its recommended not to use the streaming feature but to refresh the canvas from the browser. If any instability of FlightGear occurs, the remote canvas feature should be disabled for checking whether it is the reason.
}}

== Optimizations ==
* Sample rate ~1-3 hz
* JPEG_QUALITY <= 6
* image size ~ 512x512
* RTSP/ffmpeg streaming
* Turn the whole thing into a configurable placement for capturing/streaming purposes
* [[Howto:Serializing a Canvas to SVG]] (streaming a Canvas/MFD as a SVG/XML document)

== Using ==
Start fgfs with option "--httpd=5701" (the port number is free, but 5701 is used by the showcase HTML script). Enter the URL
<syntaxhighlight>
http://localhost:5701/screenshot?canvasindex=4&type=png
</syntaxhighlight>
in your browser. The first request will add the property rendertoimage to the canvas with index 4 but return no image (this is no intended behaviour but the result of insufficient synchronization between the rendering thread and the HTTP thread). The request needs to be send again and the image of canvas 4 is returned. Its up to the user to specify a valid canvas index. An invalid canvas index or any form of invalid URL will not result in an error message but simply return no result (until it runs into some browser timeout). For the 777-200 canvas index 4 is the ND, 5 the MFD. PFD seems not to use Canvas.

=== Sample Showcase CanvasView.html ===
The following showcase HTML snippet CanvasView.html shows the main instruments of Soitanens 737 (and its branches) with a refresh rate of 2 per second. This will not be enough for a smooth display and might be increased by reducing the timeoutinterval down from 500ms. But keep an eye on the overall performance of your running fgfs instance. Providing the images causes a significant system load. The script contains hard-coded assumptions such as the name/index of the canvas textures to download from fgfs.

<syntaxhighlight lang="html">
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas View</title>
</head>
<body>
<select id="sizebox" onChange="setSize();">
<option value="256" selected="selected">256</option>
<option value="512">512</option>
<option value="768">768</option>
</select>
<table>
<row>
<td>
<img id="CptPFD">
</td>
<td>
<img id="CptND">
</td>
</row>
<row>
<td>
<img id="UpperEICAS">
</td>
<td>
<img id="CptCDU">
</td>
</row>
</table>

<script type="text/javascript">
var refreshinterval=500;
var instruments = ["CptPFD","CptND","UpperEICAS","CptCDU"];
var canvasindex = [];
canvasindex["CptPFD"] = 3;
canvasindex["CptND"] = 5;
canvasindex["UpperEICAS"] = 4;
canvasindex["CptCDU"] = 2;

function refreshImage(imageid) {
//var image = document.getElementById(imageid);
var image = document.querySelector("#"+imageid);

var url = "http://localhost:5701/screenshot?type=png&canvasindex="+canvasindex[imageid];
image.src = url;
setSize(imageid);
setTimeout(function() {
refreshImage(imageid);
}, refreshinterval);

}

function setSize(imageid){
var e = document.getElementById("sizebox");
var size = e.options[e.selectedIndex].value;
var image = document.querySelector("#"+imageid);
if (image != null){
image.style.width=size+"px";
image.style.height="auto";
}
}

for (var i = 0; i < instruments.length; i++) {
refreshImage(instruments[i]);
}
//refreshImage("CptND");
//refreshImage("CptPFD");

</script>
</body>
</html>
</syntaxhighlight>

== Discussion ==
The forum thread for discussing this feature is https://forum.flightgear.org/viewtopic.php?f=71&t=30642&start=15.

== Related ==
* https://sourceforge.net/projects/remote-canvas-for-flightgear
* {{Search|mode=forum|keywords=ffmpeg+stream}}
* {{OSG example|example=osgmovie}}
* http://trac.openscenegraph.org/projects/osg//wiki/Support/Tutorials/LoadingProgress
* http://trac.openscenegraph.org/projects/osg//wiki/Support/KnowledgeBase/SerializationSupport
* http://bensoftware.com/blog/comparison-of-streaming-formats/
* http://www.osgart.org/index.php/NodeCallback_Scene_Setup

== References ==
{{Appendix}}

[[Category:Cockpit building]]
[[Category:Canvas]]

Read canvas image by HTTP

2019-01-23T06:53:05Z

ThomasS:

{{infobox subsystem
|image = Canvas-ND-served-via-httpd.png
|name = Canvas/HTTP Server
|started= 10/2016
|description = Serving Canvas texturues via httpd
|status = Available as of 2018.3.1 (still might cause stability problems)
|developers = ThomasS (since 10/2016)

}}

== Objective ==
{{See also|Howto:Multi-instance Canvas use}}


[[File:ND-Dialog-with-DisplayMode-support.png|thumb]]

There are situations, e.g., for home cockpit builders <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=296448#p296448
|title = <nowiki> Canvas remote drawing </nowiki>
|author = <nowiki> ThomasS </nowiki>
|date = Oct 10th, 2016
|added = Oct 10th, 2016
|script_version = 0.40
}}</ref>, where it is useful to display instruments like a [[PFD]], [[ND]], EICAS or any [[MFD]] externally from the FlightGear 3D main window in a separate window or on a separate monitor, computer or a mobile device <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=214980#p214980
|title = <nowiki> Need to Create a Standalone PFD </nowiki>
|author = <nowiki> deena102 </nowiki>
|date = Jul 18th, 2014
|added = Jul 18th, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=199428#p199428
|title = <nowiki> Re: TQ/Panel for FG made with Kivy </nowiki>
|author = <nowiki> pommesschranke </nowiki>
|date = Jan 31st, 2014
|added = Jan 31st, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=169150#p169150
|title = <nowiki> Re: using FGpanel to display various instruments and electri </nowiki>
|author = <nowiki> someguy </nowiki>
|date = Oct 23rd, 2012
|added = Oct 23rd, 2012
|script_version = 0.40
}}</ref>.

Many of these avionics/graphics are created by FlightGear's 2D drawing [[Canvas]] system internally.

In addition there, are a number of other use-cases where being able to obtain a Canvas from fgfs using a network protocol like http may be desirable (e.g. imagine getting a tilemap based on actual scenery from FlightGear <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=203495#p203495
|title = <nowiki> Re: Atlas still in use ? </nowiki>
|author = <nowiki> Torsten </nowiki>
|date = Mar 17th, 2014
|added = Mar 17th, 2014
|script_version = 0.40
}}</ref>) <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=192817#p192817
|title = <nowiki> How to simulate capturing an image using a camera </nowiki>
|author = <nowiki> roy111 </nowiki>
|date = Oct 29th, 2013
|added = Oct 29th, 2013
|script_version = 0.40
}}</ref><ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=219105#p219105
|title = <nowiki> FGWebPanel aka FGPanel 2.0 or: FGPanel goes html </nowiki>
|author = <nowiki> Torsten </nowiki>
|date = Sep 22nd, 2014
|added = Sep 22nd, 2014
|script_version = 0.40
}}</ref>.

This article provides a patch to FlightGear for downloading any canvas image from a running FlightGear process by HTTP by serializing it to a raster image and serving that via the built-in mongoose based httpd server <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=213146#p213146
|title = <nowiki> Serializing a </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 22nd, 2014
|added = Jun 22nd, 2014
|script_version = 0.40
}}</ref> <ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=203550#p203550
|title = <nowiki> Re: Atlas still in use ? </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Mar 18th, 2014
|added = Mar 18th, 2014
|script_version = 0.40
}}</ref>.

This could be considered the groundwork needed for more sophisticated use-cases such as e.g. actually streaming a live video of a certain MFD to a browser.

An additional option for displaying canvas images on remote computer is [[FGQCanvas]], which doesn't require to patch the core FlightGear code.

== Problem ==
a modern biz jet will need to be able to display certain MFDs - fgpanel is not too useful for that (unless you are primarily dealing with steam gauges) - the most useful search terms for the forum/wiki will be '''Phi''' and '''FGCanvas''' - the latter of which is a special startup mode of FlightGear itself that can render Canvas based MFDs in a separate instance.

If you don't need fancy MFDs, you could probably use fgfs standalone and/or fgpanel. Phi has the lowest barrier to entry probably for people familiar with HTML and JavaScript, i.e. you don't even need to know much about fgfs.
The Canvas stuff will really only be needed if you want to render things like the 747 PFD/ND or CDU in a distributed fashion, i.e. using multiple independent displays.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=287810#p287810
|title = <nowiki> Re: Instruments on a second monitor </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 6th, 2016
|added = Jun 6th, 2016
|script_version = 0.40
}}</ref>

you should be aware of glass cockpit related efforts, especially Canvas - most airliners and jets will sooner or later benefit from being ported to Canvas, e.g. to use Gijs' NavDisplay framework, or at least Philosopher's MapStructure framework for mapping purposes.

Thus, if this is also about the actual display itself, people should be aware of related canvas efforts, especially FGCanvas: [[FGCanvas]]

The my mid-term plan involves supporting a standalone mode for all Canvas-based glass instruments, including the ND, but also other instruments like the PFD, EICAS, CDU or EFB. This may sound like a lot of work, but it's mainlyy a matter of introducing a a few helper classes and ensuring that people actually adopt and use those.

In the long-term, we really want to support distributed FlightGear setups like those at FSWeekend/LinuxTag, where multiple computers may be used to run a single simulator session - including properly synchronized glass instruments like the PFD/ND etc. This would also help improve the multiplayer experience, especially dual-pilot setups etc.
Regarding a pure panel with switches, kobs and buttons, we'd prefer something like that to be aircraft-agnostic, i.e. just consist of property-mapped controls that can be individually assigned, so that this could be reused for other MFDs, not just the ND - but also the PFD or EFB.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=211984#p211984
|title = <nowiki> Re: computer2cockpit </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jun 7th, 2014
|added = Jun 7th, 2014
|script_version = 0.40
}}</ref>

There's the long-term plan to eventually port FGPanel back into FG and come up with some sort of "FGCanvas" mode, where Canvas-based displays could be run in a separate "standalone" mode and interface to the main/master FG instance.

I don't think that the Canvas system currently builds against just OpenGL ES - but it should be possible to identify problematic use-cases and make the Canvas support OpenGL ES by setting some OSG traits accordingly - at some point, i.e. 12+ months from now
In general, it pays off to unify things - otherwise, there's lots of duplication and re-invention involved.

Technically, we could definitely run an OpenGL ES-based Canvas on a mobile device, we just need people interested in pursuing this and playing with it - as well as report any issues/showstoppers
Such an integrated solution would also make it possible to show any canvas texture (instrument, dialog/window, MFD etc) on external devices:

[[File:Navigation display centered MAP mode.png|250px]]

[[FGCanvas]]<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=199081#p199081
|title = <nowiki> & OpenGL ES (Rasberry PI, Android etc) </nowiki>
|author = <nowiki> Hooray </nowiki>
|date = Jan 28th, 2014
|added = Jan 28th, 2014
|script_version = 0.40
}}</ref>

== Implementation ==
This solution was created roughly by:
*adding a DrawCallback to the canvas camera
*attach an image to the canvas camera
*duplicate Torstens http ScreenshotUriHandler to a CanvasImageUriHandler that subscribes to the callback in the canvas camera

== Alternatives ==
There are possible alternative solutions for rendering canvases on a remote system, that remove the rendering load from the main flightgear process. These might be based on Nasal, Javascript, Python, etc.<ref>{{cite web
|url = https://forum.flightgear.org/viewtopic.php?p=296627#p296627
|title = <nowiki> Re: Canvas remote drawing </nowiki>
|author = <nowiki> ThomasS </nowiki>
|date = Oct 14th, 2016
|added = Oct 14th, 2016
|script_version = 0.40
}}</ref>

One currently available solution is [[FGQCanvas]], created by James.

== Gallery ==
<gallery mode="packed">
Canvas-in-firefox.png|Screenshot showing a Canvas camera rendered to an image streamed to FireFox
Map-canvas dialog streamed via httpd.png|Canvas Map dialog streamed to FireFox
Pui2canvas dialog served via httpd.png|FlightGear [[PUI]] XML dialog rendered via [[Pui2canvas]] and streamed to FireFox
Canvas-ND-served-via-httpd.png|Screenshot showing a FlightGear [[PUI]] GUI dialog with two independent [[NavDisplay]] instances streamed to FireFox
Screenshot-streaming.png|Screenshot showing [[Canvas]] MFDs streamed to Firefox<ref>https://forum.flightgear.org/viewtopic.php?f=71&t=30642&p=297413#p297413</ref>
Canvas-ND-live-streaming-via-httpd.png|Screenshot showing a single Canvas texture ([[NavDisplay]]) streamed to firefox via httpd at 2hz <ref>https://forum.flightgear.org/viewtopic.php?f=71&t=30642&p=297716#p297716</ref>
</gallery>

== Status (1/2019) ==
This feature was merged into the official 2018.3.1 release. It works so far. However, there are latencies and the solution isn't efficient. Just creating the PNG image from OSG takes up to 100ms.
For the time being, this should still be considered a "proof-of-concept" that may go through more iterations of optmizations. Integrating it into 2018.3.1 makes it possible to explore a number of opportunities to optimize the whole thing for different use-cases and solicit community feedback. Special attention might be required with situations where the canvas and/or the connection are shut down, but also to support [[Reset & re-init]] without causing a race condition.

{{Note|In its current form, the streaming capability <ref>https://forum.flightgear.org/viewtopic.php?f=71&p=297716#p297716</ref> is available but might overburden the flightgear process, depending on the number of canvases displayed. Its recommended not to use the streaming feature but to refresh the canvas from the browser. If any instability of FlightGear occurs, the remote canvas feature should be disabled for checking whether it is the reason.
}}

== Optimizations ==
* Sample rate ~1-3 hz
* JPEG_QUALITY <= 6
* image size ~ 512x512
* RTSP/ffmpeg streaming
* Turn the whole thing into a configurable placement for capturing/streaming purposes
* [[Howto:Serializing a Canvas to SVG]] (streaming a Canvas/MFD as a SVG/XML document)

== Using ==
Start fgfs with option "--httpd=5701" (the port number is free, but 5701 is used by the showcase HTML script). Enter the URL
<syntaxhighlight>
http://localhost:5701/screenshot?canvasindex=4&type=png
</syntaxhighlight>
in your browser. The first request will add the property rendertoimage to the canvas with index 4 but return no image (this is no intended behaviour but the result of insufficient synchronization between the rendering thread and the HTTP thread). The request needs to be send again and the image of canvas 4 is returned. Its up to the user to specify a valid canvas index. An invalid canvas index or any form of invalid URL will not result in an error message but simply return no result (until it runs into some browser timeout). For the 777-200 canvas index 4 is the ND, 5 the MFD. PFD seems not to use Canvas.

=== Sample Showcase CanvasView.html ===
The following showcase HTML snippet CanvasView.html shows the main instruments of Soitanens 737 (and its branches) with a refresh rate of 2 per second. This will not be enough for a smooth display and might be increased by reducing the timeoutinterval down from 500ms. But keep an eye on the overall performance of your running fgfs instance. Providing the images causes a significant system load. The script contains hard-coded assumptions such as the name/index of the canvas textures to download from fgfs.

<syntaxhighlight lang="html">
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas View</title>
</head>
<body>
<select id="sizebox" onChange="setSize();">
<option value="256" selected="selected">256</option>
<option value="512">512</option>
<option value="768">768</option>
</select>
<table>
<row>
<td>
<img id="CptPFD">
</td>
<td>
<img id="CptND">
</td>
</row>
<row>
<td>
<img id="UpperEICAS">
</td>
<td>
<img id="CptCDU">
</td>
</row>
</table>

<script type="text/javascript">
var refreshinterval=500;
var instruments = ["CptPFD","CptND","UpperEICAS","CptCDU"];
var canvasindex = [];
canvasindex["CptPFD"] = 3;
canvasindex["CptND"] = 5;
canvasindex["UpperEICAS"] = 4;
canvasindex["CptCDU"] = 2;

function refreshImage(imageid) {
//var image = document.getElementById(imageid);
var image = document.querySelector("#"+imageid);

var url = "http://localhost:5701/screenshot?type=png&canvasindex="+canvasindex[imageid];
image.src = url;
setSize(imageid);
setTimeout(function() {
refreshImage(imageid);
}, refreshinterval);

}

function setSize(imageid){
var e = document.getElementById("sizebox");
var size = e.options[e.selectedIndex].value;
var image = document.querySelector("#"+imageid);
if (image != null){
image.style.width=size+"px";
image.style.height="auto";
}
}

for (var i = 0; i < instruments.length; i++) {
refreshImage(instruments[i]);
}
//refreshImage("CptND");
//refreshImage("CptPFD");

</script>
</body>
</html>
</syntaxhighlight>

== Discussion ==
The forum thread for discussing this feature is https://forum.flightgear.org/viewtopic.php?f=71&t=30642&start=15.

== Related ==
* https://sourceforge.net/projects/remote-canvas-for-flightgear
* {{Search|mode=forum|keywords=ffmpeg+stream}}
* {{OSG example|example=osgmovie}}
* http://trac.openscenegraph.org/projects/osg//wiki/Support/Tutorials/LoadingProgress
* http://trac.openscenegraph.org/projects/osg//wiki/Support/KnowledgeBase/SerializationSupport
* http://bensoftware.com/blog/comparison-of-streaming-formats/
* http://www.osgart.org/index.php/NodeCallback_Scene_Setup

== References ==
{{Appendix}}

[[Category:Cockpit building]]
[[Category:Canvas]]

Read canvas image by HTTP

2018-10-09T05:16:07Z

ThomasS: /* object properties */

AI Scenery objects

2018-10-09T04:59:20Z

ThomasS: /* Requirements */

AI Scenery objects

2018-10-08T09:09:42Z

ThomasS: