← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to index.html

  • Committer: Michael Lynch
  • Date: 2008-02-01 06:21:07 UTC
  • Revision ID: mike@mike-desktop-20080201062107-uhqip0rcpsfc91mq
Initial import

Show diffs side-by-side

added added

removed removed

Lines of Context:
index.html
 
1
<?xml version="1.0" encoding="UTF-8"?>
 
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tranistional//EN"
 
3
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
5
        <head>
 
6
                <script type="text/javascript">
 
7
                        if (navigator.userAgent.indexOf('MSIE') > -1 && navigator.userAgent.indexOf('Mac') > -1) {
 
8
                                location.href = "html/notsupported.html";
 
9
                        }
 
10
                </script>
 
11
                <script src="lib/prototype/prototype.js" type="text/javascript"></script>
 
12
                <script src="lib/scriptaculous/scriptaculous.js" type="text/javascript"></script>
 
13
                <script src="lib/SunViewer/DomNodeCache.js" type="text/javascript"></script>
 
14
                <script src="lib/SunViewer/AjaxRequestWrapper.js" type="text/javascript"></script>
 
15
                <script src="lib/SunViewer/SunViewerWidget.js" type="text/javascript"></script>
 
16
                <script src="lib/SunViewer/SunImage.js" type="text/javascript"></script>
 
17
                <script src="lib/SunViewer/tiles.js" type="text/javascript"></script>
 
18
                <script src="lib/SunViewer/Surface.js" type="text/javascript"></script>
 
19
                <script src="lib/SunViewer/overlays.js" type="text/javascript"></script>
 
20
                <script src="lib/SunViewer/markers.js" type="text/javascript"></script>
 
21
                <script src="lib/SunViewer/layers.js" type="text/javascript"></script>
 
22
                <script src="lib/SunViewer/InfoBubble.js" type="text/javascript"></script>
 
23
                <script src="lib/SunViewer/ViewPort.js" type="text/javascript"></script>
 
24
                <script src="lib/SunViewer/LayerManager.js" type="text/javascript"></script>
 
25
                <script src="lib/SunViewer/ZoomLevelSlider.js" type="text/javascript"></script>
 
26
                <script src="lib/SunViewer/SunCoordsDisplay.js" type="text/javascript"></script>
 
27
                <script src="lib/SunViewer/SizeIndicator.js" type="text/javascript"></script>
 
28
                <script src="lib/SunViewer/SelectByDateMenu.js" type="text/javascript"></script>
 
29
                <script src="lib/SunViewer/SunViewer.js" type="text/javascript"></script>
 
30
                <script type="text/javascript">
 
31
                // <![CDATA[
 
32
 
 
33
                var sunViewer = null;
 
34
                var maximized = false;
 
35
                
 
36
                function initializeGraphic(e) {
 
37
                        //Debug.test();
 
38
                        
 
39
                        // opera triggers the onload twice
 
40
                        if (sunViewer == null) {
 
41
                                // NOTE: This should all be encapsulated in the SunViewer class!
 
42
                                // Create viewport
 
43
                                var viewport1 = new ViewPort('sunViewer1.viewport1', {
 
44
                                        //minZoomLevel: 9,
 
45
                                        maxZoomLevel: 10,
 
46
                                        blankTileImage: 'images/icons/blank.gif',
 
47
                                        loadingTileImage: 'images/icons/progress.gif' //,
 
48
                                        //tileLayerProviders: [
 
49
                                        //      new MarkerLayerProvider()
 
50
                                        //]
 
51
                                });
 
52
                                
 
53
                                
 
54
                                // Create tile containers
 
55
                                var tiles1 = new TileContainer(viewport1);
 
56
                                var layerManager1 = new LayerManager(tiles1, 'layerManager1');
 
57
                                
 
58
                                // Create tile layer providers
 
59
                                var bg1 = new TileLayerProvider(tiles1);
 
60
                                //var debug1 = new TileDebugLayerProvider(tiles1);
 
61
                                //var debug2 = new TileDebugLayerProvider(tiles2, { color: 'red' });
 
62
                                var markers1 = new MarkerLayerProvider(tiles1);
 
63
                                
 
64
                                //var menu1 = new SelectByDateMenu('sunViewer1.menu1');
 
65
                                //$('layerManager1').appendChild(menu1.createHtmlElement());
 
66
                                //var menu2 = new SelectByDateMenu('sunViewer1.menu2');
 
67
                                //$('layerManager1').appendChild(menu2.createHtmlElement());
 
68
                                var zoomLevelSlider = new ZoomLevelSlider('sunViewer1.viewport1.zoomLevelSlider');
 
69
                                var sizeIndicator = new SizeIndicator('sunViewer1.viewport1.sizeIndicator', bg1);
 
70
                                var sunCoordsDisplay = new SunCoordsDisplay('sunViewer1.viewport1.sunCoordsDisplay', bg1);
 
71
                                // Link menu to tile layer providers
 
72
                                zoomLevelSlider.linkToViewports(viewport1);
 
73
                                //bg1.observe(menu1, 'ImageChange');
 
74
                                //bg2.observe(menu2, 'ImageChange')
 
75
                                markers1.observe(bg1, 'ImageChange');
 
76
                                markers1.observe(bg1, 'ZoomOffsetChange');
 
77
 
 
78
/*
 
79
                                
 
80
*/
 
81
                                
 
82
                }
 
83
        }
 
