← 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: 2011-05-26 19:27:36 UTC
  • mto: This revision was merged to the branch mainline in revision 567.
  • Revision ID: keith.hughitt@nasa.gov-20110526192736-qyr0ltaiak33loik
Updated release notes and sample configuration file.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/php/HelioviewerWebClient.php
1
 
<?php
2
 
/**
3
 
 * HelioviewerWebClient class definition
4
 
 *
5
 
 * Helioviewer.org HTML web client
6
 
 *
7
 
 * PHP version 5
8
 
 *
9
 
 * @category Application
10
 
 * @package  Helioviewer
11
 
 * @author   Jeff Stys <jeff.stys@nasa.gov>
12
 
 * @author   Keith Hughitt <keith.hughitt@nasa.gov>
13
 
 * @license  http://www.mozilla.org/MPL/MPL-1.1.html Mozilla Public License 1.1
14
 
 * @link     http://launchpad.net/helioviewer.org
15
 
 */
16
 
require_once "HelioviewerClient.php";
17
 
/**
18
 
 * HelioviewerWebClient class definition
19
 
 *
20
 
 * Helioviewer.org HTML web client
21
 
 *
22
 
 * PHP version 5
23
 
 *
24
 
 * @category Application
25
 
 * @package  Helioviewer
26
 
 * @author   Jeff Stys <jeff.stys@nasa.gov>
27
 
 * @author   Keith Hughitt <keith.hughitt@nasa.gov>
28
 
 * @license  http://www.mozilla.org/MPL/MPL-1.1.html Mozilla Public License 1.1
29
 
 * @link     http://launchpad.net/helioviewer.org
30
 
 */
31
 
class HelioviewerWebClient extends HelioviewerClient {
32
 
    /**
33
 
     * Initializes a Helioviewer.org instance
34
 
     */
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
 
 
43
 
        parent::__construct($urlSettings);
44
 
    }
45
 
 
46
 
    /**
47
 
     * Loads library CSS
48
 
     */
49
 
    protected function loadCSS() {
50
 
        parent::loadCSS();
51
 
?>
52
 
    <link rel="stylesheet" href="lib/jquery.jgrowl/jquery.jgrowl.css" />
53
 
    <link rel="stylesheet" href="lib/jquery.qTip2/jquery.qtip.min.css" />
54
 
    <link rel="stylesheet" href="lib/jquery.imgareaselect-0.9.8/css/imgareaselect-default.css" />
55
 
 
56
 
    <!-- jQuery UI Theme Modifications -->
57
 
    <link rel="stylesheet" href="resources/css/dot-luv.css">
58
 
 
59
 
<?php
60
 
    }
61
 
 
62
 
    /**
63
 
     * Loads Helioviewer-specific CSS
64
 
     */
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");
69
 
        parent::loadCustomCSS($signature, $css);
70
 
    }
71
 
 
72
 
    /**
73
 
     * Loads JavaScript
74
 
     */
75
 
    protected function loadJS() {
76
 
        parent::loadJS();
77
 
 
78
 
        if ($this->config["compress_js"]) {
79
 
    ?>
80
 
<script src="lib/jquery.jgrowl/jquery.jgrowl_minimized.js" type="text/javascript"></script>
81
 
<script src="lib/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
82
 
<script src="lib/jquery.jfeed/build/jquery.jfeed.js" type="text/javascript"></script>
83
 
<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
86
 
        } else {
87
 
    ?>
88
 
<script src="lib/jquery.jgrowl/jquery.jgrowl.js" type="text/javascript"></script>
89
 
<script src="lib/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
90
 
<script src="lib/jquery.jfeed/build/jquery.jfeed.js" type="text/javascript"></script>
91
 
<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
 
<?php
94
 
        }
95
 
    }
96
 
 
97
 
    /**
98
 
     * Loads Helioviewer-specific JavaScript
99
 
     */
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');
112
 
        parent::loadCustomJS($signature, $js);
113
 
    }
114
 
 
115
 
    /**
116
 
     * Adds OpenGraph metatags corresponding to data loaded
117
 
     *
118
 
     * When a custom Helioviewer.org was used to load the page, customize
119
 
     * metatags
120
 
     * to reflect the data loaded. This improves experience when sharing links
121
 
     * on Facebook, etc.
122
 
     */
