viewer.html 13.5 KB
<!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&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.
  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>&nbsp;</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>&nbsp;</td>
                </tr>
                <tr class='experimental'>
                    <td><a id='lpl' >Loop player</a></td>
                </tr>
                <tr class='experimental'>
                    <td>&nbsp;</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>&nbsp;</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>