Changeset 26883

Show
Ignore:
Timestamp:
14.02.2013 10:43:45 (7 years ago)
Author:
davidb
Message:

Latest round of changes for the panorama viewer

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

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    // thanh.tran@in2ideas.com 
    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