viewer.html 16.7 KB
Newer Older
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
1 2 3 4 5
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Scene+Map</title>
Rurik Bugdanov's avatar
Rurik Bugdanov committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

    <!-- 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 -->

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
21 22 23
    <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>
24
    <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls-location.js'></script>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
25 26 27
    <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>

28 29 30 31
    <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>

32
    <!---script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
33 34
    <script type='text/javascript' src='js/x3dom_init.js'></script>
    <script type='text/javascript' src='js/x3dom_functions.js'></script>
35
    <script type='text/javascript' src='js/x3dom_deltas.js'></script>
Rurik Bugdanov's avatar
Rurik Bugdanov committed
36

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
37 38
    <script type='text/javascript' src='js/leaflet_init.js'></script>
    <script type='text/javascript' src='js/x3l.js'></script>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
39

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
40 41 42 43 44
    <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>
45
    <script type='text/javascript' src='js/ui_extra_models.js'></script>
46
    <script type='text/javascript' src='js/ui_extra_models_match.js'></script>
Rurik Bugdanov's avatar
Rurik Bugdanov committed
47

48 49
    <script type='text/javascript' src='js/align_functions.js'></script>

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
50
    <script type='text/javascript' src='js/util_functions.js'></script>
51 52

    <script type='text/javascript' src='js/kml.js'></script>
Rurik Bugdanov's avatar
Rurik Bugdanov committed
53 54
    <!-- endbuild -->

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
55 56 57
  </head>
  <body>
    <div id='x3d_wrapper'>
58
      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
59 60
        <scene>
          <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
61
          <!--<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0' ></Viewpoint>-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
62 63
          <!-- 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>-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
64 65 66
<!--          <group>
            <inline name="back" namespacename="back" url="models/m1/v1/background.x3d"/>
          </group>-->
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
          <group id='viewpoint_group'>
            <transform id='viewpoint_transform'>
              <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'>
              </Viewpoint>
<!--
              <transform id="testbox" DEF="boxTrafo" translation='0 0 0'>
                <transform translation='0 0 -5.5'>
                  <shape DEF="boxShape">
                    <appearance DEF="boxApp">
                      <material diffuseColor="1 0 0" specularColor="0.7 0 0" />
                    </appearance>
                    <box DEF="box" size='0.3,0.3,0.3'></box>
                  </shape>
                </transform>
              </transform>
              -->
            </transform>

          </group>

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
87 88 89 90 91 92 93 94 95
        </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'>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
96
        <div id='exit_button' title='Exit to models index'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
97
        <div id='help_button' title='Help'>?</div>
98
        <div id='download_button' title='Download 3d model (.obj & .x3d formats)'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
99
        <div id='download_button_ml' title='Download source files for ml'></div>
100
        <div id='view_src_images_button' title='View/slideshow source images (processed)'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
101
        <div id='menu_button' title='Menu'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
102 103
        <div id='toggle_lidar_button' title='Toggle LIDAR mode. This limits the distance of the displayed model to the maximum acquisition distance of a LIDAR.
To change LIDAR scan distance, edit near and far clipping planes in the menu'></div>
104
        <div id='extra_models_button' title='Load extra models' class='experimental'></div>
105
        <div id='align_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera heading and location using markers.
106 107
Instructions:
  1. Use approximate location control on the map to change initial approximation for the algorithm.
108
  2. Place at least 3 markers in the 3D scene (ctrl+click) - drag to position more precisely.
109
  3. Move all markers on the map to update their location - drag to position more precisely.
110
  4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
111
  5. To save the result click upload button (Camera initial position and orientation data) in the menu.' class='edit'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
112 113
        <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>
114
        <div id='markers_delta_button' title='link marker from model to marker from map (height==viewer height)' class='edit'></div>
115
      <!--<div id='align_tr_button' title='Align tilt and roll' class='edit'></div>-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
116
        <div id='align_tr_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera tilt, roll and altitude (relative).
117 118 119 120 121 122
Instructions:
  1. Place markers in the 3D scene (ctrl+click) - drag to position more precisely.
      * 2 markers - adjust tilt and altitude, while roll = 0&deg;
      * 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.
123
  4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
124
  5. To save the result click upload button (Camera initial position and orientation data) in the menu.' class='edit'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
125
    </div>
126

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
127
    <div id='info-wrapper'>
128
        <div id='window-error'></div>
129 130
        <div id='window-viewinfo'></div>
        <div id='window-markinfo'></div>
131
        <div id='window-extrainfo' tabindex='1'></div>
132
        <div id='window-info'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
133 134 135 136 137
    </div>
    <div id='menu-content'>
        <div>
            <h2>Settings</h2>
            <table>
138 139 140 141
                <tr>
                    <td>Display world (checked) or model coordinates</td>
                    <td><input id='global_coordinates' type='checkbox' class='my-check-box donothide' /></td>
                </tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
142 143
                <tr>
                    <td>Show marker info (satellite vs 3D model distalnce)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
144
                    <td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
145
                </tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
146
                <tr>
147
                    <td>Show view info (x, y, z, azimuth, elevation, roll)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
148
                    <td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
