This example demonstrates, how to use an image Fib object on a website with the help of JavaScript.

Loaded Fib image:

No Fib object data given
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 (
The following code is an example for the HTML web page to create:
      <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.");
            }//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" );
            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;
      <!-- 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' )"
         alt="No Fib object data given">