123
 
    protected function addOpenGraphTags() {
124
 
 
125
 
        if ( isset($this->urlSettings['movieId']) &&
126
 
             preg_match('/^[a-zA-Z0-9]+$/', $this->urlSettings["movieId"]) ) {
127
 
 
128
 
            try {
129
 
                $this->_addOpenGraphTagsForMovie(
130
 
                    $this->urlSettings['movieId'] );
131
 
                return;
132
 
            }
133
 
            catch (Exception $e) {
134
 
                unset($this->urlSettings['movieId']);
135
 
            }
136
 
        }
137
 
 
138
 
        if ( sizeOf($this->urlSettings) >= 7 ) {
139
 
            $this->_addOpenGraphForSharedURL();
140
 
        }
141
 
        else {
142
 
            parent::addOpenGraphTags();
143
 
        }
144
 
    }
145
 
 
146
 
    /**
147
 
     * Adds OpenGraph metatags for a shared movie link
148
 
     */
149
 
    private function _addOpenGraphTagsForMovie($id) {
150
 
 
151
 
        // Forward remote requests
152
 
        if ( HV_BACK_END !== 'api/index.php' ) {
153
 
            $params = array(
154
 
                'action' => 'getMovieStatus',
155
 
                'format' => 'mp4',
156
 
                'id'     => $id
157
 
            );
158
 
 
159
 
            include_once 'src/php/Net/Proxy.php';
160
 
 
161
 
            $proxy = new Net_Proxy(HV_BACK_END.'?');
162
 
            $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 {
170
 
            // Otherwise process locally
171
 
            include_once 'src/php/Movie/HelioviewerMovie.php';
172
 
 
173
 
            $movie = new Movie_HelioviewerMovie($id, 'mp4');
174
 
            $info = array(
175
 
                'title'      => $movie->getTitle(),
176
 
                'thumbnails' => $movie->getPreviewImages(),
177
 
                'width'      => $movie->width,
178
 
                'height'     => $movie->height
179
 
            );
180
 
 
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'}}");
186
 
        }
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'];?>" />
190
 
        <meta property="og:video" content="<?php echo $swfURL;?>" />
191
 
        <meta property="og:video:width" content="<?php echo $info['width'];?>" />
192
 
        <meta property="og:video:height" content="<?php echo $info['height'];?>" />
193
 
        <meta property="og:video:type" content="application/x-shockwave-flash" />
194
 
<?php
195
 
    }
196
 
 
197
 
    /**
198
 
     * Adds OpenGraph metatags for a shared URL
199
 
     */
200
 
    private function _addOpenGraphForSharedURL() {
201
 
 
202
 
        // 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
 
 
207
 
        $layers = new Helper_HelioviewerLayers($_GET['imageLayers']);
208
 
 
209
 
        $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
219
 
        );
220
 
 
221
 
        $ogImage = HV_BACK_END.'?'.http_build_query($screenshotParams);
222
 
        $ogDescription = $layers->toHumanReadableString().' ('
223
 
                       . toReadableISOString($this->urlSettings['date'])
224
 
                       . ' UTC)';
225
 
        ?>
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;?>" />
228
 
        <?php
229
 
    }
230
 
 
231
 
    /**
232
 
     * Prints beginning of HTML body section
233
 
     */