149 150 151
                </tr>
                <tr>
                    <td>Show more info (hitting ray: id, x, y, z, d<sub>xz</sub>, d<sub>xyz</sub>)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
152
                    <td><input id='moreinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
153 154 155
                </tr>
                <tr>
                    <td>Show crosshair</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
156
                    <td><input id='crosshair' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
157 158 159
                </tr>
                <tr>
                    <td>Show pointer marker (green sphere over 3D scene)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
160
                    <td><input id='pointer' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
161 162 163
                </tr>
                <tr>
                    <td>Highlight 3D elements on mouse over</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
164
                    <td><input id='highlight' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
165 166 167
                </tr>
                <tr>
                    <td>View's parallel shift speed</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
168
                    <td><input id='shiftspeed' type='text' class='input donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
169 170
                </tr>
                <tr>
171
                    <td>3D marker diameter, m</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
172
                    <td><input id='markersize' type='text' class='input donothide' /></td>
173 174 175
                </tr>
                <tr>
                    <td>3D marker color</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
176 177
                    <td><input id='markercolor' type='text' class='input donothide' /></td>
                </tr>
178 179 180 181 182 183 184 185
                <tr>
                    <td>Clipping plane near, m</td>
                    <td><input id='clipnear' type='text' class='input donothide' /></td>
                </tr>
                <tr>
                    <td>Clipping plane far, m</td>
                    <td><input id='clipfar' type='text' class='input donothide' /></td>
                </tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
186 187 188 189
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
190 191 192 193 194
                    <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
195 196 197
                </tr>
                <tr>
                    <td>&nbsp;</td>
198
                </tr>
199
                <tr hidden> <!-- class='experimental'> -->
200
                    <td><a id='lpl' title='Viewer for the almost raw image set used to generate the 3d model' >Set of 4 images</a></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
201
                </tr>
202
                <tr> <!-- class='experimental'> -->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
203 204
                    <td>&nbsp;</td>
                </tr>
205
                <tr>
206
                    <td title='Adjust initial location and orientation'>Edit mode</td>
207 208
                    <td><input id='edit' type='checkbox' class='my-check-box donothide' /></td>
                </tr>
209 210 211 212
                <tr class='edit' title='also works for multiple loaded models'>
                    <td>Manual position and orientation dialog</td>
                    <td><input id='manualposor' type='checkbox' class='my-check-box donothide' /></td>
                </tr>
213 214 215 216 217 218 219 220
                <tr class='edit'>
                    <td title=''>Import coordinates from another model</td>
                    <td><input id='model_name' type='text' class='input donothide' placeholder='model name' /></td>
                    <td><button id='import_coordinates_button' class='donothide' >Apply</button></td>
                    <td valign='middle'>
                      <div id='imstatus'></div>
                    </td>
                </tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
221
                <tr class='edit' id='kml_tr'>
222 223 224 225 226
                    <td title='.kml:
* latitude and longitude,
* heading, tilt and roll angles
* altitude (relative to the ground)'>
                      Camera initial position and orientation data:
227 228 229 230 231
                    </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>
232 233 234
                    <td valign='middle'>
                      <div id='kmlstatus'></div>
                    </td>
235
                </tr>
236
                <tr class='edit' id='model_rating_tr'>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
237 238 239 240 241 242
                    <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
243
                <!--<tr class='experimental'>
244
                    <td>
245 246 247
                      <button id='align_0' class='donothide'>Align0</button>
                      <button id='align_1' class='donothide'>Align1</button>
                      <button id='align_2' class='donothide'>Align2</button>
248
                    </td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
249
                </tr>-->
250 251 252
                <tr>
                    <td>&nbsp;</td>
                </tr>
253
                <tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
254 255 256 257 258
                    <td><button>Close</button></td>
                </tr>
            </table>
        </div>
    </div>
259 260 261 262 263
    <div id='extra_models-content'>
        <div>
          <h2>Load extra models</h2>
        </div>
    </div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
264 265 266
    <div id='help-content'>
        <div>
            <h2>3D Scene + Map</h2>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
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 297 298 299 300 301
            <h3 style='color:rgba(200,200,255,1);'>3D navigation</h3>
            <table>
            <tr>
                <td><b>mouse left button</b></td>
                <td>look around</td>
            </tr>
            <tr>
                <td><b>mouse right button</b></td>
                <td>move camera forward/backward</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>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>
            </table>
302
            <h3 style='color:rgba(200,200,255,1);'>Comparing 3D model and Map (satellite imagery) measurements</h3>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
303 304 305 306 307 308 309 310 311
            <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339
            <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
340 341
                        <li>create marker, relative height = surface hitting point height</li>
                        <li>remove marker</li>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
342 343 344 345
                    </ul>
                </td>
            </tr>
            <tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
346 347
<!--                 <td><b>draggable objects (camera XY)</b></td> -->
                <td><b>draggable objects (stick to surfaces)</b></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
348 349 350 351 352 353 354 355 356 357 358 359 360 361
                <td>
                    <ul>
                        <li>markers only</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td><button>Close</button></td>
            </tr>
            </table>
        </div>
    </div>
   </body>
</html>