← Back to branch summary

~keith-hughitt/helioviewer.org/2.0

« back to all changes in this revision

Viewing changes to index.php

  • Committer: Keith Hughitt
  • Date: 2010-03-24 11:14:04 UTC
  • Revision ID: hughitt1@io-20100324111404-tjat3xqy09nqvwik
Helioviewer.org 2.0.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
index.php
 
1
<?php
 
2
$ini = "settings/Config.ini";
 
3
if ((!file_exists($ini)) || (!$config = parse_ini_file($ini)))
 
4
    die("Missing config file!");
 
5
?>
 
6
<!DOCTYPE html>
 
7
<html lang="en">
 
8
    <head>
 
9
        <?php printf("<!-- Helioviewer rev. %s, %s -->\n", $config["build_num"], $config["last_update"]);?>
 
10
        <title>Helioviewer - Solar and heliospheric image visualization tool</title>
 
11
        <meta charset="utf-8" />
 
12
        <meta http-equiv="X-UA-Compatible" content="ie=9" />
 
13
        <meta http-equiv="X-UA-Compatible" content="ie=8" />
 
14
        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
 
15
        <!--[if IE]>
 
16
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
 
17
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
18
        <![endif]-->
 
19
        <link rel="shortcut icon" href="favicon.ico" />
 
20
 
 
21
        <meta name="description" content="Helioviewer - Solar and heliospheric image visualization tool" />
 
22
        <meta name="keywords" content="Helioviewer, hv, jpeg 2000, jp2, solar image viewer, sun, solar, heliosphere, solar physics, viewer, visualization, space, astronomy, SOHO, EIT, LASCO, SDO, MDI, coronagraph, " />
 
23
        <?php if ($config["disable_cache"]) echo "<meta http-equiv=\"Cache-Control\" content=\"No-Cache\" />\n"; ?>
 
24
 
 
25
        <!-- YUI CSS Reset -->
 
26
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0/build/reset-fonts/reset-fonts.css" />
 
27
 
 
28
        <!-- Layout -->
 
29
        <link rel="stylesheet" href="resources/css/layout.css" type="text/css" />
 
30
 
 
31
        <!-- jQuery -->
 
32
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
33
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
 
34
        <script src="lib/jquery.class/jquery.class.js" type="text/javascript"></script>
 
35
        <!--<script src="lib/jquery.qtip-2.0-r282/jquery.qtip.js" type="text/javascript"></script>
 
36
        <script src="lib/jquery.qtip-2.0-r282/jquery.qtip.tips.js" type="text/javascript"></script>-->
 
37
        <script src="lib/jquery.qtip-1.0-r34/jquery.qtip-1.0.min.js" type="text/javascript"></script>
 
38
 
 
39
        <!-- TODO: move jquery.dynaccordion to /src with rest of custom code -->
 
40
        <script src="lib/jquery.dynaccordion/ui.dynaccordion.js" type="text/javascript"></script>
 
41
 
 
42
        <link rel="stylesheet" href="lib/jquery.ui-1.7.1/css/dot-luv-modified/jquery-ui-1.7.1.custom.css" type="text/css" />
 
43
 
 
44
        <!-- Mousewheel support -->
 
45
        <script src="lib/jquery.mousewheel.3.0.2/jquery.mousewheel.min.js" type="text/javascript"></script>
 
46
 
 
47
        <!-- jGrowl -->
 
48
        <script src="lib/jquery.jgrowl/jquery.jgrowl_minimized.js" type="text/javascript"></script>
 
49
        <link rel="stylesheet" href="lib/jquery.jgrowl/jquery.jgrowl.css" type="text/css" />
 
50
 
 
51
        <!-- imgAreaSelect jQuery plugin -->
 
52
        <script src="lib/jquery.imgareaselect-0.8/jquery.imgareaselect-0.8.js" type="text/javascript"></script>
 
53
 
 
54
        <!-- CookieJar -->
 
55
        <script type="text/javascript" src="lib/Cookiejar/jquery.json.js"></script>
 
56
        <script type="text/javascript" src="lib/Cookiejar/jquery.cookie.js"></script>
 
57
        <script type="text/javascript" src="lib/Cookiejar/jquery.cookiejar.pack.js"></script>
 
58
 
 
59
        <!-- date.js -->
 
60
        <script src="lib/date.js/date-en-US.js" type="text/javascript"></script>
 
61
 
 
62
        <!-- Simile -->
 