84
                
 
85
                var LoadingIndicator = Class.create();
 
86
                
 
87
                LoadingIndicator.prototype = {
 
88
                        initialize: function() {
 
89
                                //this.loadingItemCount = 0;
 
90
                                this.loadingItems = [];
 
91
                                
 
92
                                Ajax.Responders.register({
 
93
                                  onCreate: this.loadingStarted.bind(this, 'Ajax'),
 
94
                                  onComplete: this.loadingFinished.bind(this, 'Ajax')
 
95
                                });
 
96
                        },
 
97
 
 
98
                        show: function() {
 
99
                                $('loading').show();
 
100
                        },
 
101
                        
 
102
                        hide: function() {
 
103
                                $('loading').hide();
 
104
                        },
 
105
                        
 
106
                        reset: function() {
 
107
                                this.loadingItemCount = 0;
 
108
                                this.hide();
 
109
                        },
 
110
                        
 
111
                        loadingStarted: function(item) {
 
112
                                //if (!item) item = new object();
 
113
                                this.show();
 
114
                                this.loadingItems.push(new Object());
 
115
                                //++this.loadingItemCount;
 
116
//Debug.output('Loading started: ' + item + ' (' + this.loadingItems.length + ')');
 
117
                        },
 
118
                        
 
119
                        loadingFinished: function(item) {
 
120
                                this.loadingItems.pop();
 
121
                                if (this.loadingItems.length == 0) this.hide();
 
122
                                //if (this.loadingItemCount < 0) this.loadingItemCount = 0;
 
123
//Debug.output('Loading finished: ' + item + ' (' + this.loadingItems.length + ')');
 
124
                        }
 
125
                };
 
126
                
 
127
                var Debug = Class.create();
 
128
 
 
129
                Debug.outputBuffer = '';
 
130
                Debug.outputTimeout;
 
131
                Debug.loadingItemCount = 0;
 
132
                
 
133
                Debug.loadingIndicator = new LoadingIndicator();
 
134
                
 
135
                Debug.test = function(xIndex, yIndex, level) {
 
136
                        var xIndex = 9;
 
137
                        var level = 3;
 
138
                        for (var l = 0; l <= level; l++) {
 
139
                                var x = (xIndex >> (level - l + 1)) / (1 << l);
 
140
                                var x2 = 1 / (1 << l + 1);
 
141
                                Debug.output(x, (1<<l), (xIndex >> (level - l)), x2);
 
142
                        }
 
143
                };
 
144
 
 
145
                Debug.output = function() {
 
146
                        var txt = '';
 
147
                        
 
148
                        for (var i = 0; i < arguments.length; i++) {
 
149
                                txt += arguments[i];
 
150
                                if (i < arguments.length - 1) txt += ', ';
 
151
                        }
 
152
                        
 
153
                        if (window.console) {
 
154
                                window.console.log(txt);
 
155
                        } else {
 
156
                                if (Debug.outputTimeout) clearTimeout(Debug.outputTimeout);
 
157
                                Debug.outputBuffer = txt + '\n' + Debug.outputBuffer;
 
158
                                Debug.outputTimeout = setTimeout(Debug.flush, 100);
 
159
                        }
 
160
                }
 
161
                
 
162
                Debug.plotArray = function(a) {
 
163
                        Debug.output('----\n' + Debug.strArray(a, '', 0));
 
164
                }
 
165
                
 
166
                Debug.strArray = function(a, indent, index) {
 
167
                        //Debug.output(typeof(a), a instanceof Array);
 
168
                        if (a instanceof Array) {
 
169
                                if (a.length == 0) return indent + index + ': []\n';
 
170
                                var txt = indent + index + ': [\n';
 
171
                                var c = 0;
 
172
                                a.each(function(m) {
 
173
                                        txt += Debug.strArray(m, indent + '  ', c)
 
174
                                        ++c;
 
175
                                });
 
176
                                return txt + indent + ']\n';
 
177
                        } else {
 
178
                                return indent + index + ': ' + a + '\n';
 
179
                        }
 
180
                }
 
181
                
 
182
                Debug.flush = function() {
 
183
                        $('debugOutput').innerHTML = '----\n' + Debug.outputBuffer + $('debugOutput').innerHTML;
 
184
                        Debug.outputBuffer = '';
 
185
                }
 
