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

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

Moved some of the initial setup values from the wmsviz controller to a status builder class.

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