source: TI05-delivery/ows_framework/trunk/ows_server/ows_server/templates/viewItems.kid @ 3700

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/TI05-delivery/ows_framework/trunk/ows_server/ows_server/templates/viewItems.kid@3700
Revision 3700, 6.2 KB checked in by cbyrom, 12 years ago (diff)

Add help text to pages + add more documentation + remove redundant control.

Line 
1<html py:extends="'ndgPage.kid','meta.kid'" xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#">
2<head>
3<link type="text/css" rel="stylesheet" href="/layout/ddc_style.css"/>
4<link type="text/css" rel="stylesheet" href="/layout/ddc_vis.css"/>
5
6<!-- BEGIN: Yahoo Interface Library -->
7<link type="text/css" rel="stylesheet"
8        href="/js/yui/treeview/assets/skins/sam/treeview.css"/>
9         
10<!-- Dependency source files --> 
11<script src = "js/yui/yahoo/yahoo-min.js" ></script> 
12<script src = "js/yui/event/event-min.js" ></script> 
13 
14<!-- TreeView source file --> 
15<script src = "js/yui/treeview/treeview-min.js" ></script> 
16
17<!-- TreeView Menu Style -->
18<link rel="stylesheet" type="text/css" href="/js/yui/treeview/assets/treeview-menu.css"/> 
19
20<link rel="stylesheet" type="text/css" href="/js/yui/fonts/fonts-min.css?_yuiversion=2.5.0" />
21<script type="text/javascript" src="/js/yui/utilities/utilities.js?_yuiversion=2.5.0"></script>
22
23<script type="text/javascript" src="/js/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 
24<script type="text/javascript" src="/js/yui/dragdrop/dragdrop-min.js" ></script>
25<link type="text/css" rel="stylesheet" href="/layout/drag_drop_style.css"/>
26<script src = "js/dragAndDrop.js" ></script> 
27
28
29<!-- END: Yahoo Interface Library -->
30
31<!-- BEGIN: WMSC library -->
32<link type="text/css" rel="stylesheet" href="/layout/control.css"/>
33
34<script src="$g.server/js/wmsc.js"></script>
35<script src="$g.server/js/prototype.js"></script>
36<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
37<script src="$g.server/js/openlayers-x.js"/>
38<script src="$g.server/js/dimensionControl.js"/>
39<script src="$g.server/js/mapControl.js"/>
40<script src="$g.server/js/layerControl.js"></script>
41<script src="$g.server/js/capabilities.js"></script>
42<!-- END: WMSC library -->
43
44<script type="text/javascript">
45
46// Hook into application for debugging.   
47var app = null;
48var control = null;
49
50function init()
51{
52    var coordControl = new WMSC.DimControl('dims');
53    var layerControl = new WMSC.VisAppLayers('layerTree', 'layerLeaves', coordControl);
54    <for py:for="i in session['viewItems']" class="dataset" py:strip="True">
55        <span py:if="i.wmcURL" py:strip="True">
56                layerControl.addWebMapContext('${i.wmcURL}');
57            </span>
58    </for>
59         
60    app = new WMSC.VisApp('map', 10, 640, true);
61    app.addDimensionControl(coordControl);
62    app.addLayerControl(layerControl);
63}
64
65function cleanup()
66{
67    app.destroy();
68}
69
70</script>
71
72<replace py:replace="pagehead()"/>
73</head>
74
75<body onload="init()" onunload="cleanup()">
76        <div id="entirepage">
77    <div py:replace="header()"/>
78        <div py:replace="PageTabs('View')"/>
79    <div py:replace="searchOneLine()"/>
80
81<div id="visBody">
82      <div id="coord_help" class="hidden">
83        <div class="helptxt">
84                                Specifying coordinate dimensions will select a region on the map;
85                                when this is appropriately sized, the map will automatically zoom to this region.<br/>
86                                'Reset selection' will return the map to its full, global size.<br/>
87                                Some map layers have additional dimensions, e.g. 'time';
88                                if these are available, they will also be displayed in this panel for selection.<br/>
89                                NB, the dimensions displayed are those relating to the selected dataset
90                                in the left hand tree view - however they will also be applied, where appropriate, to all selected map layers.
91        </div>
92      </div>
93<table>
94  <tr>
95    <td align="center">
96        <div id="mapBox">
97                        <div id="map"></div>
98                        <div id="legend"></div>
99                </div>
100    </td>
101    <td valign="top">
102      <div class="optDiv">
103        <b>Selection Description</b>
104                <div id="description">
105                  Complete your selection below to view<span py:replace="helpIcon('coord_help')"/>
106                </div>
107      </div>
108      <div class="optDiv">
109        <b>Domain</b>
110                        <div id="dims"></div>
111      </div>
112    <div class="hiddenDiv">
113        <form id="figureForm">
114          <b>Plot type</b><br/>
115          <input type="radio" name="figType" value="colour" checked="1"/>Colour<br/>
116          <input type="radio" name="figType" value="bw"/>B/W Contour<br/>
117          <b>Format</b><br/>
118          <select name="figFormat">
119            <option value="image/png" name="figFormat" selected="1"> PNG </option>
120            <option value="image/jpeg" name="figFormat"> JPEG </option>
121            <option value="application/postscript" name="figFormat"> EPS </option>
122            <option value="image/svg+xml" name="figFormat"> SVG </option>
123          </select>
124          <input type="button" value="Make Figure"
125                onclick="app.makeFigure(this.parentNode.figType, this.parentNode.figFormat)"/>
126        </form>
127      </div>
128    </td>
129  </tr>
130</table>
131
132<table class="controlTable">
133<tr class="controlHeadings">
134<th>Dataset<span py:replace="helpIcon('dataset_help')"/>
135</th>
136<th>Layer<span py:replace="helpIcon('layer_help')"/></th>
137</tr>
138<tr>
139<td>
140        <div id="dataset_help" class="hidden">
141        <div class="helptxt">
142                        Select a dataset to expand it and make its map layers visible; these can then be selected to add to the 'Layer'
143                        panel for visualisation.<br/> 
144                        Remove datasets from the display by clicking their <img src="js/img/close.gif" /> icon.
145        </div>
146    </div>
147</td>
148<td>
149        <div id="layer_help" class="hidden">
150        <div class="helptxt">
151                When multiple map layers are selected, the displayed map is constructed by sequentially adding the layers from the top of the list
152                to the bottom.<br/>
153                NB, if the topmost layer (i.e. the bottom layer in the below list) has legend data available then this will be displayed under the completed map.<br/>
154                Remove layers from the displayed map by clicking their <img src="js/img/close.gif" /> icon.
155        </div>
156    </div>
157</td>
158</tr>
159<tr>
160<td class="controlPanel"><div class="controlContent" id="layerTree">
161        Please wait while datasets load</div>
162</td>
163<td class="controlPanel">
164        <div class="controlContent" id="layerLeaves">
165                <div id="layerMessage" class="layerMessage">
166            <span py:if="'viewItems' not in session" py:strip="True">
167                Please select a dataset to view - from the 'Selections' tab.
168            </span>
169            <span py:if="'viewItems' in session" py:strip="True">
170                                Expand a dataset and select a layer to view
171                        </span>
172                </div>
173                <div class="workarea">
174                        <ul class="draglist" id="layerlist">
175                        </ul>
176                </div>
177        </div>
178</td>
179</tr>
180</table>
181
182</div>
183</div>
184</body>
185</html>
Note: See TracBrowser for help on using the repository browser.