234
 
    protected function printBody($signature) {
235
 
?>
236
 
 
237
 
 
238
 
 
239
 
<div style="width: 100%; margin: 0; padding: 0; text-align: center;">
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="helioviewer-header">
261
 
 
262
 
        <div class="logo">
263
 
            <h1>
264
 
                <a class="fa fa-sun-o fa-fw" href="" title="The Open-Source Solar and Heliospheric Data Browser"></a>
265
 
                <a href="" title="The Open-Source Solar and Heliospheric Data Browser">Helioviewer.org</a>
266
 
            </h1>
267
 
        </div>
268
 
 
269
 
        <div id="loading">
270
 
            <span>Loading Data</span>
271
 
            <span class="fa fa-circle-o-notch fa-spin"></span>
272
 
        </div>
273
 
 
274
 
        <div class="menus">
275
 
 
276
 
            <div class="left">
277
 
                <div id="link-button" class="fa fa-share-square fa-fw qtip-bottomleft social-button" title="Copy Link to the Current View."></div>
278
 
 
279
 
                <a id="twitter-button" class="fa fa-twitter-square fa-fw qtip-bottomleft social-button" title="Tweet Short Link to the Current View." href="https://twitter.com/share" data-counturl="<?php echo HV_WEB_ROOT_URL; ?>" data-via="Helioviewer" target="hv_twitter"></a>
280
 
 
281
 
                <a id="facebook-button" class="fa fa-facebook-square fa-fw qtip-bottomleft social-button" href="https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&display=popup&ref=plugin" target="hv_facebook"></a>
282
 
 
283
 
                <a id="pinterest-button" class="fa fa-pinterest-square fa-fw qtip-bottomleft social-button" title="Pin Image of Current View to Pinterest." url="<?php echo HV_WEB_ROOT_URL; ?>" data-image="http://helioviewer.org/resources/images/logos/simple.png" data-desc="Custom Helioviewer description..." target="hv_pinterest"></a>
284
 
 
285
 
                <a id="youtube-button" class="fa fa-youtube-square fa-fw qtip-bottomleft social-button" href="http://www.youtube.com/user/HelioviewerScience" target="_blank" title="Visit the HelioviewerScience YouTube Channel." target="hv_youtube"></a>
286
 
            </div>
287
 
 
288
 
            <div class="right" style="margin-right: 0.5em;">
289
 
                <div class="fa fa-question fa-fw qtip-bottomleft" href="" style="margin-left: 0.5em;" title="Get Help with Helioviewer."></div>
290
 
                <div id="settings-button" class="fa fa-cog fa-fw qtip-bottomleft" title="Edit Settings &amp; Defaults."></div>
291
 
            </div>
292
 
 
293
 
        </div>
294
 
 
295
 
    </div>
296
 
 
297
 
 
298
 
    <div id="helioviewer-drawer-left">
299
 
 
300
 
        <div class="drawer-tab drawer-tab-left">Data Sources</div>
301
 
 
302
 
        <div id="drawer-viewport-controls-left">
303
 
 
304
 
            <!--  Zoom Controls -->
305
 
            <div id="zoomControls">
306
 
                <div id="zoomControlZoomIn" title="Zoom in.">+</div>
307
 
                <div id="zoomSliderContainer">
308
 
                    <div id="zoomControlSlider"></div>
309
 
                </div>
310
 
                <div id="zoomControlZoomOut" title="Zoom out.">-</div>
311
 
            </div>
312
 
 
313
 
            <!-- Center button -->
314
 
            <div id="center-button" title="Center the image on the screen.">
315
 
               <span>center</span>
316
 
            </div>
317
 
 
318
 
        </div>
319
 
 
320
 
        <div class="drawer-contents">
321
 
            <div class="top-shadow"></div>
322
 
 
323
 
            <div id="accordion-date" class="accordion">
324
 
 
325
 
                <div class="header">
326
 
 
327
 
                    <div class="disclosure-triangle closed">►</div>
328
 
                    <h1>Observation Date</h1>
329
 
                    <div class="right fa fa-question-circle contextual-help" title="
330
 
Changing the 'Observation Date' will update the Viewport with data matching the new date and time.<br /><br />
331
 
 
332
 
Use the 'Jump' controls to browse forward and backward in time by a regular interval.<br /><br />
333
 
 
334
 
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 />
335
 
                    ">
336
 
                    </div>
337
 
                </div>
338
 
 
339
 
                <div class="content">
340
 
                    <div class="section">
341
 
                        <div id="observation-controls" class="row">
342
 
                            <div class="label">Date:</div>
343
 
                            <div class="field">
344
 
                                <input type="text" id="date" name="date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker"/>
345
 
 
346
 
                                <input id="time" name="time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}"/>
347
 
 
348
 
                                <div class="suffix">UTC</div>
349
 
 
350
 
                                <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).">
351
 
                                    <span class="ui-icon-label">NEWEST</span>
352
 
                                </div>
353
 
                            </div>
354
 
                        </div>
355
 
                        <div class="row">
356
 
                            <div class="label">Jump:</div>
357
 
                            <div class="field">
358
 
 
359
 
                                <select id="timestep-select" name="time-step"></select>
360
 
 
361
 
                                <div id="timeBackBtn" class="inline fa fa-arrow-circle-left" style="font-size: 1.5em;" title="Jump Backward in Time."></div>
362
 
                                <div id="timeForwardBtn" class="inline fa fa-arrow-circle-right" style="font-size: 1.5em;" title="Jump Forward in Time."></div>
363
 
                            </div>
364
 
                        </div>
365
 
                    </div>
366
 
                </div>
367
 
 
368
 
            </div>
369
 
 
370
 
            <div id="accordion-images" class="accordion">
371
 
                <div class="header">
372
 
                    <div class="disclosure-triangle closed">►</div>
373
 
                    <h1>Image Data Layers</h1>
374
 
                    <div class="right fa fa-question-circle contextual-help" title="Up to five (5) independent image layers may be viewed simultaneously."></div>
375
 
                    <div class="accordion-header">
376
 
                        <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>
377
 
                    </div>
378
 
                </div>
379
 
                <div class="content">
380
 
                    <div id="tileLayerAccordion">
381
 
                        <div id="TileLayerAccordion-Container"></div>
382
 
                    </div>
383
 
                </div>
