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

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

Made several changes to try and reduce the amount of data to download on the wmsviz page. Also created a single place where the js files for the wmsviz page are listed.

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
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  </py:when>
56  <py:otherwise>
57
58    <!-- minified js code -->
59    <script type="text/javascript" src ="$g.server/js/yui_2.7.0b/yuiloader-dom-event/yuiloader-dom-event.js" ></script> 
60   
61    <!-- YUI treevieew  --> 
62    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/treeview/treeview-min.js" ></script> 
63   
64    <!-- YUI drag and drop  -->
65    <script type="text/javascript" src="$g.server/js/yui_2.7.0b/utilities/utilities.js" ></script>
66    <script type="text/javascript" src="$g.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 = "$g.server/js/dragAndDrop.js" ></script>
73
74<!-- END: Yahoo Interface Library -->
75
76<link type="text/css" rel="stylesheet" href="$g.server/layout/drag_drop_style.css"/>
77<link type="text/css" rel="stylesheet" href="$g.server/layout/control.css"/>
78<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" />
79
80<script type="text/javascript" src="$g.server/js/json2.js"></script>
81<script type="text/javascript" src="${h.getOpenLayersImportPath()}"></script>
82<script type="text/javascript" src="$g.server/js/openlayers-x.js"></script>
83<script type="text/javascript" src="$g.server/js/LoadingPanel.js"></script>
84<script type="text/javascript" src="$g.server/js/prototype.js"></script>
85
86<script type="text/javascript" src="$g.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="$g.server/js/${file}"></script>
98  </py:for>
99 </py:when>
100 
101 <py:otherwise>
102   <script type="text/javascript" src="$g.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 = "$g.server/wmsviz/get_figure";
138    var bgImagePath = '$g.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&lt;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="$g.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="$g.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="$g.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.