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
CaveView requires two files to be included in the page. Replace the placeholder %path% with the path to the unzipped files on the server in the following examples.
The side panel interface and on screen indicators are styled with caveview.css. Include this in the head section of the page.
<link type="text/css" href="%path%/CaveView/css/caveview.css" rel="stylesheet" />
The CaveView application is provided in one javascript file. Include this in the body section of the page. NOTE: The filename has changed for the V2 API.
<script type="text/javascript" src="%path%/CaveView/js/CaveView2.js" ></script>
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='% element-id %' ></div>
The application can be loaded using javascript, typically using an load event handler. Replace the placeholder %...% elements with values appropriate for your site.
<script type="text/javascript" >
function onLoad () {
// display the user interface - and a blank canvas
// the configuration object specifies the location of CaveView, surveys and terrain files
var viewer = 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 = 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 loadCave() 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="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 viewer.
To remove the viewer from a page and reclaim memory used promptly:
ui.dispose(); ui = null; viewer = null;
Or if not using the UI, just the viewer:
viewer.dispose(); viewer = null;