Changeset 26883


Ignore:
Timestamp:
2013-02-14T10:43:45+13:00 (11 years ago)
Author:
davidb
Message:

Latest round of changes for the panorama viewer

Location:
main/trunk/greenstone3/web/interfaces/default
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/greenstone3/web/interfaces/default/js/panoramaViewer.js

    r26872 r26883  
    2828}
    2929
    30     var panoContainer, camera, scene, renderer, projector;
     30var panoContainer, camera, scene, renderer, projector;
    3131
    3232var mouse = { x: 0, y: 0 };
    … …  
    4040    phi = 0, theta = 0,
    4141    mesh, sphereRadius = 500,
    42     meshRotation =  Math.PI,
     42    meshRotation =  Math.PI / 2 * 3,
    4343    panoSelectionRadius = 40;
    44 
    4544
    4645var panoDocList = new Array();
    … …  
    5251var nearbyPanoList = new Array();
    5352nearbyPanoList.ids = new Array();
    54 nearbyPanoList.pos = new Array();
    55 
    5653
    5754function initPanoramaViewer() {   
    58    
    5955    //Creating the document list to store data about the panoramams
    6056    var jsonNodeDiv = $("#jsonPanoNodes");
    … …  
    7369
    7470    panoContainer = document.getElementById( 'pano-container' );
    75 
    7671    // Creating the camera
    7772    // Setting width and height variables as the container dimensions changes when fov is changed
    78     width = panoContainer.offsetWidth;
    79     height = panoContainer.offsetHeight;
    80     aspect = width / height;
    81    
    82     // camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
    83     // camera = new THREE.PerspectiveCamera( fov, container.offsetWidth / container.offsetHeight, 1, 1100 );
     73    if(panoContainer.className == "pano_canvas_fullscreen") {
     74    width = window.innerWidth;
     75    height = window.innerHeight;
     76    aspect = width / height;
     77    } else if(panoContainer.className == "pano_canvas_half") {
     78    width = panoContainer.offsetWidth;
     79    height = panoContainer.offsetHeight;
     80    aspect = width / height;
     81    }
    8482    camera = new THREE.PerspectiveCamera( fov, aspect, 1, 1100 );
    8583    camera.target = new THREE.Vector3(0, 0, 0 );
    … …  
    9088    projector = new THREE.Projector();
    9189   
     90    var sourceFile = gs.documentMetadata[panoDocList.ids[0]].Image;
     91    var assocfilepath = gs.documentMetadata[panoDocList.ids[0]].assocfilepath;
     92    var httpPath = gs.collectionMetadata.httpPath;
     93
     94    var fullPanoURL = httpPath + "/index/assoc/" + assocfilepath + "/" + sourceFile;
     95
    9296    // Creating a sphere with the panorama applied as a texture
    9397    if (Detector.webgl) {
    94     mesh = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( gs.collectionMetadata.httpPath + '/import/panorama/' + 'panorama0.jpg' ), wireframe: false } ) );
     98    mesh = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( fullPanoURL ), wireframe: false, overdraw: true, opacity:0 } ) );
    9599    } else {
    96     mesh = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius, 30, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( gs.collectionMetadata.httpPath + '/import/panorama/' + 'panorama0.jpg' ), wireframe: false, overdraw: true } ) );
    97     }
     100    mesh = new THREE.Mesh( new THREE.SphereGeometry( sphereRadius, 30, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( fullPanoURL ), wireframe: false, overdraw: true, opacity:0 } ) );
     101    }
     102   
    98103    mesh.scale.x = -1;
    99     // mesh.rotation.y = meshRotation + (90 * Math.PI / 180);
    100     scene.add( mesh ); // Adding the sphere to the scene
     104    // Adding the sphere to the scene
     105    scene.add( mesh );
    101106
    102107    switchPanorama(panoDocList.ids[0]);
    103108
    104109    renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();
    105     //renderer.setSize( window.innerWidth, window.innerHeight );
    106     //renderer.setSize(container.offsetWidth,container.offsetHeight);
    107110    renderer.setSize(width,height);
    108111
    … …  
    115118    panoContainer.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
    116119    panoContainer.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
    117    
    118     // window.addEventListener( 'resize', onWindowResize, false );
     120
     121    if(panoContainer.className == "pano_canvas_fullscreen")
     122    window.addEventListener( 'resize', onWindowResize, false );
    119123}
    120124
    … …  
    153157}
    154158
    155 /*
    156 function fullscreenToggle () {
    157     console.log("blah");
    158     if( THREEx.FullScreen.activated() ){
    159     THREEx.FullScreen.cancel();
    160 
    161     camera.aspect = width / height;
    162     camera.updateProjectionMatrix();
    163 
    164     renderer.setSize( width, height );
    165 
    166     }else{
    167     console.log("Fullscreen");
    168     THREEx.FullScreen.request(document.getElementById( 'asdf' ));
    169 
    170     //THREEx.FullScreen.request(panoContainer);
    171 
    172     // THREEx.FullScreen.request(document.getElementById( renderer ));
    173     camera.aspect = window.innerWidth / window.innerHeight;
    174     camera.updateProjectionMatrix();
    175 
    176     //renderer.setSize( window.innerWidth, window.innerHeight );
    177 
    178     }
    179 }
    180 */
    181 
    182159function switchPanorama( panoramaID, destMarker ) {
    183160    // Building the file path
    184     var sourceFile = gs.documentMetadata[panoramaID].SourceFile;
     161    var sourceFile = gs.documentMetadata[panoramaID].Image;
    185162    var assocfilepath = gs.documentMetadata[panoramaID].assocfilepath;
    186163    var httpPath = gs.collectionMetadata.httpPath;
    … …  
    188165    var fullPanoURL = httpPath + "/index/assoc/" + assocfilepath + "/" + sourceFile;
    189166
    190     console.log("pano URL = " + fullPanoURL);
    191    
    192167    // Creating the material
    193168    if (Detector.webgl) {
    … …  
    205180   
    206181    new TWEEN.Tween(mesh.materials[0]).to({opacity: 0}, 500).onComplete(function () {
     182        // Rotation
     183        if (gs.documentMetadata[panoramaID].Angle) {
     184        var temp = 360 + parseFloat(gs.documentMetadata[panoramaID].Angle);
     185        temp = temp % 360;
     186        console.log(temp);
     187        mesh.rotation.y =  meshRotation + (gs.documentMetadata[panoramaID].Angle * Math.PI / 180);
     188        } else if (gs.documentMetadata[panoramaID].cv_rotation)
     189        mesh.rotation.y =  meshRotation + (gs.documentMetadata[panoramaID].cv_rotation * Math.PI / 180);
     190        else
     191        mesh.rotation.y = meshRotation;
     192       
    207193        mesh.materials[0] = texture;       
    208194        new TWEEN.Tween(mesh.materials[0]).to({opacity: 1}, 500).start();
    209195    }).start();
    210196   
    211     // Setting the mesh material
    212 
    213    
    214     // Rotation
    215     if (gs.documentMetadata[panoramaID].cv_rotation)
    216     mesh.rotation.y =  meshRotation + (gs.documentMetadata[panoramaID].cv_rotation * Math.PI / 180);
    217     else
    218     mesh.rotation.y = meshRotation;
    219 
     197   
    220198    // Checking if there are markers to remove
    221     if (nearbyPanoList.length > 1) {
     199    if (nearbyPanoList.length > 0) {
    222200    for(var i = 0; i < nearbyPanoList.length; i++) {
    223201        panoContainer.removeChild(nearbyPanoList[i]);
    … …  
    241219    if(calculateDistance(startPanoLonLat,endPanoLonLat) < panoSelectionRadius) {
    242220        var bearing = calculateBearing(startPanoLonLat,endPanoLonLat);
    243         console.log(bearing);
    244221        var pos =  degreesToCoords(bearing, sphereRadius);
    245222        var navMarker = NavMarker.create(panoDocList.ids[i],pos);   
    … …  
    260237}
    261238
    262 /*
     239
    263240function onWindowResize() {
    264241    camera.aspect = window.innerWidth / window.innerHeight;
    … …  
    267244    renderer.setSize( window.innerWidth, window.innerHeight );
    268245}
    269 */
     246
    270247
    271248function onDocumentMouseDown( event ) {
    272249    event.preventDefault();
    273    
    274250    isUserInteracting = true;
    275    
    276251      onPointerDownPointerX = event.clientX;
    277252      onPointerDownPointerY = event.clientY;
    278      
    279253      onPointerDownLon = lon;
    280254      onPointerDownLat = lat;
    … …  
    284258function onDocumentMouseMove( event ) {
    285259    if ( isUserInteracting ) {
    286    
    287260    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
    288261    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
    … …  
    297270
    298271function onDocumentMouseWheel( event ) {
    299    
    300     // WebKit
    301    
    302272    if ( event.wheelDeltaY ) {
    303    
     273    // WebKit
    304274    fov -= event.wheelDeltaY * 0.05;
    305    
    306     // Opera / Explorer 9
    307    
    308275    } else if ( event.wheelDelta ) {
    309    
     276    // Opera / Explorer 9   
    310277    fov -= event.wheelDelta * 0.05;
    311    
    312     // Firefox
    313    
    314278    } else if ( event.detail ) {
    315    
     279    // Firefox 
    316280    fov += event.detail * 1.0;
    317    
    318281    }
    319282
    … …  
    324287    }
    325288
    326     // camera.projectionMatrix.makePerspective( fov, container.offsetWidth / container.offsetHeight, 1, 1100 );
    327289    camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect , 1, 1100 );
    328290    _render();
    329    
    330291}
    331292
    332293function _animate() {
    333    
    334294    requestAnimationFrame( _animate );
    335295    _render();
    … …  
    339299
    340300function _render() {
    341     /*
    342     lat = Math.max( - 85, Math.min( 85, lat ) );
    343     phi = THREE.Math.degToRad( 90 - lat );
    344     theta = THREE.Math.degToRad( lon );
    345     */
    346 
    347301    lat = Math.max( - 85, Math.min( 85, lat ) );
    348302    phi = ( 90 - lat ) * Math.PI / 180;
    … …  
    365319    var i, angle, sameSide, p2D, marker;
    366320
     321    // Snippet of code from Thanh Tran from in2ideas
     322    // [email protected]
    367323    for (i = 0; i < nearbyPanoList.length; ++i) {
    368324    marker =  nearbyPanoList[i];
    … …  
    372328    p2D.y = - (p2D.y - 1)/2 * height;
    373329   
    374     //my trick
    375330    angle = Math.acos(camUnitVector.dot(marker.unitVector)) * 180 / 3.14;
    376331    sameSide = (angle < 90);
    … …  
    384339    }
    385340    }
    386    
    387    
    388341    renderer.render( scene, camera );
    389    
    390 }
     342}

  • main/trunk/greenstone3/web/interfaces/default/style/core.css

    r26871 r26883  
    817817
    818818.pano_canvas_fullscreen{
    819     margin:0px auto;
    820     width:1280px;
    821     height:720px;
     819    margin-left:0px auto;
     820    margin-right:0px auto;
     821    width:1024px;
     822    height:768px;;
    822823}
    823824

  • main/trunk/greenstone3/web/interfaces/default/transform/pages/classifier.xsl

    r26871 r26883  
    157157                    <xsl:text>{</xsl:text>
    158158                    <xsl:text disable-output-escaping="yes">"nodeID":"</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">",</xsl:text>
    159                     <xsl:text disable-output-escaping="yes">"title":"</xsl:text><xsl:value-of disable-output-escaping="yes" select="metadataList/metadata[@name = 'Title']"/><xsl:text disable-output-escaping="yes">",</xsl:text>
    160                     <xsl:text disable-output-escaping="yes">"lat":</xsl:text><xsl:value-of disable-output-escaping="yes" select="metadataList/metadata[@name = 'Latitude']"/><xsl:text>,</xsl:text>
    161                     <xsl:text disable-output-escaping="yes">"lng":</xsl:text><xsl:value-of disable-output-escaping="yes" select="metadataList/metadata[@name = 'Longitude']"/>
    162159                    <xsl:text>}</xsl:text>
    163160                    <xsl:if test="not(position() = count(//documentNode))">
    … …  
    199196                <gsf:metadata name="Latitude" hidden="true"/>
    200197                <gsf:metadata name="Longitude" hidden="true"/>
     198                <gsf:metadata name="Image" hidden="true"/>
    201199                <gsf:metadata name="SourceFile" hidden="true"/>
    202200                <gsf:metadata name="assocfilepath" hidden="true"/>
    203201        <gsf:metadata name="PhotoType" hidden="true"/>
    204202        <gsf:metadata name="cv.rotation" hidden="true"/>
    205         </xsl:template>
     203        <gsf:metadata name="ex.Angle" hidden="true"/>
     204        <gsf:metadata name="Angle" hidden="true"/>
     205       
     206    </xsl:template>
    206207   
    207208    <xsl:template name="panoramaViewerFeatures">

  • main/trunk/greenstone3/web/interfaces/default/transform/pages/query.xsl

    r26871 r26883  
    569569        <gsf:metadata name="Latitude" hidden="true"/>
    570570        <gsf:metadata name="Longitude" hidden="true"/>
     571        <gsf:metadata name="Image" hidden="true"/>
     572        <gsf:metadata name="SourceFile" hidden="true"/>
     573                <gsf:metadata name="assocfilepath" hidden="true"/>
     574        <gsf:metadata name="PhotoType" hidden="true"/>
     575        <gsf:metadata name="cv.rotation" hidden="true"/>
     576        <gsf:metadata name="Angle" hidden="true"/>
     577
     578
    571579    </xsl:template>
    572580
Note: See TracChangeset for help on using the changeset viewer.