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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Scene+Map</title>
<!-- build:css css/test.css -->
<!-- bower:css -->
<!-- endbower -->
<link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
<link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>
<link rel='stylesheet' type='text/css' href='js/ui.css'></link>
<!-- endbuild -->
<!-- build:js js/test.js -->
<!-- bower:js -->
<script src='bower_components/jquery/dist/jquery.js'></script>
<!-- endbower -->
<script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/leaflet/L.extra.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls-location.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script>
<script type='text/javascript' src='js/numbers/numbers.js'></script>
<script type='text/javascript' src='js/numbers/numbers.matrix.extra.js'></script>
<script type='text/javascript' src='js/numbers/numbers.calculus.extra.js'></script>
<!---script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script-->
<script type='text/javascript' src='js/x3dom_init.js'></script>
<script type='text/javascript' src='js/x3dom_functions.js'></script>
<script type='text/javascript' src='js/leaflet_init.js'></script>
<script type='text/javascript' src='js/x3l.js'></script>
<script type='text/javascript' src='js/ui_init.js'></script>
<script type='text/javascript' src='js/ui_menu.js'></script>
<script type='text/javascript' src='js/ui_help.js'></script>
<script type='text/javascript' src='js/ui_functions.js'></script>
<script type='text/javascript' src='js/ui_align.js'></script>
<script type='text/javascript' src='js/align_functions.js'></script>
<script type='text/javascript' src='js/util_functions.js'></script>
<script type='text/javascript' src='js/kml.js'></script>
<!-- endbuild -->
</head>
<body>
<div id='x3d_wrapper'>
<x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
<scene>
<navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
<!--<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0' ></Viewpoint>-->
<!-- in x3dom 1.7.2 - bug: zNear does not work properly -->
<!--<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0' zNear='3'></Viewpoint>-->
<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>
<!-- <group>
<inline name="back" namespacename="back" url="models/m1/v1/background.x3d"/>
</group>-->
</scene>
</x3d>
</div>
<div id='map_wrapper'>
<div id="leaflet_map"></div>
</div>
<div id='crosshair_h' class='crosshair'></div>
<div id='crosshair_v' class='crosshair'></div>
<div id='help_wrapper'>
<div id='exit_button' title='Exit to models index'></div>
<div id='help_button' title='Help'>?</div>
<div id='download_button' title='Download 3d model (.obj & .x3d formats)'></div>
<div id='menu_button' title='Menu'></div>
<div id='align_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera heading and location using markers.
Instructions:
1. Use approximate location control on the map to change initial approximation for the algorithm.
2. Place at least 3 markers in the 3D scene (ctrl+click) - drag to position more precisely.
3. Move all markers on the map to update their location - drag to position more precisely.
4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
5. To save the result click upload button (Camera initial position and orientation data) in the menu.' class='edit'></div>
<div id='align_button_heading' title='variable heading, fixed location' class='edit'></div>
<div id='align_button_location' title='variable location, fixed heading' class='edit'></div>
<!--<div id='align_tr_button' title='Align tilt and roll' class='edit'></div>-->
<div id='align_tr_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera tilt, roll and altitude (relative).
Instructions:
1. Place markers in the 3D scene (ctrl+click) - drag to position more precisely.
* 2 markers - adjust tilt and altitude, while roll = 0°
* 3+ markers - adjust tilt, roll and altitude
2. Move all markers on the map to update their location - drag to position more precisely.
3. Turn on "Switch and Elevation control mode" for the map, drag markers over map to set approximate altitude relative to the camera.
4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
5. To save the result click upload button (Camera initial position and orientation data) in the menu.' class='edit'></div>
</div>
<div id='info-wrapper'>
<div id='window-error'></div>
<div id='window-viewinfo'></div>
<div id='window-markinfo'></div>
<div id='window-info'></div>
</div>
<div id='menu-content'>
<div>
<h2>Settings</h2>
<table>
<tr>
<td>Display world (checked) or model coordinates</td>
<td><input id='global_coordinates' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Show marker info (satellite vs 3D model distalnce)</td>
<td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Show view info (x, y, z, azimuth, elevation, skew)</td>
<td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Show more info (hitting ray: id, x, y, z, d<sub>xz</sub>, d<sub>xyz</sub>)</td>
<td><input id='moreinfo' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Show crosshair</td>
<td><input id='crosshair' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Show pointer marker (green sphere over 3D scene)</td>
<td><input id='pointer' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>Highlight 3D elements on mouse over</td>
<td><input id='highlight' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr>
<td>View's parallel shift speed</td>
<td><input id='shiftspeed' type='text' class='input donothide' /></td>
</tr>
<tr>
<td>3D marker diameter, m</td>
<td><input id='markersize' type='text' class='input donothide' /></td>
</tr>
<tr>
<td>3D marker color</td>
<td><input id='markercolor' type='text' class='input donothide' /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<button id='reset_view' class='donothide' title='Horizontal: heading=initial, tilt=0, roll=0. Or press r-key'>Reset view (r)</button>
<button id='reset_view_t' class='donothide' title='Tilted: heading=initial, tilt=initial, roll=0. Or press t-key'>Reset view (t)</button>
<button id='remove_markers' class='donothide' >Remove markers</button>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr class='experimental'>
<td><a id='lpl' >Loop player</a></td>
</tr>
<tr class='experimental'>
<td> </td>
</tr>
<tr>
<td title='Adjust initial location and orientation'>Edit mode</td>
<td><input id='edit' type='checkbox' class='my-check-box donothide' /></td>
</tr>
<tr class='edit' id='kml_tr'>
<td title='.kml:
* latitude and longitude,
* heading, tilt and roll angles
* altitude (relative to the ground)'>
Camera initial position and orientation data:
</td>
<td>
<button id='restorekml' class='ic donothide' title='restore'><img src='js/images/ic_file_download_black_48dp_1x.png' class='icim donothide'/></button>
<button id='savekml' class='ic donothide' title='save'><img src='js/images/ic_file_upload_black_48dp_1x.png' class='icim donothide'/></button>
</td>
<td valign='middle'>
<div id='kmlstatus'></div>
</td>
</tr>
<tr class='edit' id='model_rating_tr'>
<td>Model rating: </td>
<td><input id='model_rating' type='text' class='input donothide' value='0' /></td>
<td valign='middle'>
<div id='rstatus'></div>
</td>
</tr>
<!--<tr class='experimental'>
<td>
<button id='align_0' class='donothide'>Align0</button>
<button id='align_1' class='donothide'>Align1</button>
<button id='align_2' class='donothide'>Align2</button>
</td>
</tr>-->
<tr>
<td> </td>
</tr>
<tr>
<td><button>Close</button></td>
</tr>
</table>
</div>
</div>
<div id='help-content'>
<div>
<h2>3D Scene + Map</h2>
<h3 style='color:rgba(200,200,255,1);'>Comparing 3D model and Map (satellite imagery) measurements</h3>
<ul>
<li>Place a marker in the 3D scene near the feature of interest. Drag the marker closer if needed.<br/>This will set the 3D model distance.</li>
<li>Drag the corresponding marker over the map to what looks like the feature of interest to set the map distance.<br/>If the <b>show marker info</b> is enabled the distances and the difference will be displayed.</li>
</ul>
Update measurements:
<ul>
<li>Map distance - drag marker over map</li>
<li>3D model distance - drag marker over 3D scene</li>
</ul>
<h3 style='color:rgba(200,200,255,1);'>Map</h3>
<table>
<tr>
<td><b>ctrl + left click</b></td>
<td>
<ul>
<li>create markers, relative height = 0</li>
<li>remove markers</li>
</ul>
</td>
</tr>
<tr>
<td><b>draggable objects (global XZ)</b></td>
<td>
<ul>
<li>markers</li>
<li>camera base (green)</li>
<li>heading crosshair (white)</li>
</ul>
</td>
</tr>
</table>
<h3 style='color:rgba(200,200,255,1);'>Scene</h3>
<table>
<tr>
<td><b>ctrl + left click</b></td>
<td>
<ul>
<li>create markers, relative height = surface hitting point height</li>
<li>remove markers</li>
</ul>
</td>
</tr>
<tr>
<td><b>mouse wheel (scroll)</b></td>
<td>
<ul>
<li>change field of view (= camera focal length)</li>
</ul>
</td>
</tr>
<tr>
<td><b>mouse wheel (drag)</b></td>
<td>
<ul>
<li>move camera over its XY (= parallel shift)</li>
</ul>
</td>
</tr>
<tr>
<!-- <td><b>draggable objects (camera XY)</b></td> -->
<td><b>draggable objects (stick to surfaces)</b></td>
<td>
<ul>
<li>markers only</li>
</ul>
</td>
</tr>
<tr>
<td><b>r</b>-key</td>
<td>reset view (heading = initial, tilt = 0, roll = 0)</td>
</tr>
<tr>
<td><b>t</b>-key</td>
<td>reset view (heading = initial, tilt = initial, roll = 0)</td>
</tr>
<tr>
<td><button>Close</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>