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

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

Made some improvements to the wcsdown page and fixed a couple of layout issues.

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/temp_fix.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<script type="text/javascript" src="$g.server/js/displayOptionsRetriever.js"></script>
110<script type="text/javascript" src="$g.server/js/json2.js"></script>
111
112<script type="text/javascript" src="$g.server/js/layerList.js"></script>
113
114<link rel="stylesheet" type="text/css" href="$g.server/layout/bottom_controls.css" />
115
116<!-- The layer properties stuff -->
117
118<link rel="stylesheet" type="text/css" href="$g.server/layout/layer_properties.css" />
119<link rel="stylesheet" type="text/css" href="$g.server/layout/yui_autocomplete.css" />
120
121<script type="text/javascript" src="$g.server/js/layerInformation.js"></script>
122<script type="text/javascript" src="$g.server/js/layerDisplayOptions.js"></script>
123<script type="text/javascript" src="$g.server/js/layerDimensions.js"></script>
124<script type="text/javascript" src="$g.server/js/layerParameters.js"></script>
125
126<script type="text/javascript" src="$g.server/js/figureBuilder.js"></script>
127
128<script type="text/javascript" src="$g.server/js/legendContainer.js"></script>
129<script type="text/javascript" src="$g.server/js/boundsControl.js"></script>
130<script type="text/javascript" src="$g.server/js/wmcRetriever.js"></script>
131<script type="text/javascript" src="$g.server/js/ajaxRetriever.js"></script>
132
133<script type="text/javascript" src="$g.server/js/layerDefaultSetter.js"></script>
134<script type="text/javascript" src="$g.server/js/outlineControl.js"></script>
135
136<!-- END: WMSC library -->
137<script type="text/javascript">
138
139YAHOO.util.Event.throwErrors = true;
140
141// Hook into application for debugging.   
142var app = null;
143var control = null;
144var layerList = null;
145var layerParameters = null;
146
147var defaultEndpoints = ${h.jsonParseIfNotEmpty(c.defaultWMSEndpoints)};
148var hideDisplayOptions = ${h.jsonParseIfNotEmpty(c.hideDisplayOptions)};
149var defaultOptions = ${h.jsonParseIfNotEmpty(c.defaultOptions)};
150
151var eventsManager = null;
152
153<?python
154from pylons import session 
155?>   
156
157function init() {
158
159    var initialSetupJSON = "${c.initialSetupJSON}";
160        var baseLayerJSON = "${c.baseLayerJSON}";
161
162        var baseLayerData = JSON.parse(baseLayerJSON);
163       
164        WMSC.log("baseLayerData.url = " + baseLayerData.url);
165        WMSC.log("baseLayerData.params = " + baseLayerData.params);
166
167    var wmcRetriever = new WMCRetriever();
168
169        var initialBounds = new OpenLayers.Bounds(-180,-90,180,90);
170
171    var allEvents = [];
172
173    allEvents = allEvents.concat(LayerList.prototype.EVENTS_RAISED,
174                                 LayerParameters.prototype.EVENTS_RAISED,
175                                 WMSC.VisAppLayers.prototype.EVENT_TYPES,
176                                 WMSC.VisApp.prototype.EVENT_TYPES,
177                                 WMSC.BoundsControl.prototype.EVENT_TYPES,
178                                 OutlineControl.prototype.EVENT_TYPES);
179
180    eventsManager =  new OpenLayers.Events(null, null,  allEvents);
181
182    WMSC.log(allEvents);
183             
184        layerList = new LayerList('layer_list', eventsManager); 
185    layerParameters = new LayerParameters('layer_properties', 'selection_form', wmcRetriever, hideDisplayOptions, eventsManager);
186   
187    var legendContainer = new LegendContainer('legend', eventsManager);
188    var downloadControl = new WCSDownloadControl('wcsdownloadDiv', initialBounds, eventsManager);
189    var figBuilder = new FigureBuilder('figureForm','make_figure_btn', initialBounds, eventsManager);
190    var outlineControl = new OutlineControl('add_outline', baseLayerData.url, baseLayerData.params, eventsManager);
191    var boundsControl = new WMSC.BoundsControl('dims', initialBounds, eventsManager);
192    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves',wmcRetriever, 'new_endpoint', 'add_new_endpoint', defaultOptions, eventsManager); 
193    app = new WMSC.VisApp('map', 10, 640, true, initialBounds, eventsManager);
194
195    var initialEndpoints = JSON.parse(initialSetupJSON);
196
197
198    outlineControl.addNewOutline();
199       
200    for (var i=0;i&lt;initialEndpoints.length;i++) {
201        var endpoint = initialEndpoints[i];
202
203        if (endpoint.layers != undefined) {
204                layerControl.addLayersToSelect(endpoint.url, endpoint.layers);
205        }
206       
207        layerControl.addWebMapContext(endpoint.url);
208    }
209
210    // build endpoint autocomplete
211    Utils.makeCombobox("new_endpoint", "endpoint_toggle", "endpoint_options", defaultEndpoints);
212   
213}
214
215
216function cleanup() 
217{
218    if ( app !== null) {
219        app.destroy();
220    }
221   
222    if (layerList !== null) {
223        layerList.destroy();
224    }
225
226    if (eventsManager !== null) {
227        eventsManager.destroy();
228    }
229}
230   
231<!--! Help Icons -->
232<span py:def="helpIcon(value, elementType = 'div')">
233      <span>
234         <a href="javascript:;" title="Toggle help" onclick="toggleDiv(1,'$value','shown','hidden','$elementType'); return false;">
235         <img src="$g.helpIcon" alt="Toggle help" class="helpicon"/></a>
236      </span>
237</span>   
238
239</script>
240
241    <title> COWS client </title>
242</head>
243
244<body onload="init()" onunload="cleanup()" class="yui-skin-sam">
245
246<div id="entirepage">
247
248<div id="visBody">
249    <!--  <input type="button" value="debug" id="dbg"></input>  -->
250        <table>
251          <tr>
252            <td align="center">
253                <div id="mapBox">
254                    <div id="map"></div>
255                </div>
256            </td>
257            <td valign="top">
258              <div class="optDiv">
259                <b>Selection Description</b>
260                <div id="description">
261                  Complete your selection below to view  <span py:replace="helpIcon('coord_help', 'div')" /> 
262                </div>
263              </div>
264               
265                <div id="coord_help" class="hidden">
266                  <div class="helptxt">
267                        Specifying coordinate dimensions will select a region on the map;
268                        when this is appropriately sized, the map will automatically zoom to this region.<br/>
269                        'Reset selection' will return the map to its full, global size.<br/>
270                        Some map layers have additional dimensions, e.g. 'time';
271                        if these are available, they will also be displayed in this panel for selection.<br/>
272                        NB, the dimensions displayed are those relating to the selected dataset
273                        in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
274                </div>
275              </div>   
276               
277              <div class="optDiv">
278                <b>Domain</b>
279                    <div id="dims"></div>
280              </div>
281            <div class="wcsDiv">
282                <b>Download Data for this Selection</b>
283                    <div id="wcsdownloadDiv"></div>
284                    <br/>
285                <b>Generate Figure</b> 
286            <br />
287                    <form id="figureForm" action="$g.server/wmsviz/get_figure" method="get">
288                      <!--  <b>Plot type</b><br/>
289                      <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
290                      <input type="radio" name="figType" value="bw"/>B/W Contour<br/> -->
291              <div>
292                      <select name="figFormat">
293                        <option value="image/png" selected="1"> PNG </option>
294                        <option value="image/jpeg"> JPEG </option>
295                        <option value="image/gif"> GIF </option>
296                        <option value="application/postscript"> EPS </option>
297                        <option value="image/svg+xml"> SVG </option>
298                      </select>
299                      <input type="button" value="Make Figure" id="make_figure_btn"/>
300              </div>
301                    </form>
302                   
303            </div>
304           
305           
306           
307            </td>
308          </tr>
309        </table>
310
311        <table class="controlTable">
312            <col id="datasets_column"/>
313        <col id="layer_column"/>
314        <col id="properties_column"/>
315                 
316                <tr class="controlHeadings">
317                <th>Dataset  <span py:replace="helpIcon('dataset_help')"/> 
318                </th> 
319                <th> Layer <span py:replace="helpIcon('layer_help')"/></th>
320                <th> Properties</th>   
321                </tr>
322                <tr>
323                        <td>
324                            <div id="dataset_help" class="hidden">
325                                  <div class="helptxt">
326                                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
327                                        panel for visualisation.<br/> 
328                                        Remove datasets from the display by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon.
329                                </div>
330                            </div>
331                        </td>
332                        <td>
333                            <div id="layer_help" class="hidden">
334                                  <div class="helptxt">
335                                      When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the bottom of the list
336                                      to the top.<br/>
337                                      NB, if the topmost layer has legend data available then this will be displayed under the completed map.<br/>
338                                      Remove layers from the displayed map by clicking their <img src="$g.server/js/img/close.gif" alt="close" /> icon.
339                                </div>
340                            </div>
341                        </td>
342                </tr>
343                <tr>
344                        <td class="controlPanel">
345               
346                            <div>
347                    Add new WMS:
348                    <span py:replace="helpIcon('endpoint_help', 'div')"> </span> 
349                   
350                    <div id="endpoint_autocomplete" style="display:inline;">
351                        <input id="new_endpoint" type="text" ></input> <span id="endpoint_toggle"></span>
352                        <div id="endpoint_options"></div>
353                    </div >
354                   
355                    <input type="button" id="add_new_endpoint" value="Add"/>
356                </div>
357               
358                <div id="endpoint_help" class="hidden">
359                  <div class="helptxt">
360                    You can add new datasets from other OGC Web Map Servers (WMS) here. Just add the base service URL  (without the WMS parameters) <br/>
361                    e.g. http://myserver.com/mywms
362                 </div>
363                </div>
364                <div class="controlContent" id="layerTree">
365                                 No datasets loaded.
366                        </div>
367                <input type="button" id="add_outline" value="Add Outline Layer"/>
368                        </td>
369                        <td class="controlPanel">
370                            <div class="controlContent" id="layerLeaves">
371
372                                <div class="workarea">
373                                    <ul class="draglist" id="layer_list">
374                            <li>list empty</li>
375                                    </ul>
376                                </div>
377                            <input type="button" value="Remove Selected" id="btn_remove_selected_layer" />
378                            </div>
379                        </td>
380            <td class="controlPanel">
381           
382                            <div id="layer_properties">
383                   
384                                           <div id="legend"></div> 
385                   
386                            <div id="layer_info_container">
387                                       <form id='layer_info_form'>
388                                       </form>
389                                    </div>
390       
391                            <div id="layer_display_options_container">     
392                                                    <form id='selection_form'>
393                                                    </form>
394                                            </div>
395                                           
396                                            <div id="layer_dimensions_container">
397                                                    <form id="WMSC_dimForm">
398                                                    </form>
399                                            </div>
400                                           
401                   
402                            </div>
403            </td>
404                </tr>
405        </table>
406       
407</div>
408</div>
409</body>
410</html>
Note: See TracBrowser for help on using the repository browser.