1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
From: <Saved by Blink>
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: <frame-F25506009C17180F1D15EDA63865EFC8@mhtml.blink>
Content-Transfer-Encoding: quoted-printable
Content-Location: https://aardgoose.github.io/CaveView.js/installation.html
<!DOCTYPE html><html xmlns=3D"http://www.w3.org/1999/xhtml" xml:lang=3D"en-=
gb" lang=3D"en-gb" dir=3D"ltr"><head><meta http-equiv=3D"Content-Type" cont=
ent=3D"text/html; charset=3DUTF-8">
<title>CaveView installation</title>
=09
<link type=3D"text/css" href=3D"https://aardgoose.github.io/CaveView.js/do=
c.css" rel=3D"stylesheet">
</head>
<body>
<h1>Cave View - installation instructions - V2 API</h1>
<h2>Install CaveView files</h2>
<p>A zip archive containing the required files for the latest release are =
<a href=3D"https://github.com/aardgoose/CaveView.js/releases">here</a>.</p>
<p>There is no need to build the JavaScript application from source files =
unless you would like to modify the application.</p>
<p>Unzip the archive in a convenient location on your web server </p>
<h2>Using in a web page</h2>
<p>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.</p><p>
</p><h3>caveview.css</h3>
<p>The side panel interface and on screen indicators are styled with cavevi=
ew.css. Include this in the <strong>head</strong> section of the page.</p>
<pre> <link type=3D"text/css" href=3D"%path%/CaveView/css/caveview.css" =
rel=3D"stylesheet" /></pre>
<h3>CaveView.js</h3>
<p>The CaveView application is provided in one javascript file. Include thi=
s in the <strong>body</strong> section of the page. <strong>NOTE: The filen=
ame has changed for the V2 API.</strong></p>
<pre> <script type=3D"text/javascript" src=3D"%path%/CaveView/js/CaveVie=
w2.js" ></script></pre>
<h3>Add a container element</h3>
<p>Add an empty block element to the page, with a suitable <strong>id</stro=
ng> attribute. This contains the application, and be sized as required. For=
example a <strong>div</strong> element:</p>
<pre><div id=3D'% element-id %' ></div></pre>
<h3>Create a script to run the application</h3>
<p>The application can be loaded using javascript, typically using an load =
event handler. Replace the placeholder %...% elements with values appropria=
te for your site.</p>
<pre><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>
</pre>
<p>alternatively provide a list of surveys to display, by replacing the loa=
dCave() function call with loadCaveList() :</p>
<pre> ui.loadCaveList( [ '% survey filename 1 %', '% survey filename 2 %', =
'% survey filename 3 %' ] );
</pre>
<p>This can be automatically executed on page load by including a page load=
handler in the page <strong>body</strong> tag:</p>
<pre><body onload=3D"onload();" ></pre>
<p>CaveView should now display when the page is viewed.</p>
<p>The example files included demonstrate using multiple viewers on a page,
changing the default view settings and altering the appearance of the viewe=
r.</p>
<h3>Removal</h3>
<p>To remove the viewer from a page and reclaim memory used promptly:</p>
<pre> ui.dispose();
ui =3D null;
viewer =3D null;
</pre>
<p>Or if not using the UI, just the viewer:</p>
<pre> viewer.dispose();
viewer =3D null;
</pre>
</body></html>
------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------
|