384
 
            </div>
385
 
 
386
 
            <div id="accordion-events" class="accordion">
387
 
                <div class="header">
388
 
                    <div class="disclosure-triangle closed">►</div>
389
 
                    <h1>Feature &amp; Event Annotations</h1>
390
 
                    <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>
391
 
                </div>
392
 
                <div class="content">
393
 
                    <div id="eventLayerAccordion">
394
 
                        <div id="EventLayerAccordion-Container"></div>
395
 
                    </div>
396
 
                </div>
397
 
            </div>
398
 
 
399
 
        </div>
400
 
    </div>
401
 
 
402
 
 
403
 
    <div id="helioviewer-drawer-right">
404
 
        <div class="drawer-tab drawer-tab-right">Data Export</div>
405
 
 
406
 
        <div id="drawer-viewport-controls-right">
407
 
 
408
 
            <!-- Message console -->
409
 
            <div id="message-console"></div>
410
 
 
411
 
            <!-- Mouse coordinates display -->
412
 
            <div id="mouse-coords" style="display: none;">
413
 
                <div id="mouse-coords-x"></div>
414
 
                <div id="mouse-coords-y"></div>
415
 
            </div>
416
 
        </div>
417
 
 
418
 
        <div class="drawer-contents">
419
 
            <div class="top-shadow"></div>
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
 
                        <!-- Recent Blog Entries -->
430
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all shadow"></div>
431
 
                    </div>
432
 
                </div>
433
 
            </div>
434
 
 
435
 
            <div id="accordion-youtube" class="accordion">
436
 
                <div class="header">
437
 
                    <div class="disclosure-triangle closed">►</div>
438
 
                    <h1>Movies Shared to YouTube</h1>
439
 
                    <div class="right fa fa-question-circle contextual-help" title="View YouTube movies generated by users of Helioviewer."></div>
440
 
                </div>
441
 
                <div class="content">
442
 
                    <div class="section">
443
 
                        <!-- User-Submitted Videos -->
444
 
                        <div id="user-video-gallery" class="ui-widget ui-widget-content ui-corner-all shadow">
445
 
                            <a id="user-video-gallery-next" class="qtip-left" href="#" title="Go to next page.">
446
 
                                <div class='fa fa-triangle-1-n'></div>
447
 
                            </a>
448
 
                            <div id="user-video-gallery-main">
449
 
                                <div id="user-video-gallery-spinner"></div>
450
 
                            </div>
451
 
                            <a id="user-video-gallery-prev" class="qtip-left" href="#" title="Go to previous page.">
452
 
                                <div class='fa fa-triangle-1-s'></div>
453
 
                            </a>
454
 
                        </div>
455
 
                    </div>
456
 
                </div>
457
 
            </div>
458
 
 
459
 
            <div id="accordion-movie" class="accordion">
460
 
                <div class="header">
461
 
                    <div class="disclosure-triangle closed">►</div>
462
 
                    <h1>Generate a Movie</h1>
463
 
                    <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>
464
 
                </div>
465
 
                <div class="content">
466
 
                    <div class="section">
467
 
 
468
 
                        <!-- Movie Manager -->
469
 
                        <div id='movie-manager-container' class='media-manager-container'>
470
 
                            <div id='movie-manager-build-btns' class='media-manager-build-btns'>
471
 
                                <div style="width: 70%; margin: 0 auto;">
472
 
                                    <div id='movie-manager-full-viewport' class='text-btn qtip-left' title='Create a movie using the entire viewport.'>
473
 
                                        <span class='fa fa-arrows-alt fa-fw'></span>
474
 
                                        <span style='line-height: 1.6em'>Full Viewport</span>
475
 
                                    </div>
476
 
                                    <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.'>
477
 
                                        <span class='fa fa-crop fa-fw'></span>
478
 
                                        <span style='line-height: 1.6em'>Select Area</span>
479
 
                                    </div>
480
 
                                </div>
481
 
                            </div>
482
 
                            <div id='movie-history-title'>
483
 
                                Movie History:
484
 
                                <div id='movie-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all movies from the history.'>
485
 
                                    <span style='font-weight: 200;'>clear history</span>
486
 
                                    <span class='fa fa-trash-o'></span>
487
 
                                </div>
488
 
                            </div>
489
 
                            <div id='movie-history'></div>
490
 
                        </div>
491
 
 
492
 
                        <!-- Movie Settings -->
493
 
                        <div id='movie-settings-container' class='media-manager-container'>
494
 
                            <b>Movie Settings:</b>
495
 
 
496
 
                            <div id='movie-settings-btns' style='float:right;'>
