← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/php/HelioviewerWebClient.php

  • Committer: Keith Hughitt
  • Date: 2012-08-10 18:15:41 UTC
  • mfrom: (402.4.61 hv)
  • Revision ID: keith.hughitt@nasa.gov-20120810181541-4zkdf7td1igj55lw
Merged in development changes

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/php/HelioviewerWebClient.php
1
 
<?php
 
1
<?php 
2
2
/**
3
3
 * HelioviewerWebClient class definition
4
 
 *
 
4
 * 
5
5
 * Helioviewer.org HTML web client
6
6
 *
7
7
 * PHP version 5
8
8
 *
9
9
 * @category Application
10
10
 * @package  Helioviewer
11
 
 * @author   Jeff Stys <jeff.stys@nasa.gov>
12
11
 * @author   Keith Hughitt <keith.hughitt@nasa.gov>
13
12
 * @license  http://www.mozilla.org/MPL/MPL-1.1.html Mozilla Public License 1.1
14
13
 * @link     http://launchpad.net/helioviewer.org
16
15
require_once "HelioviewerClient.php";
17
16
/**
18
17
 * HelioviewerWebClient class definition
19
 
 *
 
18
 * 
20
19
 * Helioviewer.org HTML web client
21
20
 *
22
21
 * PHP version 5
23
22
 *
24
23
 * @category Application
25
24
 * @package  Helioviewer
26
 
 * @author   Jeff Stys <jeff.stys@nasa.gov>
27
25
 * @author   Keith Hughitt <keith.hughitt@nasa.gov>
28
26
 * @license  http://www.mozilla.org/MPL/MPL-1.1.html Mozilla Public License 1.1
29
27
 * @link     http://launchpad.net/helioviewer.org
30
28
 */
31
 