63
        <!--<script src="http://static.simile.mit.edu/timeline/api-2.2.0/timeline-api.js" type="text/javascript"></script>-->
 
64
 
 
65
        <!-- Pixastic -->
 
66
        <!-- $("img.tile[src!=resources/images/transparent_512.gif]"); -->
 
67
        <!--<script src="lib/pixastic/pixastic.custom.js" type="text/javascript"></script>-->
 
68
 
 
69
        <!-- ShadowBox -->
 
70
        <link rel="stylesheet" type="text/css" href="lib/shadowbox-3.0.3/shadowbox.css">
 
71
        <script type="text/javascript" src="lib/shadowbox-3.0.3/shadowbox.js"></script>
 
72
        <script type="text/javascript">
 
73
            Shadowbox.init({
 
74
                overlayOpacity: 0.5,
 
75
                troubleElements: ["object", "embed"]
 
76
            });
 
77
        </script>
 
78
 
 
79
        <!-- Helioviewer-Specific -->
 
80
        <?php
 
81
 
 
82
            if ($config['disable_cache']) {
 
83
                $signature = time();
 
84
            } else {
 
85
                $signature = $config['build_num'];
 
86
            }
 
87
            $version = "rev=$signature";
 
88
 
 
89
            // JavaScript
 
90
            if ($config["compress_js"]) {
 
91
                $compressed = "build/helioviewer.min.js";
 
92
                if (!file_exists($compressed)) {
 
93
                   $error = "<div style='position: absolute; width: 100%; text-align: center; top: 50%; font-size: 14px;'>
 
94
                             <img src='resources/images/logos/about.png' alt='helioviewer logo'></img><br>
 
95
                             <b>Configuration:</b> Unable to find compressed JavaScript files.
 
96
                             If you haven't already, use Apache Ant with the included build.xml file to generate compressed files.</div></body></html>";
 
97
                   die($error);
 
98
                }
 
99
 
 
100
                echo "<script src=\"$compressed?$version\" type=\"text/javascript\"></script>\n\t";
 
101
            }
 
102
            else {
 
103
                $js = array("Config.js", "Helioviewer.js", "HelperFunctions.js", "IconPicker.js", "Layer.js", "EventLayer.js", "EventLayerAccordion.js", "EventMarker.js",
 
104
                            "ImageSelectTool.js", "KeyboardManager.js", "LayerManager.js", "EventLayerManager.js", "TileLayerManager.js", "MediaSettings.js", "MessageConsole.js",
 
105
                            "MovieBuilder.js", "ScreenshotBuilder.js", "TileLayer.js", "TileLayerAccordion.js", "Time.js", "TimeControls.js", "TooltipHelper.js", "TreeSelect.js",
 
106
                            "UserSettings.js", "Viewport.js", "ViewportHandlers.js", "ZoomControls.js");
 
107
                foreach($js as $file)
 
108
                    printf("<script src=\"src/%s?$version\" type=\"text/javascript\"></script>\n\t", $file);
 
109
            }
 
110
 
 
111
            // CSS
 
112
            if ($config["compress_css"]) {
 
113
                echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"build/css/helioviewer.css?$version\" />\n\t";
 
114
            }
 
115
            else {
 
116
                $css = array("main.css", "accordions.css", "dialogs.css", "events.css", "sliders.css", "timenav.css", "tooltips.css", "viewport.css");
 
117
                foreach($css as $file)
 
118
                    printf("<link rel=\"stylesheet\" type=\"text/css\" href=\"resources/css/%s?$version\" />\n\t", $file);
 
119
            }
 
120
        ?>
 
121
 
 
122
        <!-- Theme Modifications -->
 
123
        <link rel="stylesheet" type="text/css" href="resources/css/dot-luv.css">
 
124
 
 
125
        <script type="text/javascript">
 
126
            var config, state, defaults, defaultsJSON, api;
 
