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

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

Moved the path of the transparent background gif to the wmsviz template so that it can use the server path.

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