Changeset 5759 for cowsclient


Ignore:
Timestamp:
24/09/09 11:59:59 (10 years ago)
Author:
pnorton
Message:

Added a openlayers map to select the bounding box. Also fixed a few smaller bugs + changed the layout a bit.

Location:
cowsclient/trunk
Files:
2 added
9 edited

Legend:

Unmodified
Added
Removed
  • cowsclient/trunk

    • Property svn:ignore
      •  

        old new  
        66build 
        77dist 
         8pnorton_development_local.ini 
  • cowsclient/trunk/cowsclient/controllers/wcsdown.py

    r5671 r5759  
    1111 
    1212import paste 
     13import time 
    1314 
    1415from cowsclient.lib.base import BaseController, g, response, config, request, c, session, render 
     
    3031        Default controller method to handle the initial requests to the page 
    3132        """ 
    32                  
     33        st = time.time() 
    3334        params = self._getParams() 
    3435 
     
    8182        g.server=config['app_conf']['serverurl'] 
    8283         
    83  
     84        params = {} 
     85        for paramString in config['download_baselayer.params'].split(','): 
     86            key, value = paramString.split(':') 
     87            params[key] = value 
    8488         
     89        baseLayerObj = {"url":config['download_baselayer.url'], "params": params } 
     90         
     91        c.baseLayerJSON = utils.toJSON(baseLayerObj)  
     92         
     93        log.debug("rendering template after %ss" % (time.time() - st,)) 
    8594        return render('wcsdown') 
    8695     
  • cowsclient/trunk/cowsclient/public/js/boundsControl.js

    r5719 r5759  
    2626 
    2727    controlMarkup: '<div id="WMSC_sel" class="WMSC_domain">' + 
    28       '<form id="coordsForm"><table>' + 
     28      '<table>' + 
    2929      '  <tr><td colspan="2"' + 
    3030          '          align="center">' + 
     
    4040      '</table>' + 
    4141      '<input id="WMSC_clear" type="button" value="Reset selection"/>' + 
    42       '</form></div>', 
     42      '</div>', 
    4343 
    4444     
     
    5151     *    is not set, a default markup is used 
    5252     */ 
    53     initialize: function (domainDivID, initialBounds, formID, controlMarkup)  
    54     { 
     53    initialize: function (domainDivID, initialBounds, controlMarkup)  
     54    { 
     55          
     56        this._input_names = ['bboxN', 'bboxW', 'bboxE', 'bboxS'] 
     57        this._supressTextChangeEvent = false; 
    5558        this.domainDivID = domainDivID; 
    56         if (formID) { 
    57             this.formID = formID; 
    58         } 
     59 
    5960        if (controlMarkup) { 
    6061            this.controlMarkup = controlMarkup; 
     
    9596        var selection = this.getSelection(); 
    9697        WMSC.log("triggering TEXT_SELECTION_CHANGED, selection = " + selection); 
    97         this.events.triggerEvent('TEXT_SELECTION_CHANGED', {selection: selection}); 
    98          
    99         // this will be picked up by the map control, this map control will 
    100         // then raise the MAP_SELECTION_CHANGED event (couldn't find a way to  
    101         // suppress is) which will be picked up by this bounds control and 
    102         // run setSelection again. 
     98         
     99        if (this._supressTextChangeEvent === false) { 
     100            this.events.triggerEvent('TEXT_SELECTION_CHANGED', {selection: selection}); 
     101        } 
     102         
     103        // the this._supressTextChangeEvent is used to prevent this being picked  
     104        // up by the map control right after it raise the MAP_SELECTION_CHANGED event  
    103105    }, 
    104106     
     
    109111    _initDomainDiv: function ()  
    110112    { 
    111         var domainDiv = $(this.domainDivID);  
     113        var domainDiv = document.getElementById(this.domainDivID);  
    112114        domainDiv.innerHTML = this.controlMarkup; 
    113115 
     
    121123 
    122124        this.selectionForm = $(this.formID); 
    123  
    124         for (var i = 0; i < this.selectionForm.elements.length; i++)  
     125        var inputElements = this._getInputElements(); 
     126        for (var i = 0; i < inputElements.length; i++)  
    125127        { 
    126             this.selectionForm.elements[i].onchange = listener; 
    127         } 
    128      
    129          
     128            inputElements[i].onchange = listener; 
     129        } 
     130     
     131         
     132    }, 
     133     
     134    _getInputElements: function () { 
     135        var domainDiv = document.getElementById(this.domainDivID); 
     136         
     137        var inputElements = []; 
     138         
     139        for (i = 0; i< this._input_names.length; i++) { 
     140            var foundElements = Utils.getContainedElementsByName(domainDiv, this._input_names[i]); 
     141             
     142            if (foundElements.length === 0 || foundElements[0] === null || foundElements[0].tagName !== 'INPUT') { 
     143                throw "Required input element " + this._input_names[i] + " not found in BoundsControl."; 
     144            } 
     145             
     146            inputElements.push(foundElements[0]) 
     147        } 
     148         
     149        return inputElements;   
    130150    }, 
    131151     
     
    144164    getSelection: function ()  
    145165    { 
    146         return new OpenLayers.Bounds(this.selectionForm.bboxW.value, 
    147                      this.selectionForm.bboxS.value, 
    148                      this.selectionForm.bboxE.value, 
    149                      this.selectionForm.bboxN.value); 
     166        var inputElements = this._getInputElements();         
     167        var left, top, right, bottom; 
     168        for (var i = 0; i < inputElements.length; i++) { 
     169            var elt = inputElements[i]; 
     170            if (elt.name === 'bboxW') { 
     171                left = elt.value; 
     172            } 
     173            else if (elt.name === 'bboxS') { 
     174                bottom = elt.value; 
     175            } 
     176            else if (elt.name === 'bboxE') { 
     177                right = elt.value; 
     178            } 
     179            else if (elt.name === 'bboxN') { 
     180                top = elt.value; 
     181            } 
     182        } 
     183         
     184        return new OpenLayers.Bounds(left, bottom, right, top); 
    150185    }, 
    151186         
     
    191226        } 
    192227         
    193         this.selectionForm.bboxW.value = bbox.left.toFixed(1); 
    194         this.selectionForm.bboxS.value = bbox.bottom.toFixed(1); 
    195         this.selectionForm.bboxE.value = bbox.right.toFixed(1); 
    196         this.selectionForm.bboxN.value = bbox.top.toFixed(1); 
    197  
     228        var inputElements = this._getInputElements(); 
     229         
     230        for (var i = 0; i < inputElements.length; i++) { 
     231            var elt = inputElements[i]; 
     232            if (elt.name === 'bboxW') { 
     233                elt.value = bbox.left.toFixed(1); 
     234            } 
     235            else if (elt.name === 'bboxS') { 
     236                elt.value = bbox.bottom.toFixed(1); 
     237            } 
     238            else if (elt.name === 'bboxE') { 
     239                elt.value = bbox.right.toFixed(1); 
     240            } 
     241            else if (elt.name === 'bboxN') { 
     242                elt.value = bbox.top.toFixed(1); 
     243            } 
     244        } 
     245         
    198246    }, 
    199247     
     
    208256     * When the selection on the map has changed update the bounds controls. 
    209257     *  
    210      * It is worth noting that there is no easy way to stop this event from  
    211      * triggering when re-drawing the bounds layer so this handler will be 
    212      * called if the selection box text is changed. 
     258     * It is worth noting that the flag _supressTextChangeEvent is used to stop the  
     259     * text change event from fireing while re-setting the bounds. 
    213260     */ 
    214261    _onMapSelectionChanged: function (e) { 
     262        this._supressTextChangeEvent = true; 
    215263        this.setSelection(e.selection); 
     264        this._supressTextChangeEvent = false; 
    216265    } 
    217266}; 
  • cowsclient/trunk/cowsclient/public/js/mapControl.js

    r5719 r5759  
    6363         
    6464        this.map.addControl(new OpenLayers.Control.LoadingPanel()); 
     65        this.map.addControl(this.subselControl); 
    6566        this.map.addControl(new OpenLayers.Control.PanZoomBar()); 
    66         this.map.addControl(this.subselControl); 
    6767        this.map.addControl(new OpenLayers.Control.MousePosition()); 
    6868 
  • cowsclient/trunk/cowsclient/public/js/utils.js

    r5744 r5759  
    520520    } 
    521521}; 
     522 
     523Utils.getContainedElementsByName = function (node, name) { 
     524    var children = node.getElementsByTagName('*'); 
     525     
     526    var matchingChildren= []; 
     527    for (var i = 0; i < children.length; i++) { 
     528        if (children[i].name === name) { 
     529            matchingChildren.push(children[i]); 
     530        } 
     531    } 
     532     
     533    return matchingChildren; 
     534}; 
  • cowsclient/trunk/cowsclient/public/layout/wcdown.css

    r5685 r5759  
    1 body { 
    2     margin:0; 
    3     padding:0; 
     1h4, h1, body { 
     2        margin:0; 
     3        padding:0; 
    44} 
     5 
     6.clear { 
     7        clear:both; 
     8        height:0px; 
     9} 
     10 
     11#page_title { 
     12        margin-left:150px; 
     13} 
     14 
    515 
    616#download_form_container { 
    717        padding:10px; 
     18    width:780px; 
    819} 
     20 
    921 
    1022#download_form { 
    1123        margin-bottom:0px; 
    12         padding:10px; 
    13         background-color:lightblue; 
     24        padding:20px; 
     25        background-color:#E1ECC1; 
    1426        border: 1px solid black; 
    1527} 
     28 
     29.input_item { 
     30        height: 2.2em; 
     31        line-height:2.2em; 
     32} 
     33 
     34.input_item > label { 
     35    width:120px; 
     36    display:inline-block; 
     37    text-align:right; 
     38} 
     39 
     40.input_item > * { 
     41    vertical-align:middle; 
     42} 
     43 
     44 
     45#map_container { 
     46        padding:10px; 
     47    float:left; 
     48} 
     49 
     50#bounds_control_container { 
     51        float:left; 
     52        width:200px; 
     53} 
     54 
     55#bbox_sel_bounds_container { 
     56        padding-top:40px; 
     57        padding-right:20px; 
     58        padding-bottom:10px; 
     59} 
     60 
     61#WMSC_clear { 
     62        margin-left:40px; 
     63        margin-top:20px; 
     64} 
     65 
     66#form_control_buttons{ 
     67        padding-top:30px; 
     68        padding-right:25px; 
     69} 
     70 
     71#form_control_buttons > input{ 
     72    float:right; 
     73    margin-left:10px; 
     74} 
     75 
     76#map { 
     77        width:500px; 
     78        height:250px; 
     79        border: 1px solid black; 
     80} 
     81 
     82#dimensions_container { 
     83    clear:both; 
     84} 
  • cowsclient/trunk/cowsclient/templates/wcsdown.html

    r5685 r5759  
    4444    ?> 
    4545     
    46     <div py:attrs="divAtts"> 
     46    <div class="input_item" py:attrs="divAtts"> 
    4747        <label py:attrs="labelAtts">${label}</label> 
    4848        ${makeSelect(name, options, id=name, descriptions=descriptions, default=default, onChange=onChange)} 
     
    5959            label = name 
    6060    ?> 
    61     <div> 
     61    <div class="input_item"> 
    6262        <label for="${name}">${label}</label> 
    6363        <input py:attrs="atts" ></input> 
     
    8585<!-- End of autocomplete imports --> 
    8686 
    87  
     87<script type="text/javascript" src="$g.server/js/openlayers/lib/OpenLayers.js" /> 
     88<script type="text/javascript" src="$g.server/js/openlayers-x.js" /> 
    8889 
    8990<link rel="stylesheet" type="text/css" href="$g.server/layout/wcdown.css" /> 
     
    9192 
    9293 
     94<script src="$g.server/js/wmsc.js"></script> 
     95<script src="$g.server/js/boundingBoxMapSelect.js"></script> 
     96<script src="$g.server/js/boundsControl.js"></script> 
    9397<script src="$g.server/js/json2.js"></script> 
    9498<script src="$g.server/js/splitSelect.js"></script> 
    95 <script src="$g.server/js/wmsc.js"></script> 
    9699<script src="$g.server/js/utils.js"></script> 
    97100 
     
    114117function init() { 
    115118 
     119    var baseLayerJSON = "${c.baseLayerJSON}"; 
     120    var baseLayerData = JSON.parse(baseLayerJSON); 
     121     
    116122    <py:if test="c.layer != None"> 
    117123        var startTime = new SplitSelect('time_container', 'time', timedata, 'Start Time:'); 
     
    126132 
    127133    // build endpoint autocomplete 
    128     makeCombobox("endpoint", "endpoint_toggle", "endpoint_options", defaultEndpoints, onEndpointChange); 
     134    Utils.makeCombobox("endpoint", "endpoint_toggle", "endpoint_options", defaultEndpoints, onEndpointChange); 
     135 
     136 
     137    var bboxSelect = new BoundingBoxMapSelect('map', 'bounds_control_container', baseLayerData.url, baseLayerData.params,  'bbox_hidden_input', null); 
     138     
     139     
    129140} 
    130141 
     
    173184    if (value) { 
    174185        timeEndContainer.style.display = "none"; 
    175         startTimeLabel.innerHTML = "Time:" 
     186        startTimeLabel.innerHTML = "Time :" 
    176187    } 
    177188    else { 
    178189        timeEndContainer.style.display = "block"; 
    179         startTimeLabel.innerHTML = "Start Time:" 
     190        startTimeLabel.innerHTML = "Start Time :" 
    180191    } 
    181192     
     
    195206 
    196207<body onload="init()" onunload="cleanup()" class="yui-skin-sam"> 
    197     <h1>test</h1> 
    198      
    199     <div class="yui-ac"></div> 
    200     <div class="yui-skin-sam"></div> 
    201208         
    202209    <span> 
     
    204211    </span> 
    205212     
    206     <div id="download_form_container"> 
    207         <form id="download_form" method="get" >  
    208      
    209             <!-- ${makeTextInput('endpoint', label='Endpoint:', default=c.endpoint, onChange='onEndpointChange();')} --> 
    210              
    211             <!--  
    212             <div id="lunch_autocomplete"> 
    213                 <input id="lInput" type="text"></input> <span id="toggleL"></span> 
    214                 <div id="lContainer"></div> 
    215             </div> 
    216              --> 
    217      
    218             <div id="endpoint_container"> 
    219                 <label for="endpoint">Endpoint:</label> 
    220                 <div id="endpoint_autocomplete" style="display:inline;"> 
    221                     <input id="endpoint" name="endpoint" type="text" value="${c.endpoint}"></input> <span id="endpoint_toggle"></span> 
    222                     <div id="endpoint_options"></div> 
    223                 </div > 
    224             </div> 
    225              
    226              
    227             ${makeSelectInput('layer', c.layers, label='Layer:', default=c.layer, onChange='onLayerChange();')} 
    228              
    229             <py:if test="c.layer != None"> 
    230              
    231                 ${makeSelectInput('format', c.supportedFormats, label='Format:')} 
    232                  
    233                 ${makeSelectInput('crs', c.supportedCRS, label='CRS:', default=c.crs)} 
    234                  
    235                 ${makeTextInput('bbox', label='Bounding Box:', default=c.bboxLimits )} 
    236                  
    237                 <h4>Dimensions</h4> 
    238                  
    239                 <div> 
    240                     <label for="single_time">Single Time Point:</label> 
    241                     <input type="checkbox" id="single_time" name="single_time" value='true' onClick="setSingleTime(this.checked);"></input> 
     213     
     214    <div id="page_content"> 
     215     
     216        <h1 id="page_title">WCS Download</h1> 
     217     
     218        <div id="download_form_container"> 
     219            <form id="download_form" method="get" >  
     220                    
     221                <div id="data_container"> 
     222                    <h4>Data Selection</h4> 
     223                     
     224                    <div id="endpoint_container" class="input_item"> 
     225                        <label for="endpoint">Endpoint :</label> 
     226                        <div id="endpoint_autocomplete" style="display:inline;"> 
     227                            <input id="endpoint" name="endpoint" type="text" value="${c.endpoint}"></input> <span id="endpoint_toggle"></span> 
     228                            <div id="endpoint_options"></div> 
     229                        </div > 
     230                    </div> 
     231                     
     232                     
     233                    ${makeSelectInput('layer', c.layers, label='Layer :', default=c.layer, onChange='onLayerChange();')} 
     234                     
     235                    <py:if test="c.layer != None"> 
     236                     
     237                        ${makeSelectInput('format', c.supportedFormats, label='Format :')} 
     238                         
     239                        ${makeSelectInput('crs', c.supportedCRS, label='CRS :', default=c.crs)} 
     240                    </py:if> 
     241                 
    242242                </div> 
    243243                 
    244                 <div id="time_container"> </div> 
    245                 <div id="time_end_container"> </div> 
    246                  
    247             </py:if> 
    248              
    249             <input type="button" value="Download" onClick="onDownloadClick();"></input> 
    250              
    251             <input type="button" value="Refresh" onClick="onRefreshClick();"></input> 
    252      
    253         </form> 
     244                <py:if test="c.layer != None"> 
     245                 
     246     
     247                    <div id="bounding_container"> 
     248                        <h4>Bounding Box</h4>     
     249                        <div id="bounds_control_container"></div> 
     250                         
     251                        <div id="map_container"> 
     252                            <div id='map'></div> 
     253                        </div>     
     254                            
     255                        <input type="hidden" id="bbox_hidden_input" name="bbox" value=''></input> 
     256     
     257                    </div> 
     258     
     259                 
     260                     
     261                     
     262                    <div id="dimensions_container"> 
     263                        <h4>Dimensions</h4> 
     264                         
     265                        <div class="input_item"> 
     266                            <label for="single_time">Single Time Point :</label> 
     267                            <input type="checkbox" id="single_time" name="single_time" value='true' onClick="setSingleTime(this.checked);"></input> 
     268                        </div> 
     269                         
     270                        <div id="time_container" class="input_item"> </div> 
     271                        <div id="time_end_container" class="input_item"> </div> 
     272                    </div> 
     273                     
     274                </py:if> 
     275                 
     276                 
     277                <div id="form_control_buttons"> 
     278                    <input type="button" value="Download" onClick="onDownloadClick();"></input> 
     279                 
     280                    <input type="button" value="Refresh" onClick="onRefreshClick();"></input> 
     281                     
     282                    <br class="clear" /> 
     283                </div> 
     284         
     285            </form> 
     286        </div> 
     287         
    254288    </div> 
     289     
     290 
     291 
    255292     
    256293 
  • cowsclient/trunk/cowsclient/templates/wmsviz.html

    r5743 r5759  
    238238</script> 
    239239 
    240 <!--<replace py:replace="pagehead()"/> --> 
    241  
    242     <title> Cows client </title> 
    243  
     240    <title> COWS client </title> 
    244241</head> 
    245242 
    246243<body onload="init()" onunload="cleanup()" class="yui-skin-sam"> 
    247244 
    248     <div id="entirepage"> 
    249     <!--<div py:replace="header()"/>  --> 
    250     <!-- <div py:replace="PageTabs('View')"/> --> 
    251     <!-- <div py:replace="searchOneLine()"/> --> 
     245<div id="entirepage"> 
    252246 
    253247<div id="visBody"> 
  • cowsclient/trunk/development.ini

    r5698 r5759  
    2626baselayer.url = http://labs.metacarta.com/wms/vmap0 
    2727baselayer.params = layers:coastline_01,format:image/png 
    28 #baselayer.params = layers:basic,format:image/png 
     28 
     29download_baselayer.url = http://labs.metacarta.com/wms/vmap0 
     30download_baselayer.params = layers:coastline_01,format:image/png 
    2931 
    3032#You can replace the openlayers baselayer with your own WMS base layer here e.g. 
Note: See TracChangeset for help on using the changeset viewer.