Geladenes Fib-Bild:
Wenn sie hier nur einen kleinen roten Punkt sehen, dann arbeitet dieses Beispiel nicht korrekt in ihrem Webbrowser.
Das Beispiel wurde mithilfe von emscripten in JavaScript vom original Fib C++ Quellcode erstellt.
Der benötigte Code für die Webseite
Außerdem wird die "libfib.js" Bibliothek benötigt, welche mit dem "add_ons/webbrowser/javascript/" Teilmodul des Fib-Systems (www.github.com/BioKom/Fib) erzeugt werden kann.Der folgende Code ist ein Beispiel, für die zu erstellende HTML-Webseite:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- lade die JavaScript Bibliothek mit den Funktionen zum Laden und
Konvertieren von Fib-Objekten -->
<script type="text/javascript" src="javascript/libfib.js"></script>
<script type="text/javascript">
//importiere die convertFibToImageData() Funktion von emscripten
convertFibToImageData = Module.cwrap('convertFibToImageData', 'string', 'string' );
/**
* Funktion um die Fib-Bilddaten von einer Datei in ein img
* Element zu laden.
*
* @pre imgElementId die Element id für das img Bildelement,
* wohin das Fib-Objekt geladen werden soll
* @pre fibObjFileName der Datei- / Pfadname des Fib-Objekts,
* welches geladen werden soll
* @pre onLoad optionaler Parameter: der neue onload Parameter für
* das zu ladende Bild
*/
function displayFibObject( imgElementId, fibObjFileName,
/*optional*/ onLoad ){
var pFibObjFileName =
allocate( intArrayFromString( fibObjFileName ), 'i8', ALLOC_STACK );
//lade die Fib-Objektdaten aus der Datei
var loadedData = _jsFunOpenFileStream( pFibObjFileName );
if ( HEAPU8[(((loadedData)+(0))|0)] == 0 ){
alert( "Fehler: Das Fib-Objekt \"" + fibObjFileName + "\" konnte nicht geladen werden.\n" +
"Existiert die Fib-Datei in der gleiche Domain wie diese Seite?\n" +
"Anmerkung: Dieses Beispiel funktioniert nicht auf einem lokalen Computer." );
return;
}//sonst Daten geladen
//lade die Fib-Objekt Bitmap Daten in das Bildelement img
var fibObjectImage = document.getElementById( imgElementId );
if ( fibObjectImage == typeof('undefined') ){
alert( "Fehler: Das Bildelement (img) mit der id " +
imgElementId + " konnte nicht gefunden werden, um die "+
"Fib-Objektbilddaten darin zu speichern." );
return;
}
if ( onLoad ){
//setze neues onload
fibObjectImage.onload = onLoad;
}else{/*lade das Bild nicht noch einmal (= benutze nicht das
alte onload noch einmal)*/
fibObjectImage.onload = "";
}
/*konvertiere die geladenen Fib-Objektdaten in ein Bitmap-Bild
in base64 */
var dataFibImage = convertFibToImageData( loadedData );
//füge den Bild-Header hinzu
dataFibImage = "data:image/bmp;base64," + dataFibImage;
fibObjectImage.src = dataFibImage;
}
</script>
</head>
<body>
<!-- Das Bildelement img, um die Fib-Daten zu laden.
Wichtiger Teil:
"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"><br>
</body>
</html>