186
                
 
187
                Debug.ajaxFailure = function(transport, url) {
 
188
                        Debug.output('Error getting file "' + url + '": ' + transport.status + ' ' + transport.statusText);
 
189
                }
 
190
                        
 
191
                Event.observe(window, 'load', initializeGraphic);
 
192
                // ]]>
 
193
                </script>
 
194
                <style type="text/css">
 
195
                        @import url(styles/sunviewer.css);
 
196
                        @import url(styles/sizeIndicator.css);
 
197
                </style>
 
198
        </head>
 
199
        <body>
 
200
        
 
201
                <div><span id="loading" style="padding: 3px; font-size: 10pt; color: #FFFFFF; background-color: #990000; position: absolute; top: 30px; right: 30px; display: none">Loading...</span></div>
 
202
                <div id="sunViewer1.header" class="header">
 
203
                        <h1>SunViewer (alpha)</h1>
 
204
                <p>
 
205
                <a class="nav" onclick="SunViewer.showMessage('html/about.html')">About</a>&nbsp; 
 
206
                </p>
 
207
                </div>
 
208
                                <!--
 
209
                                <table border="0" cellspacing="0" cellpadding="2">
 
210
                                <tr>
 
211
                                        <td>
 
212
                                <button type="button" onclick="viewerBean.centreImage()">Centre</button>
 
213
                                <button type="button" onclick="viewerBean.reset()">Reset</button>
 
214
                                        </td><td width="150">
 
215
                                <span id="coordinates" style="margin-left: 20px">
 
216
                                        Coordinates:
 
217
                                        <span id="NorS" style="width: 10px"></span>
 
218
                                        <span id="NorSdeg" style="width: 20px; text-align: right"></span>
 
219
                                        <span id="WorE" style="width: 10px"></span>
 
220
                                        <span id="WorEdeg" style="width: 20px; text-align: right"></span>
 
221
                                </span>
 
222
                                        </td><td>
 
223
                                <span id="rotation" style="margin-left: 20px">
 
224
                                        Rotation:
 
225
                                        <span id="RNorS" style="width: 10px">S</span>
 
226
                                        <span id="RNorSdeg" style="width: 20px; text-align: right">0</span>
 
227
                                        <span id="RWorE" style="width: 10px">W</span>
 
228
                                        <span id="RWorEdeg" style="width: 20px; text-align: right">0</span>
 
229
                                </span>
 
230
                                        </td>
 
231
                                </tr>
 
232
                                </table>
 
233
                                -->
 
234
                <div style="clear: left"></div>
 
235
                <div style="z-index: 1; position: relative; width: 600px; margin-right: 10px; margin-bottom: 10px; display: inline; float: left">
 
236
 
 
237
                        <div id="layerManager1" class="layerManager" style="position: absolute; z-index: 2; height: 15px; width: 70px; overflow: hidden; margin-bottom: 10px">
 
238
                        </div>
 
239
                        <div id="sunViewer1.viewport1" class="viewport" style="z-index: 0; left: 0px; width: 100%; height: 600px">
 
240
                                <div class="surface" id="surface1">
 
241
                                        
 
242
                                </div>
 
243
                                <div class="well" id="well1">
 
244
                                        
 
245
                                </div>
 
246
                                <div id="sunViewer1.viewport1.zoomLevelSlider" class="viewportControls" style="position: absolute; left: 10px; top: 35px; text-align: center; padding: 2px 4px 2px 4px">
 
247
                                        <a href="JavaScript:void(0);" class="zoomIn" title="Zoom In">
 
248
                                                <img src="images/icons/zoomIn.gif" alt="" border="0" style="margin: 0px 0px 00px 0px" />
 
249
                                        </a>
 
250
                                        
 
251
                                        <div class="zoomLevelContainer">
 
252
                                                
 
253
                                        </div>
 
254
                                        
 
255
                                        <a href="JavaScript:void(0);" class="zoomOut" title="Zoom Out">
 
256
                                                <img src="images/icons/zoomOut.gif" alt="" border="0" style="margin: 0px 0px 0px 0px" />
 
257
                                        </a>
 
258
                                </div>                                  
 
259
                                <div id="sunViewer1.viewport1.sunCoordsDisplay" class="sunCoordsDisplay" style="position: absolute; right: 10px; top: 10px;">
 
260
                                
 
261
                                </div>
 
262
                                <div class="sizeIndicator" id="sunViewer1.viewport1.sizeIndicator" style="left: 10px; top: 545px">
 
263
                                </div>
 
264
                                <!-- div class="viewportControls" style="left: 0px; bottom: 0px; height: 20px; padding: 0px 4px 0px 4px; margin: 0px">
 
265
                                        <span class="centerControl">Center</span>
 
266
                                </div -->
 
267
                
 
268
                        </div>
 
269
                </div>
 
270
                
 
271
                
 
272
        </body>
 
273
</html>