497
 
                                <span id='movie-settings-toggle-help' style='display:inline-block;' class='fa fa-help qtip-left' title='Movie settings help'></span>
498
 
                            </div>
499
 
 
500
 
                            <!-- Begin movie settings -->
501
 
                            <div id='movie-settings-form-container'>
502
 
                            <form id='movie-settings-form'>
503
 
 
504
 
                            <!-- Movie duration -->
505
 
                            <fieldset style='padding: 0px; margin: 5px 0px 8px'>
506
 
                                <label for='movie-duration' style='margin-right: 5px; font-style: italic;'>Duration</label>
507
 
                                <select id='movie-duration' name='movie-duration'>
508
 
                                    <option value='3600'>1 hour</option>
509
 
                                    <option value='10800'>3 hours</option>
510
 
                                    <option value='21600'>6 hours</option>
511
 
                                    <option value='43200'>12 hours</option>
512
 
                                    <option value='86400'>1 day</option>
513
 
                                    <option value='172800'>2 days</option>
514
 
                                    <option value='604800'>1 week</option>
515
 
                                    <option value='2419200'>28 days</option>
516
 
                                </select>
517
 
                            </fieldset>
518
 
 
519
 
                            <!-- Advanced movie settings -->
520
 
                            <div id='movie-settings-advanced'>
521
 
 
522
 
                                <!-- Movie Speed -->
523
 
                                <fieldset id='movie-settings-speed'>
524
 
                                    <legend>Speed</legend>
525
 
                                    <div style='padding:10px;'>
526
 
                                        <input type="radio" name="speed-method" id="speed-method-f" value="framerate" checked="checked" />
527
 
                                        <label for="speed-method-f" style='width: 62px;'>Frames/Sec</label>
528
 
                                        <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 />
529
 
 
530
 
                                        <input type="radio" name="speed-method" id="speed-method-l" value="length" />
531
 
                                        <label for="speed-method-l" style='width: 62px;'>Length (s)</label>
532
 
                                        <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 />
533
 
                                    </div>
534
 
                                </fieldset>
535
 
                            </div>
536
 
 
537
 
                            <!-- Movie request submit button -->
538
 
                            <div id='movie-settings-submit'>
539
 
                                <input type="button" id='movie-settings-cancel-btn' value="Cancel" />
540
 
                                <input type="submit" id='movie-settings-submit-btn' value="Ok" />
541
 
                            </div>
542
 
 
543
 
                            </form>
544
 
                            </div>
545
 
 
546
 
                            <!-- Movie settings help -->
547
 
                            <div id='movie-settings-help' style='display:none'>
548
 
                                <b>Duration</b><br /><br />
549
 
                                <p>The duration of time that the movie should span, centered about your current observation time.</p><br />
550
 
 
551
 
                                <b>Speed</b><br /><br />
552
 
                                <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 />
553
 
                            </div>
554
 
 
555
 
                            <!-- Movie settings validation console -->
556
 
                            <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'>
557
 
 
558
 
                            </div>
559
 
                        </div>
560
 
 
561
 
                    </div>
562
 
                </div>
563
 
            </div>
564
 
 
565
 
            <div id="accordion-screenshot" class="accordion">
566
 
                <div class="header">
567
 
                    <div class="disclosure-triangle closed">►</div>
568
 
                    <h1>Generate a Screenshot</h1>
569
 
                    <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>
570
 
                </div>
571
 
                <div class="content">
572
 
 
573
 
                    <!-- Screenshot Manager -->
574
 
                    <div id='screenshot-manager-container' class='media-manager-container'>
575
 
 
576
 
                        <div class="section">
577
 
                            <div id='screenshot-manager-build-btns' class='media-manager-build-btns'>
578
 
                                <div style="width: 70%; margin: 0 auto;">
579
 
                                    <div id='screenshot-manager-full-viewport' class='text-btn' title='Create a screenshot using the entire viewport.'>
580
 
                                        <span class='fa fa-arrows-alt fa-fw'></span>
581
 
                                        <span style='line-height: 1.6em'>Full Viewport</span>
582
 
                                    </div>
583
 
                                    <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.'>
584
 
                                        <span class='fa fa-crop fa-fw'></span>
585
 
                                        <span style='line-height: 1.6em'>Select Area</span>
586
 
                                    </div>
587
 
                                </div>
588
 
                            </div>
589
 
 
590
 
                            <div id='screenshot-history-title'>
591
 
                                Screenshot History:
592
 
                                <div id='screenshot-clear-history-button' class='text-btn qtip-left' style='float:right;' title='Remove all screenshots from the history.'>
593
 
                                    <span style='font-weight: 200;'>clear history</span>