class HelioviewerWebClient extends HelioviewerClient {
 
29
class HelioviewerWebClient extends HelioviewerClient
 
30
{
32
31
    /**
33
32
     * Initializes a Helioviewer.org instance
34
33
     */
35
 
    public function __construct($urlSettings) {
36
 
 
37
 
        include_once 'src/php/Config.php';
38
 
        $this->configObj = new Config('settings/Config.ini');
39
 
 
40
 
        $this->compressedJSFile  = 'helioviewer.min.js';
41
 
        $this->compressedCSSFile = 'helioviewer.min.css';
42
 
 
 
34
    public function __construct($urlSettings)
 
35
    {
 
36
        $this->compressedJSFile  = "helioviewer.min.js";
 
37
        $this->compressedCSSFile = "helioviewer.min.css";
 
38
        
43
39
        parent::__construct($urlSettings);
44
40
    }
45
 
 
 
41
    
46
42
    /**
47
43
     * Loads library CSS
48
44
     */
49
 
    protected function loadCSS() {
 
45
    protected function loadCSS()
 
46
    {
50
47
        parent::loadCSS();
51
48
?>
52
49
    <link rel="stylesheet" href="lib/jquery.jgrowl/jquery.jgrowl.css" />
58
55
 
59
56
<?php
60
57
    }
61
 
 
 
58
    
62
59
    /**
63
60
     * Loads Helioviewer-specific CSS
64
61
     */
65
 
    protected function loadCustomCSS($signature, $includes=array()) {
66
 
        $css = array("helioviewer-web", "layout", "accordions", "dialogs",
67
 
                     "events", "media-manager", "timenav", "video-gallery",
68
 
                     "youtube", "font-awesome.min");
 
62
    protected function loadCustomCSS($signature, $includes=array())
 
63
    {
 
64
        $css = array("helioviewer-web", "layout", "accordions", "dialogs", 
 
65
                     "media-manager", "timenav", "video-gallery", "youtube");
69
66
        parent::loadCustomCSS($signature, $css);
70
67
    }
71
 
 
 
68
    
72
69
    /**
73
70
     * Loads JavaScript
74
71
     */
75
 
    protected function loadJS() {
76
 
        parent::loadJS();
77
 
 
 
72
    protected function loadJS()
 
73
    {
 
74
        parent::loadJS();   
78
75
        if ($this->config["compress_js"]) {
79
76
    ?>
80
77
<script src="lib/jquery.jgrowl/jquery.jgrowl_minimized.js" type="text/javascript"></script>
81
78
<script src="lib/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
82
79
<script src="lib/jquery.jfeed/build/jquery.jfeed.js" type="text/javascript"></script>
83
80
<script src="lib/jquery.xml2json/jquery.xml2json.pack.js" type="text/javascript" language="javascript"></script>
84
 
<script src="lib/jquery.jsTree-1.0rc/jquery.jstree.min.js"></script>
85
 
<?php
 
81
    <?php
86
82
        } else {
87
83
    ?>
88
84
<script src="lib/jquery.jgrowl/jquery.jgrowl.js" type="text/javascript"></script>
89
85
<script src="lib/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
90
86
<script src="lib/jquery.jfeed/build/jquery.jfeed.js" type="text/javascript"></script>
91
87
<script src="lib/jquery.xml2json/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
92
 
<script src="lib/jquery.jsTree-1.0rc/jquery.jstree.js"></script>
93
88
<?php
94
89
        }
95
90
    }
97
92
    /**
98
93
     * Loads Helioviewer-specific JavaScript
99
94
     */
100
 
    protected function loadCustomJS($signature, $includes=array()) {
101
 
        $js = array('UI/TreeSelect.js', 'UI/ImageSelectTool.js',
102
 
                    'Media/MediaManagerUI.js', 'Media/MediaManager.js',
103
 
                    'Media/MovieManager.js', 'Media/MovieManagerUI.js',
104
 
                    'Media/ScreenshotManager.js',
105
 
                    'Media/ScreenshotManagerUI.js',
106
 
                    'UI/TileLayerAccordion.js',
107
 
                    'UI/EventLayerAccordion.js', 'UI/MessageConsole.js',
108
 
                    'UI/TimeControls.js', 'Utility/FullscreenControl.js',
109
 
                    'HelioviewerWebClient.js',
110
 
                    'UI/UserVideoGallery.js', 'UI/Glossary.js',
111
 
                    'UI/jquery.ui.dynaccordion.js');
 
95
    protected function loadCustomJS($signature, $includes=array())
 
96
    {
 
97
        $js = array("UI/TreeSelect.js", "UI/ImageSelectTool.js",  
 
98
                    "Media/MediaManagerUI.js", "Media/MediaManager.js", "Media/MovieManager.js", 
 
99
                    "Media/MovieManagerUI.js", "Media/ScreenshotManager.js", "Media/ScreenshotManagerUI.js",  
 
100
                    "UI/TileLayerAccordion.js", "UI/MessageConsole.js", "UI/TimeControls.js",  
 
101
                    "Utility/FullscreenControl.js", "HelioviewerWebClient.js", "UI/UserVideoGallery.js",
 
102
                    "UI/Glossary.js", "UI/jquery.ui.dynaccordion.js");
112
103
        parent::loadCustomJS($signature, $js);
 
104
        
113
105
    }
114
 
 
 
106
    
115
107
    /**
116
108
     * Adds OpenGraph metatags corresponding to data loaded
117
 
     *
118
 
     * When a custom Helioviewer.org was used to load the page, customize
119
 
     * metatags
 
109
     * 
 
110
     * When a custom Helioviewer.org was used to load the page, customize metatags
120
111
     * to reflect the data loaded. This improves experience when sharing links
121
112
     * on Facebook, etc.
122
113
     */
123
114
    protected function addOpenGraphTags() {
124
 
 
125
 
        if ( isset($this->urlSettings['movieId']) &&
126
 
             preg_match('/^[a-zA-Z0-9]+$/', $this->urlSettings["movieId"]) ) {
127
 
 
 
115
        if (isset($this->urlSettings["movieId"]) && preg_match('/^[a-zA-Z0-9]+$/', $this->urlSettings["movieId"])) {
128
116
            try {
129
 
                $this->_addOpenGraphTagsForMovie(
130
 
                    $this->urlSettings['movieId'] );
 
117
                $this->_addOpenGraphTagsForMovie($this->urlSettings["movieId"]);
131
118
                return;
132
 
            }
133
 
            catch (Exception $e) {
134
 
                unset($this->urlSettings['movieId']);
 
119
            } catch (Exception $e) {
 
120
                unset($this->urlSettings["movieId"]);
135
121
            }
136
122
        }
137
 
 
138
 
        if ( sizeOf($this->urlSettings) >= 7 ) {
 
123
        
 
124
        if (sizeOf($this->urlSettings) >= 7) {
139
125
            $this->_addOpenGraphForSharedURL();
140
 
        }
141
 
        else {
 
126
        } else {
142
127
            parent::addOpenGraphTags();
143
128
        }
144
129
    }
145
 
 
 
130
    
146
131
    /**
147
132
     * Adds OpenGraph metatags for a shared movie link
148
133
     */
149
 
    private function _addOpenGraphTagsForMovie($id) {
150
 
 
 
134
    private function _addOpenGraphTagsForMovie($id)
 
135
    {
 
136
        include_once "api/src/Config.php";
 
137
        $configObj = new Config("settings/Config.ini");
 
138
        
151
139
        // Forward remote requests
152
 
        if ( HV_BACK_END !== 'api/index.php' ) {
 
140
        if (HV_BACK_END !== "api/index.php") {
153
141
            $params = array(
154
 
                'action' => 'getMovieStatus',
155
 
                'format' => 'mp4',
156
 
                'id'     => $id
 
142
                "action" => "getMovieStatus",
 
143
                "format" => "mp4",
 
144
                "id"     => $id
157
145
            );
158
 
 
159
 
            include_once 'src/php/Net/Proxy.php';
160
 
 
161
 
            $proxy = new Net_Proxy(HV_BACK_END.'?');
 
146
            include_once 'api/src/Net/Proxy.php';
 
147
            $proxy = new Net_Proxy(HV_BACK_END . "?");
162
148
            $info = json_decode($proxy->post($params, true), true);
163
 
 
164
 
            $flvURL = HV_BACK_END.'?action=downloadMovie&format=flv&id='.$id;
165
 
            $swfURL = substr(HV_BACK_END, 0, -14)
166
 
                    . '/lib/flowplayer/flowplayer-5.4.6.swf?config="'
167
 
                    . urlencode("{'clip':{'url':'$flvURL'}}");
168
 
        }
169
 
        else {
 
149
            
 
150
            $flvURL = HV_BACK_END . "?action=downloadMovie&format=flv&id=" . $id;
 
151
            $swfURL = substr(HV_BACK_END, 0, -14) . "/lib/flowplayer/flowplayer-3.2.8.swf?config=" . urlencode("{'clip':{'url':'$flvURL'}}");
 
152
        } else {
170
153
            // Otherwise process locally
171
 
            include_once 'src/php/Movie/HelioviewerMovie.php';
172
 
 
173
 
            $movie = new Movie_HelioviewerMovie($id, 'mp4');
 
154
            include_once 'api/src/Movie/HelioviewerMovie.php';
 
155
            
 
156
            $movie = new Movie_HelioviewerMovie($id, "mp4");
174
157
            $info = array(
175
 
                'title'      => $movie->getTitle(),
176
 
                'thumbnails' => $movie->getPreviewImages(),
177
 
                'width'      => $movie->width,
178
 
                'height'     => $movie->height
 
158
                "title" => $movie->getTitle(),
 
159
                "thumbnails" => $movie->getPreviewImages(),
 
160
                "width" => $movie->width,
 
161
                "height" => $movie->height
179
162
            );
180
163
 
181
 
            $flvURL = HV_BACK_END.'?action=downloadMovie&format=flv&id='
182
 
                    . $id;
183
 
            $swfURL = HV_WEB_ROOT_URL
184
 
                    . '/lib/flowplayer/flowplayer-3.2.8.swf?config='
185
 
                    . urlencode("{'clip':{'url':'$flvURL'}}");
 
164
            $flvURL = HV_API_ROOT_URL . "?action=downloadMovie&format=flv&id=" . $id;
 
165
            $swfURL = HV_WEB_ROOT_URL . "/lib/flowplayer/flowplayer-3.2.8.swf?config=" . urlencode("{'clip':{'url':'$flvURL'}}");
186
166
        }
187
 
?>
188
 
        <meta id="fb-og-description" property="og:description" content="<?php //echo $info['title'];?>" />
189
 
        <meta id="fb-og-image" property="og:image" content="<?php echo $info['thumbnails']['full'];?>" />
 
167
    ?>
 
168
        <meta property="og:description" content="<?php //echo $info['title'];?>" />
 
169
        <meta property="og:image" content="<?php echo $info['thumbnails']['full'];?>" />
190
170
        <meta property="og:video" content="<?php echo $swfURL;?>" />
191
171
        <meta property="og:video:width" content="<?php echo $info['width'];?>" />
192
172
        <meta property="og:video:height" content="<?php echo $info['height'];?>" />
193
173
        <meta property="og:video:type" content="application/x-shockwave-flash" />
194
 
<?php
 
174
    <?php 
195
175
    }
196
176
 
197
177
    /**
198
178
     * Adds OpenGraph metatags for a shared URL
199
179
     */
200
180
    private function _addOpenGraphForSharedURL() {
201
 
 
202
181
        // When opening shared link, include thumbnail metatags for Facebook, etc to use
203
 
 
204
 
        include_once 'src/php/Helper/HelioviewerLayers.php';
205
 
        include_once 'src/php/Helper/DateTimeConversions.php';
206
 
 
 
182
        include_once "api/src/Config.php";
 
183
        $configObj = new Config("settings/Config.ini");
 
184
        
 
185
        include_once 'api/src/Helper/HelioviewerLayers.php';
 
186
        include_once 'api/src/Helper/DateTimeConversions.php';
 
187
        
207
188
        $layers = new Helper_HelioviewerLayers($_GET['imageLayers']);
208
 
 
 
189
        
209
190
        $screenshotParams = array(
210
 
            'action'      => 'takeScreenshot',
211
 
            'display'     => true,
212
 
            'date'        => $this->urlSettings['date'],
213
 
            'imageScale'  => $this->urlSettings['imageScale'],
214
 
            'layers'      => $_GET['imageLayers'],
215
 
            'x0'          => $this->urlSettings['centerX'],
216
 
            'y0'          => $this->urlSettings['centerY'],
217
 
            'width'       => 1920,
218
 
            'height'      => 1920
 
191
            "action"      => "takeScreenshot",
 
192
            "display"     => true,
 
193
            "date"        => $this->urlSettings['date'],
 
194
            "imageScale"  => $this->urlSettings['imageScale'],
 
195
            "layers" => $_GET['imageLayers'],
 
196
            "x0" => $this->urlSettings['centerX'],
 
197
            "y0" => $this->urlSettings['centerY'],
 
198
            "width" => 128,
 
199
            "height" => 128
219
200
        );
220
 
 
221
 
        $ogImage = HV_BACK_END.'?'.http_build_query($screenshotParams);
222
 
        $ogDescription = $layers->toHumanReadableString().' ('
223
 
                       . toReadableISOString($this->urlSettings['date'])
224
 
                       . ' UTC)';
 
201
        $ogImage = HV_API_ROOT_URL . "?" . http_build_query($screenshotParams);
 
202
        $ogDescription = $layers->toHumanReadableString() . " (" . toReadableISOString($this->urlSettings['date']) . " UTC)";
225
203
        ?>
226
 
        <meta id="fb-og-description" property="og:description" content="<?php echo $ogDescription;?>" />
227
 
        <meta id="fb-og-image" property="og:image" content="<?php echo $ogImage;?>" />
 
204
        <meta property="og:description" content="<?php echo $ogDescription;?>" />
 
205
        <meta property="og:image" content="<?php echo $ogImage;?>" />
228
206
        <?php
229
207
    }
230
208
 
231
209
    /**
232
210
     * Prints beginning of HTML body section
233
211
     */
234
 
    protected function printBody($signature) {
 
212
    protected function printBody($signature)
 
213
    {
235
214
?>
236
215
 
237
 
 
238
 
 
239
 
<div class="user-select-none" style="width: 100%; margin: 0; padding: 0; text-align: center; z-index: 9;">
240
 
    <!-- Image area select tool -->
241
 
    <div id='image-area-select-buttons'>
242
 
 
243
 
        <div style="margin: 0 auto; width: 20em;">
244
 
            <div id='cancel-selecting-image' class='text-btn'>
245
 
                <span class='fa fa-times-circle fa-fw'></span>
246
 
                <span>Cancel</span>
247
 
            </div>
248
 
            <div id='done-selecting-image' class='text-btn'>
249
 
                <span class='fa fa-check-circle fa-fw'></span>
250
 
                <span>Confirm Selection</span>
251
 
            </div>
252
 
        </div>
253
 
 
254
 
    </div>
255
 
</div>
256
 
 
257
 
 
258
 
<div style="width: 100%; height: 100%; margin: 0; padding: 0;">
259
 
 
260
 
    <div id="hv-header" class="user-select-none">
261
 
 
262
 
 
263
 
        <div id="loading">
264
 
            <span>
265
 
                <span>Loading Data</span>
266
 
                <span class="fa fa-circle-o-notch fa-spin"></span>
267
 
            </span>
268
 
        </div>
269
 
 
270
 
        <div id="logo">
271
 
            <h1>
272
 
                <span><a class="logo-icon fa fa-sun-o fa-fw" href="" title="The Open-Source Solar and Heliospheric Data Browser"></a><a class="logo-text" href="" title="The Open-Source Solar and Heliospheric Data Browser">Helioviewer.org</a></span>
273
 
            </h1>
274
 
        </div>
275
 
 
276
 
        <div id="zoom">
277
 
 
278
 
            <!--  Zoom Controls -->
279
 
            <div id="zoomControls" style="display: none;">
280
 
                <div id="zoomControlZoomIn" title="Zoom in." style="display: none;">+</div>
281
 
                <div id="zoomSliderContainer" style="display: none;">
282
 
                    <div id="zoomControlSlider" style="display: none;"></div>
283
 
                </div>
284
 
                <div id="zoomControlZoomOut" title="Zoom out." style="display: none;">-</div>
285
 
            </div>
286
 
 
287
 
            <div id="center-button" class="viewport-action fa fa-crosshairs" title="Center the Sun in the Viewport"></div>
288
 
 
289
 
            <div id="zoom-out-button" class="viewport-action fa fa-search-minus" title="Zoom Out"></div>
290
 
 
291
 
            <div id="zoom-in-button" class="viewport-action fa fa-search-plus" title="Zoom In"></div>
292
 
 
293
 
        </div>
294
 
 
295
 
        <div id="menus">
296
 
 
297
 
            <div class="left">
298
 
 
299
 
                <div id="news-button" class="fa fa-rss fa-fw qtip-bottomleft social-button" title="Helioviewer Project Announcements."></div>
300
 
 
301
 
                <a id="youtube-button" class="fa fa-youtube fa-fw qtip-bottomleft social-button header-tab" title="View Helioviewer Movies Shared to YouTube."></a>
302
 
 
303
 
                <div id="movies-button" class="fa fa-file-video-o fa-fw qtip-bottomleft social-button" title="Create a Helioviewer Movie."></div>
304
 
 
305
 
                <a id="screenshots-button" class="fa fa-file-picture-o fa-fw qtip-bottomleft social-button" title="Download a screenshot of the current Helioviewer Viewport."></a>
306
 
 
307
 
                <a id="data-button" class="fa fa-file-code-o fa-fw qtip-bottomleft social-button" title="Request Science Data Download from External Partners."></a>
308
 
 
309
 
                <div id="share-button" class="fa fa-share-square-o fa-fw qtip-bottomleft social-button" title="Share the current viewport on social media."></div>
310
 
            </div>
311
 
 
312
 
            <div class="right" style="margin-right: 0.5em;">
313
 
                <div id="help-button" class="fa fa-question fa-fw qtip-bottomleft" href="" style="margin-left: 0.5em;" title="Get Help with Helioviewer."></div>
314
 
 
315
 
                <div id="settings-button" class="fa fa-cog fa-fw qtip-bottomleft" title="Edit Settings &amp; Defaults."></div>
316
 
            </div>
317
 
 
318
 
        </div>
319
 
 
320
 
 
321
 
        <div id="scale">
322
 
            <div id="mouse-cartesian" class="viewport-action segmented-left fa fa-cube" title="Toggle Mouse Coordinates (Cartesian)"></div><div id="mouse-polar" class="viewport-action segmented-right fa fa-dot-circle-o" style="border-left: 0;" title="Toggle Mouse Coordinates (Polar)"></div>
323
 
 
324
 
            <div id="earth-button" class="viewport-action fa fa-globe" title="Toggle Earth-Scale Indicator"></div>
325
 
 
326
 
        </div>
327
 
 
328
 
        <!-- Mouse coordinates display -->
329
 
        <div id="mouse-coords" style="display: none;">
330
 
            <div id="mouse-coords-x"></div>
331
 
            <div id="mouse-coords-y"></div>
332
 
        </div>
333
 
 
334
 
    </div>
335
 
 
336
 
    <div id="hv-drawer-left" class="user-select-none">
337
 
        <div class="drawer-contents">
338
 
            <div id="accordion-date" class="accordion">
339
 
 
340
 
                <div class="header">
341
 
 
342
 
                    <div class="disclosure-triangle closed">►</div>
343
 
                    <h1>Observation Date</h1>
344
 
                    <div class="right fa fa-question-circle contextual-help" title="
345
 
Changing the 'Observation Date' will update the Viewport with data matching the new date and time.<br /><br />
346
 
 
347
 
Use the 'Jump' controls to browse forward and backward in time by a regular interval.<br /><br />
348
 
 
349
 
Note that when an image is not available for the exact date and time you selected, the closest available match will be displayed instead.<br />
350
 
                    ">
351
 
                    </div>
352
 
                </div>
353
 
 
354
 
                <div class="content">
355
 
                    <div class="section">
356
 
                        <div id="observation-controls" class="row">
357
 
                            <div class="label">Date:</div>
358
 
                            <div class="field">
359
 
                                <input type="text" id="date" name="date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker"/>
360
 
 
361
 
                                <input id="time" name="time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}"/>
362
 
 
363
 
                                <div class="suffix">UTC</div>
364
 
 
365
 
                                <div id="timeNowBtn" class="fa fa-clock-o right" style="padding-top: 0.4em; font-size: 1em;" title="Jump to the most recent available image)s_ for the currently loaded layer(s).">
366
 
                                    <span class="ui-icon-label">NEWEST</span>
367
 
                                </div>
368
 
                            </div>
369
 
                        </div>
370
 
                        <div class="row">
371
 
                            <div class="label">Jump:</div>
372
 
                            <div class="field">
373
 
 
374
 
                                <select id="timestep-select" name="time-step"></select>
375
 
 
376
 
                                <div id="timeBackBtn" class="inline fa fa-arrow-circle-left" style="font-size: 1.5em;" title="Jump Backward in Time."></div>
377
 
                                <div id="timeForwardBtn" class="inline fa fa-arrow-circle-right" style="font-size: 1.5em;" title="Jump Forward in Time."></div>
378
 
                            </div>
379
 
                        </div>
380
 
                    </div>
381
 
                </div>
382
 
 
383
 
            </div>
384
 
 
385
 
            <div id="accordion-images" class="accordion">
386
 
                <div class="header">
387
 
                    <div class="disclosure-triangle closed">►</div>
388
 
                    <h1>Image Data Layers</h1>
389
 
                    <div class="right fa fa-question-circle contextual-help" title="Up to five (5) independent image layers may be viewed simultaneously."></div>
390
 
                    <div class="accordion-header">
391
 
                        <a href="#" id="add-new-tile-layer-btn" class="text-button" title="Click to add an image data layer to the Viewport."><span class="fa fa-plus-circle"></span> Add Layer</a>
392
 
                    </div>
393
 
                </div>
394
 
                <div class="content">
395
 
                    <div id="tileLayerAccordion">
396
 
                        <div id="TileLayerAccordion-Container"></div>
397
 
                    </div>
398
 
                </div>
399
 
            </div>
400
 
 
401
 
            <div id="accordion-events" class="accordion">
402
 
                <div class="header">
403
 
                    <div class="disclosure-triangle closed">►</div>
404
 
                    <h1>Feature &amp; Event Annotations</h1>
405
 
                    <div class="right fa fa-question-circle contextual-help" title="Solar feature and event annotations such as marker pins, extended region polygons, and metadata."></div>
406
 
                </div>
407
 
                <div class="content">
408
 
                    <div id="eventLayerAccordion">
409
 
                        <div id="EventLayerAccordion-Container"></div>
410
 
                    </div>
411
 
                </div>
412
 
            </div>
413
 
        </div>
414
 
    </div>
415
 
    <div id="hv-drawer-tab-left" class="drawer-tab drawer-tab-left user-select-none">Data Sources</div>
416
 
 
417
 
 
418
 
    <div id="hv-drawer-news" class="hv-drawer-right user-select-none">
419
 
        <div class="drawer-contents">
420
 
 
421
 
            <div id="accordion-news" class="accordion">
422
 
                <div class="header">
423
 
                    <div class="disclosure-triangle closed">►</div>
424
 
                    <h1>Helioviewer Project News</h1>
425
 
                    <div class="right fa fa-question-circle contextual-help" title="Helioviewer Project news and tweets."></div>
426
 
                </div>
427
 
                <div class="content">
428
 
                    <div class="section">
429
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all"></div>
430
 
                    </div>
431
 
                </div>
432
 
            </div>
433
 
 
434
 
        </div>
435
 
    </div>
436
 
 
437
 
 
438
 
    <div id="hv-drawer-youtube" class="hv-drawer-right user-select-none">
439
 
        <div class="drawer-contents">
440
 
 
441
 
            <div id="accordion-youtube" class="accordion">
442
 
                <div class="header">
443
 
                    <div class="disclosure-triangle closed">►</div>
444
 
                    <h1>Movies Shared to YouTube</h1>
445
 
                    <div class="right fa fa-question-circle contextual-help" title="View YouTube movies generated by users of Helioviewer."></div>
446
 
                </div>
447
 
                <div class="content">
448
 
                    <div class="section">
449
 
                        <!-- User-Submitted Videos -->
450
 
                        <div id="user-video-gallery" class="ui-widget ui-widget-content ui-corner-all">
451
 
                            <div id="user-video-gallery-main">
452
 
                                <div id="user-video-gallery-spinner"></div>
453
 
                            </div>
454
 
                        </div>
455
 
                    </div>
456
 
                </div>
457
 
            </div>
458
 
        </div>
459
 
    </div>
460
 
 
461
 
 
462
 
    <div id="hv-drawer-movies" class="hv-drawer-right user-select-none">
463
 
        <div class="drawer-contents">
464
 
 
465
 
            <div id="accordion-movies" class="accordion">
466
 
                <div class="header">
467
 
                    <div class="disclosure-triangle closed">►</div>
468
 
                    <h1>Generate a Movie</h1>
469
 
                    <div class="right fa fa-question-circle contextual-help" title="Generate a custom move from up to three (3) image layers plus solar feature and event marker pins, labels, and extended region polygons."></div>
470
 
                </div>
471
 
                <div class="content">
472
 
                    <div class="section">
473
 
 
474
 
                        <!-- Movie Manager -->
475
 
                        <div id='movie-manager-container' class='media-manager-container'>
476
 
                            <div id='movie-manager-build-btns' class='media-manager-build-btns'>
477
 
                                <div style="width: 70%; margin: 0 auto;">
 
216
<!-- Header -->
 
217
<div id="header"></div>
 
218
 
 
219
<!-- Body -->
 
220
<div id="colmask">
 
221
    <div id="colmid">
 
222
        <div id="colright">
 
223
 
 
224
        <!-- Middle Column -->
 
225
        <div id="col1wrap">
 
226
            <div id="col1pad">
 
227
                <div id="col1">
 
228
                    <!-- Viewport -->
 
229
                    <div id="helioviewer-viewport-container-outer" class="ui-widget ui-widget-content ui-corner-all">
 
230
                        <div id="helioviewer-viewport-container-inner">
 
231
                            <div id="helioviewer-viewport">
 
232
                                <!-- Movement sandbox -->
 
233
                                <div id="sandbox" style="position: absolute;">
 
234
                                    <div id="moving-container"></div>
 
235
                                </div>
 
236
                                
 
237
                                <!-- Message console -->
 
238
                                <div id="message-console"></div>
 
239
                                
 
240
                                <!-- Image area select boundary container -->
 
241
                                <div id="image-area-select-container"></div>
 
242
                                
 
243
                            </div>
 
244
 
 
245
                            <!-- UI COMPONENTS -->
 
246
 
 
247
                            <!--  Zoom Controls -->
 
248
                            <div id="zoomControls">
 
249
                                <div id="zoomControlZoomIn" title="Zoom in.">+</div>
 
250
                                <div id="zoomSliderContainer">
 
251
                                    <div id="zoomControlSlider"></div>
 
252
                                </div>
 
253
                                <div id="zoomControlZoomOut" title="Zoom out.">-</div>
 
254
                            </div>
 
255
 
 
256
                            <!-- Center button -->
 
257
                            <div id="center-button" title="Center the image on the screen.">
 
258
                               <span>center</span>
 
259
                            </div>
 
260
 
 
261
                            <!--Social buttons -->
 
262
                            <div id="social-buttons">
 
263
                                <!-- Link button -->
 
264
                                <div id="link-button" class="text-btn qtip-left" title="Get a link to the current page.">
 
265
                                    <span class="ui-icon ui-icon-link" style="float: left;"></span>
 
266
                                    <span style="line-height: 1.6em">Link</span>
 
267
                                </div>
 
268
 
 
269
                                <!-- Email button -->
 
270
                                <!--<div id="email-button" class="text-btn">
 
271
                                    <span class="ui-icon ui-icon-mail-closed" style="float: left;"></span>
 
272
                                    <span style="line-height: 1.6em">Email</span>
 
273
                                </div>-->
 
274
 
 
275
                                <!-- Movie button -->
 
276
                                <div id="movie-button" class="text-btn">
 
277
                                    <span class="ui-icon ui-icon-video" style="float: left;"></span>
 
278
                                    <span style="line-height: 1.6em">Movie</span>
 
279
                                </div>
 
280
 
 
281
                                <!-- Screenshot button -->
 
282
                                <div id="screenshot-button" class="text-btn">
 
283
                                    <span class="ui-icon ui-icon-image" style="float: left;"></span>
 
284
                                    <span style="line-height: 1.6em">Screenshot</span>
 
285
                                </div>
 
286
                                
 
287
                                <!-- Settings button -->
 
288
                                <div id="settings-button" class="text-btn qtip-left" title="Configure Helioviewer.org user preferences.">
 
289
                                    <span class="ui-icon ui-icon-gear" style="float: left;"></span>
 
290
                                    <span style="line-height: 1.6em">Settings</span>
 
291
                                </div>
 
292
 
 
293
                                <!-- JHelioviewer -->
 
294
                                <!-- 2010/12/28: Disabling until JNLP launching is fixed -->
 
295
                                <!-- <div id="jhelioviewer-button" class="text-btn">
 
296
                                    <span class="ui-icon ui-icon-arrowthickstop-1-s" style="float: left;"></span>
 
297
                                    <span style="line-height: 1.6em">JHelioviewer</span>
 
298
                                </div> -->
 
299
                            </div>
 
300
 
 
301
                            <!-- Fullscreen toggle -->
 
302
                            <div id='fullscreen-btn' class='qtip-left' title="Toggle fullscreen display.">
 
303
                                <span class='ui-icon ui-icon-arrow-4-diag'></span>
 
304
                            </div>
 
305
 
 
306
                            <!-- Mouse coordinates display -->
 
307
                            <div id="mouse-coords" style="display: none;">
 
308
                                <div id="mouse-coords-x"></div>
 
309
                                <div id="mouse-coords-y"></div>
 
310
                            </div>
 
311
                            
 
312
                            <!-- Screenshot Manager -->
 
313
                            <div id='screenshot-manager-container' class='media-manager-container glow'>
 
314
                                <div id='screenshot-manager-build-btns' class='media-manager-build-btns'>
 
315
                                    <div id='screenshot-manager-full-viewport' class='text-btn' title='Create a screenshot using the entire viewport.'>
 
316
                                        <span class='ui-icon ui-icon-arrowthick-2-se-nw' style='float:left;'></span>
 
317
                                        <span style='line-height: 1.6em'>Full Viewport</span>
 
318
                                    </div>
 
319
                                    <div id='screenshot-manager-select-area' class='text-btn qtip-left' style='float:right;' title='Create a screenshot of a sub-region of the viewport.'>
 
320
                                        <span class='ui-icon ui-icon-scissors' style='float:left;'></span>
 
321
                                        <span style='line-height: 1.6em'>Select Area</span> 
 
322
                                    </div>
 
323
                                </div>
 
324
                                <div id='screenshot-history-title' class='media-history-title'>
 
325
                                    Screenshot History    
 
326
                                    <div id='screenshot-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all screenshots from the history.'>
 
327
                                        <span class='ui-icon ui-icon-trash' style='float:left;'></span>
 
328
                                        <span style='font-weight:normal'><i>Clear</i></span>
 
329
                                    </div> 
 
330
                                </div>
 
331
                                <div id='screenshot-history'></div>
 
332
                            </div>
 
333
                            <!-- Movie Manager -->
 
334
                            <div id='movie-manager-container' class='media-manager-container glow'>
 
335
                                <div id='movie-manager-build-btns' class='media-manager-build-btns'>
478
336
                                    <div id='movie-manager-full-viewport' class='text-btn qtip-left' title='Create a movie using the entire viewport.'>
479
 
                                        <span class='fa fa-arrows-alt fa-fw'></span>
 
337
                                        <span class='ui-icon ui-icon-arrowthick-2-se-nw' style='float:left;'></span>
480
338
                                        <span style='line-height: 1.6em'>Full Viewport</span>
481
339
                                    </div>
482
340
                                    <div id='movie-manager-select-area' class='text-btn qtip-left' style='float:right;' title='Create a movie of a sub-region of the viewport.'>
483
 
                                        <span class='fa fa-crop fa-fw'></span>
484
 
                                        <span style='line-height: 1.6em'>Select Area</span>
485
 
                                    </div>
486
 
                                </div>
487
 
                            </div>
488
 
                            <div id='movie-history-title'>
489
 
                                Movie History:
490
 
                                <div id='movie-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all movies from the history.'>
491
 
                                    <span style='font-weight: 200;'>clear history</span>
492
 
                                    <span class='fa fa-trash-o'></span>
493
 
                                </div>
494
 
                            </div>
495
 
                            <div id='movie-history'></div>
496
 
                        </div>
497
 
 
498
 
                        <!-- Movie Settings -->
499
 
                        <div id='movie-settings-container' class='media-manager-container'>
500
 
                            <b>Movie Settings:</b>
501
 
 
502
 
                            <div id='movie-settings-btns' style='float:right;'>
503
 
                                <span id='movie-settings-toggle-help' style='display:inline-block;' class='fa fa-help qtip-left' title='Movie settings help'></span>
504
 
                            </div>
505
 
 
506
 
                            <!-- Begin movie settings -->
507
 
                            <div id='movie-settings-form-container'>
508
 
                            <form id='movie-settings-form'>
509
 
 
510
 
                            <!-- Movie duration -->
511
 
                            <fieldset style='padding: 0px; margin: 5px 0px 8px'>
512
 
                                <label for='movie-duration' style='margin-right: 5px; font-style: italic;'>Duration</label>
513
 
                                <select id='movie-duration' name='movie-duration'>
514
 
                                    <option value='3600'>1 hour</option>
515
 
                                    <option value='10800'>3 hours</option>
516
 
                                    <option value='21600'>6 hours</option>
517
 
                                    <option value='43200'>12 hours</option>
518
 
                                    <option value='86400'>1 day</option>
519
 
                                    <option value='172800'>2 days</option>
520
 
                                    <option value='604800'>1 week</option>
521
 
                                    <option value='2419200'>28 days</option>
522
 
                                </select>
523
 
                            </fieldset>
524
 
 
525
 
                            <!-- Advanced movie settings -->
526
 
                            <div id='movie-settings-advanced'>
527
 
 
528
 
                                <!-- Movie Speed -->
529
 
                                <fieldset id='movie-settings-speed'>
530
 
                                    <legend>Speed</legend>
531
 
                                    <div style='padding:10px;'>
532
 
                                        <input type="radio" name="speed-method" id="speed-method-f" value="framerate" checked="checked" />
533
 
                                        <label for="speed-method-f" style='width: 62px;'>Frames/Sec</label>
534
 
                                        <input id='frame-rate' maxlength='2' size='3' type="text" name="framerate" min="1" max="30" value="15" pattern='^(0?[1-9]|[1-2][0-9]|30)$' />(1-30)<br />
535
 
 
536
 
                                        <input type="radio" name="speed-method" id="speed-method-l" value="length" />
537
 
                                        <label for="speed-method-l" style='width: 62px;'>Length (s)</label>
538
 
                                        <input id='movie-length' maxlength='3' size='3' type="text" name="movie-length" min="5" max="300" value="20" pattern='^(0{0,2}[5-9]|0?[1-9][0-9]|100)$' disabled="disabled" />(5-100)<br />
539
 
                                    </div>
 
341
                                        <span class='ui-icon ui-icon-scissors' style='float:left;'></span>
 
342
                                        <span style='line-height: 1.6em'>Select Area</span> 
 
343
                                    </div>
 
344
                                </div>
 
345
                                <div id='movie-history-title' class='media-history-title'>
 
346
                                    Movie History    
 
347
                                    <div id='movie-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all movies from the history.'>
 
348
                                        <span class='ui-icon ui-icon-trash' style='float:left;'></span>
 
349
                                        <span style='font-weight:normal'><i>Clear</i></span>
 
350
                                    </div> 
 
351
                                </div>
 
352
                                <div id='movie-history'></div>
 
353
                            </div>
 
354
                            
 
355
                            <!-- Movie Settings -->
 
356
                            <div id='movie-settings-container' class='media-manager-container glow'>
 
357
                                <div style='margin-bottom: 10px; border-bottom: 1px solid; padding-bottom: 10px;'>
 
358
                                    <b>Movie Settings:</b>
 
359
                                    
 
360
                                    <div id='movie-settings-btns' style='float:right;'>
 
361
                                        <span id='movie-settings-toggle-advanced' style='display:inline-block;' class='ui-icon ui-icon-gear qtip-left' title='Advanced movie settings'></span>
 
362
                                        <span id='movie-settings-toggle-help' style='display:inline-block;' class='ui-icon ui-icon-help qtip-left' title='Movie settings help'></span>
 
363
                                    </div>
 
364
                                </div>
 
365
 
 
366
                                <!-- Begin movie settings -->
 
367
                                <div id='movie-settings-form-container'>
 
368
                                <form id='movie-settings-form'>
 
369
 
 
370
                                <!-- Movie duration -->
 
371
                                <fieldset style='padding: 0px; margin: 5px 0px 8px'>
 
372
                                    <label for='movie-duration' style='margin-right: 5px; font-style: italic;'>Duration</label>
 
373
                                    <select id='movie-duration' name='movie-duration'>
 
374
                                        <option value='3600'>1 hour</option>
 
375
                                        <option value='10800'>3 hours</option>
 
376
                                        <option value='21600'>6 hours</option>
 
377
                                        <option value='43200'>12 hours</option>
 
378
                                        <option value='86400'>1 day</option>
 
379
                                        <option value='172800'>2 days</option>
 
380
                                        <option value='604800'>1 week</option>
 
381
                                        <option value='2419200'>28 days</option>
 
382
                                    </select>
540
383
                                </fieldset>
541
 
                            </div>
542
 
 
543
 
                            <!-- Movie request submit button -->
544
 
                            <div id='movie-settings-submit'>
545
 
                                <input type="button" id='movie-settings-cancel-btn' value="Cancel" />
546
 
                                <input type="submit" id='movie-settings-submit-btn' value="Ok" />
547
 
                            </div>
548
 
 
549
 
                            </form>
550
 
                            </div>
551
 
 
552
 
                            <!-- Movie settings help -->
553
 
                            <div id='movie-settings-help' style='display:none'>
554
 
                                <b>Duration</b><br /><br />
555
 
                                <p>The duration of time that the movie should span, centered about your current observation time.</p><br />
556
 
 
557
 
                                <b>Speed</b><br /><br />
558
 
                                <p>Movie speed can be controlled either by specifying a desired frame-rate (the number of frames displayed each second) or a length in seconds.</p><br />
559
 
                            </div>
560
 
 
561
 
                            <!-- Movie settings validation console -->
562
 
                            <div id='movie-settings-validation-console' style='display:none; text-align: center; margin: 7px 1px 0px; padding: 0.5em; border: 1px solid #fa5f4d; color: #333; background: #fa8072;' class='ui-corner-all'>
563
 
 
564
 
                            </div>
565
 
                        </div>
566
 
 
567
 
                    </div>
568
 
                </div>
569
 
            </div>
570
 
 
571
 
        </div>
572
 
    </div>
573
 
 
574
 
 
575
 
    <div id="hv-drawer-screenshots" class="hv-drawer-right user-select-none">
576
 
        <div class="drawer-contents">
577
 
 
578
 
            <div id="accordion-screenshots" class="accordion">
579
 
                <div class="header">
580
 
                    <div class="disclosure-triangle closed">►</div>
581
 
                    <h1>Generate a Screenshot</h1>
582
 
                    <div class="right fa fa-question-circle contextual-help" title="Download a custom screenshot matching the state of your Helioviewer session, minus the user-interface."></div>
583
 
                </div>
584
 
                <div class="content">
585
 
 
586
 
                    <!-- Screenshot Manager -->
587
 
                    <div id='screenshot-manager-container' class='media-manager-container'>
588
 
 
589
 
                        <div class="section">
590
 
                            <div id='screenshot-manager-build-btns' class='media-manager-build-btns'>
591
 
                                <div style="width: 70%; margin: 0 auto;">
592
 
                                    <div id='screenshot-manager-full-viewport' class='text-btn' title='Create a screenshot using the entire viewport.'>
593
 
                                        <span class='fa fa-arrows-alt fa-fw'></span>
594
 
                                        <span style='line-height: 1.6em'>Full Viewport</span>
595
 
                                    </div>
596
 
                                    <div id='screenshot-manager-select-area' class='text-btn qtip-left' style='float:right;' title='Create a screenshot of a sub-region of the viewport.'>
597
 
                                        <span class='fa fa-crop fa-fw'></span>
598
 
                                        <span style='line-height: 1.6em'>Select Area</span>
599
 
                                    </div>
600
 
                                </div>
601
 
                            </div>
602
 
 
603
 
                            <div id='screenshot-history-title'>
604
 
                                Screenshot History:
605
 
                                <div id='screenshot-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all screenshots from the history.'>
606
 
                                    <span style='font-weight: 200;'>clear history</span>
607
 
                                    <span class='fa fa-trash-o'></span>
608
 
                                </div>
609
 
                            </div>
610
 
                            <div id='screenshot-history'></div>
611
 
                        </div>
612
 
 
613
 
                    </div>
614
 
 
615
 
                </div>
616
 
            </div>
617
 
 
618
 
        </div>
619
 
    </div>
620
 
 
621
 
 
622
 
    <div id="hv-drawer-data" class="hv-drawer-right user-select-none">
623
 
        <div class="drawer-contents">
624
 
 
625
 
            <div id="accordion-vso" class="accordion">
626
 
                <div class="header">
627
 
                    <div class="disclosure-triangle closed">►</div>
628
 
                    <h1>Virtual Solar Observatory</h1>
629
 
                    <div class="right fa fa-question-circle contextual-help" title="Request science data downloads via the Virtual Solar Observatory (VSO)."></div>
630
 
                </div>
631
 
                <div class="content">
632
 
                    <div class="section">
633
 
                        <h1>Request Viewport Images from VSO</h1>
634
 
                        <div id="vso-links"></div>
635
 
                    </div>
636
 
 
637
 
                    <div class="section">
638
 
                        <h1>Request Image Sequence from VSO</h1>
639
 
                        <div>
640
 
                            <div class="row">
641
 
                                <div class="label inactive">Start Date:</div>
642
 
                                <div class="field">
643
 
                                    <input type="text" id="vso-start-date" name="vso-start-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
644
 
 
645
 
                                    <input id="vso-start-time" name="vso-start-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
646
 
 
647
 
                                    <div class="suffix">UTC</div>
648
 
                                </div>
649
 
                            </div>
650
 
 
651
 
                            <div class="row">
652
 
                                <div class="label inactive">End Date:</div>
653
 
                                <div class="field">
654
 
                                    <input type="text" id="vso-end-date" name="vso-end-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
655
 
 
656
 
                                    <input id="vso-end-time" name="vso-end-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
657
 
 
658
 
                                    <div class="suffix inactive">UTC</div></div>
659
 
                            </div>
660
 
 
661
 
                            <div class="row">
662
 
                                <div id="vso-previews"></div>
663
 
                            </div>
664
 
 
665
 
                            <div class="row">
666
 
                                <div id="vso-buttons"  class="buttons">
667
 
                                    <div id="vso-sunpy" class="text-button fa fa-download inactive" title="Download a Python SunPy script that will request from the Virtual Solar Observatory the data set specified above."> SunPy Script</div>
668
 
                                    <div id="vso-ssw" class="text-button fa fa-download inactive" title="Download an IDL SolarSoft script that will request from the Virtual Solar Observatory the data set specified above."> SSW Script</div>
669
 
                                    <a id="vso-www" class="text-button fa fa-external-link-square inactive" title="Launch a Virtual Solar Observatory web page that will request the data set specified above." target="_blank"> VSO Website</a>
670
 
                                </div>
671
 
                            </div>
672
 
 
673
 
                        </div>
674
 
                    </div>
675
 
                </div>
676
 
            </div>
677
 
 
678
 
            <div id="accordion-sdo" class="accordion">
679
 
                <div class="header">
680
 
                    <div class="disclosure-triangle closed">►</div>
681
 
                    <h1>SDO AIA/HMI Cut-out Service</h1>
682
 
                    <div class="right fa fa-question-circle contextual-help" title="Request AIA or HMI sub-field images."></div>
683
 
                </div>
684
 
                <div class="content">
685
 
                    <div class="section">
686
 
                        <h1>Request Image Sequence from Cut-out Service</h1>
687
 
                        <div>
688
 
                            <div class="row">
689
 
                                <div class="label inactive">Start Date:</div>
690
 
                                <div class="field">
691
 
                                    <input type="text" id="sdo-start-date" name="sdo-start-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
692
 
 
693
 
                                    <input id="sdo-start-time" name="sdo-start-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
694
 
 
695
 
                                    <div class="suffix inactive">UTC</div>
696
 
                                </div>
697
 
                            </div>
698
 
 
699
 
                            <div class="row">
700
 
                                <div class="label inactive">End Date:</div>
701
 
                                <div class="field">
702
 
                                    <input type="text" id="sdo-end-date" name="sdo-end-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
703
 
 
704
 
                                    <input id="sdo-end-time" name="sdo-end-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
705
 
 
706
 
                                    <div class="suffix inactive">UTC</div></div>
707
 
                            </div>
708
 
 
709
 
                            <br />
710
 
 
711
 
 
712
 
                            <div class="row">
713
 
                                <div style="font-size: 1.3em;">
714
 
                                    <div class="media-manager-build-btns buttons" style="width: 70%; margin: 0 auto;">
715
 
                                        <div id='sdo-full-viewport' class='text-btn qtip-left selected inactive' title='Entire viewport.'>
716
 
                                            <span class='fa fa-arrows-alt fa-fw'></span>
717
 
                                            <span style='line-height: 1.6em'>Full Viewport</span>
718
 
                                        </div>
719
 
                                        <div id='sdo-select-area' class='text-btn qtip-left inactive' style='float:right;' title='Sub-field'>
720
 
                                            <span class='fa fa-crop fa-fw'></span>
721
 
                                            <span style='line-height: 1.6em'>Select Area</span>
722
 
                                        </div>
723
 
                                    </div>
724
 
                                </div>
725
 
                            </div>
726
 
 
727
 
 
728
 
                            <div class="row">
729
 
                                <div class="label inactive">Center (x,y):</div>
730
 
                                <div class="field">
731
 
                                    <input type="text" id="sdo-center-x" name="sdo-center-x" value="0" maxlength="6" disabled />
732
 
                                    <input id="sdo-center-y" name="sdo-center-y" value="0" type="text" maxlength="6" disabled />
733
 
                                    <div class="suffix inactive">arcsec</div>
734
 
                                </div>
735
 
                            </div>
736
 
 
737
 
                            <div class="row">
738
 
                                <div class="label inactive">Width:</div>
739
 
                                <div class="field" style="text-align: left;">
740
 
                                    <input type="text" id="sdo-width" name="sdo-width" value="2000" maxlength="6" disabled />
741
 
                                    <div class="suffix inactive">arcsec</div>
742
 
                                </div>
743
 
                            </div>
744
 
 
745
 
                            <div class="row">
746
 
                                <div class="label inactive">Height:</div>
747
 
                                <div class="field">
748
 
                                    <input type="text" id="sdo-height" name="sdo-height" value="2000" maxlength="6" disabled />
749
 
                                    <div class="suffix inactive">arcsec</div>
750
 
                                </div>
751
 
                            </div>
752
 
 
753
 
                            <div class="row">
754
 
                                <div id="sdo-previews"></div>
755
 
                            </div>
756
 
 
757
 
                            <div class="row">
758
 
                                <div id="sdo-buttons" class="buttons">
759
 
                                    <div id="sdo-ssw" class="text-button fa fa-download inactive" title="Download an IDL SolarSoft script that will request from the SDO Cut-out Service the data set specified above."> SSW Script</div>
760
 
                                    <a id="sdo-www" class="text-button fa fa-external-link-square" title="Launch a SDO Cut-out Service web page that will request the data set specified above." target="_blank"> SDO Cut-out Service Website</a>
761
 
                                </div>
762
 
                            </div>
763
 
 
764
 
                        </div>
765
 
                    </div>
766
 
                </div>
767
 
            </div>
768
 
        </div>
769
 
    </div>
770
 
 
771
 
 
772
 
 
773
 
    <div id="hv-drawer-share" class="hv-drawer-right user-select-none">
774
 
        <div class="drawer-contents">
775
 
 
776
 
            <div id="accordion-link" class="accordion">
777
 
                <div class="header">
778
 
                    <div class="disclosure-triangle closed">►</div>
779
 
                    <h1>Share Link to Current Viewport</h1>
780
 
                    <div class="right fa fa-question-circle contextual-help" title="Share Link to Current Viewport"></div>
781
 
                </div>
782
 
                <div class="content">
783
 
                    <div class="section">
784
 
                        <div id="helioviewer-url-box" style="font-size: 1em;">
785
 
                            <span id="helioviewer-url-box-msg"></span>
786
 
                            <form style="margin-top: 5px; text-align: center;">
787
 
                                <input type="text" id="helioviewer-url-input-box" style="width:98%;" value="http://helioviewer.org" />
788
 
                                <label for="helioviewer-url-shorten">Shorten with bit.ly? </label>
789
 
                                <input type="checkbox" id="helioviewer-url-shorten" />
790
 
                                <input type="hidden" id="helioviewer-short-url" value="" />
791
 
                                <input type="hidden" id="helioviewer-long-url" value="" />
792
 
                            </form>
793
 
                        </div>
794
 
 
795
 
                        <br />
796
 
 
797
 
                        <div>
798
 
                            <div style="width: 65%; margin: 0 auto; font-size: 1.5em;">
799
 
                                <div id='share-copy-link' class='text-btn qtip-left' title='...'>
800
 
                                    <span class='fa fa-copy fa-fw'></span>
801
 
                                    <span style='line-height: 1.6em'>Copy Link</span>
802
 
                                </div>
803
 
                                <div id='share-email-link' class='text-btn qtip-left' style='float:right;' title='...'>
804
 
                                    <span class='fa fa-envelope fa-fw'></span>
805
 
                                    <span style='line-height: 1.6em'>Email Link</span>
806
 
                                </div>
807
 
                            </div>
808
 
                        </div>
809
 
 
810
 
                    </div>
811
 
                </div>
812
 
            </div>
813
 
 
814
 
            <div id="accordion-social" class="accordion">
815
 
                <div class="header">
816
 
                    <div class="disclosure-triangle closed">►</div>
817
 
                    <h1>Share to Social Networks</h1>
818
 
                    <div class="right fa fa-question-circle contextual-help" title="Share Link to Current Viewport"></div>
819
 
                </div>
820
 
                <div class="content">
821
 
                    <div class="section">
822
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all">
823
 
 
824
 
                            <div id='twitter' class='social-btns'>
825
 
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
826
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
827
 
                                        <span class='fa fa-twitter-square fa-fw'></span>
828
 
                                        <span style='line-height: 1.6em'>Tweet Screenshot</span>
829
 
                                    </div>
830
 
                                </div>
831
 
                            </div>
832
 
 
833
 
                        </div>
834
 
                    </div>
835
 
                    <div class="section">
836
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all">
837
 
 
838
 
                            <div id='facebook' class='social-btns'>
839
 
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
840
 
                                    <div id='' class='text-btn qtip-left color-facebook' style="width: 100%;" title='...'>
841
 
                                        <span class='fa fa-facebook-square fa-fw'></span>
842
 
                                        <span style='line-height: 1.6em'>Share Screenshot</span>
843
 
                                    </div>
844
 
                                </div>
845
 
                            </div>
846
 
 
847
 
                        </div>
848
 
                    </div>
849
 
                    <div class="section">
850
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all">
851
 
 
852
 
                            <div id='pinterest' class='social-btns'>
853
 
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
854
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
855
 
                                        <span class='fa fa-pinterest-square fa-fw'></span>
856
 
                                        <span style='line-height: 1.6em'>Pin Screenshot</span>
857
 
                                    </div>
858
 
                                </div>
859
 
                            </div>
860
 
 
861
 
 
862
 
                        </div>
863
 
                    </div>
864
 
                </div>
865
 
            </div>
866
 
 
867
 
        </div>
868
 
    </div>
869
 
 
870
 
 
871
 
 
872
 
    <div id="hv-drawer-help" class="hv-drawer-right user-select-none">
873
 
        <div class="drawer-contents">
874
 
 
875
 
            <div id="accordion-help-links" class="accordion">
876
 
                <div class="header">
877
 
                    <div class="disclosure-triangle closed">►</div>
878
 
                    <h1>The Helioviewer Project</h1>
879
 
                    <div class="right fa fa-question-circle contextual-help" title="..."></div>
880
 
                </div>
881
 
                <div class="content">
882
 
                    <div class="section">
883
 
                        <div id="help-links-panel" class="">
884
 
 
885
 
                            <div id='' class='social-btns'>
886
 
                                <div style="width: 90%; margin: 0 auto; font-size: 1.5em;">
887
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
888
 
                                        <span class='fa fa-bookmark-o fa-fw'></span>
889
 
                                        <span style='line-height: 1.6em'>User's Guide</span>
890
 
                                    </div>
891
 
                                </div>
892
 
                            </div>
893
 
 
894
 
                            <div id='' class='social-btns'>
895
 
                                <div style="width: 90%; margin: 0 auto; font-size: 1.5em;">
896
 
                                    <div id='' class='text-btn qtip-left color-facebook' style="width: 100%;" title='...'>
897
 
                                        <span class='fa fa-key fa-fw'></span>
898
 
                                        <span style='line-height: 1.6em'>Visual Glossary</span>
899
 
                                    </div>
900
 
                                </div>
901
 
                            </div>
902
 
 
903
 
                            <div id='' class='social-btns'>
904
 
                                <div style="width: 90%; margin: 0 auto; font-size: 1.5em;">
905
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
906
 
                                        <span class='fa fa-keyboard-o fa-fw'></span>
907
 
                                        <span style='line-height: 1.6em'>Keyboard Shortcuts</span>
908
 
                                    </div>
909
 
                                </div>
910
 
                            </div>
911
 
 
912
 
                            <div id='' class='social-btns'>
913
 
                                <div style="width: 90%; margin: 0 auto; font-size: 1.5em;">
914
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
915
 
                                        <span class='fa fa-book fa-fw'></span>
916
 
                                        <span style='line-height: 1.6em'> Documentation</span>
917
 
                                    </div>
918
 
                                </div>
919
 
                            </div>
920
 
 
921
 
                            <div id='' class='social-btns'>
922
 
                                <div style="width: 90%; margin: 0 auto; font-size: 1.5em;">
923
 
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title='...'>
924
 
                                        <span class='fa fa-code fa-fw'></span>
925
 
                                        <span style='line-height: 1.6em'> Public API Documentation</span>
926
 
                                    </div>
927
 
                                </div>
928
 
                            </div>
929
 
 
930
 
                            <br />
931
 
 
932
 
 
933
 
                        </div>
934
 
                    </div>
935
 
                </div>
936
 
            </div>
937
 
 
938
 
        </div>
939
 
    </div>
940
 
 
941
 
 
942
 
    <!-- Glossary dialog -->
943
 
    <div id='glossary-dialog'></div>
944
 
 
945
 
    <!-- About dialog -->
946
 
    <div id='about-dialog'></div>
947
 
 
948
 
    <!-- Layer choice dialog -->
949
 
    <div id='layer-choice-dialog'></div>
950
 
 
951
 
    <!-- Settings dialog -->
952
 
    <div id='settings-dialog'>
953
 
        <form id='helioviewer-settings'>
954
 
            <!-- Initial observation date -->
955
 
            <fieldset id='helioviewer-settings-date'>
956
 
            <legend>When starting Helioviewer:</legend>
957
 
                <div style='padding: 10px;'>
958
 
                    <input id="settings-date-latest" type="radio" name="date" value="latest" /><label for="settings-date-latest">Display most recent images available</label><br />
959
 
                    <input id="settings-date-previous" type="radio" name="date" value="last-used" /><label for="settings-date-previous">Display images from previous visit</label><br />
960
 
                </div>
961
 
            </fieldset>
962
 
 
963
 
            <br />
964
 
 
965
 
            <!-- Other -->
966
 
            <fieldset id='helioviewer-settings-other'>
967
 
            <legend>While using Helioviewer:</legend>
968
 
            <div style='padding:10px;'>
969
 
                <input type="checkbox" name="latest-image-option" id="settings-latest-image" value="true" />
970
 
                <label for="settings-latest-image">Refresh with the latest data every 5 minutes</label><br />
971
 
            </div>
972
 
            </fieldset>
973
 
        </form>
974
 
    </div>
975
 
 
976
 
    <!-- Usage Dialog -->
977
 
    <div id='usage-dialog'></div>
978
 
 
979
 
    <!-- URL Dialog -->
980
 
    <div id='url-dialog' style="display:none;">
981
 
        <div id="helioviewer-url-box">
982
 
            <span id="helioviewer-url-box-msg"></span>
983
 
            <form style="margin-top: 5px;">
984
 
                <input type="text" id="helioviewer-url-input-box" style="width:98%;" value="http://helioviewer.org" />
985
 
                <label for="helioviewer-url-shorten">Shorten with bit.ly? </label>
986
 
                <input type="checkbox" id="helioviewer-url-shorten" />
987
 
                <input type="hidden" id="helioviewer-short-url" value="" />
988
 
                <input type="hidden" id="helioviewer-long-url" value="" />
989
 
            </form>
990
 
        </div>
991
 
    </div>
992
 
 
993
 
    <!-- Video Upload Dialog -->
994
 
    <div id='upload-dialog' style="display: none">
995
 
        <!-- Loading indicator -->
996
 
        <div id='youtube-auth-loading-indicator' style='display: none;'>
997
 
            <div id='youtube-auth-spinner'></div>
998
 
            <span style='font-size: 28px;'>Processing</span>
999
 
        </div>
1000
 
 
1001
 
        <!-- Upload Form -->
1002
 
        <div id='upload-form'>
1003
 
            <img id='youtube-logo-large' src="resources/images/youtube_79x32.png" alt='YouTube logo' />
1004
 
            <h1>Upload Video</h1>
1005
 
            <br />
1006
 
            <form id="youtube-video-info" action="<?php echo HV_BACK_END; ?>/index.php" method="post">
1007
 
                <!-- Title -->
1008
 
                <label for="youtube-title">Title:</label>
1009
 
                <input id="youtube-title" type="text" name="title" maxlength="100" />
1010
 
                <br />
1011
 
 
1012
 
                <!-- Description -->
1013
 
                <label for="youtube-desc">Description:</label>
1014
 
                <textarea id="youtube-desc" type="text" rows="5" cols="45" name="description" maxlength="5000"></textarea>
1015
 
                <br />
1016
 
 
1017
 
                <!-- Tags -->
1018
 
                <label for="youtube-tags">Tags:</label>
1019
 
                <input id="youtube-tags" type="text" name="tags" maxlength="500" value="" />
1020
 
                <br /><br />
1021
 
 
1022
 
                <!-- Sharing -->
1023
 
                <div style='float: right; margin-right: 30px;'>
1024
 
                <label style='width: 100%; margin: 0px;'>
1025
 
                    <input type="checkbox" name="share" value="true" checked="checked" style='width: 15px; float: right; margin: 2px 2px 0 4px;'/>Share my video with other Helioviewer.org users:
1026
 
                </label>
1027
 
                <br />
1028
 
                <input id='youtube-submit-btn' type="submit" value="Submit" />
1029
 
                </div>
1030
 
 
1031
 
                <!-- Hidden fields -->
1032
 
                <input id="youtube-movie-id" type="hidden" name="id" value="" />
1033
 
            </form>
1034
 
            <div id='upload-error-console-container'><div id='upload-error-console'>...</div></div>
1035
 
        </div>
1036
 
    </div>
1037
 
</div>
1038
 
 
1039
 
 
1040
 
<!-- Viewport -->
1041
 
<div id="helioviewer-viewport-container-outer" class="user-select-none">
1042
 
    <div id="helioviewer-viewport-container-inner">
1043
 
        <div id="helioviewer-viewport">
1044
 
 
1045
 
            <!-- Movement sandbox -->
1046
 
            <div id="sandbox" style="position: absolute;">
1047
 
                <div id="moving-container"></div>
1048
 
            </div>
1049
 
 
1050
 
            <!-- Message console -->
1051
 
            <div id="message-console"></div>
1052
 
 
1053
 
            <!-- Image area select boundary container -->
1054
 
            <div id="image-area-select-container"></div>
1055
 
        </div>
1056
 
    </div>
1057
 
</div>
1058
 
 
1059
 
 
 
384
                                
 
385
                                <!-- Advanced movie settings -->
 
386
                                <div id='movie-settings-advanced'>
 
387
                                    
 
388
                                    <!-- Movie Speed -->
 
389
                                    <fieldset id='movie-settings-speed'>
 
390
                                        <legend>Speed</legend>
 
391
                                        <div style='padding:10px;'>
 
392
                                            <input type="radio" name="speed-method" id="speed-method-f" value="framerate" checked="checked" />
 
393
                                            <label for="speed-method-f" style='width: 62px;'>Frames/Sec</label>
 
394
                                            <input id='frame-rate' maxlength='2' size='3' type="text" name="framerate" min="1" max="30" value="15" pattern='^(0?[1-9]|[1-2][0-9]|30)$' />(1-30)<br />
 
395
                                            
 
396
                                            <input type="radio" name="speed-method" id="speed-method-l" value="length" />
 
397
                                            <label for="speed-method-l" style='width: 62px;'>Length (s)</label>
 
398
                                            <input id='movie-length' maxlength='3' size='3' type="text" name="movie-length" min="5" max="300" value="20" pattern='^(0{0,2}[5-9]|0?[1-9][0-9]|100)$' disabled="disabled" />(5-100)<br />
 
399
                                        </div>
 
400
                                    </fieldset>
 
401
                                </div>
 
402
 
 
403
                                <!-- Movie request submit button -->
 
404
                                <div id='movie-settings-submit'>
 
405
                                    <input type="button" id='movie-settings-cancel-btn' value="Cancel" /> 
 
406
                                    <input type="submit" id='movie-settings-submit-btn' value="Ok" />                                    
 
407
                                </div>
 
408
                                
 
409
                                </form>
 
410
                                </div>
 
411
                                
 
412
                                <!-- Movie settings help -->
 
413
                                <div id='movie-settings-help' style='display:none'>
 
414
                                    <b>Duration</b><br /><br />
 
415
                                    <p>The duration of time that the movie should span, centered about your current observation time.</p><br />
 
416
                                    
 
417
                                    <b>Speed</b><br /><br />
 
418
                                    <p>Movie speed can be controlled either by specifying a desired frame-rate (the number of frames displayed each second) or a length in seconds.</p><br />
 
419
                                </div>
 
420
                                
 
421
                                <!-- Movie settings validation console -->
 
422
                                <div id='movie-settings-validation-console' style='display:none; text-align: center; margin: 7px 1px 0px; padding: 0.5em; border: 1px solid #fa5f4d; color: #333; background: #fa8072;' class='ui-corner-all'>
 
423
                                    
 
424
                                </div>
 
425
                            </div>
 
426
 
 
427
                            <!-- Image area select tool -->
 
428
                            <div id='image-area-select-buttons'>
 
429
                                <div id='done-selecting-image' class='text-btn'>
 
430
                                    <span class='ui-icon ui-icon-circle-check'></span>
 
431
                                    <span>OK</span>
 
432
                                </div> 
 
433
                                <div id='cancel-selecting-image' class='text-btn'> 
 
434
                                    <span class='ui-icon ui-icon-circle-close'></span>
 
435
                                    <span>Cancel</span>
 
436
                                </div>
 
437
                                <div id='help-selecting-image' class='text-btn' style='float:right;'> 
 
438
                                    <span class='ui-icon ui-icon-info'></span>
 
439
                                </div>
 
440
                            </div>
 
441
                        </div>
 
442
 
 
443
 
 
444
                    </div>
 
445
                </div>
 
446
            </div>
 
447
        </div>
 
448
 
 
449
        <!-- Left Column -->
 
450
        <div id="col2">
 
451
            <div id="left-col-header">
 
452
                <a href='<?php echo $this->config['web_root_url'];?>'>
 
453
                    <img src="<?php echo $this->config['main_logo'];?>" id="helioviewer-logo-main" alt="Helioviewer.org Logo">
 
454
                </a>
 
455
            </div>
 
456
            <br><br>
 
457
            <div class="section-header" style="margin-left:5px; margin-top: 15px;">Time</div>
 
458
            <div id="observation-controls" class="ui-widget ui-widget-content ui-corner-all shadow">
 
459
                <!--  Observation Date -->
 
460
                <div id="observation-date-container">
 
461
                    <div id="observation-date-label">Date:</div>
 
462
                    <input type="text" id="date" name="date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength='10'>
 
463
                    <span id="timeNowBtn" title="Go to the time of the most recent available image for the currently loaded layers.">latest</span>
 
464
                </div>
 
465
 
 
466
                <!-- Observation Time -->
 
467
                <div id="observation-time-container">
 
468
                    <div id="observation-time-label">Time:</div>
 
469
                    <input id="time" name="time" value="" style="width:80px" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}">
 
470
                    <span style='font-size: 11px; font-weight: 700; margin-left: 2px;'>UTC</span>
 
471
                </div>
 
472
 
 
473
                <!-- Time Navigation Buttons & Time Increment selector -->
 
474
                <div>
 
475
                    <div id="time-navigation-buttons">Time-step:</div>
 
476
                    <select id="timestep-select" name="time-step"></select>
 
477
                    <span id="timeBackBtn" class="ui-icon ui-icon-circle-arrow-w" title="Move the Observation Date/Time backward one time-step"></span>
 
478
                    <span id="timeForwardBtn" class="ui-icon ui-icon-circle-arrow-e" title="Move the Observation Date/Time forward one time-step"></span>
 
479
                </div>
 
480
            </div>
 
481
 
 
482
            <br><br>
 
483
            <div id="tileLayerAccordion"></div>
 
484
            <br><br>
 
485
 
 
486
        </div>
 
487
 
 
488
        <!-- Right Column -->
 
489
        <div id="col3">
 
490
            <div id="right-col-header" style='height: 11px'></div>
 
491
            
 
492
            <!-- Recent Blog Entries -->
 
493
            <div style="margin-left: 5px; margin-top: 15px;" class="section-header">News</div>
 
494
            <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all shadow"></div>
 
495
            
 
496
            <!-- User-Submitted Videos -->
 
497
            <div id="user-video-gallery-header" class="section-header">
 
498
                <a href="http://www.youtube.com/user/HelioviewerScience" target="_blank" style='text-decoration: none;'>
 
499
                    <img id='youtube-logo' src='resources/images/Social.me/48 by 48 pixels/youtube.png' alt='YouTube Logo' />
 
500
                </a>
 
501
                <span style='position: absolute; bottom: 5px;'>Recently Shared</span>
 
502
            </div>
 
503
            <div id="user-video-gallery" class="ui-widget ui-widget-content ui-corner-all shadow">
 
504
                <a id="user-video-gallery-next" class="qtip-left" href="#" title="Go to next page.">
 
505
                    <div class='ui-icon ui-icon-triangle-1-n'></div>
 
506
                </a>
 
507
                <div id="user-video-gallery-main">
 
508
                    <div id="user-video-gallery-spinner"></div>
 
509
                </div>
 
510
                <a id="user-video-gallery-prev" class="qtip-left" href="#" title="Go to previous page.">
 
511
                    <div class='ui-icon ui-icon-triangle-1-s'></div>
 
512
                </a>
 
513
            </div>
 
514
        </div>
 
515
        </div>
 
516
    </div>
 
517
</div>
 
518
<!-- end Body -->
 
519
 
 
520
<!-- Footer -->
 
521
<div id="footer">
 
522
    <div id="footer-container-outer">
 
523
        <div id="footer-container-inner">
 
524
            <!-- Meta links -->
 
525
            <div id="footer-links">
 
526
                <a href="http://helioviewer.org/wiki/Helioviewer.org_User_Guide" class="light" target="_blank">Help</a>
 
527
                <a id="helioviewer-glossary" class="light" href="dialogs/glossary.html">Glossary</a>
 
528
                <a id="helioviewer-about" class="light" href="dialogs/about.php">About</a>
 
529
                <a id="helioviewer-usage" class="light" href="dialogs/usage.php">Usage Tips</a>
 
530
                <a href="http://wiki.helioviewer.org/wiki/Main_Page" class="light" target="_blank">Wiki</a>
 
531
                <a href="http://community.helioviewer.org/" class="light" target="_blank">Community</a>
 
532
                <a href="http://blog.helioviewer.org/" class="light" target="_blank">Blog</a>
 
533
                <a href="http://jhelioviewer.org" class="light" target="_blank">JHelioviewer</a>
 
534
                <a href="api/" class="light" target="_blank">API</a>
 
535
                <a href="mailto:<?php echo $this->config['contact_email']; ?>" class="light">Contact</a>
 
536
                <a href="https://bugs.launchpad.net/helioviewer.org/" class="light" style="margin-right:2px;" target="_blank">Report Problem</a>
 
537
            </div>
 
538
        </div>
 
539
    </div>
 
540
</div>
 
541
<!-- end Footer -->
 
542
 
 
543
<!-- Loading Indicator -->
 
544
<div id="loading" style="display: none">
 
545
    <span style='vertical-align: top; margin-right: 3px;'>Loading</span>
 
546
    <img src="resources/images/ajax-loader.gif" alt="Loading" />
 
547
</div>
 
548
 
 
549
<!-- Viewport shadow -->
 
550
<div id='helioviewer-viewport-container-shadow' class='shadow'></div>
 
551
 
 
552
<!-- Glossary dialog -->
 
553
<div id='glossary-dialog'></div>
 
554
 
 
555
<!-- About dialog -->
 
556
<div id='about-dialog'></div>
 
557
 
 
558
<!-- Layer choice dialog -->
 
559
<div id='layer-choice-dialog'></div>
 
560
 
 
561
<!-- Settings dialog -->
 
562
<div id='settings-dialog'>
 
563
    <form id='helioviewer-settings'>
 
564
        <!-- Initial observation date -->
 
565
        <fieldset id='helioviewer-settings-date'>
 
566
        <legend>When starting Helioviewer.org:</legend>
 
567
            <div style='padding: 10px;'>
 
568
                <input id='settings-date-latest' type="radio" name="date" value="latest" /><label>Display most recent images available</label><br />
 
569
                <input id='settings-date-previous' type="radio" name="date" value="last-used" /><label>Display images from previous visit</label><br />
 
570
            </div>
 
571
        </fieldset>
 
572
        
 
573
        <!-- Other -->
 
574
        <fieldset id='helioviewer-settings-other'>
 
575
        <legend>When using Helioviewer.org:</legend>
 
576
        <div style='padding:10px;'>
 
577
            <input type="checkbox" name="latest-image-option" id="settings-latest-image" value="true" />
 
578
            <label for="latest-image-option">Update viewport every 5 minutes</label><br />                                           
 
579
        </div>
 
580
        </fieldset>
 
581
    </form>
 
582
</div>
 
583
 
 
584
<!-- Usage Dialog -->
 
585
<div id='usage-dialog'></div>
 
586
 
 
587
<!-- URL Dialog -->
 
588
<div id='url-dialog' style="display:none;">
 
589
    <div id="helioviewer-url-box">
 
590
        <span id="helioviewer-url-box-msg">Use the following link to refer to current page:</span>
 
591
        <form style="margin-top: 5px;">
 
592
            <input type="text" id="helioviewer-url-input-box" style="width:98%;" value="http://helioviewer.org" />
 
593
            <label for="helioviewer-url-shorten">Shorten with bit.ly?</label>
 
594
            <input type="checkbox" id="helioviewer-url-shorten" />
 
595
            <input type="hidden" id="helioviewer-short-url" value="" />
 
596
            <input type="hidden" id="helioviewer-long-url" value="" />
 
597
        </form>
 
598
    </div>
 
599
</div>
 
600
 
 
601
<!-- BBCode -->
 
602
<!-- URL Dialog -->
 
603
<div id='bbcode-dialog' style="display:none;">
 
604
    <div id="helioviewer-bbcode-box">
 
605
        <span id="helioviewer-bbcode-box-msg">Use the following code snippet to embed this movie in the <a href='http://community.helioviewer.org'>Helioviewer Community Forums:</a></span>
 
606
        <form style="margin-top: 5px;">
 
607
            <input type="text" id="helioviewer-bbcode-input-box" style="width:98%;" value="" />
 
608
        </form>
 
609
    </div>
 
610
</div>
 
611
 
 
612
<!-- Video Upload Dialog -->
 
613
<div id='upload-dialog' style="display: none">
 
614
    <!-- Loading indicator -->
 
615
    <div id='youtube-auth-loading-indicator' style='display: none;'>
 
616
        <div id='youtube-auth-spinner'></div>
 
617
        <span style='font-size: 28px;'>Processing</span>
 
618
    </div>
 
619
    
 
620
    <!-- Upload Form -->
 
621
    <div id='upload-form'>
 
622
        <img id='youtube-logo-large' src='resources/images/Social.me/60 by 60 pixels/youtube.png' alt='YouTube logo' />
 
623
        <h1>Upload Video</h1>
 
624
        <br />
 
625
        <form id="youtube-video-info" action="api/index.php" method="post">
 
626
            <!-- Title -->
 
627
            <label for="youtube-title">Title:</label>
 
628
            <input id="youtube-title" type="text" name="title" maxlength="100" />
 
629
            <br />
 
630
            
 
631
            <!-- Description -->
 
632
            <label for="youtube-desc">Description:</label>
 
633
            <textarea id="youtube-desc" type="text" rows="5" cols="45" name="description" maxlength="5000"></textarea>
 
634
            <br />
 
635
            
 
636
            <!-- Tags -->
 
637
            <label for="youtube-tags">Tags:</label>
 
638
            <input id="youtube-tags" type="text" name="tags" maxlength="500" value="" />
 
639
            <br /><br />
 
640
            
 
641
            <!-- Sharing -->
 
642
            <div style='float: right; margin-right: 30px;'>
 
643
            <label style='width: 100%; margin: 0px;'>
 
644
                <input type="checkbox" name="share" value="true" checked="checked" style='width: 15px; float: right; margin: 2px 2px 0 4px;'/>Share my video with other Helioviewer.org users:
 
645
            </label>
 
646
            <br />
 
647
            <input id='youtube-submit-btn' type="submit" value="Submit" />
 
648
            </div>
 
649
            
 
650
            <!-- Hidden fields -->
 
651
            <input id="youtube-movie-id" type="hidden" name="id" value="" />
 
652
        </form>
 
653
        <div id='upload-error-console-container'><div id='upload-error-console'>...</div></div>
 
654
    </div>
 
655
</div>
1060
656
<?php
1061
657
    parent::printBody($signature);
1062
658
    }
1063
 
 
 
659
    
1064
660
    /**
1065
661
     * Prints the end of the script block
1066
662
     */
1069
665
?>
1070
666
    // Initialize Helioviewer.org
1071
667
    helioviewer = new HelioviewerWebClient(urlSettings, serverSettings, zoomLevels);
1072
 
 
 
668
    
1073
669
    // Play movie if id is specified
1074
670
    if (urlSettings.movieId) {
1075
671
        helioviewer.loadMovie(urlSettings.movieId);
1077
673
    });
1078
674
<?php
1079
675
    }
1080
 
}
1081
 
?>
 
 
b'\\ No newline at end of file'
 
676
}
 
 
b'\\ No newline at end of file'