source: cowsclient/tags/1.6.0-py2.6/cowsclient/templates/wmsviz.html @ 7593

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cowsclient/tags/1.6.0-py2.6/cowsclient/templates/wmsviz.html@7593
Revision 7593, 14.6 KB checked in by astephen, 10 years ago (diff)

Tagged version updated to be compatible with:

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