183
edits
Read canvas image by HTTP: Difference between revisions
Jump to navigation
Jump to search
→Sample Showcase
(→Using) |
|||
| Line 304: | Line 304: | ||
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). | 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). | ||
=== Sample Showcase === | === Sample Showcase CanvasView.html === | ||
The following 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. | The following 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. | ||
{{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}. 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> | |||
== Related == | == Related == | ||