############################
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 |HCNOW|. After completion of this tutorial, you should have enough understanding of the technology to start integrating |HCNOW| 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>