############################
Building a basic application
############################

.. toctree::
   :maxdepth: 1
   :caption: Table of Contents

   project-layout
   hello-web-viewer
   basic-operator
   advanced-operator
   model-tree
   color-transparency
   geometry
   model-loading
   server-connection

This tutorial will walk you through the fundamentals of writing a web application with HOOPS Communicator (HC). After completion of this tutorial, you should have enough understanding of the technology to start integrating HC into your application.

The prerequisite for this tutorial is a basic understanding of JavaScript (JS) development. No advanced CAD expertise or web development experience is required. All JS code examples are client-side and require no server backend except for the last section, which covers the HOOPS Server and streaming.

.. raw:: html

	<div id="basic-app-demo-header">
	  <h3 class="js-toc-ignore" style="margin:0;display:inline;">Web Viewer Preview</h3>
	  <p id="basic-app-tip">Double click the Web Viewer canvas to reset the camera position!</p>
	</div>

	<!-- <div id="basic-app-image" class="image"><img src="images/sequential_nodeids.png"></div> -->
	<div id="basic-app-viewer-container">
	  <div id="basic-app-output">
		<div>
		  <h4>Model Structure...</h4>
		  <div id="ModelStructureReady" class="not-ready">Not Ready</div>
		</div>
		<div>
		  <h4>CameraCallback</h4>
		  <pre id="CameraData">
	{
		"position": {
			"x": 0,
			"y": 0,
			"z": 0 
		},
		"target": {
			"x": 0,
			"y": 0,
			"z": 0
		},
		"up": {
			"x": 0,
			"y": 0,
			"z": 0 
		},
		"width": 0,
		"height": 0,
		"projection": 0,
		"nearLimit": 0.0,
		"className": ""
	}
		  </pre>
		</div>
	  </div>

	  <div id="basic-app-viewer"></div>
	</div>
	
	<script type="text/javascript" src="../../_static/hwv/js/hoops_web_viewer.js"></script>

	<script>
	  window.onload = () => {
		let hwv = new Communicator.WebViewer({
		  containerId: "basic-app-viewer",
		  endpointUri: "../../_static/hwv/models/microengine.scs"
		});

		hwv.setCallbacks({
		  sceneReady: () => {
			hwv.view.setBackgroundColor(Communicator.Color.blue(), Communicator.Color.white());
		  },
		  modelStructureReady: () => {
			let element = document.getElementById('ModelStructureReady');
			element.innerHTML = 'Ready';
			element.className = 'model-ready';
		  },
		  camera: () => {
			document.getElementById('CameraData').innerHTML = JSON.stringify(hwv.view.getCamera().toJson(), null, 4);
		  },
		});
		
		window.onresize = () => {
			hwv.resizeCanvas();
        };

		hwv.start();
	  }
	</script>