viewer.html 15.5 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>
Rurik Bugdanov's avatar
Rurik Bugdanov committed
35

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
36 37
    <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
38

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

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

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

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

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
54 55 56
  </head>
  <body>
    <div id='x3d_wrapper'>
57
      <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
58 59
        <scene>
          <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
60
          <!--<Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0' ></Viewpoint>-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
61 62
          <!-- 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
63 64 65
<!--          <group>
            <inline name="back" namespacename="back" url="models/m1/v1/background.x3d"/>
          </group>-->
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
          <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
86 87 88 89 90 91 92 93 94
        </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
95
        <div id='exit_button' title='Exit to models index'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
96
        <div id='help_button' title='Help'>?</div>
97
        <div id='download_button' title='Download 3d model (.obj & .x3d formats)'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
98
        <div id='download_button_ml' title='Download source files for ml'></div>
99
        <div id='view_src_images_button' title='View/slideshow source images (processed)'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
100
        <div id='menu_button' title='Menu'></div>
101
        <div id='extra_models_button' title='Load extra models' class='experimental'></div>
102
        <div id='align_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera heading and location using markers.
103 104
Instructions:
  1. Use approximate location control on the map to change initial approximation for the algorithm.
105
  2. Place at least 3 markers in the 3D scene (ctrl+click) - drag to position more precisely.
106
  3. Move all markers on the map to update their location - drag to position more precisely.
107
  4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
108
  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
109 110
        <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>
111
      <!--<div id='align_tr_button' title='Align tilt and roll' class='edit'></div>-->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
112
        <div id='align_tr_button' title='Run least squares fitting algorithm (Gauss-Newton) for camera tilt, roll and altitude (relative).
113 114 115 116 117 118
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.
119
  4. Click this button - the results will appear in a dialog window with "apply"/"cancel".
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
120
  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
121
    </div>
122

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
123
    <div id='info-wrapper'>
124
        <div id='window-error'></div>
125 126
        <div id='window-viewinfo'></div>
        <div id='window-markinfo'></div>
127
        <div id='window-extrainfo' tabindex='1'></div>
128
        <div id='window-info'></div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
129 130 131 132 133
    </div>
    <div id='menu-content'>
        <div>
            <h2>Settings</h2>
            <table>
134 135 136 137
                <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
138 139
                <tr>
                    <td>Show marker info (satellite vs 3D model distalnce)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
140
                    <td><input id='markinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
141
                </tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
142
                <tr>
143
                    <td>Show view info (x, y, z, azimuth, elevation, roll)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
144
                    <td><input id='viewinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
145 146 147
                </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
148
                    <td><input id='moreinfo' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
149 150 151
                </tr>
                <tr>
                    <td>Show crosshair</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
152
                    <td><input id='crosshair' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
153 154 155
                </tr>
                <tr>
                    <td>Show pointer marker (green sphere over 3D scene)</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
156
                    <td><input id='pointer' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
157 158 159
                </tr>
                <tr>
                    <td>Highlight 3D elements on mouse over</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
160
                    <td><input id='highlight' type='checkbox' class='my-check-box donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
161 162 163
                </tr>
                <tr>
                    <td>View's parallel shift speed</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
164
                    <td><input id='shiftspeed' type='text' class='input donothide' /></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
165 166
                </tr>
                <tr>
167
                    <td>3D marker diameter, m</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
168
                    <td><input id='markersize' type='text' class='input donothide' /></td>
169 170 171
                </tr>
                <tr>
                    <td>3D marker color</td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
172 173 174 175 176 177
                    <td><input id='markercolor' type='text' class='input donothide' /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
178 179 180 181 182
                    <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
183 184 185
                </tr>
                <tr>
                    <td>&nbsp;</td>
186
                </tr>
187
                <tr hidden> <!-- class='experimental'> -->
188
                    <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
189
                </tr>
190
                <tr> <!-- class='experimental'> -->
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
191 192
                    <td>&nbsp;</td>
                </tr>
193
                <tr>
194
                    <td title='Adjust initial location and orientation'>Edit mode</td>
195 196
                    <td><input id='edit' type='checkbox' class='my-check-box donothide' /></td>
                </tr>
197 198 199 200
                <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>
201 202 203 204 205 206 207 208
                <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
209
                <tr class='edit' id='kml_tr'>
210 211 212 213 214
                    <td title='.kml:
* latitude and longitude,
* heading, tilt and roll angles
* altitude (relative to the ground)'>
                      Camera initial position and orientation data:
215 216 217 218 219
                    </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>
220 221 222
                    <td valign='middle'>
                      <div id='kmlstatus'></div>
                    </td>
223
                </tr>
224
                <tr class='edit' id='model_rating_tr'>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
225 226 227 228 229 230
                    <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
231
                <!--<tr class='experimental'>
232
                    <td>
233 234 235
                      <button id='align_0' class='donothide'>Align0</button>
                      <button id='align_1' class='donothide'>Align1</button>
                      <button id='align_2' class='donothide'>Align2</button>
236
                    </td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
237
                </tr>-->
238 239 240
                <tr>
                    <td>&nbsp;</td>
                </tr>
241
                <tr>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
242 243 244 245 246
                    <td><button>Close</button></td>
                </tr>
            </table>
        </div>
    </div>
247 248 249 250 251
    <div id='extra_models-content'>
        <div>
          <h2>Load extra models</h2>
        </div>
    </div>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
252 253 254
    <div id='help-content'>
        <div>
            <h2>3D Scene + Map</h2>
255
            <h3 style='color:rgba(200,200,255,1);'>Comparing 3D model and Map (satellite imagery) measurements</h3>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
256 257 258 259 260 261 262 263 264
            <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
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 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314
            <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
315 316
<!--                 <td><b>draggable objects (camera XY)</b></td> -->
                <td><b>draggable objects (stick to surfaces)</b></td>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
317 318 319 320 321 322
                <td>
                    <ul>
                        <li>markers only</li>
                    </ul>
                </td>
            </tr>
323 324 325 326 327 328 329 330
            <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>
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
331 332 333 334 335 336 337 338
            <tr>
                <td><button>Close</button></td>
            </tr>
            </table>
        </div>
    </div>
   </body>
</html>