###########
Basic Setup
###########

Required libraries
==================

The following files are necessary for running the HOOPS Web Viewer:

* *hoops_web_viewer.mjs* contains the core functionality of the HOOPS Web Viewer, and has dependencies on *engine-wasm.js* and *engine.wasm*. These should be placed in the same directory as *hoops_web_viewer.mjs*. The HOOPS Web Viewer component will attempt to load the most optimal version of the graphics engine based on browser capabilities.
* For faster startup time and to prevent a warning in the console, ensure that your HTTP server serves *.wasm* files with the ``application/wasm`` MIME type. This may require additional configuration on your server.
* A file called *hoops_web_viewer_monolith.mjs* is also available. This file is a standalone library and does not require additional files or dependencies to run the HOOPS Web Viewer, but it only contains the *asm.js* engine and isn't compatible with WebAssembly.
* There are several other files in this directory which are related to the standard HOOPS Web Viewer UI and the integration with the HOOPS Server component. Those are not required for integrating the HOOPS Web Viewer into your own web application.

.. note::
	
	Details on TypeScript support for the HOOPS Web Viewer can be found :doc:`here </prog_guide/viewing/misc/typescript>`. For more information on the location of these files in your |HCNOW| package, consult our :doc:`Package Description </overview/package-description>` page.


Creating a basic application
============================

Getting your application running with the HOOPS Web Viewer directly from the installation can be accomplished in a few straightforward steps:


1. **Starting the HOOPS Server** In the quick_start directory, start *start_server.bat* as detailed in our :ref:`Getting Started <overview/getting-started:viewing the sample page >` guide. 

2. **Creating an HTML file** Create an empty HTML file named *index.html* and save it to the *web_viewer/src* directory. This will be where you add the HTML, CSS, and Javascript for interacting with the HOOPS Web Viewer. Once the server has been started, you'll be able to view this HTML file in a browser by navigating to http://localhost:11180/[myfile].html.

3. **Including the HOOPS Web Viewer JavaScript library.** 

.. code-block:: html

	<script type="module">
	  import * as Communicator from "./js/hoops/hoops-web-viewer.mjs";
	  
	  // other initialization (see step 5, below)
	  
	</script>

4. **Setting up a container.** 

.. code-block:: html

	<style>
	  #myContainer{
		width: 640px;
		height:480px;
		position: relative;
	  }
	</style>

	<div id="myContainer"></div>

This is the place on the page where you would like HOOPS Web Viewer to render into. A single ``<div>`` tag is enough, anything below it will be automatically created by the HOOPS Web Viewer as children of this element.

5. **Creating and starting the WebViewer object.**

.. literalinclude:: /../../applications/client/docs/GettingStarted.ts
   :start-after: //! [load_scs_model]
   :end-before: //! [load_scs_model]

At a minimum, you need to pass the name of the ``#div`` element we just created to the ``containerId`` parameter of the ``WebViewer`` constructor, as well as the ``enginePath`` which points to the location of *engine.esm.wasm*. If you are leveraging the streaming capabilities of the HOOPS Server, you would specify the URI of the Stream Cache Server with the ``endpointUri`` parameter. However, in this case we are just loading an SCS file that doesn't require streaming from the server. In the |HCNOW| package, see the */content/model_data* directory for the location of this file (the built-in webserver of the HOOPS Server is configured to serve files from this directory).

A full list of parameters is available in the Reference Manual. Some of them will also be discussed in the next chapter and throughout the rest of this Programming Guide.

6. **Listening for events.** 

.. literalinclude:: /../../applications/client/docs/GettingStarted.ts
   :start-after: //! [set_callbacks]
   :end-before: //! [set_callbacks]

We discuss HOOPS Web Viewer event handling in an :doc:`upcoming chapter </prog_guide/viewing/callbacks>`. 

7. **Interacting with the HOOPS Web Viewer**

.. code-block:: js

	hwv.selectPart(1);
	hwv.view.setProjectionMode(Communicator.Projection.Orthographic);

Once the scene is ready, you can invoke methods on it. Please refer to the API Reference for a complete list of all API methods.

If you'd like to load one of your own models into the viewer, simply drag them onto the ``easy_convert`` command-line utility. This utility will convert your file to several different formats, including SCS.

Below is the full HTML source for this example:

.. code-block:: html

	<html>
	<head>
	<script type="text/javascript" src="js/hoops_web_viewer.js"></script>
	<style>
		#myContainer{
			width: 640px;
			height:480px;
			position: relative;
		}
	</style>
	<div id="myContainer"></div>
	<script type="text/javascript">

		let hwv;
		window.onload = () => {
			//! [load_scs_model]
			hwv = new Communicator.WebViewer({
				containerId: "myContainer",
				endpointUri: "model_data/bnc.scs",
				enginePath: "/js/hoops",
			});
			hwv.start();
			//! [load_scs_model]
			//! [set_callbacks]
			hwv.setCallbacks({
				sceneReady: () => {
					console.log("HOOPS Web Viewer has been initialized.");
				},
			});
			//! [set_callbacks]
		};
		function selectAll() {
			//! [interact_with_viewer]
			hwv.selectPart(1);
			hwv.view.setProjectionMode(Communicator.Projection.Orthographic);
			//! [interact_with_viewer]
		}

	</script>
	<input type="button" onclick="selectAll();" style="right:5px;top:5px;position:absolute;" value="Select All">
	</head>
	<body>
	</body>
	</html>

		

The steps above are all that is required for a bare-bones application that can load SCS files into your application using the HOOPS Web Viewer, but this setup won't give you access to the streaming capabilities of |HCNOW|. For a quick introduction on how to communicate with the HOOPS Server, we recommend the :doc:`Connection to the HOOPS Server </tutorials/basic-app/server-connection>` section of the Building A Basic Application tutorial, which explains the minimal steps to set up a connection to the HOOPS Server and request viewing sessions. 