127
 
 
128
            $(function () {
 
129
                <?php
 
130
                    printf("defaultsJSON = %s;\n", json_encode($config));
 
131
 
 
132
                    // Application state
 
133
                    $state = array();
 
134
 
 
135
                    //API Example: helioviewer.org/?date=2003-10-05T00:00:00Z&imageScale=2.63&imageLayers=[SOHO,EIT,EIT,171,1,70],[SOHO,LASCO,C2,white light,0,100]
 
136
                    if (isset($_GET['imageLayers'])) {
 
137
                        $imageLayersString = ($_GET['imageLayers'][0] == "[") ? substr($_GET['imageLayers'],1,-1) : $_GET['imageLayers'];
 
138
                        $imageLayers = preg_split("/\],\[/", $imageLayersString);
 
139
                        $state['imageLayers'] = $imageLayers;
 
140
                    }
 
141
 
 
142
                    if (isset($_GET['date']))
 
143
                        $state['date'] = $_GET['date'];
 
144
 
 
145
                    if (isset($_GET['imageScale']))
 
146
                        $state['imageScale'] = $_GET['imageScale'];
 
147
 
 
148
                    if (isset($_GET['debug']))
 
149
                        $state['debug'] = $_GET['debug'];
 
150
 
 
151
                    // Convert to JSON
 
152
                    printf("\t\tstate = %s;\n", json_encode($state));
 
153
                ?>
 
154
                config = new Config(defaultsJSON);
 
155
                defaults = config.toArray();
 
156
                helioviewer = new Helioviewer('#helioviewer-viewport', state, defaults);
 
157
            });
 
158
        </script>
 
159
 
 
160
    </head>
 
161
    <body>
 
162
 
 
163
    <!-- Header -->
 
164
    <div id="header"></div>
 
165
 
 
166
    <!-- Body -->
 
167
    <div id="colmask">
 
168
        <div id="colmid">
 
169
            <div id="colright">
 
170
 
 
171
            <!-- Middle Column -->
 
172
            <div id="col1wrap">
 
173
                <div id="col1pad">
 
174
                    <div id="col1">
 
175
                        <!-- Viewport -->
 
176
                        <div id="helioviewer-viewport-container-outer" class="ui-widget ui-widget-content ui-corner-all">
 
177
                            <div id="helioviewer-viewport-container-inner" style="top:3%; width:97%; height:94%">
 
178
                                <div id="helioviewer-viewport"></div>
 
179
 
 
180
                                    <!-- UI COMPONENTS -->
 
181
 
 
182
                                    <!--  Zoom Controls -->
 
183
                                    <div id="zoomControls"></div>
 
184
 
 
185
                                    <!-- Center button -->
 
186
                                    <div id="center-button" title="Center the image on the screen.">
 
187
                                        <span>center</span>
 
188
                                    </div>
 
189
 
 
190
                                    <!--Social buttons -->
 
191
                                    <div id="social-buttons">
 
192
                                        <!-- Link button -->
 
193
                                        <div id="link-button" class="text-btn">
 
194
                                            <span class="ui-icon ui-icon-link" style="float: left;"></span>
 
195
                                            <span style="line-height: 1.6em">Link</span>
 
196
                                        </div>
 
197
 
 
198
                                        <!-- Email button -->
 
199
                                        <!--<div id="email-button" class="text-btn">
 
200
                                            <span class="ui-icon ui-icon-mail-closed" style="float: left;"></span>
 
201
                                            <span style="line-height: 1.6em">Email</span>
 
202
                                        </div>-->
 
203
 
 
204
                                        <!-- Movie button -->
 
205
                                        <!--<div id="movie-button" class="text-btn">
 
206
                                            <span class="ui-icon ui-icon-video" style="float: left;"></span>
 
207
                                            <span style="line-height: 1.6em">Movie</span>
 
208
                                        </div>-->
 
209
 
 
210
                                        <!-- Screenshot button -->
 
211
                                        <!--<div id="screenshot-button" class="text-btn">
 
212
                                            <span class="ui-icon ui-icon-image" style="float: left;"></span>
 
213
                                            <span style="line-height: 1.6em">Screenshot</span>
 
214
                                        </div>-->
 
215
 
 
216
                                        <!-- Select region button -->
 
217
                                        <!--<div id="select-region-button" class="text-btn">
 
218
                                            <span class='ui-icon ui-icon-scissors' style="float: left;"></span>
 
219
                                            <span style="line-height: 1.6em">Select Region</span>
 
220
                                        </div>-->
 
221
 
 
222
                                        <!-- Media settings button -->
 
223
                                        <!--<div id="settings-button" class="text-btn">
 
224
                                            <span class='ui-icon ui-icon-gear' style="float: left;"></span>
 
225
                                            <span style="line-height: 1.6em">Media Settings</span>
 
226
                                        </div>-->
 
227
 
 
228
                                        <!-- JHelioviewer -->
 
229
                                        <div id="jhelioviewer-button" class="text-btn">
 
230
                                            <span class="ui-icon ui-icon-arrowthickstop-1-s" style="float: left;"></span>
 
231
                                            <span style="line-height: 1.6em">JHelioviewer</span>
 
