From: Snapshot-Content-Location: https://aardgoose.github.io/CaveView.js/installation.html Subject: CaveView installation Date: Sun, 24 Oct 2021 15:46:19 -0000 MIME-Version: 1.0 Content-Type: multipart/related; type="text/html"; boundary="----MultipartBoundary--eCFBXfFmJiPIUIDdJDuaiHRJfZ59xqA99QxmIcmsBZ----" ------MultipartBoundary--eCFBXfFmJiPIUIDdJDuaiHRJfZ59xqA99QxmIcmsBZ---- Content-Type: text/html Content-ID: Content-Transfer-Encoding: quoted-printable Content-Location: https://aardgoose.github.io/CaveView.js/installation.html CaveView installation =09

Cave View - installation instructions - V2 API

Install CaveView files

A zip archive containing the required files for the latest release are = here.

There is no need to build the JavaScript application from source files = unless you would like to modify the application.

Unzip the archive in a convenient location on your web server

Using in a web page

CaveView requires two files to be included in the page. Replace the plac= eholder %path% with the path to the unzipped files on the server in the fol= lowing examples.

caveview.css

The side panel interface and on screen indicators are styled with cavevi= ew.css. Include this in the head section of the page.

	<link type=3D"text/css" href=3D"%path%/CaveView/css/caveview.css" =
rel=3D"stylesheet" />

CaveView.js

The CaveView application is provided in one javascript file. Include thi= s in the body section of the page. NOTE: The filen= ame has changed for the V2 API.

	<script type=3D"text/javascript" src=3D"%path%/CaveView/js/CaveVie=
w2.js" ></script>

Add a container element

Add an empty block element to the page, with a suitable id attribute. This contains the application, and be sized as required. For= example a div element:

<div id=3D'% element-id %' ></div>

Create a script to run the application

The application can be loaded using javascript, typically using an load = event handler. Replace the placeholder %...% elements with values appropria= te for your site.

<script type=3D"text/javascript" >

	function onLoad () {

		// display the user interface - and a blank canvas

		// the configuration object specifies the location of CaveView, surveys a=
nd terrain files

		var viewer =3D new CV2.CaveViewer( '% element-id %', {
			home: '% location of the unzipped CaveView directory on the survey %',
			surveyDirectory: '% location of the survey files on the server %',
			terrainDirectory: '% location of the terrain files on the server %'
		} );

		// if using the full user interface (UI)

		var ui =3D new CV2.CaveViewUI( viewer );

		// load a single survey to display

		ui.loadCave( '% survey filename %' );

		// or without the user interface

		viewer.loadCave( '% survey filename %' );

	}

</script>

alternatively provide a list of surveys to display, by replacing the loa= dCave() function call with loadCaveList() :

	ui.loadCaveList( [ '% survey filename 1 %', '% survey filename 2 %', =
'% survey filename 3 %' ] );

This can be automatically executed on page load by including a page load= handler in the page body tag:

<body onload=3D"onload();" >

CaveView should now display when the page is viewed.

The example files included demonstrate using multiple viewers on a page, changing the default view settings and altering the appearance of the viewe= r.

Removal

To remove the viewer from a page and reclaim memory used promptly:

	ui.dispose();
	ui =3D null;
	viewer =3D null;

Or if not using the UI, just the viewer:

	viewer.dispose();
	viewer =3D null;
------MultipartBoundary--eCFBXfFmJiPIUIDdJDuaiHRJfZ59xqA99QxmIcmsBZ---- Content-Type: text/css Content-Transfer-Encoding: quoted-printable Content-Location: https://aardgoose.github.io/CaveView.js/doc.css @charset "utf-8"; h1, h2 { margin: 0px 16px 1em; } h3, h4, h5, p, pre, dl { margin-left: 32px; margin-right: 32px; } h2 { border-bottom: 2px solid gray; } h3 { color: navy; } h4 { margin-top: 2em; background-color: rgb(238, 238, 238); padding: 3px 2p= x 1px; } * { font-family: sans-serif; } pre { font-family: monospace; font-weight: bold; background-color: rgb(238,= 238, 238); padding: 8px; } dd > span { display: inline-block; padding: 0px 2px; margin-right: 5px; bac= kground: rgb(238, 238, 238); } dd > span::before { content: "["; } dd > span::after { content: "]"; } dt { margin-bottom: 0.5em; font-weight: bold; color: rgb(102, 102, 102); pa= dding-left: 16px; } dd { margin-bottom: 1em; } ------MultipartBoundary--eCFBXfFmJiPIUIDdJDuaiHRJfZ59xqA99QxmIcmsBZ------