source: cowsclient/trunk/cowsclient/templates/wmsviz2.html @ 6119

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cowsclient/trunk/cowsclient/templates/wmsviz2.html@6119
Revision 6119, 18.2 KB checked in by pnorton, 10 years ago (diff)

Made several changes to try and reduce the amount of data to download on the wmsviz page. Also created a single place where the js files for the wmsviz page are listed.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
3<html xmlns:py="http://genshi.edgewall.org/" 
4      xmlns="http://www.w3.org/1999/xhtml"
5      xmlns:xi="http://www.w3.org/2001/XInclude">
6       
7<!-- xi:include href="utils.html" / -->
8
9<?python
10    from pylons import config
11
12    #check if we should use the minified version of the yui javascript
13    minified_yui_javascript = config.get('minified_yui_javascript', 'false').lower() == 'true'
14    minified_client_javascript = config.get('minified_client_javascript', 'false').lower() == 'true'
15?>
16
17<head>
18
19
20<!--  script type='text/javascript'
21        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script --> 
22
23
24<!-- BEGIN: Yahoo Interface Library -->
25
26<!-- css files -->
27<link type="text/css" rel="stylesheet" href="$g.server/js/yui_2.7.0b/treeview/assets/skins/sam/treeview.css"/> 
28<link rel="stylesheet" type="text/css" href="$g.server/js/yui_old_treeview_style/treeview-menu.css"/> 
29<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/fonts/fonts.css" />
30
31<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/button/assets/skins/sam/button.css" />
32<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/autocomplete/assets/skins/sam/autocomplete.css" />
33<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/tabview/assets/skins/sam/tabview.css" />
34
35<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/reset-fonts-grids/reset-fonts-grids.css" />
36<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/resize/assets/skins/sam/resize.css" />
37<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/layout/assets/skins/sam/layout.css" />
38<link rel="stylesheet" type="text/css" href="$g.server/js/yui_2.7.0b/button/assets/skins/sam/button.css" />
39
40<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
41<link type="text/css" rel="stylesheet" href="$g.server/layout/ndg2.css"/>
42<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_style.css"/>
43<link type="text/css" rel="stylesheet" href="$g.server/layout/wmsviz2.css"/>
44<link rel="stylesheet" type="text/css" href="$g.server/layout/bottom_controls.css" />
45<link rel="stylesheet" type="text/css" href="$g.server/layout/yui_autocomplete.css" />
46
47<!-- Dependency source files --> 
48
49<py:choose test="minified_yui_javascript">
50  <py:when test="False">
51 
52    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yahoo/yahoo.js" ></script> 
53    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/event/event.js"></script>
54    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dom/dom.js" ></script>
55   
56    <!-- YUI treevieew  --> 
57    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview.js" ></script> 
58   
59    <!-- YUI drag and drop  -->
60    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
61    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop.js" ></script>
62   
63    <!-- YUI autocomplete
64    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
65    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element.js"></script>
66    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button.js"></script>
67    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource.js"></script>
68    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete.js"></script>
69    -->
70   
71    <!-- YUI tabs  -->
72    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/tabview/tabview.js"></script>
73   
74    <!-- YUI page layout -->
75    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop.js"></script>
76    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/resize/resize.js"></script>
77    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
78    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/layout/layout.js"></script>
79   
80 
81  </py:when>
82  <py:otherwise>
83
84    <!-- minified js code -->
85    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yuiloader-dom-event/yuiloader-dom-event.js" ></script> 
86   
87    <!-- YUI treevieew  --> 
88    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview-min.js" ></script> 
89   
90    <!-- YUI drag and drop  -->
91    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
92    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop-min.js" ></script>
93   
94    <!-- YUI autocomplete
95    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation-min.js"></script>
96    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element-min.js"></script>
97    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button-min.js"></script>
98    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource-min.js"></script>
99    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete-min.js"></script> 
100 -->
101    <!-- YUI tabs  -->
102    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/tabview/tabview-min.js"></script>
103   
104    <!-- YUI page layout -->
105    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop-min.js"></script>
106    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/resize/resize-min.js"></script>
107    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation-min.js"></script>
108    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/layout/layout-min.js"></script>
109         
110  </py:otherwise>
111</py:choose>
112
113
114<!-- END: Yahoo Interface Library -->
115
116<script type="text/javascript" src = "$g.server/js/dragAndDrop.js" ></script> 
117
118
119
120<script type="text/javascript" src="$g.server/js/json2.js"></script>
121<script type="text/javascript" src="${h.getOpenLayersImportPath()}"></script>
122<script type="text/javascript" src="$g.server/js/prototype.js"></script>
123
124<script type="text/javascript" src="$g.server/js/toggleDiv.js"></script>
125<script type="text/javascript" src="$g.server/js/LoadingPanel.js"></script>
126<script type="text/javascript" src="$g.server/js/openlayers-x.js"></script>
127
128<!-- BEGIN: WMSC library -->
129<?python
130    javascript_files = ['wmsc.js',
131                        'utils.js',
132                        'endpoint.js',
133                        'furtherInfoLink.js',
134                        'displayOptionsRetriever.js',
135                        'mapControl.js',
136                        'layerControl.js',
137                        'capabilities.js',
138                        'wcs.js',
139                        'layerFigureDownload.js',
140                        'layerInformation.js',
141                        'layerList.js',
142                        'layerDisplayOptions.js',
143                        'layerDownload.js',
144                        'layoutManager.js',
145                        'splitAxisConfig.js',
146                        'splitAxisSelect.js',
147                        'endpointSelection.js',
148                        'ajaxRetriever.js',
149                        'axisConfigRetriever.js',
150                        'layerDimensions.js',
151                        'layerParameters.js',
152                        'figureBuilder.js',
153                        'legendContainer.js',
154                        'boundsControl.js',
155                        'wmcRetriever.js',
156                        'layerDefaultSetter.js',
157                        'outlineControl.js']
158?>
159
160<py:choose test="minified_client_javascript">
161 <py:when test="False">
162  <py:for each="file in javascript_files">
163    <script type="text/javascript" src="$g.server/js/${file}"></script>
164  </py:for>
165 </py:when>
166 
167 <py:otherwise>
168   <script type="text/javascript" src="$g.server/js/compressed_client.js"></script>
169 </py:otherwise>
170 
171</py:choose>
172
173
174<!-- END: WMSC library -->
175
176<script type="text/javascript">
177
178YAHOO.util.Event.throwErrors = true;
179
180// Hook into application for debugging.   
181var app = null;
182var control = null;
183var layerList = null;
184var layerParameters = null;
185
186var initialStatus = ${h.jsonParseIfNotEmpty(c.initialStatus)};
187
188var eventsManager = null;
189var layoutManager = new LayoutManager();
190
191var layout = null;
192
193<?python
194from pylons import session 
195?>   
196
197function init() {
198
199    WMSC.log("Started drawing page " + Utils.getTimeString() );
200   
201    var initialSetupJSON = "${c.initialSetupJSON}";
202    var makeFigureULR = "$g.server/wmsviz/get_figure";
203    var bgImagePath = '$g.server/layout/images/clear.gif';
204   
205    var wmcRetriever = new WMCRetriever();
206
207        var initialBounds = new OpenLayers.Bounds(-180,-90,180,90);
208
209    var furtherInfoLinks = Utils.buildObjectList(FurtherInfoLink, initialStatus['FurtherInfoLinks']);
210    var endpointList     = Utils.buildObjectList(Endpoint, initialStatus['WMSEndpointsList']);
211   
212    var allEvents = [];
213
214    allEvents = allEvents.concat(LayerList.prototype.EVENTS_RAISED,
215            LayerParameters.prototype.EVENTS_RAISED,
216            WMSC.VisAppLayers.prototype.EVENT_TYPES,
217            WMSC.VisApp.prototype.EVENT_TYPES,
218            WMSC.BoundsControl.prototype.EVENT_TYPES,
219            EndpointSelection.prototype.EVENT_TYPES,
220            OutlineControl.prototype.EVENT_TYPES);
221
222    eventsManager =  new OpenLayers.Events(null, null,  allEvents);
223
224
225   
226             
227    layerList = new LayerList('layer_list', 'chk_outline_on_top', eventsManager);   
228    layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever, initialStatus.HiddenDisplayOptions, eventsManager, furtherInfoLinks);
229   
230
231    var layerDownload = new LayerDownload('layer_download_container', initialBounds, makeFigureULR, eventsManager);
232   
233    var legendContainer = new LegendContainer('legend', eventsManager);
234
235   
236    var outlineControl = new OutlineControl('add_outline', eventsManager, initialStatus.OutlineSettings);
237    var boundsControl  = new WMSC.BoundsControl('dims', initialBounds, eventsManager);
238    var layerControl   = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint', initialStatus.DefaultLayerParms, eventsManager, furtherInfoLinks); 
239    app = new WMSC.VisApp('map', 10, 640, true, initialBounds, eventsManager, bgImagePath);
240
241    var initialEndpoints = JSON.parse(initialSetupJSON);
242
243    outlineControl.addNewOutline();
244       
245    for (var i=0;i&lt;initialEndpoints.length;i++) {
246        var endpoint = initialEndpoints[i];
247
248        if (endpoint.layers != undefined) {
249                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
250        }
251       
252        layerControl.addWebMapContext(endpoint.url);
253    }
254
255    // build endpoint select
256    var endpointSelect = new EndpointSelection('endpoint_select', endpointList, eventsManager); 
257   
258    // build the tab control
259    YAHOO.util.Event.throwErrors = true;
260    var myTabs = new YAHOO.widget.TabView("tabs_container");
261   
262    WMSC.log("finished drawing page at " + Utils.getTimeString());
263   
264}
265
266function cleanup() 
267{
268    return;
269    if ( app !== null) {
270        app.destroy();
271    }
272   
273    if (layerList !== null) {
274        layerList.destroy();
275    }
276
277    if (eventsManager !== null) {
278        eventsManager.destroy();
279    }
280}
281   
282<!--! Help Icons -->
283<span py:def="helpIcon(value, elementType = 'div')">
284      <span>
285         <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
286         <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
287      </span>
288</span>   
289
290</script>
291
292    <title> COWS client </title>
293</head>
294
295<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
296   
297    <div id="center1">
298        <div id="center_content">
299            <table>
300                <tr>
301                    <td align="center">
302                        <div id="map"> </div>
303                    </td>
304                </tr>
305            </table>
306        </div>
307    </div>
308   
309    <div id="right1">
310
311    </div>
312   
313    <div id="bottom1">
314   
315        <div id="bottom_left">
316       
317            <div id="bottom_left_content">
318                <div id="tabs_container" class="yui-navset">
319               
320                    <ul class="yui-nav">
321                        <li class="selected"><a href="#new_layer_container"><em>New Layer</em></a></li>
322                        <li><a href="#layer_display_options_container"><em>Display Options</em></a></li>
323                        <li><a href="#layer_dimensions_container"><em>Dimensions</em></a></li>
324                        <li><a href="#layer_download_container"><em>Download</em></a></li>
325                        <li><a href="#outline_layer_container"><em>Outline</em></a></li>
326                       
327                    </ul>
328
329                    <div id="tab_content" class="yui-content">   
330                        <div id="new_layer_container" class="tab_section">
331                       
332                            <div>
333                                Add new WMS: <span py:replace="helpIcon('endpoint_help', 'div')"> </span> 
334                                <div id="endpoint_select"></div>                               
335                            </div>
336                           
337                            <div id="endpoint_help" class="hidden">
338                                <div class="helptxt">
339                                    You can add new datasets from other OGC Web Map Servers (WMS) here. Just add the base service URL  (without the WMS parameters) <br/>
340                                    e.g. http://myserver.com/mywms
341                                </div>
342                            </div>
343                           
344                            <div class="controlContent" id="layerTree">
345                                 No datasets loaded.
346                            </div>
347
348                        </div>
349                       
350
351     
352                        <div id="layer_display_options_container" class="tab_section">     
353                            <form id='selection_form'>
354                            </form>
355                        </div>
356                       
357                        <div id="layer_dimensions_container" class="tab_section">
358                       
359                            <div id="description">
360                                Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')" /> 
361                            </div>
362
363                            <div id="coord_help" class="hidden">
364                                <div class="helptxt">
365                                    Specifying coordinate dimensions will select a region on the map;
366                                    when this is appropriately sized, the map will automatically zoom to this region.<br/>
367                                    'Reset selection' will return the map to its full, global size.<br/>
368                                    Some map layers have additional dimensions, e.g. 'time';
369                                    if these are available, they will also be displayed in this panel for selection.<br/>
370                                    NB, the dimensions displayed are those relating to the selected dataset
371                                    in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
372                                </div>
373                            </div>   
374                       
375                       
376                            <b>Domain</b>
377                            <div id="dims"></div>
378                                   
379                       
380                            <form id="WMSC_dimForm">
381                            </form>
382                        </div>
383                       
384                        <div id="layer_download_container" class="tab_section">
385                        </div>
386                       
387                        <div id="outline_layer_container" class="tab_section">
388                            <div>
389                                <label for="chk_outline_on_top">Display Outline Layer Above Others</label>
390                                <input type="checkbox" id="chk_outline_on_top" checked="yes"/>
391                            </div>
392                            <div><input type="button" id="add_outline" value="Add Outline Layer"/></div>
393                        </div>                                 
394                    </div>                   
395                </div> 
396            </div>
397        </div>
398
399        <div id="bottom_middle">
400            <div id="bottom_middle_content">
401
402        <div id="layer_list_container">
403            <div id="layer_list_title" class='centered'>
404                <strong> Layer List <span py:replace="helpIcon('layer_help')"/> </strong>
405            </div>
406           
407            <div class="workarea">
408                <ul class="draglist" id="layer_list">
409                    <li>list empty</li>
410                </ul>
411                <input type="button" value="Remove Selected Layer" id="btn_remove_selected_layer" />
412            </div>
413           
414           
415            <div id="layer_help" class="hidden">
416                  <div class="helptxt">
417                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
418                      to the top.<br/>
419                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
420                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon.
421                </div>
422            </div>                   
423           
424        </div>               
425
426            </div>
427        </div>
428
429        <div id="bottom_right">
430            <div id="bottom_right_content">
431           
432                <div id="layer_info_container">
433                       
434                    <div id="legend" class="centered"></div>
435                   
436                    <div id="layer_info"></div>
437               
438                </div>
439            </div>
440        </div>
441
442    </div>
443
444    <script>
445        layoutManager.setupLayout(); // this needs to run as the page loads
446
447
448    </script>
449
450</body>
451</html>
Note: See TracBrowser for help on using the repository browser.