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

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

Made some changes to the experimental YUI layout in wmsviz2.

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', 'true').lower() == 'true'
14?>
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
41<!-- Dependency source files --> 
42
43<py:choose test="minified_yui_javascript">
44  <py:when test="False">
45 
46    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yahoo/yahoo.js" ></script> 
47    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/event/event.js"></script>
48    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dom/dom.js" ></script>
49   
50    <!-- YUI treevieew  --> 
51    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview.js" ></script> 
52   
53    <!-- YUI drag and drop  -->
54    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
55    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop.js" ></script>
56   
57    <!-- YUI autocomplete -->
58    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
59    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element.js"></script>
60    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button.js"></script>
61    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource.js"></script>
62    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete.js"></script>
63   
64    <!-- YUI tabs  -->
65    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/tabview/tabview.js"></script>
66   
67    <!-- YUI page layout -->
68    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop.js"></script>
69    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/resize/resize.js"></script>
70    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation.js"></script>
71    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/layout/layout.js"></script>
72   
73 
74  </py:when>
75  <py:otherwise>
76
77    <!-- minified js code -->
78    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yuiloader-dom-event/yuiloader-dom-event.js" ></script> 
79   
80    <!-- YUI treevieew  --> 
81    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview-min.js" ></script> 
82   
83    <!-- YUI drag and drop  -->
84    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
85    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop-min.js" ></script>
86   
87    <!-- YUI autocomplete -->
88    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation-min.js"></script>
89    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/element/element-min.js"></script>
90    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/button/button-min.js"></script>
91    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/datasource/datasource-min.js"></script>
92    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/autocomplete/autocomplete-min.js"></script> 
93
94    <!-- YUI tabs  -->
95    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/tabview/tabview-min.js"></script>
96   
97    <!-- YUI page layout -->
98    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/dragdrop/dragdrop-min.js"></script>
99    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/resize/resize-min.js"></script>
100    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/animation/animation-min.js"></script>
101    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/layout/layout-min.js"></script>
102         
103  </py:otherwise>
104</py:choose>
105
106
107<!-- END: Yahoo Interface Library -->
108
109<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
110<script type="text/javascript" src = "$g.server/js/dragAndDrop.js" ></script> 
111
112
113<link type="text/css" rel="stylesheet" href="$g.server/layout/ndg2.css"/>
114<link type="text/css" rel="stylesheet" href="$g.server/layout/ddc_style.css"/>
115<link type="text/css" rel="stylesheet" href="$g.server/layout/wmsviz2.css"/>
116
117
118<!-- BEGIN: WMSC library -->
119
120
121<script type="text/javascript" src="$g.server/js/toggleDiv.js"></script>
122<script type="text/javascript" src="$g.server/js/wmsc.js"></script>
123<script type="text/javascript" src="$g.server/js/prototype.js"></script>
124<script type="text/javascript" src="${h.getOpenLayersImportPath()}"></script>
125<script type="text/javascript" src="$g.server/js/LoadingPanel.js"></script>
126
127<script type="text/javascript" src="$g.server/js/utils.js"></script>
128
129<script type="text/javascript" src="$g.server/js/openlayers-x.js"></script>
130<script type="text/javascript" src="$g.server/js/mapControl.js"></script>
131<script type="text/javascript" src="$g.server/js/layerControl.js"></script> 
132<script type="text/javascript" src="$g.server/js/capabilities.js"></script>
133<script type="text/javascript" src="$g.server/js/wcs.js"></script>
134
135<script type="text/javascript" src="$g.server/js/displayOptionsRetriever.js"></script>
136<script type="text/javascript" src="$g.server/js/json2.js"></script>
137
138<script type="text/javascript" src="$g.server/js/layerList.js"></script>
139
140<link rel="stylesheet" type="text/css" href="$g.server/layout/bottom_controls.css" />
141
142<!-- The layer properties stuff -->
143
144<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>
148
149<script type="text/javascript" src="$g.server/js/layerInformation.js"></script>
150<script type="text/javascript" src="$g.server/js/layerDisplayOptions.js"></script>
151<script type="text/javascript" src="$g.server/js/layerDownload.js"></script>
152<script type="text/javascript" src="$g.server/js/splitAxisConfig.js"></script>
153<script type="text/javascript" src="$g.server/js/splitAxisSelect.js"></script>
154
155<script type="text/javascript" src="$g.server/js/ajaxRetriever.js"></script>
156<script type="text/javascript" src="$g.server/js/axisConfigRetriever.js"></script>
157
158<script type="text/javascript" src="$g.server/js/endpointSelection.js"></script>
159<script type="text/javascript" src="$g.server/js/layoutManager.js"></script>
160<script type="text/javascript" src="$g.server/js/layerDimensions.js"></script>
161<script type="text/javascript" src="$g.server/js/layerParameters.js"></script>
162
163<script type="text/javascript" src="$g.server/js/figureBuilder.js"></script>
164<script type="text/javascript" src="$g.server/js/layerFigureDownload.js"></script>
165
166<script type="text/javascript" src="$g.server/js/legendContainer.js"></script>
167<script type="text/javascript" src="$g.server/js/boundsControl.js"></script>
168<script type="text/javascript" src="$g.server/js/wmcRetriever.js"></script>
169
170<script type="text/javascript" src="$g.server/js/layerDefaultSetter.js"></script>
171<script type="text/javascript" src="$g.server/js/outlineControl.js"></script>
172
173<!-- END: WMSC library -->
174<script type="text/javascript">
175
176YAHOO.util.Event.throwErrors = true;
177
178// Hook into application for debugging.   
179var app = null;
180var control = null;
181var layerList = null;
182var layerParameters = null;
183
184var initialStatus = ${h.jsonParseIfNotEmpty(c.initialStatus)};
185
186var eventsManager = null;
187var layoutManager = new LayoutManager();
188
189var layout = null;
190
191<?python
192from pylons import session 
193?>   
194
195function init() {
196
197    WMSC.log("Started drawing page " + Utils.getTimeString() );
198   
199    var initialSetupJSON = "${c.initialSetupJSON}";
200    var makeFigureULR = "$g.server/wmsviz/get_figure";
201    var bgImagePath = '$g.server/layout/images/clear.gif';
202   
203    var wmcRetriever = new WMCRetriever();
204
205        var initialBounds = new OpenLayers.Bounds(-180,-90,180,90);
206
207    var furtherInfoLinks = Utils.buildObjectList(FurtherInfoLink, initialStatus['FurtherInfoLinks']);
208    var endpointList     = Utils.buildObjectList(Endpoint, initialStatus['WMSEndpointsList']);
209   
210    var allEvents = [];
211
212    allEvents = allEvents.concat(LayerList.prototype.EVENTS_RAISED,
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);
219
220    eventsManager =  new OpenLayers.Events(null, null,  allEvents);
221
222
223   
224             
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   
228
229    var layerDownload = new LayerDownload('layer_download_container', initialBounds, makeFigureULR, eventsManager);
230   
231    var legendContainer = new LegendContainer('legend', eventsManager);
232
233   
234    var outlineControl = new OutlineControl('add_outline', eventsManager, initialStatus.OutlineSettings);
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);
238
239    var initialEndpoints = JSON.parse(initialSetupJSON);
240
241    outlineControl.addNewOutline();
242       
243    for (var i=0;i&lt;initialEndpoints.length;i++) {
244        var endpoint = initialEndpoints[i];
245
246        if (endpoint.layers != undefined) {
247                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
248        }
249       
250        layerControl.addWebMapContext(endpoint.url);
251    }
252
253    // build endpoint select
254    var endpointSelect = new EndpointSelection('endpoint_select', endpointList, eventsManager); 
255   
256    // build the tab control
257    YAHOO.util.Event.throwErrors = true;
258    var myTabs = new YAHOO.widget.TabView("tabs_container");
259   
260    WMSC.log("finished drawing page at " + Utils.getTimeString());
261   
262}
263
264function cleanup() 
265{
266    return;
267    if ( app !== null) {
268        app.destroy();
269    }
270   
271    if (layerList !== null) {
272        layerList.destroy();
273    }
274
275    if (eventsManager !== null) {
276        eventsManager.destroy();
277    }
278}
279   
280<!--! Help Icons -->
281<span py:def="helpIcon(value, elementType = 'div')">
282      <span>
283         <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
284         <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
285      </span>
286</span>   
287
288</script>
289
290    <title> COWS client </title>
291</head>
292
293<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
294   
295    <div id="center1">
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.
419                </div>
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>
435               
436                </div>
437            </div>
438        </div>
439
440    </div>
441
442    <script>
443        layoutManager.setupLayout(); // this needs to run as the page loads
444
445
446    </script>
447
448</body>
449</html>
Note: See TracBrowser for help on using the repository browser.