Changeset 6030


Ignore:
Timestamp:
20/11/09 08:32:38 (10 years ago)
Author:
pnorton
Message:

Made some changes to the experimental YUI layout in wmsviz2.

Location:
cowsclient/trunk
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • cowsclient/trunk/cowsclient/public/js/layerParameters.js

    r5999 r6030  
    2828    this.wmcRetriever = wmcRetriever; 
    2929     
    30     this.layerInfo = new LayerInfo('layer_info_container', this.eventsManager, furhterInfoLinks); 
     30    this.layerInfo = new LayerInfo('layer_info', this.eventsManager, furhterInfoLinks); 
    3131    this.layerDims = new LayerDimensions('WMSC_dimForm', this.eventsManager); 
    3232    this.layerDisplay = new LayerDisplayOpts(selectionFormId, hideDisplayOptions, this.eventsManager); 
  • cowsclient/trunk/cowsclient/public/layout/wmsviz2.css

    r5993 r6030  
    7272 
    7373#layerLeaves { 
    74   padding-top:30px; 
    75 } 
     74  padding-top:30px; //comment 
     75} 
     76/* 
    7677 
    7778.yui-skin-sam .yui-layout { 
    78     background-color:white; /* the background behind the panels*/ 
     79    background-color:white; // the background behind the panels 
    7980} 
    8081.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd { 
    81     background-color:white; /* the background of the panels*/ 
    82 } 
    83  
     82    background-color:white; // the background of the panels 
     83} 
     84*/ 
    8485 
    8586/*** the map ***/ 
     
    344345} 
    345346 
     347 
     348// layout control layout 
     349 
     350body { 
     351    margin:0; 
     352    padding:0; 
     353} 
     354 
     355#center_content { 
     356    overflow:auto; 
     357    background-color:white; 
     358} 
     359 
     360#center_content > table { 
     361    width:100%; 
     362} 
     363 
     364#bottom1 { 
     365    margin-top:5px; 
     366} 
     367 
     368#bottom_left { 
     369    width:40%; 
     370    float:left; 
     371    border-right:1px solid gray; 
     372    margin-right:2px; 
     373} 
     374 
     375#bottom_left_content { 
     376    margin-right:5px; 
     377    background-color:white; 
     378} 
     379 
     380#bottom_middle { 
     381    width:20%; 
     382    float:left; 
     383    border-right:1px solid gray; 
     384    margin-right:2px; 
     385} 
     386 
     387#bottom_middle_content { 
     388    overflow:auto; 
     389    height:100%; 
     390    margin-right:5px; 
     391    background-color:white; 
     392} 
     393 
     394#bottom_right { 
     395    width:38%; 
     396    float:left; 
     397} 
     398 
     399#bottom_right_content { 
     400    overflow:auto; 
     401    height:100%; 
     402    background-color:white; 
     403} 
     404 
     405.tab_section{ 
     406    overflow:auto; 
     407    height:100%; 
     408} 
     409 
     410#map { 
     411height:320px; 
     412width:640px; 
     413border:1px solid black; 
     414} 
     415 
     416 
     417#layer_properties div form { 
     418    margin-bottom:2px; 
     419} 
     420 
     421.layerInfoItem > label, 
     422.displayOptionItem > label, 
     423.layerDimItem > label { 
     424    width:35%; 
     425    line-height:25px; 
     426    display:inline-block; 
     427} 
     428 
     429/* add a slight indent to the subselect labels */ 
     430div.subselect_input { 
     431    margin-left:10px; 
     432} 
     433 
     434div.subselect_input > label { 
     435    display:inline-block; 
     436    margin-right:5px; 
     437} 
     438 
  • cowsclient/trunk/cowsclient/templates/wmsviz2.html

    r5993 r6030  
    142142<!-- The layer properties stuff --> 
    143143 
    144 <link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" /> 
    145144<link rel="stylesheet" type="text/css" href="$g.server/layout/yui_autocomplete.css" /> 
     145 
     146<script type="text/javascript" src="$g.server/js/endpoint.js"></script> 
     147<script type="text/javascript" src="$g.server/js/furtherInfoLink.js"></script> 
    146148 
    147149<script type="text/javascript" src="$g.server/js/layerInformation.js"></script> 
     
    154156<script type="text/javascript" src="$g.server/js/axisConfigRetriever.js"></script> 
    155157 
     158<script type="text/javascript" src="$g.server/js/endpointSelection.js"></script> 
     159<script type="text/javascript" src="$g.server/js/layoutManager.js"></script> 
    156160<script type="text/javascript" src="$g.server/js/layerDimensions.js"></script> 
    157161<script type="text/javascript" src="$g.server/js/layerParameters.js"></script> 
     
    181185 
    182186var eventsManager = null; 
    183  
     187var layoutManager = new LayoutManager(); 
    184188 
    185189var layout = null; 
     
    195199    var initialSetupJSON = "${c.initialSetupJSON}"; 
    196200    var makeFigureULR = "$g.server/wmsviz/get_figure"; 
     201    var bgImagePath = '$g.server/layout/images/clear.gif'; 
    197202     
    198203    var wmcRetriever = new WMCRetriever(); 
     
    200205        var initialBounds = new OpenLayers.Bounds(-180,-90,180,90); 
    201206 
     207    var furtherInfoLinks = Utils.buildObjectList(FurtherInfoLink, initialStatus['FurtherInfoLinks']); 
     208    var endpointList     = Utils.buildObjectList(Endpoint, initialStatus['WMSEndpointsList']); 
     209     
    202210    var allEvents = []; 
    203211 
    204212    allEvents = allEvents.concat(LayerList.prototype.EVENTS_RAISED, 
    205                                  LayerParameters.prototype.EVENTS_RAISED, 
    206                                  WMSC.VisAppLayers.prototype.EVENT_TYPES, 
    207                                  WMSC.VisApp.prototype.EVENT_TYPES, 
    208                                  WMSC.BoundsControl.prototype.EVENT_TYPES, 
    209                                  OutlineControl.prototype.EVENT_TYPES); 
     213            LayerParameters.prototype.EVENTS_RAISED, 
     214            WMSC.VisAppLayers.prototype.EVENT_TYPES, 
     215            WMSC.VisApp.prototype.EVENT_TYPES, 
     216            WMSC.BoundsControl.prototype.EVENT_TYPES, 
     217            EndpointSelection.prototype.EVENT_TYPES, 
     218            OutlineControl.prototype.EVENT_TYPES); 
    210219 
    211220    eventsManager =  new OpenLayers.Events(null, null,  allEvents); 
    212221 
     222 
     223     
    213224              
    214     layerList = new LayerList('layer_list', 'chk_outline_on_top', eventsManager);        
    215     layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever, initialStatus.HiddenDisplayOptions, eventsManager); 
    216  
     225    layerList = new LayerList('layer_list', 'chk_outline_on_top', eventsManager);    
     226    layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever, initialStatus.HiddenDisplayOptions, eventsManager, furtherInfoLinks); 
     227     
    217228 
    218229    var layerDownload = new LayerDownload('layer_download_container', initialBounds, makeFigureULR, eventsManager); 
     
    220231    var legendContainer = new LegendContainer('legend', eventsManager); 
    221232 
     233     
    222234    var outlineControl = new OutlineControl('add_outline', eventsManager, initialStatus.OutlineSettings); 
    223     var boundsControl = new WMSC.BoundsControl('dims', initialBounds, eventsManager); 
    224     var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint', initialStatus.DefaultLayerParms, eventsManager);   
    225     app = new WMSC.VisApp('map', 10, 640, true, initialBounds, eventsManager); 
     235    var boundsControl  = new WMSC.BoundsControl('dims', initialBounds, eventsManager); 
     236    var layerControl   = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint', initialStatus.DefaultLayerParms, eventsManager, furtherInfoLinks);   
     237    app = new WMSC.VisApp('map', 10, 640, true, initialBounds, eventsManager, bgImagePath); 
    226238 
    227239    var initialEndpoints = JSON.parse(initialSetupJSON); 
     
    239251    } 
    240252 
    241     // build endpoint autocomplete 
    242     Utils.makeCombobox("new_endpoint", "endpoint_toggle", "endpoint_options", initialStatus.WMSEndpointsList); 
    243  
     253    // build endpoint select 
     254    var endpointSelect = new EndpointSelection('endpoint_select', endpointList, eventsManager);  
     255     
    244256    // build the tab control 
    245257    YAHOO.util.Event.throwErrors = true; 
     
    282294     
    283295    <div id="center1"> 
    284         <table id="map_table_container"> 
    285           <tr> 
    286             <td align="center"> 
    287                 <div id="mapBox"> 
    288                     <div id="map"></div> 
     296        <div id="center_content"> 
     297            <table> 
     298                <tr> 
     299                    <td align="center"> 
     300                        <div id="map"> </div> 
     301                    </td> 
     302                </tr> 
     303            </table> 
     304        </div> 
     305    </div> 
     306     
     307    <div id="right1"> 
     308 
     309    </div> 
     310     
     311    <div id="bottom1"> 
     312     
     313        <div id="bottom_left"> 
     314         
     315            <div id="bottom_left_content"> 
     316                <div id="tabs_container" class="yui-navset"> 
     317                 
     318                    <ul class="yui-nav"> 
     319                        <li class="selected"><a href="#new_layer_container"><em>New Layer</em></a></li> 
     320                        <li><a href="#layer_display_options_container"><em>Display Options</em></a></li> 
     321                        <li><a href="#layer_dimensions_container"><em>Dimensions</em></a></li> 
     322                        <li><a href="#layer_download_container"><em>Download</em></a></li> 
     323                        <li><a href="#outline_layer_container"><em>Outline</em></a></li> 
     324                         
     325                    </ul> 
     326 
     327                    <div id="tab_content" class="yui-content">    
     328                        <div id="new_layer_container" class="tab_section"> 
     329                         
     330                            <div> 
     331                                Add new WMS: <span py:replace="helpIcon('endpoint_help', 'div')"> </span>  
     332                                <div id="endpoint_select"></div>                                 
     333                            </div> 
     334                             
     335                            <div id="endpoint_help" class="hidden"> 
     336                                <div class="helptxt"> 
     337                                    You can add new datasets from other OGC Web Map Servers (WMS) here. Just add the base service URL  (without the WMS parameters) <br/> 
     338                                    e.g. http://myserver.com/mywms 
     339                                </div> 
     340                            </div> 
     341                             
     342                            <div class="controlContent" id="layerTree"> 
     343                                 No datasets loaded. 
     344                            </div> 
     345 
     346                        </div> 
     347                         
     348 
     349       
     350                        <div id="layer_display_options_container" class="tab_section">       
     351                            <form id='selection_form'> 
     352                            </form> 
     353                        </div> 
     354                         
     355                        <div id="layer_dimensions_container" class="tab_section"> 
     356                         
     357                            <div id="description"> 
     358                                Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')" />  
     359                            </div> 
     360 
     361                            <div id="coord_help" class="hidden"> 
     362                                <div class="helptxt"> 
     363                                    Specifying coordinate dimensions will select a region on the map;  
     364                                    when this is appropriately sized, the map will automatically zoom to this region.<br/> 
     365                                    'Reset selection' will return the map to its full, global size.<br/> 
     366                                    Some map layers have additional dimensions, e.g. 'time';  
     367                                    if these are available, they will also be displayed in this panel for selection.<br/> 
     368                                    NB, the dimensions displayed are those relating to the selected dataset  
     369                                    in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers. 
     370                                </div> 
     371                            </div>     
     372                         
     373                         
     374                            <b>Domain</b> 
     375                            <div id="dims"></div> 
     376                                    
     377                         
     378                            <form id="WMSC_dimForm"> 
     379                            </form> 
     380                        </div> 
     381                         
     382                        <div id="layer_download_container" class="tab_section"> 
     383                        </div> 
     384                         
     385                        <div id="outline_layer_container" class="tab_section"> 
     386                            <div> 
     387                                <label for="chk_outline_on_top">Display Outline Layer Above Others</label> 
     388                                <input type="checkbox" id="chk_outline_on_top" checked="yes"/> 
     389                            </div> 
     390                            <div><input type="button" id="add_outline" value="Add Outline Layer"/></div> 
     391                        </div>                                  
     392                    </div>                    
     393                </div>  
     394            </div> 
     395        </div> 
     396 
     397        <div id="bottom_middle"> 
     398            <div id="bottom_middle_content"> 
     399 
     400        <div id="layer_list_container"> 
     401            <div id="layer_list_title" class='centered'> 
     402                <strong> Layer List <span py:replace="helpIcon('layer_help')"/> </strong> 
     403            </div> 
     404             
     405            <div class="workarea"> 
     406                <ul class="draglist" id="layer_list"> 
     407                    <li>list empty</li> 
     408                </ul> 
     409                <input type="button" value="Remove Selected Layer" id="btn_remove_selected_layer" /> 
     410            </div> 
     411             
     412             
     413            <div id="layer_help" class="hidden"> 
     414                  <div class="helptxt"> 
     415                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list 
     416                      to the top.<br/> 
     417                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/> 
     418                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon. 
    289419                </div> 
    290             </td> 
    291           </tr> 
    292         </table> 
    293     </div>     
    294      
    295     <div id="bottom1"> 
    296  
    297         <table class="controlTable"> 
    298             <col id="properties_column"/> 
    299             <col id="layer_info_column"/> 
    300                 <tr> 
    301                 <td class="controlPanel"> 
     420            </div>                     
     421             
     422        </div>                 
     423 
     424            </div> 
     425        </div> 
     426 
     427        <div id="bottom_right"> 
     428            <div id="bottom_right_content"> 
     429             
     430                <div id="layer_info_container"> 
     431                         
     432                    <div id="legend" class="centered"></div> 
     433                     
     434                    <div id="layer_info"></div> 
    302435                 
    303                             <div id="layer_properties"> 
    304      
    305                             <div id="tabs_container" class="yui-navset"> 
    306                                 <ul class="yui-nav"> 
    307                                     <li class="selected"><a href="#new_layer_container"><em>New Layer</em></a></li> 
    308                                     <li><a href="#layer_display_options_container"><em>Display Options</em></a></li> 
    309                                     <li><a href="#layer_dimensions_container"><em>Dimensions</em></a></li> 
    310                                     <li><a href="#layer_download_container"><em>Download</em></a></li> 
    311                                     <li><a href="#outline_layer_container"><em>Outline</em></a></li> 
    312                                      
    313                                 </ul> 
    314      
    315                                 <div class="yui-content">    
    316                                     <div id="new_layer_container"> 
    317                                         <div> 
    318            
    319                                             Add new WMS:  
    320                                             <span py:replace="helpIcon('endpoint_help', 'div')"> </span>  
    321                                              
    322                                             <div id="endpoint_autocomplete" style="display:inline;"> 
    323                                                 <input id="new_endpoint" type="text" ></input> <span id="endpoint_toggle"></span> 
    324                                                 <div id="endpoint_options"></div> 
    325                                             </div > 
    326                                              
    327                                             <input type="button" id="add_new_endpoint" value="Add"/> 
    328                                         </div> 
    329                                          
    330                                         <div id="endpoint_help" class="hidden"> 
    331                                             <div class="helptxt"> 
    332                                                 You can add new datasets from other OGC Web Map Servers (WMS) here. Just add the base service URL  (without the WMS parameters) <br/> 
    333                                                 e.g. http://myserver.com/mywms 
    334                                             </div> 
    335                                         </div> 
    336                                          
    337                                         <div class="controlContent" id="layerTree"> 
    338                                              No datasets loaded. 
    339                                         </div> 
    340                                          
    341                                                                          
    342                                     </div> 
    343                                      
    344      
    345                    
    346                                     <div id="layer_display_options_container">       
    347                                                             <form id='selection_form'> 
    348                                                             </form> 
    349                                                     </div> 
    350                                                      
    351                                                     <div id="layer_dimensions_container"> 
    352                                      
    353                                         <div id="description"> 
    354                                             Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')" />  
    355                                         </div> 
    356      
    357                                         <div id="coord_help" class="hidden"> 
    358                                             <div class="helptxt"> 
    359                                                 Specifying coordinate dimensions will select a region on the map;  
    360                                                 when this is appropriately sized, the map will automatically zoom to this region.<br/> 
    361                                                 'Reset selection' will return the map to its full, global size.<br/> 
    362                                                 Some map layers have additional dimensions, e.g. 'time';  
    363                                                 if these are available, they will also be displayed in this panel for selection.<br/> 
    364                                                 NB, the dimensions displayed are those relating to the selected dataset  
    365                                                 in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers. 
    366                                             </div> 
    367                                         </div>     
    368                                      
    369                                      
    370                                         <b>Domain</b> 
    371                                         <div id="dims"></div> 
    372                                                 
    373                                      
    374                                                             <form id="WMSC_dimForm"> 
    375                                                             </form> 
    376                                                     </div> 
    377                                                      
    378                                     <div id="layer_download_container"> 
    379                                     </div> 
    380                                      
    381                                     <div id="outline_layer_container"> 
    382                                         <div> 
    383                                             <label for="chk_outline_on_top">Display Outline Layer Above Others</label> 
    384                                             <input type="checkbox" id="chk_outline_on_top" checked="yes"/> 
    385                                         </div> 
    386                                         <div><input type="button" id="add_outline" value="Add Outline Layer"/></div> 
    387                                      
    388                                     </div>                                 
    389                                      
    390                                 </div>                    
    391                             </div>  
    392                             </div> 
    393                 </td> 
    394                  
    395                 <td class="controlPanel"> 
    396                     <div id="layer_list_container"> 
    397                         <div id="layer_list_title" class='centered'> 
    398                             <strong> Layer List <span py:replace="helpIcon('layer_help')"/> </strong> 
    399                         </div> 
    400                          
    401                         <div class="workarea"> 
    402                             <ul class="draglist" id="layer_list"> 
    403                                 <li>list empty</li> 
    404                             </ul> 
    405                             <input type="button" value="Remove Selected Layer" id="btn_remove_selected_layer" /> 
    406                         </div> 
    407                          
    408                          
    409                         <div id="layer_help" class="hidden"> 
    410                               <div class="helptxt"> 
    411                                   When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list 
    412                                   to the top.<br/> 
    413                                   NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/> 
    414                                   Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon. 
    415                             </div> 
    416                         </div>                     
    417                          
    418                     </div> 
    419                 </td> 
    420                  
    421                 <td class="controlPanel"> 
    422                     <div class="controlContent" id="layerLeaves"> 
    423                          
    424      
    425                          
    426                         <div id="layer_info_container"> 
    427                          
    428                             <div id="legend" class="centered"></div> 
    429                              
    430                              
    431                             <div id="layer_info"></div> 
    432                          
    433                         </div> 
    434                         <br style="clear:both;" /> 
    435                                         
    436                     </div> 
    437                 </td>             
    438                 </tr> 
    439         </table> 
    440          
     436                </div> 
     437            </div> 
     438        </div> 
     439 
    441440    </div> 
    442      
    443441 
    444442    <script> 
    445         function setupLayout() { 
    446             var Dom = YAHOO.util.Dom; 
    447             var Event = YAHOO.util.Event; 
    448                  
    449             var layout = new YAHOO.widget.Layout({ 
    450                 units: [ 
    451                     { position: 'bottom', header: 'Bottom', height: 220, resize: true, id: 'bottom1', gutter: '5px', collapse: true }, 
    452                     { position: 'center', id: 'center1' } 
    453                 ] 
    454             }); 
    455              
    456             Event.onDOMReady(function() { 
    457                 layout.render(); 
    458             }); 
    459      
    460             layout.on('resize', function(ev) {  
    461                 var center_content = Dom.get('map_table_container');  
    462                 Dom.setStyle(center_content, 'height',   ev.sizes.center.h + 'px');  
    463             }); 
    464                
    465         }; 
    466      
    467         setupLayout(); // this needs to be run as the document is being created  
     443        layoutManager.setupLayout(); // this needs to run as the page loads 
     444 
     445 
    468446    </script> 
    469447 
  • cowsclient/trunk/displayOptions.ini

    r6013 r6030  
    55[HideOption:wms] 
    66endpoint=http://ice.badc.rl.ac.uk:5000/[^/]*/wms? 
    7 options=show_grid_lines,intervals,intervalNames,cbar_style,disable_subset 
     7options=show_grid_lines,intervals,intervalNames,cbar_style,disable_subset,transparent,bgcolor 
    88 
    99[DefaultOption:modis_interval] 
Note: See TracChangeset for help on using the changeset viewer.