Monolithic HTML Export

The HTML export creates a totally self-contained HTML file for viewing a model. This means that all the markup, styling, Javascript, images, and model data are contained in a single file which works out of the box in any modern browser with no internet connection required.

About the HOOPS Communicator template file

The template file is a pre-processed HTML file with all dependencies inlined. Binary dependences such as images and model data are base64 encoded into the file as well. All this preprocessing is done when the HOOPS Communicator package is built. Browsers can automatically base64 decode binary files such as images. Additional javascript code must be used to base64 decode the model data. This code is included in the standard template and can be leveraged by customers if needed.

Creating a custom template file

Aside from ensuring that the contents of hoops_web_viewer_monolithic.js are included in the page, there are four required steps to create a custom template file. (To see a sample template, please go to the bottom of this page.)

Step 1: Insert the data replacement string

Include the replacement string in the file:

<!-- SC_MODEL_DATA -->

The system searches the template file for this string and replaces it with base64 binary encoded data. Ideally this string should be saved in a variable. For example:

var SC_MODEL_DATA = "<!-- SC_MODEL_DATA -->";

Step 2: Add a container div

There must be a container div in the template in which the viewer will be created:

<div id="viewerContainer" style="width:100%; height:100%;"></div>

Feel free to add your own styling.

Step 3: Decode the base64-encoded data to a Uint8 buffer

Sample code to do this is provided in the minimal template. The _base64ToUint8Array method is a small helper function provided by HOOPS Communicator team:

var binaryModelData = _base64ToUint8Array(SC_MODEL_DATA)

Step 4: Create and start a WebViewer object

Specify your binary decoded data to the web viewer:

var viewer = new Communicator.WebViewer({
        containerId: "viewerContainer",
        buffer: binaryModelData,
});

Look, feel, and functionality

Aside from the required elements enumerated above, users are free to add in their own HTML / JS / CSS code to the template. HOOPS Communicator customers may use the entirety of the Communicator API to create their own customized pages.

There are some restrictions for non-Communicator customers.

The following classes aren’t available to non-Communicator customers:

Communicator.MeshData and Communicator.MeshInstanceData

The following functions aren’t available to non-Communicator customers:

createMesh() and createMeshInstance()

Helpful hints

It can be challenging to work only in a single template file, especially given the size of the required javascript for the HOOPS WebViewer. There are a number of tools which can take a website and convert it to a self contained file. It would be helpful to design your template using normal separation of HTML, JS, CSS and employ a tool to combine all of it into your final template. We have had good luck using the webpage2html python module.

Sample HTML template

The sample below shows the minimal HTML Export template (this file can be downloaded by right-clicking this link and selecting “Save As”). It will decode the plaintext data and start the viewer:

<html>
<head>
<title>Minimal HTML Export Template</title>

<script>
        //Paste the contents of hoops_web_viewer_monolithic.js here
</script>

<script>
        function _base64ToUint8Array(base64) {
                var binary_string =  window.atob(base64);
                var len = binary_string.length;
                var bytes = new Uint8Array( len );
                for (var i = 0; i < len; i++)        {
                        bytes[i] = binary_string.charCodeAt(i);
                }
                return bytes;
        }

        var SC_MODEL_DATA = "<!-- SC_MODEL_DATA -->";

        var hwv = null;
        var ui = null;

        window.onload = function () {
                hwv = new Communicator.WebViewer({
                                containerId: "viewerContainer",
                                buffer: _base64ToUint8Array(SC_MODEL_DATA),
                        });

                window.onresize = function (event) {
                        hwv.resizeCanvas();
                };

                hwv.start();
        }
  </script>

  <style>
          body{
                  margin: 0;
                  padding 0;
          }
        #viewerContainer{
                position:relative;
                width:100%;
                height:100%;
        }
  </style>
</head>
<body>
<div id="viewerContainer"></div>
</body>
</html>