|
|
Line 184: |
Line 184: |
|
| |
|
| == Patches == | | == Patches == |
| === Base Package ===
| |
| CanvasView.html
| |
|
| |
| {{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">
| |
| <!DOCTYPE html>
| |
| <!-- See Flightgear wiki for information-->
| |
| <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/canvasimage?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;
| |
| 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>
| |
|
| |
| == Optimizations == | | == Optimizations == |
| * Sample rate ~1-3 hz | | * Sample rate ~1-3 hz |