594
 
                                    <span class='fa fa-trash-o'></span>
595
 
                                </div>
596
 
                            </div>
597
 
                            <div id='screenshot-history'></div>
598
 
                        </div>
599
 
 
600
 
                    </div>
601
 
 
602
 
                </div>
603
 
            </div>
604
 
 
605
 
            <div id="accordion-vso" class="accordion">
606
 
                <div class="header">
607
 
                    <div class="disclosure-triangle closed">►</div>
608
 
                    <h1>Virtual Solar Observatory</h1>
609
 
                    <div class="right fa fa-question-circle contextual-help" title="Request science data downloads via the Virtual Solar Observatory (VSO)."></div>
610
 
                </div>
611
 
                <div class="content">
612
 
                    <div class="section">
613
 
                        <h1>Request Viewport Images from VSO</h1>
614
 
                        <div id="vso-links"></div>
615
 
                    </div>
616
 
 
617
 
                    <div class="section">
618
 
                        <h1>Request Image Sequence from VSO</h1>
619
 
                        <div>
620
 
                            <div class="row">
621
 
                                <div class="label">Start Date:</div>
622
 
                                <div class="field">
623
 
                                    <input type="text" id="vso-start-date" name="vso-start-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker"/>
624
 
 
625
 
                                    <input id="vso-start-time" name="vso-start-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}"/>
626
 
 
627
 
                                    <div class="suffix">UTC</div>
628
 
                                </div>
629
 
                            </div>
630
 
 
631
 
                            <div class="row">
632
 
                                <div class="label">End Date:</div>
633
 
                                <div class="field">
634
 
                                    <input type="text" id="vso-end-date" name="vso-end-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker"/>
635
 
 
636
 
                                    <input id="vso-end-time" name="vso-end-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}"/>
637
 
 
638
 
                                    <div class="suffix">UTC</div></div>
639
 
                            </div>
640
 
 
641
 
                            <div class="row">
642
 
                                <div id="vso-previews"></div>
643
 
                            </div>
644
 
 
645
 
                            <div class="row">
646
 
                                <div id="vso-buttons"  class="buttons">
647
 
                                    <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>
648
 
                                    <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>
649
 
                                    <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>
650
 
                                </div>
651
 
                            </div>
652
 
 
653
 
                        </div>
654
 
                    </div>
655
 
                </div>
656
 
            </div>
657
 
 
658
 
            <div id="accordion-sdo" class="accordion">
659
 
                <div class="header">
660
 
                    <div class="disclosure-triangle closed">►</div>
661
 
                    <h1>SDO AIA/HMI Cut-out Service</h1>
662
 
                    <div class="right fa fa-question-circle contextual-help" title="Request AIA or HMI sub-field images."></div>
663
 
                </div>
664
 
                <div class="content">
665
 
                    <div class="section">
666
 
                        <h1>Request Image Sequence from Cut-out Service</h1>
667
 
                        <div>
668
 
                            <div class="row">
669
 
                                <div class="label inactive">Start Date:</div>
670
 
                                <div class="field">
671
 
                                    <input type="text" id="sdo-start-date" name="sdo-start-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
672
 
 
673
 
                                    <input id="sdo-start-time" name="sdo-start-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
674
 
 
675
 
                                    <div class="suffix inactive">UTC</div>
676
 
                                </div>
677
 
                            </div>
678
 
 
679
 
                            <div class="row">
680
 
                                <div class="label inactive">End Date:</div>
681
 
                                <div class="field">
682
 
                                    <input type="text" id="sdo-end-date" name="sdo-end-date" value="" pattern="[\d]{4}/[\d]{2}/[\d]{2}" maxlength="10" class="hasDatepicker" disabled />
683
 
 
684
 
                                    <input id="sdo-end-time" name="sdo-end-time" value="" type="text" maxlength="8" pattern="[\d]{2}:[\d]{2}:[\d]{2}" disabled />
685
 
 
686
 
                                    <div class="suffix inactive">UTC</div></div>
687
 
                            </div>
688
 
 
689
 
                            <br />
690
 
 
691
 
                            <div class="row">
692
 
                                <div class="label inactive">Center (x,y):</div>
693
 
                                <div class="field">
694
 
                                    <input type="text" id="sdo-center-x" name="sdo-center-x" value="0" maxlength="6" disabled />
695
 
                                    <input id="sdo-center-y" name="sdo-center-y" value="0" type="text" maxlength="6" disabled />
696
 
                                    <div class="suffix inactive">arcsec</div>
697
 
                                </div>
698
 
                            </div>
699
 
 
700
 
                            <div class="row">