232
                                        </div>
 
233
                                    </div>
 
234
 
 
235
                                    <!-- Fullscreen toggle -->
 
236
                                    <div id='fullscreen-btn' title="Toggle fullscreen display.">
 
237
                                        <div class='ui-icon ui-icon-arrow-4-diag'></div>
 
238
                                    </div>
 
239
                                </div>
 
240
                            </div>
 
241
                        </div>
 
242
                    </div>
 
243
                </div>
 
244
 
 
245
                <!-- Left Column -->
 
246
                <div id="col2">
 
247
                    <div id="left-col-header">
 
248
                        <img src="resources/images/logos/simple.png" id="helioviewer-logo-main" alt="Helioviewer.org Logo" style="margin-top:24px; margin-left: 9px;">
 
249
                    </div>
 
250
                    <br><br>
 
251
                    <div class="section-header" style="margin-left:5px; margin-top: 15px;">Time</div>
 
252
                    <div id="observation-controls" class="ui-widget ui-widget-content ui-corner-all">
 
253
                        <!--  Observation Date -->
 
254
                        <div style="margin-bottom: 4px; position: relative;">
 
255
                            <div style="width: 78px; margin-top:3px; float: left; font-weight: 600;">Date:</div>
 
256
                            <input type="text" id="date" name="date" value="">
 
257
                        </div>
 
258
 
 
259
                        <!-- Observation Time -->
 
260
                        <div style="margin-bottom: 8px;">
 
261
                            <div style="float: left; width: 78px; font-weight: 600;">Time:</div>
 
262
                            <input type="text" id="time" name="time" value="" style="width:80px">
 
263
                        </div>
 
264
 
 
265
                        <!-- Time Navigation Buttons & Time Increment selector -->
 
266
                        <div>
 
267
                            <div style="float: left; width: 78px; font-weight: 600;">Time-step:</div>
 
268
                            <select id="timestep-select" name="time-step"></select>
 
269
                            <span id="timeBackBtn" class="ui-icon ui-icon-circle-arrow-w" title="Move the Observation Date/Time backward one time-step"></span>
 
270
                            <span id="timeForwardBtn" class="ui-icon ui-icon-circle-arrow-e" title="Move the Observation Date/Time forward one time-step"></span>
 
271
                        </div>
 
272
                    </div>
 
273
 
 
274
                    <br><br>
 
275
                    <div id="tileLayerAccordion"></div>
 
276
                    <br><br>
 
277
                    <div id="eventAccordion"></div>
 
278
                    <br /><br />
 
279
 
 
280
                </div>
 
281
 
 
282
                <!-- Right Column -->
 
283
                <div id="col3">
 
284
                    <div id="right-col-header"></div>
 
285
                </div>
 
286
            </div>
 
287
        </div>
 
288
    </div>
 
289
    <!-- end Body -->
 
290
 
 
291
    <!-- Footer -->
 
292
    <div id="footer">
 
293
        <div id="footer-container-outer">
 
294
            <div id="footer-container-inner">
 
295
                <!-- Meta links -->
 
296
                <div id="footer-links">
 
297
                    <a href="http://helioviewer.org/wiki/index.php?title=Helioviewer.org_User_Guide" class="light" target="_blank">Help</a>
 
298
                    <a id="helioviewer-about" class="light" href="dialogs/about.php">About</a>
 
299
                    <a id="helioviewer-usage" class="light" href="dialogs/usage.php">Usage Tips</a>
 
300
                    <a href="http://helioviewer.org/wiki/" class="light" target="_blank">Wiki</a>
 
301
                    <a href="api/" class="light" target="_blank">API</a>
 
302
                    <a href="mailto:webmaster@helioviewer.org" class="light">Contact</a>
 
303
                    <a href="https://bugs.launchpad.net/helioviewer.org/" class="light" style="margin-right:2px;" target="_blank">Report Bug</a>
 
304
                </div>
 
305
            </div>
 
306
        </div>
 
307
    </div>
 
308
    <!-- end Footer -->
 
309
 
 
310
    <!-- TODO: Create dialog and loading indicator nodes on the fly -->
 
311
 
 
312
    <!-- Loading Indicator -->
 
313
    <div id="loading" style="display: none">Loading...</div>
 
314
 
 
315
    <!-- About dialog -->
 
316
    <div id='about-dialog'></div>
 
317
 
 
318
    <!-- Usage Dialog -->
 
319
    <div id='usage-dialog'></div>
 
320
    </body>
 
321
</html>