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

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

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