701
 
                                <div class="label inactive">Width:</div>
702
 
                                <div class="field" style="text-align: left;">
703
 
                                    <input type="text" id="sdo-width" name="sdo-width" value="2000" maxlength="6" disabled />
704
 
                                    <div class="suffix inactive">arcsec</div>
705
 
                                </div>
706
 
                            </div>
707
 
 
708
 
                            <div class="row">
709
 
                                <div class="label inactive">Height:</div>
710
 
                                <div class="field">
711
 
                                    <input type="text" id="sdo-height" name="sdo-height" value="2000" maxlength="6" disabled />
712
 
                                    <div class="suffix inactive">arcsec</div>
713
 
                                </div>
714
 
                            </div>
715
 
 
716
 
                            <div class="row">
717
 
                                <div id="sdo-previews"></div>
718
 
                            </div>
719
 
 
720
 
                            <div class="row">
721
 
                                <div id="sdo-buttons" class="buttons">
722
 
                                    <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>
723
 
                                    <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>
724
 
                                </div>
725
 
                            </div>
726
 
 
727
 
                        </div>
728
 
                    </div>
729
 
                </div>
730
 
            </div>
731
 
        </div>
732
 
    </div>
733
 
 
734
 
 
735
 
    <div id="helioviewer-drawer-bottom">
736
 
        <div class="drawer-tab drawer-tab-bottom">Data Timeline</div>
737
 
        <div class="drawer-contents"></div>
738
 
    </div>
739
 
 
740
 
    <!-- Glossary dialog -->
741
 
    <div id='glossary-dialog'></div>
742
 
 
743
 
    <!-- About dialog -->
744
 
    <div id='about-dialog'></div>
745
 
 
746
 
    <!-- Layer choice dialog -->
747
 
    <div id='layer-choice-dialog'></div>
748
 
 
749
 
    <!-- Settings dialog -->
750
 
    <div id='settings-dialog'>
751
 
        <form id='helioviewer-settings'>
752
 
            <!-- Initial observation date -->
753
 
            <fieldset id='helioviewer-settings-date'>
754
 
            <legend>When starting Helioviewer:</legend>
755
 
                <div style='padding: 10px;'>
756
 
                    <input id="settings-date-latest" type="radio" name="date" value="latest" /><label for="settings-date-latest">Display most recent images available</label><br />
757
 
                    <input id="settings-date-previous" type="radio" name="date" value="last-used" /><label for="settings-date-previous">Display images from previous visit</label><br />
758
 
                </div>
759
 
            </fieldset>
760
 
 
761
 
            <br />
762
 
 
763
 
            <!-- Other -->
764
 
            <fieldset id='helioviewer-settings-other'>
765
 
            <legend>While using Helioviewer:</legend>
766
 
            <div style='padding:10px;'>
767
 
                <input type="checkbox" name="latest-image-option" id="settings-latest-image" value="true" />
768
 
                <label for="settings-latest-image">Refresh with the latest data every 5 minutes</label><br />
769
 
            </div>
770
 
            </fieldset>
771
 
        </form>
772
 
    </div>
773
 
 
774
 
    <!-- Usage Dialog -->
775
 
    <div id='usage-dialog'></div>
776
 
 
777
 
    <!-- URL Dialog -->
778
 
    <div id='url-dialog' style="display:none;">
779
 
        <div id="helioviewer-url-box">
780
 
            <span id="helioviewer-url-box-msg"></span>
781
 
            <form style="margin-top: 5px;">
782
 
                <input type="text" id="helioviewer-url-input-box" style="width:98%;" value="http://helioviewer.org" />
783
 
                <label for="helioviewer-url-shorten">Shorten with bit.ly? </label>
784
 
                <input type="checkbox" id="helioviewer-url-shorten" />
785
 
                <input type="hidden" id="helioviewer-short-url" value="" />
786
 
                <input type="hidden" id="helioviewer-long-url" value="" />
787
 
            </form>
788
 
        </div>
789
 
    </div>
790
 
 
791
 
    <!-- Video Upload Dialog -->
792
 
    <div id='upload-dialog' style="display: none">
793
 
        <!-- Loading indicator -->
794
 
        <div id='youtube-auth-loading-indicator' style='display: none;'>
795
 
            <div id='youtube-auth-spinner'></div>
796
 
            <span style='font-size: 28px;'>Processing</span>
797
 
        </div>
798
 
 
799
 
        <!-- Upload Form -->
800
 
        <div id='upload-form'>
801
 
            <img id='youtube-logo-large' src="resources/images/youtube_79x32.png" alt='YouTube logo' />
802
 
            <h1>Upload Video</h1>
803
 
            <br />
