Read canvas image by HTTP: Difference between revisions

no edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Non-stable}}


{{infobox subsystem
{{infobox subsystem
Line 6: Line 4:
|name = Canvas/HTTP Server
|name = Canvas/HTTP Server
|started= 10/2016  
|started= 10/2016  
|description = Serving Canvas texturues via httpd  
|description = Serving Canvas textures via httpd  
|status = Under active development as of 10/2016
|status = Available as of 2018.3.1 (still might cause stability problems)
|developers =  ThomasS (since 10/2016)  
|developers =  ThomasS (since 10/2016)  
<!--
<!--
Line 149: Line 147:


== Implementation ==
== Implementation ==
What I did now roughly is:
This solution was created roughly by:
*adding a DrawCallback to the canvas camera
*adding a DrawCallback to the canvas camera
*attach an image 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
*duplicate Torstens http ScreenshotUriHandler to a CanvasImageUriHandler that subscribes to the callback in the canvas camera


This works so far and I can grab ND images from my browser by http like a screenshot. And as you mentioned before, there are latencies and it isn't efficient. Just creating the PNG image from OSG takes up to 100ms. Using an uncomressed bitmap format like tiff results in 3MB image sies. Assuming a frame rate of 5 will be sufficient for displaying smooth instruments (which I doubt) this results in 15 image creations per second (for Captains PFD, ND and Eicas).
== 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
However, it is working and I will use this approach for my first setup and for some long running tests for checking for memory leaks and other problems. Probably there will be some fine tuning required.
And in the meantime I keep thinking about an external canvas drawing solution. Maybe I'll pursue the Nasal/Javascript approach, though my personal favorite is a Nasal/generic approach which allows implementing drawing in any environment like JavaScript/Python/Java aso.<ref>{{cite web
   |url    =  https://forum.flightgear.org/viewtopic.php?p=296627#p296627  
   |url    =  https://forum.flightgear.org/viewtopic.php?p=296627#p296627  
   |title  =  <nowiki> Re: Canvas remote drawing </nowiki>  
   |title  =  <nowiki> Re: Canvas remote drawing </nowiki>  
Line 165: Line 161:
   |script_version = 0.40  
   |script_version = 0.40  
   }}</ref>
   }}</ref>
One currently available solution is [[FGQCanvas]], created by James.


== Gallery ==
== Gallery ==
Line 183: Line 181:
  }}
  }}


== Patches ==
== Optimizations ==
=== Base Package ===
* Sample rate ~1-3 hz
CanvasView.html
* 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.
 


{{Note|For the time being, the following HTML snippet is specific to Soitanen's 737, and contains hard-coded assumptions such as the name/index of the canvas textures to download from fgfs}. Also, you need to edit httpd-settings.xml to add a corresponding canvasimage handler there. For a Canvas to become available for streaming, set the <code>rendertoimage</code> flag accordingly and assign a name to the top-level canvas.}}
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
Line 234: Line 246:
     var image = document.querySelector("#"+imageid);     
     var image = document.querySelector("#"+imageid);     


     var url = "http://localhost:5701/canvasimage?type=png&canvasindex="+canvasindex[imageid];
     var url = "http://localhost:5701/screenshot?type=png&canvasindex="+canvasindex[imageid];
    //var url = "http://192.168.98.165:5701/canvasimage?type=png&canvasindex="+canvasindex[imageid];
    //var url = "http://localhost:5701/canvasimage?type=png&canvasindex=5";
    //var url = "http://192.168.98.165:5701/canvasimage?type=png&canvasindex=5";
    //alert(url);
     image.src = url;
     image.src = url;
     setSize(imageid);
     setSize(imageid);
Line 269: Line 277:
</syntaxhighlight>
</syntaxhighlight>


== Optimizations ==
== Discussion ==
* Sample rate ~1-3 hz
The forum thread for discussing this feature is https://forum.flightgear.org/viewtopic.php?f=71&t=30642&start=15.
* 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 ==
Add the line
<syntaxhighlight>
<canvasimage>/canvasimage</canvasimage>
</syntaxhighlight >
to the uri handler defined in file FG_ROOT/httpd-settings.xml
 
<syntaxhighlight lang="xml">
  <uri-handler>
                <screenshot>/screenshot</screenshot>
                <property>/props/</property>
                <json>/json/</json>
                <pkg>/pkg/</pkg>
                <flighthistory>/flighthistory/</flighthistory>
                <run>/run.cgi</run>
                <navdb>/navdb</navdb>
                <canvasimage>/canvasimage</canvasimage>
        </uri-handler>
 
</syntaxhighlight>
 
and start fgfs with option "--httpd=5701" (the port number is free, but 5701 is used by the showcase HTML script). Enter the URL
<syntaxhighlight>
localhost:5701/canvasimage?type=png&canvasindex=0
</syntaxhighlight>
in your browser. The first request will add the property rendertoimage to the canvas with index 0 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 0 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).
 
The showcase script CanvasView.html shows the main instruments of Soitanens 737 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.


== Related ==
== Related ==
183

edits