Changeset 5457 for cowsclient/branches


Ignore:
Timestamp:
02/07/09 11:58:49 (10 years ago)
Author:
pnorton
Message:

Began customising the cowsclient code to include some additional features for QESDI.

Location:
cowsclient/branches/qesdi
Files:
10 added
1 deleted
10 edited
36 moved

Legend:

Unmodified
Added
Removed
  • cowsclient/branches/qesdi/buildout

    • Property svn:ignore set to
      .installed.cfg
  • cowsclient/branches/qesdi/buildout/buildout.cfg

    r5411 r5457  
    55  ../ 
    66 
    7 download-cache = /home/users/pnorton/python_eggs/ 
     7download-cache = ../../../../python_eggs/ 
    88 
    99[qesdi_ui] 
  • cowsclient/branches/qesdi/cowsclient/controllers/wmsviz.py

    r5364 r5457  
    3434        log.info(self.inputs) 
    3535        c.wmcURL = "" 
     36         
    3637        # check if all we're doing is removing a view item 
    3738        if 'removeItem' in self.inputs: 
    3839            return self.removeViewItem(self.inputs['removeItem']) 
     40         
    3941        # check if we're doing an AJAX callback to get some WMC data 
    40         if 'REQUEST' in self.inputs:             
     42        if 'REQUEST' in self.inputs: 
     43                         
    4144            if self.inputs['REQUEST'] == 'GetWebMapContext': 
    4245                wmc= GetWebMapContext(self) 
    4346                return wmc 
     47             
    4448            elif self.inputs['REQUEST'] == 'GetLegend': 
    4549                return GetLegend(self) 
  • cowsclient/branches/qesdi/cowsclient/lib/wmc_util.py

    r5364 r5457  
    1111from cowsclient.lib.base import * 
    1212from cowsclient.model.WMC import WMC 
    13 from cowsclient.lib import exceptions   
     13from cowsclient.lib import exceptions 
    1414import urllib2, urllib 
    1515import logging 
     
    2727    for wmcURL in wmcURLs: 
    2828        wmcDocs.append(WMC(wmcURL)) 
    29      
     29 
    3030    # now create a dictionary of WMS/layer from these docs - to avoid duplicate layers 
    3131    c.wms = {} 
     
    3737                if layer.name not in c.wms[layer.wmsURL]: 
    3838                    c.wms[layer.wmsURL].append(layer.name) 
    39      
     39 
    4040    # now create the form to post this data 
    4141    c.redirectToConterra = True; #TODO, remove? 
    4242    response.write(render('selectedItems')) 
    43      
    4443 
    45      
     44 
     45 
    4646def GetWebMapContext(self): 
    4747    """ 
     
    6060    """ 
    6161    endpoint = self.inputs['ENDPOINT'] 
     62 
    6263    if not endpoint: 
    6364        raise exceptions.MissingParameterValue, "ENDPOINT parameter required" 
    6465    try: 
    65         req = urllib2.Request(endpoint,urllib.urlencode(request.params),{'Cookie': request.headers.get('Cookie', '')}) 
     66        #req = urllib2.Request(endpoint,urllib.urlencode(request.params),{'Cookie': request.headers.get('Cookie', '')}) 
     67        req = urllib2.Request(endpoint, None, {'Cookie': request.headers.get('Cookie', '')}) 
     68        url = req.get_full_url() 
     69 
    6670        filehandle = urllib2.urlopen(req) 
    6771    except IOError: 
    6872        raise exceptions.URLUnavailable, "Could not access WMC endpoint: %s" % endpoint 
    69     response.headers['Content-Type'] = 'image/gif' 
    70     c.legendurl = endpoint 
    71     response.write(render('legendRender')) 
    7273     
    73      
     74    return "<img src=\"%s\" />" % (url,) 
     75#    response.headers['Content-Type'] = 'image/gif' 
     76#    response.write(filehandle.read()) 
     77 
    7478def RetrieveWebMapContext(self, endpoint): 
    7579    """ 
     
    7983    if not endpoint: 
    8084        raise exceptions.MissingParameterValue, "ENDPOINT parameter required" 
    81     log.info('Getting WebMapContext from endpoint: ' + endpoint)    
    82     urlstring=('%s&request=GetContext'%(str(endpoint))) 
     85    log.info('Getting WebMapContext from endpoint: ' + endpoint) 
     86    #urlstring=('%s&request=GetContext'%(str(endpoint))) 
     87    urlstring = str(endpoint) 
     88    log.info("urlstring=%s" % (urlstring,)) 
    8389    #cookies are passed to enable authorisation mechanisms e.g. ndg security 
    8490    #try: 
  • cowsclient/branches/qesdi/cowsclient/public/js/dragAndDrop.js

    r5331 r5457  
    1313var DDM = YAHOO.util.DragDropMgr; 
    1414 
    15 /** 
    16  * Set up the basic control; NB, this predefines 10 drag and drop list elements 
    17  * - to use these, just define a html list element with a matching id - i.e. 'li_1' to 'li_10' 
    18  */ 
    19 YAHOO.example.DDApp = { 
    20     init: function() { 
    2115 
    22         var rows=10,i; 
     16////////////////////////////////////////////////////////////////////////////// 
     17// custom drag and drop implementation 
     18////////////////////////////////////////////////////////////////////////////// 
    2319 
    24         for (i=1;i<rows+1;i++) { 
    25                 new YAHOO.example.DDList("li_" + i); 
    26         } 
    27     } 
    28 }; 
    29  
    30  
    31 /** 
    32  * DDList object to use in the drag and drop control 
    33  * 
    34  * @param id: id to call this DDList 
    35  * @param sGroup: supergroup of the element 
    36  * @param config: additional config data 
    37  */ 
    38 YAHOO.example.DDList = function(id, sGroup, config) { 
     20YAHOO.example.DDList = function(id, onDragEnd, sGroup, config) { 
    3921 
    4022    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config); 
     
    4426    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent 
    4527 
     28    this.onDragEnd = onDragEnd; 
    4629    this.goingUp = false; 
    4730    this.lastY = 0; 
    4831}; 
    4932 
    50 /** 
    51  * Extended drag and drop control - overriding methods to allow 
    52  * use in a list environment 
    53  */ 
    5433YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, { 
    5534 
    56     startDrag: function(x, y)  
    57     { 
     35    startDrag: function(x, y) { 
    5836        this.logger.log(this.id + " startDrag"); 
    5937 
    6038        // make the proxy look like the source element 
    6139        var dragEl = this.getDragEl(); 
     40 
    6241        var clickEl = this.getEl(); 
    6342        Dom.setStyle(clickEl, "visibility", "hidden"); 
     
    7049    }, 
    7150 
    72         /** 
    73          * Event handler to be used when list item has been dragged and dropped 
    74          * NB, this includes a call to update the displayed map layers to  
    75          * ensure these are displayed in the order matching the list now that 
    76          * it has been altered 
    77          * @param e: event 
    78          */ 
    79     endDrag: function(e)  
    80     { 
     51    endDrag: function(e) { 
    8152 
    8253        var srcEl = this.getEl(); 
    8354        var proxy = this.getDragEl(); 
    84  
     55         
     56        this.onDragEnd(srcEl); 
     57         
    8558        // Show the proxy element and animate it to the src element's location 
    8659        Dom.setStyle(proxy, "visibility", ""); 
     
    10376            }); 
    10477        a.animate(); 
    105          
    106         // Now update the displayed layers 
    107                 app.updateVisLayer(); 
    108                 // and update the dimension control 
    109                 //console.log('updating dimension control to:'); 
    110                 //console.log(srcEl.dimensions); 
    111                 app.dimControl.updateDomainDiv(srcEl.dimensions); 
    11278    }, 
    11379 
    114     onDragDrop: function(e, id)  
    115     {            
     80    onDragDrop: function(e, id) { 
     81 
    11682        // If there is one drop interaction, the li was dropped either on the list, 
    11783        // or it was dropped on the current location of the source element. 
     
    134100                DDM.refreshCache(); 
    135101            } 
     102 
    136103        } 
    137104    }, 
    138105 
    139     onDrag: function(e)  
    140     { 
     106    onDrag: function(e) { 
     107 
    141108        // Keep track of the direction of the drag for use during onDragOver 
    142109        var y = Event.getPageY(e); 
     
    173140}); 
    174141 
    175 Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true); 
    176  
    177142})(); 
    178  
    179  
  • cowsclient/branches/qesdi/cowsclient/public/js/layerControl.js

    r5391 r5457  
    1010WMSC.VisAppLayers = OpenLayers.Class.create(); 
    1111WMSC.VisAppLayers.prototype = { 
    12     EVENT_TYPES: ['changeWMS', 'changeSelection'], 
     12    EVENT_TYPES: ['changeWMS', 'changeSelection', "NEW_LAYER"], 
    1313 
    1414    // The id of an element in which to render the layer selection tree 
     
    6161                return true; 
    6262                }.bindAsEventListener(this)); 
     63                 
     64                this.idIndex = 0; 
     65                 
     66                this.defaultParams = { 
     67                                format: 'image/png',  
     68                                version: '1.3.0',  
     69                                layers:'tmp',  
     70                                CRS: 'CRS:84',  
     71                                transparent: 'true',  
     72                                styles: 'contour',  
     73                                cmap: 'jet',  
     74                                time:'1905-01-15T00:00:00.0' }; 
     75                 
    6376    }, 
    6477     
     
    414427     */ 
    415428    _updateLeafLayer: function(xhr)  
    416     {        
     429    {    
     430         
    417431        var node = this._selectedTreeNode; 
     432        var newLayer = this.makeNewLayer(node.data.wmcEndpoint); 
     433         
     434        this.events.triggerEvent("NEW_LAYER", {layer:newLayer}); 
     435         
     436        return; 
     437         
    418438            // check this layer isn't already present and visible 
    419439                layers = document.getElementById("layerlist"); 
     
    481501    }, 
    482502     
     503    makeNewLayer: function(url) { 
     504        var layer = new OpenLayers.Layer.WMS("Layer", url, this.defaultParams); 
     505 
     506        layer.id = url + "_" + layer.name + "_" + this.idIndex; 
     507 
     508        this.idIndex += 1; 
     509 
     510        return layer; 
     511    }, 
     512     
     513     
    483514    /** 
    484515     * Iterate over the list elements and return the first hidden one - or return null if none found 
  • cowsclient/branches/qesdi/cowsclient/public/js/mapControl.js

    r5364 r5457  
    4545                    } 
    4646                ); 
     47                 
    4748                this.boxesLayer = new OpenLayers.Layer.Boxes("Sub-selection"); 
    4849 
     
    5455                this.map.addControl(new OpenLayers.Control.MousePosition()); 
    5556 
    56                 // Setup the map - initially with the basic openlayers map + coastline + boxes 
    57                 this.updateVisLayer(); 
     57                 
     58            this.baseLayer = new OpenLayers.Layer.WMS( 
     59                    "Coastline", 
     60                    "http://localhost:5000/coastwms", 
     61                    { layers: 'l', format: 'image/png', transparent: 'false' } 
     62                ); 
     63 
     64            this.map.addLayer(this.baseLayer); 
     65            this.map.setLayerIndex(this.baseLayer, 0); 
     66             
     67            this.map.addLayer(this.boxesLayer); 
     68            this.map.setLayerIndex(this.boxesLayer, 1); 
     69             
     70                 
     71//              // Setup the map - initially with the basic openlayers map + coastline + boxes 
     72//              this.updateVisLayer(); 
    5873 
    5974                this.maxExtent = new OpenLayers.Bounds(-180,-90,180,90); 
    6075                this.map.zoomToExtent(this.maxExtent);   
    61  
     76                 
     77                // force the resolution to be set, this is needed so that layers added 
     78                // retain the correct bounds. 
     79                this.map.resolution = this.map.getResolutionForZoom(this.map.zoom); 
     80             
    6281                // Enter selection mode 
    6382                this.subselControl.switchModeTo('zoombox'); 
    64     }, 
    65      
    66     /** 
    67      * Specify a dimension control to use with the map 
    68      * @param dimControl - a suitable dimension control 
    69      * - this must include an attribute, wmsParams and a method 
    70      * getSelection retuning an OpenLayers.Bounds object 
    71      */ 
    72     addDimensionControl: function(dimControl) 
    73     { 
    74         this.dimControl = dimControl; 
    75                 this.dimControl.events.register('changeSelection', this, this.updateSelectionBox); 
    76                 this.dimControl.events.register('changeWMS', this, this.updateVisLayer); 
    77                 this.dimControl.events.register('clearSelection', this, this.resetMapCoords); 
    78          
    79                 this.map.events.register('moveend', this, this.updateDimensionControl); 
    80                 this.map.events.register('zoomend', this, this.updateDimensionControl); 
    81     }, 
    82      
    83      
    84     /** 
    85      * Specify a layer control to use with the map 
    86      * @param layerControl - a suitable layer control 
    87      */ 
    88     addLayerControl: function(layerControl) 
    89     { 
    90                 layerControl.events.register('changeSelection', this, this.updateSelectionBox); 
    91                 layerControl.events.register('changeWMS', this, this.updateVisLayer); 
    92     }, 
     83                 
     84    }, 
     85     
     86          /** 
     87          * Specify a dimension control to use with the map 
     88          * @param dimControl - a suitable dimension control 
     89          * - this must include an attribute, wmsParams and a method 
     90          * getSelection retuning an OpenLayers.Bounds object 
     91          */ 
     92         addBoundsControl: function(control) 
     93         { 
     94                this.boundsControl = control; 
     95                this.boundsControl.events.register('changeSelection', this, this.updateSelectionBox); 
     96                this.boundsControl.events.register('changeWMS', this, this.updateVisLayer); 
     97                this.boundsControl.events.register('clearSelection', this, this.resetMapCoords); 
     98         
     99                this.map.events.register('moveend', this, this.updateBoundsControl); 
     100                this.map.events.register('zoomend', this, this.updateBoundsBoundsControl); 
     101         },     
     102     
     103//    /** 
     104//     * Specify a dimension control to use with the map 
     105//     * @param dimControl - a suitable dimension control 
     106//     * - this must include an attribute, wmsParams and a method 
     107//     * getSelection retuning an OpenLayers.Bounds object 
     108//     */ 
     109//    addDimensionControl: function(dimControl) 
     110//    { 
     111//      this.dimControl = dimControl; 
     112//              this.dimControl.events.register('changeSelection', this, this.updateSelectionBox); 
     113//              this.dimControl.events.register('changeWMS', this, this.updateVisLayer); 
     114//              this.dimControl.events.register('clearSelection', this, this.resetMapCoords); 
     115//       
     116//              this.map.events.register('moveend', this, this.updateDimensionControl); 
     117//              this.map.events.register('zoomend', this, this.updateDimensionControl); 
     118//    }, 
     119//     
     120//     
     121//    /** 
     122//     * Specify a layer control to use with the map 
     123//     * @param layerControl - a suitable layer control 
     124//     */ 
     125//    addLayerControl: function(layerControl) 
     126//    { 
     127//              layerControl.events.register('changeSelection', this, this.updateSelectionBox); 
     128//              layerControl.events.register('changeWMS', this, this.updateVisLayer); 
     129//    }, 
     130//     
     131    addLayersHandlers: function (events) { 
     132        events.register("LAYER_ORDER_CHANGED", this, this.onLayerOrderChanged); 
     133    }, 
     134 
     135    onLayerOrderChanged: function (e) { 
     136        this.drawLayers(e.layers); 
     137    }, 
     138     
    93139     
    94140    // Cleaning up is important for IE. 
     
    126172    updateVisLayer: function()  
    127173    { 
     174                 
    128175        // firstly, remove any existing layers 
    129176        j = this.map.getNumLayers(); 
     
    132179                this.map.removeLayer(this.map.layers[0]); 
    133180                } 
     181                 
    134182        // Setup an initial baselayer - NB, without this, the transparent layers will not display 
    135183        if (!this.visLayer) 
     
    142190                        this._mergeDimParams(this.visLayer); 
    143191        } 
     192         
    144193                this.map.addLayer(this.visLayer); 
    145194                 
     
    147196                layerList = document.getElementById("layerlist"); 
    148197 
    149                 //Changed by domlowe: reversed the order these layers are added to the map. Dragging and dropping the 
    150                 // layer you want to be on top to the bottom of the list was counter intuitive. 
    151                 //old code: 
    152                 //for (var i = 0; layerList && i < layerList.childNodes.length; i++) 
    153                 //now in revese order: 
    154                 for (var i=layerList.childNodes.length-1; layerList && i>=0; i--) 
    155                 { 
    156                         child = layerList.childNodes[i]; 
    157                         // ignore any hidden list values 
    158                         if (child.className == "hiddenList") 
    159                                 continue; 
    160                          
    161                         if (child.nodeName == "LI") 
     198                if (layerList != null) { 
     199                        //Changed by domlowe: reversed the order these layers are added to the map. Dragging and dropping the 
     200                        // layer you want to be on top to the bottom of the list was counter intuitive. 
     201                        //old code: 
     202                        //for (var i = 0; layerList && i < layerList.childNodes.length; i++) 
     203                        //now in revese order: 
     204                        for (var i=layerList.childNodes.length-1; layerList && i>=0; i--) 
    162205                        { 
    163                                 // extract the required info and load the map 
    164                                 // NB, these values are set in the layerControl._updateLeafLayer() method 
    165                                 // NB, for transparancy to be fully supported, the format must be gif 
    166                                 // - png is only partially supported and jpg not at all 
    167                                 endpoint = child.getAttribute("wmcURL"); 
    168                                 title = child.getAttribute("title"); 
    169                                 layerName = child.getAttribute("layerName"); 
    170                                 //console.log('name ' + layerName); 
    171                         mapLayer = new OpenLayers.Layer.WMS( 
    172                                                 title, 
    173                                                 endpoint, 
    174                                                      {format: 'image/gif', 
    175                                                       version: '1.3.0',  
    176                                                       CRS: 'CRS:84', 
    177                                                       layers: layerName, 
    178                                                   transparent: 'true' 
    179                                                      }); 
    180                                 // add extra parameters, if specified by layer control 
    181                                 this._mergeDimParams(mapLayer); 
    182                         this.map.addLayer(mapLayer); 
     206                                child = layerList.childNodes[i]; 
     207                                // ignore any hidden list values 
     208                                if (child.className == "hiddenList") 
     209                                        continue; 
     210                                 
     211                                if (child.nodeName == "LI") 
     212                                { 
     213                                        // extract the required info and load the map 
     214                                        // NB, these values are set in the layerControl._updateLeafLayer() method 
     215                                        // NB, for transparancy to be fully supported, the format must be gif 
     216                                        // - png is only partially supported and jpg not at all 
     217                                        endpoint = child.getAttribute("wmcURL"); 
     218                                        title = child.getAttribute("title"); 
     219                                        layerName = child.getAttribute("layerName"); 
     220                                        //console.log('name ' + layerName); 
     221                                mapLayer = new OpenLayers.Layer.WMS( 
     222                                                        title, 
     223                                                        endpoint, 
     224                                                             {format: 'image/gif', 
     225                                                              version: '1.3.0',  
     226                                                              CRS: 'CRS:84', 
     227                                                              layers: layerName, 
     228                                                              styles:'', 
     229                                                          transparent: 'true' 
     230                                                             }); 
     231                                        // add extra parameters, if specified by layer control 
     232                                        this._mergeDimParams(mapLayer); 
     233                                this.map.addLayer(mapLayer); 
     234                                } 
    183235                        } 
    184                 }  
     236                } 
    185237                         
    186238                // add the coast outline, if required 
     
    215267    resetMapCoords: function()  
    216268    { 
     269//      alert("resetMapCoords"); 
    217270                this.subselControl.deactivateSubsel(); 
    218271                this.map.zoomToExtent(this.maxExtent); 
    219                 this.updateDimensionControl(); 
     272                this.updateBoundsControl(); 
    220273    }, 
    221274 
     
    322375     * the dimension selection control to reflect this change 
    323376     */ 
    324     updateDimensionControl: function()  
    325     { 
     377    updateBoundsControl: function()  
     378    { 
     379//      alert("UpdateBoundsControl"); 
    326380                var b = this.subselControl.getActiveBounds(); 
    327                 if (this.dimControl) 
    328                         this.dimControl.setSelection(b, noCascade=true); 
    329  
    330                 // Switch to higerres coasts if needed 
    331                 var coastLayer = 'coastline_01'; 
    332                 if (this.map.getZoom() > 5) 
    333                     coastLayer = 'coastline_02'; 
    334          
    335                 if (this.showCoast && this.coastLayer.params.LAYERS != coastLayer)  
    336                 { 
    337                 this._initCoast(coastLayer); 
    338                 } 
     381                 
     382                if (this.boundsControl) { 
     383                        this.boundsControl.setSelection(b, noCascade=true); 
     384                } 
     385 
     386//              // Switch to higerres coasts if needed 
     387//              var coastLayer = 'coastline_01'; 
     388//              if (this.map.getZoom() > 5) 
     389//                  coastLayer = 'coastline_02'; 
     390//       
     391//              if (this.showCoast && this.coastLayer.params.LAYERS != coastLayer)  
     392//              { 
     393//              this._initCoast(coastLayer); 
     394//              } 
    339395    }, 
    340396 
     
    345401    updateSelectionBox: function()  
    346402    { 
     403//      alert("started update selection box"); 
    347404                var old_b = this.subselControl.getActiveBounds(); 
    348                 var new_b = this.dimControl.getSelection(); 
     405                var new_b = this.boundsControl.getSelection(); 
    349406         
    350407                // Validation.  negative tests required to catch NaN 
     
    377434                new_b.top = t; 
    378435                } 
    379          
     436                 
    380437                this.subselControl.setSubSel(new_b); 
    381     } 
     438//              alert("finished update selection box"); 
     439                 
     440    }, 
     441 
     442     
     443 
     444    drawLayers: function (layers) { 
     445         
     446        //alert("removing " + this.map.layers.length + " layers"); 
     447         
     448         
     449         
     450        //remove the old layers 
     451        if (this.map.layers.length > 0) { 
     452                 
     453                var removeLayers = []; 
     454            for (var i=0; i<this.map.layers.length; i++) { 
     455                if (this.map.layers[i] != this.baseLayer) { 
     456                        removeLayers.push(this.map.layers[i]); 
     457                } 
     458            } 
     459             
     460            for (var i=0; i<removeLayers.length; i++) { 
     461                layer = removeLayers[i]; 
     462                //alert("Removing layer id=" + layer.id + " name=" + layer.name); 
     463                this.map.removeLayer(layer); 
     464            } 
     465        } 
     466         
     467         
     468        var lastLayerIndex = 1; 
     469         
     470        if (layers.length > 0) { 
     471             
     472            for (var i=layers.length-1; i>=0; i--) { 
     473                l = layers[i]; 
     474                 
     475                this.map.addLayer(l); 
     476                this.map.setLayerIndex(l,lastLayerIndex); 
     477                lastLayerIndex ++; 
     478                //alert("Added layer name=" + l.name + " index = " + this.map.getLayerIndex(l) ); 
     479 
     480            } 
     481        } else { 
     482            this.map.addLayer(this.coastLayer); 
     483        } 
     484 
     485        //add the layer for the boxes to be drawn 
     486        this.map.addLayer(this.boxesLayer); 
     487        this.map.setLayerIndex(this.boxesLayer, lastLayerIndex); 
     488         
     489    }, 
     490 
     491 
    382492     
    383493}; 
  • cowsclient/branches/qesdi/cowsclient/public/js/openlayers-x.js

    r5266 r5457  
    101101DDCVisMap = OpenLayers.Class.create(); 
    102102DDCVisMap.prototype = OpenLayers.Class.inherit(OpenLayers.Map, { 
    103     setCenter: function(center, zoom, dragging) { 
    104  
    105         if (center == null) { 
    106             center = this.getCenter(); 
    107         }                 
    108         if (zoom == null) { 
    109             zoom = this.getZoom(); 
    110         } 
    111  
    112         var resolution = this.baseLayer.resolutions[zoom]; 
    113         var size = this.getSize(); 
    114         var w_deg = size.w * resolution; 
    115         var h_deg = size.h * resolution; 
    116          
    117         var bounds = new OpenLayers.Bounds(center.lon - w_deg / 2, 
    118                                            center.lat - h_deg / 2, 
    119                                            center.lon + w_deg / 2, 
    120                                            center.lat + h_deg / 2); 
    121  
    122         if (bounds.left < -180.0) { 
    123             center.lon = center.lon + (-180.0 - bounds.left); 
    124         } 
    125         else if (bounds.right > 180.0) { 
    126             center.lon = center.lon - (bounds.right - 180.0); 
    127         } 
    128  
    129         if (bounds.bottom < -90.0) { 
    130             center.lat = center.lat + (-90.0 - bounds.bottom); 
    131         } 
    132         else if (bounds.top > 90.0) { 
    133             center.lat = center.lat - (bounds.top - 90.0); 
    134         } 
    135  
    136         OpenLayers.Map.prototype.setCenter.apply(this, [center, zoom, dragging]); 
    137     } 
     103                setCenter: function(center, zoom, dragging) { 
     104                 
     105                    if (center == null) { 
     106                        center = this.getCenter(); 
     107                    }                 
     108                    if (zoom == null) { 
     109                        zoom = this.getZoom(); 
     110                    } 
     111                 
     112                var resolution = this.baseLayer.resolutions[zoom]; 
     113                var size = this.getSize(); 
     114                var w_deg = size.w * resolution; 
     115                var h_deg = size.h * resolution; 
     116                     
     117                var bounds = new OpenLayers.Bounds(center.lon - w_deg / 2, 
     118                                                   center.lat - h_deg / 2, 
     119                                                   center.lon + w_deg / 2, 
     120                                                   center.lat + h_deg / 2); 
     121                 
     122                if (bounds.left < -180.0) { 
     123                    center.lon = center.lon + (-180.0 - bounds.left); 
     124                } 
     125                else if (bounds.right > 180.0) { 
     126                    center.lon = center.lon - (bounds.right - 180.0); 
     127                } 
     128                 
     129                if (bounds.bottom < -90.0) { 
     130                    center.lat = center.lat + (-90.0 - bounds.bottom); 
     131                } 
     132                else if (bounds.top > 90.0) { 
     133                    center.lat = center.lat - (bounds.top - 90.0); 
     134                } 
     135                 
     136                OpenLayers.Map.prototype.setCenter.apply(this, [center, zoom, dragging]); 
     137    }, 
     138     
     139     
     140     
    138141}); 
  • cowsclient/branches/qesdi/cowsclient/public/layout/drag_drop_style.css

    r5267 r5457  
    1111} 
    1212 
    13 /* Stylesheet to support the dragAndDrop javascript control 
    14         C Byrom 
    15 */ 
    16  
    17 div.layerMessage 
    18 { 
    19   text-align: center; 
    20   font-size: 12px; 
    21   font-weight: bold; 
    22 } 
    23  
    24 ul.draglist li  
    25 { 
    26     margin: 1px; 
    27     cursor: move;  
    28 } 
    29  
    30 ul.draglist  
    31 {  
     13ul.draglist {  
    3214    position: relative; 
    33     width: 100%;  
     15    width: 200px;  
     16    height:240px; 
     17    background: #f7f7f7; 
     18    border: 1px solid gray; 
    3419    list-style: none; 
    3520    margin:0; 
    3621    padding:0; 
    37     /* 
    38        The bottom padding provides the cushion that makes the empty  
    39        list targetable.  Alternatively, we could leave the padding  
    40        off by default, adding it when we detect that the list is empty. 
    41     */ 
    42     padding-bottom:20px; 
    4322} 
    4423 
    45 li.list  
    46 { 
     24ul.draglist li { 
     25    margin: 1px; 
     26    cursor: move; 
     27    zoom: 1; 
     28} 
     29 
     30ul.draglist li.list { 
    4731    background-color: #D1E6EC; 
    4832    border:1px solid #7EA6B2; 
    4933} 
    5034 
    51 li.hiddenList  
    52 { 
    53         display:none; 
    54         visibility = visible; 
     35ul.draglist li.selected { 
     36    background-color:LightSkyBlue  ; 
     37    border: 1px solid black; 
    5538} 
    5639 
    57 td.delIcon 
    58 { 
    59         align:right; 
    60         width:20px; 
    61 } 
    62  
    63 td.layerTitle 
    64 { 
    65         align:left; 
    66 } 
    67  
    68 td.nodeTitle 
    69 { 
    70         align:left; 
    71 } 
  • cowsclient/branches/qesdi/cowsclient/templates/wmsviz.html

    r5341 r5457  
    11<html xmlns:py="http://genshi.edgewall.org/"  
    22      xmlns="http://www.w3.org/1999/xhtml" 
    3           xmlns:xi="http://www.w3.org/2001/XInclude">    
     3      xmlns:xi="http://www.w3.org/2001/XInclude">     
    44<xi:include href="utils.html" /> 
    55<head> 
     
    1313<!-- BEGIN: Yahoo Interface Library --> 
    1414<link type="text/css" rel="stylesheet" 
    15         href="$g.server/js/yui/treeview/assets/skins/sam/treeview.css"/>  
    16          
     15    href="$g.server/js/yui/treeview/assets/skins/sam/treeview.css"/>  
     16     
    1717<!-- Dependency source files -->   
    1818<script src = "$g.server/js/yui/yahoo/yahoo-min.js" ></script>  
     
    2626 
    2727<link rel="stylesheet" type="text/css" href="$g.server/js/yui/fonts/fonts-min.css?_yuiversion=2.5.0" /> 
    28 <script type="text/javascript" src="$g.server/js/yui/utilities/utilities.js?_yuiversion=2.5.0"></script> 
    29  
    30 <script type="text/javascript" src="$g.server/js/yui/yahoo-dom-event/yahoo-dom-event.js" ></script>  
    31 <script type="text/javascript" src="$g.server/js/yui/dragdrop/dragdrop-min.js" ></script> 
     28 
     29<!-- needed for the drag and drop list --> 
     30<script type="text/javascript" src="$g.server/js/yui/utilities/utilities.js" ></script> 
     31<script type="text/javascript" src="$g.server/js/yui/dragdrop/dragdrop.js" ></script> 
     32 
    3233<script type="text/javascript" src="$g.server/js/toggleDiv.js" ></script> 
     34 
    3335<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/> 
    3436<script src = "$g.server/js/dragAndDrop.js" ></script>  
     
    3941<link type="text/css" rel="stylesheet" href="$g.server/layout/control.css"/> 
    4042 
     43 
    4144<script src="$g.server/js/wmsc.js"></script> 
    4245<script src="$g.server/js/prototype.js"></script> 
    43 <script src="http://www.openlayers.org/api/2.4/OpenLayers.js"></script> 
     46<script src="$g.server/js/OpenLayers/lib/OpenLayers.js" /> 
    4447<script src="$g.server/js/openlayers-x.js"/> 
    45 <script src="$g.server/js/dimensionControl.js"/> 
     48<!-- script src="$g.server/js/dimensionControl.js"/ --> 
    4649<script src="$g.server/js/mapControl.js"/> 
    47 <script src="$g.server/js/layerControl.js"></script> 
     50<!--  script src="$g.server/js/layerControl.js"></script -->  
    4851<script src="$g.server/js/capabilities.js"></script> 
    4952<script src="$g.server/js/wcs.js"></script> 
     53 
     54 
     55<script src="$g.server/js/layerList.js"></script> 
     56<script src="$g.server/js/layerParameters.js"></script> 
     57<script src="$g.server/js/wmsSelect.js"></script> 
     58<script src="$g.server/js/boundsControl.js"></script> 
     59<script src="$g.server/js/utils.js"></script> 
     60 
    5061<!-- END: WMSC library --> 
    5162 
     
    5869<?python 
    5970from pylons import session  
    60 ?>       
    61          
     71?>     
     72     
    6273function init()  
    6374{ 
    64     var coordControl = new WMSC.DimControl('dims'); 
    65     var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves', coordControl);  
    66         <for py:for="i in session['viewItems']" class="dataset" py:strip="True"> 
    67         <span py:if="i.wmcURL" py:strip="True"> 
    68                 layerControl.addWebMapContext("${i.wmcURL}"); 
    69             </span> 
     75        var layerList = new LayerList('layer_list'); 
     76    var layerParameters = new LayerParameters('parameters_select', 'selection_form'); 
     77     
     78    var wmsSelect = new WMSSelector('select_endpoints', 'add_layer', 
     79            {format: 'image/png', version: '1.3.0', layers:'tmp', CRS: 'CRS:84', transparent: 'true', 
     80             styles: 'contour', cmap: 'jet', time:'1905-01-15T00:00:00.0' } 
     81            ); 
     82 
     83    var boundsControl = new WMSC.BoundsControl('dims'); 
     84    //var coordControl = new WMSC.DimControl('dims'); 
     85    //var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves', coordControl);   
     86     
     87    layerList.addSelectorHandlers(wmsSelect.events); 
     88    layerParameters.addLayerListHandlers(layerList.events); 
     89     
     90    <for py:for="i in session['viewItems']" class="dataset" py:strip="True"> 
     91//        <span py:if="i.wmcURL" py:strip="True"> 
     92//            layerControl.addWebMapContext("${i.wmcURL}"); 
     93//        </span> 
    7094    </for>  
     95     
    7196    app = new WMSC.VisApp('map', 10, 640, true); 
    72     app.addDimensionControl(coordControl); 
    73     app.addLayerControl(layerControl);   
    74         if (document.getElementById('wcsdownload') == null) { 
    75                 createDownloadButton(wcsdownloadDiv);    
    76                 }        
     97 
     98    app.addLayersHandlers(layerList.events); 
     99 
     100    app.addBoundsControl(boundsControl); 
     101 
     102//    app.addDimensionControl(coordControl); 
     103//    app.addLayerControl(layerControl); 
     104 
     105    if (document.getElementById('wcsdownload') == null) { 
     106        //createDownloadButton(wcsdownloadDiv);     
     107        }     
    77108} 
    78109 
     
    81112    app.destroy(); 
    82113} 
    83          
     114     
    84115<!--! Help Icons --> 
    85116<span py:def="helpIcon(value, elementType = 'div')"> 
     
    89120       </span> 
    90121</span> 
    91          
     122     
    92123 
    93124</script> 
     
    97128 
    98129<body onload="init()" onunload="cleanup()"> 
    99         <div id="entirepage"> 
     130    <div id="entirepage"> 
    100131    <!--<div py:replace="header()"/>  --> 
    101         <!-- <div py:replace="PageTabs('View')"/> --> 
     132    <!-- <div py:replace="PageTabs('View')"/> --> 
    102133    <!-- <div py:replace="searchOneLine()"/> --> 
    103134 
    104135<div id="visBody"> 
    105 <table> 
    106   <tr> 
    107     <td align="center"> 
    108         <div id="mapBox"> 
    109                         <div id="map"></div> 
    110                         <div id="legend"></div> 
    111                 </div> 
    112     </td> 
    113     <td valign="top"> 
    114       <div class="optDiv"> 
    115         <b>Selection Description</b> 
    116                 <div id="description"> 
    117                   Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')"/>  
    118                 </div> 
    119       </div> 
    120                  
    121                 <div id="coord_help" class="hidden"> 
    122         <div class="helptxt"> 
    123                                 Specifying coordinate dimensions will select a region on the map;  
    124                                 when this is appropriately sized, the map will automatically zoom to this region.<br/> 
    125                                 'Reset selection' will return the map to its full, global size.<br/> 
    126                                 Some map layers have additional dimensions, e.g. 'time';  
    127                                 if these are available, they will also be displayed in this panel for selection.<br/> 
    128                                 NB, the dimensions displayed are those relating to the selected dataset  
    129                                 in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers. 
    130         </div> 
    131       </div>     
    132                  
    133       <div class="optDiv"> 
    134         <b>Domain</b> 
    135                         <div id="dims"></div> 
    136       </div> 
    137         <div class="wcsDiv"> 
    138         <b>Download Data for this Selection</b> 
    139                         <div id="wcsdownloadDiv"></div> 
    140       </div> 
    141     <div class="hiddenDiv"> 
    142         <form id="figureForm"> 
    143           <b>Plot type</b><br/> 
    144           <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/> 
    145           <input type="radio" name="figType" value="bw"/>B/W Contour<br/> 
    146           <b>Format</b><br/> 
    147           <select name="figFormat"> 
    148             <option value="image/png" name="figFormat" selected="1"> PNG </option> 
    149             <option value="image/jpeg" name="figFormat"> JPEG </option> 
    150             <option value="application/postscript" name="figFormat"> EPS </option> 
    151             <option value="image/svg+xml" name="figFormat"> SVG </option> 
    152           </select> 
    153           <input type="button" value="Make Figure"  
    154                 onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/> 
    155         </form> 
    156       </div> 
    157     </td> 
    158   </tr> 
    159 </table> 
    160  
    161 <table class="controlTable"> 
    162 <tr class="controlHeadings"> 
    163 <th>Dataset  <span py:replace="helpIcon('dataset_help')"/>  
    164 </th>  
    165 <th>Layer <span py:replace="helpIcon('layer_help')"/></th>   
    166 </tr> 
    167 <tr> 
    168 <td> 
    169         <div id="dataset_help" class="hidden"> 
    170         <div class="helptxt"> 
    171                         Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer' 
    172                         panel for visualisation.<br/>   
    173                         Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon. 
    174         </div> 
    175     </div> 
    176 </td> 
    177 <td> 
    178         <div id="layer_help" class="hidden"> 
    179         <div class="helptxt"> 
    180                 When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list 
    181                 to the top.<br/> 
    182                 NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/> 
    183                 Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon. 
    184         </div> 
    185     </div> 
    186 </td> 
    187 </tr> 
    188 <tr> 
    189 <td class="controlPanel"><div class="controlContent" id="layerTree"> 
    190         Please wait while datasets load</div> 
    191 </td> 
    192 <td class="controlPanel"> 
    193         <div class="controlContent" id="layerLeaves"> 
    194                 <div id="layerMessage" class="layerMessage"> 
    195             <span py:if="'viewItems' not in session" py:strip="True"> 
    196                 Please select a dataset to view - from the 'Selections' tab. 
    197             </span> 
    198             <span py:if="'viewItems' in session" py:strip="True"> 
    199                                 Expand a dataset and select a layer to view 
    200                         </span> 
    201                 </div> 
    202                 <div class="workarea"> 
    203                         <ul class="draglist" id="layerlist"> 
    204                         </ul> 
    205                 </div> 
     136        <table> 
     137          <tr> 
     138            <td align="center"> 
     139                <div id="mapBox"> 
     140                    <div id="map"></div> 
     141                    <div id="legend"></div> 
     142                </div> 
     143            </td> 
     144            <td valign="top"> 
     145              <div class="optDiv"> 
     146                <b>Selection Description</b> 
     147                <div id="description"> 
     148                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')"/>  
     149                </div> 
     150              </div> 
     151                 
     152                <div id="coord_help" class="hidden"> 
     153                  <div class="helptxt"> 
     154                        Specifying coordinate dimensions will select a region on the map;  
     155                        when this is appropriately sized, the map will automatically zoom to this region.<br/> 
     156                        'Reset selection' will return the map to its full, global size.<br/> 
     157                        Some map layers have additional dimensions, e.g. 'time';  
     158                        if these are available, they will also be displayed in this panel for selection.<br/> 
     159                        NB, the dimensions displayed are those relating to the selected dataset  
     160                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers. 
     161                </div> 
     162              </div>     
     163                 
     164              <div class="optDiv"> 
     165                <b>Domain</b> 
     166                    <div id="dims"></div> 
     167              </div> 
     168            <div class="wcsDiv"> 
     169                <b>Download Data for this Selection</b> 
     170                    <div id="wcsdownloadDiv"></div> 
     171              </div> 
     172             
     173            <form id="figureForm"> 
     174              <b>Plot type</b><br/> 
     175              <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/> 
     176              <input type="radio" name="figType" value="bw"/>B/W Contour<br/> 
     177              <b>Format</b><br/> 
     178              <select name="figFormat"> 
     179                <option value="image/png" name="figFormat" selected="1"> PNG </option> 
     180                <option value="image/jpeg" name="figFormat"> JPEG </option> 
     181                <option value="application/postscript" name="figFormat"> EPS </option> 
     182                <option value="image/svg+xml" name="figFormat"> SVG </option> 
     183              </select> 
     184              <input type="button" value="Make Figure"  
     185                  onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/> 
     186            </form> 
     187             
     188            </td> 
     189          </tr> 
     190        </table> 
     191 
     192        <table class="controlTable"> 
     193                <tr class="controlHeadings"> 
     194                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/>  
     195                </th>  
     196                <th>Layer <span py:replace="helpIcon('layer_help')"/></th>   
     197                </tr> 
     198                <tr> 
     199                        <td> 
     200                            <div id="dataset_help" class="hidden"> 
     201                                  <div class="helptxt"> 
     202                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer' 
     203                                        panel for visualisation.<br/>   
     204                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" /> icon. 
     205                                </div> 
     206                            </div> 
     207                        </td> 
     208                        <td> 
     209                            <div id="layer_help" class="hidden"> 
     210                                  <div class="helptxt"> 
     211                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list 
     212                                      to the top.<br/> 
     213                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/> 
     214                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" /> icon. 
     215                                </div> 
     216                            </div> 
     217                        </td> 
     218                </tr> 
     219                <tr> 
     220                        <td class="controlPanel"><div class="controlContent" id="layerTree"> 
     221                            Please wait while datasets load</div> 
     222                        </td> 
     223                        <td class="controlPanel"> 
     224                            <div class="controlContent" id="layerLeaves"> 
     225                                <div id="layerMessage" class="layerMessage"> 
     226                                    <span py:if="'viewItems' not in session" py:strip="True"> 
     227                                        Please select a dataset to view - from the 'Selections' tab. 
     228                                    </span> 
     229                                    <span py:if="'viewItems' in session" py:strip="True"> 
     230                                        Expand a dataset and select a layer to view 
     231                                    </span> 
     232                                </div> 
     233                                <div class="workarea"> 
     234                                    <ul class="draglist" id="layer_list"> 
     235                                    </ul> 
     236                                </div> 
     237                            </div> 
     238                        </td> 
     239                </tr> 
     240        </table> 
     241         
     242         
     243<div id='wms_layers'> 
     244 
     245   <select id="select_endpoints"> 
     246        <option value="http://localhost:5000/clim_10/wms">http://localhost:5000/clim_10/wms</option> 
     247        <option value="http://localhost:5000/clim_30/wms">http://localhost:5000/clim_30/wms</option> 
     248    </select> <br/> 
     249    <input type="button" value="Add" id="add_layer" /> 
     250 
     251</div> 
     252     
     253        <div id="parameters_select"> 
     254    <form id='selection_form'> 
     255        Layers: 
     256       <select id="select_layers"> 
     257            <option value="tmp">Temperature</option> 
     258            <option value="pre">Precipitation</option> 
     259            <option value="tmx">Max Temp</option> 
     260            <option value="cld">Cloud Cover</option> 
     261        </select> <br/> 
     262 
     263        Style : 
     264        <select id="select_styles"> 
     265          <option value="grid">Grid cells</option> 
     266          <option value="contour">Contour Lines</option> 
     267        </select> <br/> 
     268 
     269        <!-- only a shortened time list --> 
     270        Time: 
     271        <select id="select_time"> 
     272            <option value="1905-01-15T00:00:00.0">1905-01-15T00:00:00.0</option> 
     273            <option value="1905-02-15T00:00:00.0">1905-02-15T00:00:00.0</option> 
     274            <option value="1905-03-15T00:00:00.0">1905-03-15T00:00:00.0</option> 
     275            <option value="1905-04-15T00:00:00.0">1905-04-15T00:00:00.0</option> 
     276            <option value="1905-05-15T00:00:00.0">1905-05-15T00:00:00.0</option> 
     277            <option value="1905-06-15T00:00:00.0">1905-06-15T00:00:00.0</option> 
     278            <option value="1905-07-15T00:00:00.0">1905-07-15T00:00:00.0</option> 
     279            <option value="1905-08-15T00:00:00.0">1905-08-15T00:00:00.0</option> 
     280            <option value="1905-09-15T00:00:00.0">1905-09-15T00:00:00.0</option> 
     281            <option value="1905-10-15T00:00:00.0">1905-10-15T00:00:00.0</option> 
     282            <option value="1975-11-15T00:00:00.0">1975-11-15T00:00:00.0</option> 
     283            <option value="1985-12-15T00:00:00.0">1985-12-15T00:00:00.0</option> 
     284        </select> <br/> 
     285 
     286        Cmap: 
     287        <select id="select_cmap"> 
     288            <option value="jet">jet</option> 
     289            <option value="bone">bone</option> 
     290            <option value="winter">winter</option> 
     291            <option value="copper">copper</option> 
     292        </select> <br/> 
     293    </form> 
    206294        </div> 
    207 </td> 
    208 </tr> 
    209 </table> 
    210295 
    211296</div> 
Note: See TracChangeset for help on using the changeset viewer.