804
 
            <form id="youtube-video-info" action="<?php echo HV_BACK_END; ?>/index.php" method="post">
805
 
                <!-- Title -->
806
 
                <label for="youtube-title">Title:</label>
807
 
                <input id="youtube-title" type="text" name="title" maxlength="100" />
808
 
                <br />
809
 
 
810
 
                <!-- Description -->
811
 
                <label for="youtube-desc">Description:</label>
812
 
                <textarea id="youtube-desc" type="text" rows="5" cols="45" name="description" maxlength="5000"></textarea>
813
 
                <br />
814
 
 
815
 
                <!-- Tags -->
816
 
                <label for="youtube-tags">Tags:</label>
817
 
                <input id="youtube-tags" type="text" name="tags" maxlength="500" value="" />
818
 
                <br /><br />
819
 
 
820
 
                <!-- Sharing -->
821
 
                <div style='float: right; margin-right: 30px;'>
822
 
                <label style='width: 100%; margin: 0px;'>
823
 
                    <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:
824
 
                </label>
825
 
                <br />
826
 
                <input id='youtube-submit-btn' type="submit" value="Submit" />
827
 
                </div>
828
 
 
829
 
                <!-- Hidden fields -->
830
 
                <input id="youtube-movie-id" type="hidden" name="id" value="" />
831
 
            </form>
832
 
            <div id='upload-error-console-container'><div id='upload-error-console'>...</div></div>
833
 
        </div>
834
 
    </div>
835
 
</div>
836
 
 
837
 
 
838
 
<!-- Viewport -->
839
 
<div id="helioviewer-viewport-container-outer">
840
 
    <div id="helioviewer-viewport-container-inner">
841
 
        <div id="helioviewer-viewport">
842
 
 
843
 
            <!-- Movement sandbox -->
844
 
            <div id="sandbox" style="position: absolute;">
845
 
                <div id="moving-container"></div>
846
 
            </div>
847
 
 
848
 
            <!-- Image area select boundary container -->
849
 
            <div id="image-area-select-container"></div>
850
 
        </div>
851
 
 
852
 
    </div>
853
 
</div>
854
 
 
855
 
 
856
 
<!-- Footer -->
857
 
<!-- <div id="footer">
858
 
    <div id="footer-container-outer">
859
 
        <div id="footer-container-inner"> -->
860
 
            <!-- Meta links -->
861
 
<!--             <div id="footer-links">
862
 
                <a href="http://helioviewer.org/wiki/Helioviewer.org_User_Guide_2.4.0" class="light" target="_blank">Help</a>
863
 
                <a id="helioviewer-glossary" class="light" href="dialogs/glossary.html">Glossary</a>
864
 
                <a id="helioviewer-about" class="light" href="dialogs/about.php">About</a>
865
 
                <a id="helioviewer-usage" class="light" href="dialogs/usage.php">Usage Tips</a>
866
 
                <a href="http://wiki.helioviewer.org/wiki/Main_Page" class="light" target="_blank">Wiki</a>
867
 
                <a href="http://blog.helioviewer.org/" class="light" target="_blank">Blog</a>
868
 
                <a href="http://jhelioviewer.org" class="light" target="_blank">JHelioviewer</a>
869
 
                <a href="http://api.helioviewer.org/docs/v2/" class="light" target="_blank">Public API</a>
870
 
                <a href="https://twitter.com/Helioviewer" class="light" title="Follow @helioviewer on Twitter" target="_blank">@helioviewer</a>
871
 
                <a href="mailto:<?php echo $this->config['contact_email']; ?>" class="light">Contact</a>
872
 
                <a href="https://bugs.launchpad.net/helioviewer.org/" class="light" style="margin-right:2px;" target="_blank">Report Problem</a>
873
 
            </div>
874
 
        </div>
875
 
    </div>
876
 
</div> -->
877
 
<!-- end Footer -->
878
 
 
879
 
 
880
 
<?php
881
 
    parent::printBody($signature);
882
 
    }
883
 
 
884
 
    /**
885
 
     * Prints the end of the script block
886
 
     */
887
 
    protected function printScript() {
888
 
        parent::printScript();
889
 
?>
890
 
    // Initialize Helioviewer.org
891
 
    helioviewer = new HelioviewerWebClient(urlSettings, serverSettings, zoomLevels);
892
 
 
893
 
    // Play movie if id is specified
894
 
    if (urlSettings.movieId) {
895
 
        helioviewer.loadMovie(urlSettings.movieId);
896
 
    }
897
 
    });
898
 
<?php
899
 
    }
900
 
}
901
 
?>
 
 
b'\\ No newline at end of file'