# 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 Visualize Web 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 Visualize Web 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. Jump to the html-export section at the end of this document to see a sample template.

### 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 Visualize Web 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 Visualize Web customers may use the entirety of the HOOPS Visualize Web API to create their own customized pages.

There are some restrictions for non-HOOPS Visualize Web customers.

The following classes aren’t available to non-HOOPS Visualize Web customers:

Communicator.MeshData and Communicator.MeshInstanceData

The following functions aren’t available to non-HOOPS Visualize Web 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>

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Visualize Web or choose a sample question below to start a conversation:

What is HOOPS Visualize Web?
What are the latest release notes for HOOPS Visualize Web?
How do I start evaluating HOOPS Visualize Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...