Read canvas image by HTTP: Difference between revisions

Jump to navigation Jump to search
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
183

edits

Navigation menu