source: cowsclient/trunk/cowsclient/templates/wmsviz.html @ 6038

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

Used jslint to clean up the javascript code some more and used the yui compressor to create a compressed version of the cowsclient javascript. I've included the scripts used along with the jslint code.

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