Loaded Fib image:
If this is a red point the example doesn’t work on your browser.
The example was build with emscripten in JavaScript from the original Fib C++ code.
The web page code needed
You will need the "libfib.js" library, which can be created with the "add_ons/webbrowser/javascript/" sub module of the Fib system (www.github.com/BioKom/Fib).The following code is an example for the HTML web page to create:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- load the JavaScript library with the functions to load and
convert Fib objects -->
<script type="text/javascript" src="../lib/libfib.js"></script>
<script type="text/javascript">
//import the convertFibToImageData() function from emscripten
convertFibToImageData = Module.cwrap('convertFibToImageData', 'string', 'string' );
/**
* Function to load the Fib image data from a file into a img element.
*
* @pre imgElementId the element id for the image element, where to
* load the Fib object image to
* @pre fibObjFileName the file name / path of the Fib object to load
* @pre onLoad optional parameter: the new onload parameter
* for the to load image
*/
function displayFibObject( imgElementId, fibObjFileName,
/*optional*/ onLoad ){
var pFibObjFileName =
allocate( intArrayFromString( fibObjFileName ), 'i8', ALLOC_STACK );
//load the Fib object data from the file
var loadedData = _jsFunOpenFileStream( pFibObjFileName );
if ( HEAPU8[(((loadedData)+(0))|0)] == 0 ){
alert( "Error: could not load the Fib data from " + fibObjFileName +
"\nDid the file exists in the same domain as this page?\n" +
"Note: The example doesn't work on your local computer.");
return;
}//else data loaded
//load the Fib object bmp image data into the image element
var fibObjectImage = document.getElementById( imgElementId );
if ( fibObjectImage == typeof('undefined') ){
alert( "Error: could not find image element with id " +
imgElementId + " to store data to" );
return;
}
if ( onLoad ){
//set new onload
fibObjectImage.onload = onLoad;
}else{//don't load image again (=don't use old onload again)
fibObjectImage.onload = "";
}
//convert loaded Fib object data into a bitmap image in base64
var dataFibImage = convertFibToImageData( loadedData );
//add image data header
dataFibImage = "data:image/bmp;base64," + dataFibImage;
fibObjectImage.src = dataFibImage;
}
</script>
</head>
<body>
<!-- The image element to load the Fib data to.
the important part:
"onload="displayFibObject('xmlFibObjectImage', 'pictures/wappen.xml' )""
-->
<img id="xmlFibObjectImage"
onload="displayFibObject('xmlFibObjectImage', 'pictures/wappen.xml' )"
src="data:image/bmp;base64,Qk05AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAM
AAAAAAAAAAAAAAAAAAAAAAAAAAAD/AA=="
alt="No Fib object data given">
</body>
</html>