← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/Helioviewer.js

  • Committer: Keith Hughitt
  • Date: 2011-05-26 19:28:41 UTC
  • mfrom: (402.1.667 hv)
  • Revision ID: keith.hughitt@nasa.gov-20110526192841-5xmuft9jsm52pzih
Helioviewer.org 2.2.0 Release

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Helioviewer.js
4
4
 */
5
5
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
6
6
  bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
7
 
/*global document, window, $, UIController, ImageSelectTool, MovieBuilder, 
 
7
/*global document, window, $, Class, ImageSelectTool, MovieBuilder, 
8
8
  TooltipHelper, ViewportController, ScreenshotBuilder, ScreenshotHistory,
9
 
  MovieHistory, addIconHoverEventListener, UserVideoGallery, assignTouchHandlers */
 
9
  MovieHistory, addIconHoverEventListener, UserVideoGallery, MessageConsole,
 
10
  KeyboardManager, SettingsLoader, TimeControls, FullscreenControl,
 
11
  ZoomControls, ScreenshotManagerUI, MovieManagerUI, assignTouchHandlers */
10
12
"use strict";
11
 
var Helioviewer = UIController.extend(
 
13
var Helioviewer = Class.extend(
12
14
    /** @lends Helioviewer.prototype */
13
15
    {
14
16
    /**
15
17
     * Creates a new Helioviewer instance.
16
18
     * @constructs
17
19
     * 
18
 
     * @param {Object} urlSettings    Client-specified settings to load. Includes imageLayers,
19
 
     *                                date, and imageScale. May be empty.
 
20
     * @param {Object} urlSettings Client-specified settings to load.
 
21
     *  Includes imageLayers, date, and imageScale. May be empty.
20
22
     * @param {Object} serverSettings Server settings loaded from Config.ini
21
23
     */
22
24
    init: function (urlSettings, serverSettings) {
23
 
        // Calling super will load settings, init viewport, and call _loadExtensions()
24
 
        this._super(urlSettings, serverSettings);
25
 
        
26
 
        // User settings should be globally accessible
27
 
        Helioviewer.userSettings = this.userSettings;
28
 
        
29
 
        this._setupDialogs();
30
 
        this._initEventHandlers();
31
 
        this._displayGreeting();
32
 
    },
33
 
    
34
 
    /**
35
 
     * Loads the message console, keyboard shortcut manager, tooltips, zoom controls, and
36
 
     * full screen controls. the movie builder, screenshot builder, and image select tool.
37
 
     */
38
 
    _loadExtensions: function () {
39
 
        this._super(); // Call super method in UIController to load a few extensions
40
 
 
 
25
        this._checkBrowser(); // Determines browser support
 
26
        
 
27
        this.serverSettings = serverSettings;
 
28
        this.api            = "api/index.php";
 
29
        
 
30
        // User settings are globally accessible
 
31
        Helioviewer.userSettings = SettingsLoader.loadSettings(urlSettings, 
 
32
            serverSettings);
 
33
        
 
34
        this._initLoadingIndicator();
41
35
        this._initTooltips();
42
36
        
 
37
        this.timeControls = new TimeControls('#date', '#time', 
 
38
            '#timestep-select', '#timeBackBtn', '#timeForwardBtn');
 
39
 
 
40
        // Get available data sources and initialize viewport
 
41
        this._initViewport();
 
42
 
 
43
        this.messageConsole = new MessageConsole();
 
44
        this.keyboard       = new KeyboardManager();
 
45
        
 
46
        // User Interface components
 
47
        this.zoomControls   = new ZoomControls('#zoomControls', Helioviewer.userSettings.get('state.imageScale'),
 
48
                                               this.serverSettings.minImageScale, this.serverSettings.maxImageScale); 
 
49
 
 
50
        this.fullScreenMode = new FullscreenControl("#fullscreen-btn", 500);
 
51
        
43
52
        this.displayBlogFeed("api/?action=getNewsFeed", 3, false);
44
53
        
45
54
        this._userVideos = new UserVideoGallery();
46
55
        
47
 
        var screenshotHistory = new ScreenshotHistory(this.userSettings.get('screenshot-history')),
48
 
            movieHistory      = new MovieHistory(this.userSettings.get('movie-history'));
49
 
 
50
56
        this.imageSelectTool   = new ImageSelectTool();
51
57
        
52
 
        this.movieBuilder      = new MovieBuilder(this.viewport, movieHistory);
53
 
        this.screenshotBuilder = new ScreenshotBuilder(this.viewport, this.serverSettings.servers, screenshotHistory);
54
 
    },
55
 
    
56
 
    /**
57
 
     * Initializes tooltip manager and adds custom tooltips for basic navigation elements
 
58
        this._screenshotManagerUI = new ScreenshotManagerUI();
 
59
        this._movieManagerUI      = new MovieManagerUI();
 
60
 
 
61
        this._setupDialogs();
 
62
        this._initEventHandlers();
 
63
        this._displayGreeting();
 
64
    },
 
65
    
 
66
    
 
67
    /**
 
68
     * @description Checks browser support for various features used in Helioviewer
 
69
     */
 
70
    _checkBrowser: function () {
 
71
        // Base support
 
72
        $.extend($.support, {
 
73
            "localStorage" : ('localStorage' in window) && window['localStorage'] !== null,
 
74
            "nativeJSON"   : typeof (JSON) !== "undefined",
 
75
            "video"        : !!document.createElement('video').canPlayType,
 
76
            "h264"         : false,
 
77
            "ogg"          : false,
 
78
            "vp8"          : false
 
79
        });
 
80
        
 
81
        // HTML5 Video Support
 
82
        if ($.support.video) {
 
83
            var v = document.createElement("video");
 
84
            
 
85
            // VP8/WebM
 
86
            if (v.canPlayType('video/webm; codecs="vp8"')) {
 
87
                $.support.vp8 = true;
 
88
            }
 
89
            
 
90
            // Ogg Theora
 
91
            if (v.canPlayType('video/ogg; codecs="theora"')) {
 
92
                $.support.ogg = true;
 
93
            }
 
94
            
 
95
            // H.264
 
96
            if (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
 
97
                $.support.h264 = true;
 
98
            }
 
99
            
 
100
        }
 
101
    },
 
102
    
 
103
    /**
 
104
     * @description Sets up a simple AJAX-request loading indicator
 
105
     */
 
106
    _initLoadingIndicator: function () {
 
107
        $(document).ajaxStart(function () {
 
108
            $('#loading').show();
 
109
        })
 
110
        .ajaxStop(function () {
 
111
            $('#loading').hide();
 
112
        });  
 
113
    },
 
114
    
 
115
    /**
 
116
     * Add tooltips to static HTML buttons and elements
58
117
     */
59
118
    _initTooltips: function () {
60
 
        this.tooltips = new TooltipHelper(true);
61
 
        $(document).trigger('create-tooltip', ["#timeBackBtn, #timeForwardBtn, #center-button"])
62
 
                   .trigger('create-tooltip', ["#fullscreen-btn", "topRight"]);
 
119
        // Overide qTip defaults
 
120
        $.fn.qtip.defaults = $.extend(true, {}, $.fn.qtip.defaults, {
 
121
            show: {
 
122
                delay: 1000
 
123
            },
 
124
            style: {
 
125
                classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
 
126
            }
 
127
        });
 
128
        
 
129
        $("*[title]:not(#fullscreen-btn,.text-btn)").qtip();
 
130
        
 
131
        // Fullscreen
 
132
        $("#fullscreen-btn, .text-btn").qtip({
 
133
            position: {
 
134
                my: "top right",
 
135
                at: "bottom middle"
 
136
            }
 
137
        });
63
138
    },
64
 
    
 
139
 
65
140
    /**
66
141
     * Initializes Helioviewer's viewport
67
142
     */
76
151
            minImageScale  : this.serverSettings.minImageScale,
77
152
            maxImageScale  : this.serverSettings.maxImageScale,
78
153
            prefetch       : this.serverSettings.prefetchSize,
79
 
            tileLayers     : this.userSettings.get('tileLayers'),
80
 
            imageScale     : this.userSettings.get('imageScale'),
81
 
            warnMouseCoords: this.userSettings.get('warnMouseCoords')
 
154
            tileLayers     : Helioviewer.userSettings.get('state.tileLayers'),
 
155
            imageScale     : Helioviewer.userSettings.get('state.imageScale'),
 
156
            warnMouseCoords: Helioviewer.userSettings.get('notifications.coordinates')
82
157
        });   
83
158
    },
84
159
    
94
169
            height : 300
95
170
        });
96
171
 
97
 
        //Keyboard shortcuts dialog
 
172
        // Keyboard shortcuts dialog
98
173
        this._setupDialog("#helioviewer-usage", "#usage-dialog", {
99
174
            "title": "Helioviewer - Usage Tips"
100
175
        });
101
176
        
102
 
        // TEMP Feb 11, 2011
103
 
        $("#settings-button").click(function (e) {
104
 
            $("#settings-dialog").dialog({
105
 
                "buttons": {
106
 
                    "Ok": function () {
107
 
                        $(this).dialog("close");
108
 
                    }
109
 
                },
110
 
                "title": "Helioviewer - Settings",
111
 
                "width": 400,
112
 
                "resizable": false,
113
 
                "create": function (e) {
114
 
                    var currentValue = self.userSettings.get("movieLength"),
115
 
                        select = $(this).find("#settings-movie-length");
 
177
        // Settings dialog
 
178
        this._setupDialog("#settings-button", "#settings-dialog", {
 
179
            "buttons": {
 
180
                "Ok": function () {
 
181
                    $(this).dialog("close");
 
182
                }
 
183
            },
 
184
            "title": "Helioviewer - Settings",
 
185
            "width": 400,
 
186
            "height": 'auto',
 
187
            "resizable": false,
 
188
            "create": function (e) {
 
189
                var currentValue = Helioviewer.userSettings.get(
 
190
                    "defaults.movies.duration"),
 
191
                    select = $(this).find("#settings-movie-length");
116
192
 
117
 
                    // Select default value and bind event listener
118
 
                    select.find("[value = " + currentValue + "]").attr("selected", "selected");
119
 
                    select.bind('change', function (e) {
120
 
                        self.userSettings.set("movieLength", parseInt(this.value, 10));
121
 
                    });                              
122
 
                }
123
 
            });
 
193
                // Select default value and bind event listener
 
194
                select.find("[value = " + currentValue + "]").attr("selected", "selected");
 
195
                select.bind('change', function (e) {
 
196
                    Helioviewer.userSettings.set("defaults.movies.duration",
 
197
                        parseInt(this.value, 10));
 
198
                });                              
 
199
            }
124
200
        });
125
201
    },
126
202
    
169
245
        // 12/08/2010: Disabling JHelioviewer JNLP launching until better support is added
170
246
        //$('#jhelioviewer-button').click($.proxy(this.launchJHelioviewer, this));
171
247
        
172
 
        // Handle image area select requests
173
 
        $(document).bind("enable-select-tool", function (event, callback) {
174
 
            self.imageSelectTool.enableAreaSelect(self.viewport.getViewportInformation(), callback);
175
 
        });
176
 
 
177
248
        $('#social-buttons .text-btn').each(function (i, item) {
178
249
            addIconHoverEventListener($(this)); 
179
250
        });
233
304
               '</span></form>' +
234
305
               '</div>';
235
306
        
236
 
        //        $(".email-input-field").one("click", function (e) {
237
 
        //            this.value = "";
238
 
        //        });
239
 
        
240
307
    },
241
308
    
242
309
    /**
304
371
     * Displays welcome message on user's first visit
305
372
     */
306
373
    _displayGreeting: function () {
307
 
        if (!this.userSettings.get('showWelcomeMsg')) {
 
374
        if (!Helioviewer.userSettings.get("notifications.welcome")) {
308
375
            return;
309
376
        }
310
377
 
311
378
        $(document).trigger("message-console-info", 
312
379
            ["<b>Welcome to Helioviewer.org</b>, a solar data browser. First time here? Be sure to check out our " +
313
 
             "<a href=\"http://helioviewer.org/wiki/index.php?title=Helioviewer.org_User_Guide\" " +
 
380
             "<a href=\"http://wiki.helioviewer.org/wiki/index.php?title=Helioviewer.org_User_Guide\" " +
314
381
             "class=\"message-console-link\" target=\"_blank\"> User Guide</a>.", {life: 20000}]
315
 
        ).trigger("save-setting", ["showWelcomeMsg", false]);
 
382
        );
 
383
        
 
384
        Helioviewer.userSettings.set("notifications.welcome", false);
 
385
    },
 
386
    
 
387
    /**
 
388
     * Returns the current observation date
 
389
     * 
 
390
     * @return {Date} observation date
 
391
     */
 
392
    getDate: function () {
 
393
        return this.timeControls.getDate();
 
394
    },
 
395
    
 
396
    /**
 
397
     * Returns the currently loaded layers
 
398
     * 
 
399
     * @return {String} Serialized layer string
 
400
     */
 
401
    getLayers: function () {
 
402
        return this.viewport.serialize();
 
403
    },
 
404
    
 
405
    /**
 
406
     * Returns the currently displayed image scale
 
407
     *
 
408
     * @return {Float} image scale in arc-seconds/pixel
 
409
     */
 
410
    getImageScale: function () {
 
411
        return this.viewport.getImageScale();
 
412
    },
 
413
    
 
414
    /**
 
415
     * Returns an array of the Helioviewer servers that should be used for requests
 
416
     * 
 
417
     * @return {Array} Helioviewer servers to use
 
418
     */
 
419
    getServers: function () {
 
420
        return this.serverSettings.servers;
 
421
    },
 
422
    
 
423
    /**
 
424
     * Returns the top-left and bottom-right coordinates for the viewport region of interest
 
425
     * 
 
426
     * @return {Object} Current ROI 
 
427
     */
 
428
    getViewportRegionOfInterest: function () {
 
429
        return this.viewport.getRegionOfInterest();
316
430
    },
317
431
    
318
432
    /**
319
433
     * Builds a URL for the current view
320
434
     *
321
435
     * @TODO: Add support for viewport offset, event layers, opacity
322
 
     * @TODO: Make into a static method for use by Jetpack, etc? http://www.ruby-forum.com/topic/154386
323
436
     * 
324
437
     * @returns {String} A URL representing the current state of Helioviewer.org.
325
438
     */
340
453
              "&imageLayers=" + imageLayers;
341
454
 
342
455
        return url;
 
456
    },
 
457
    
 
458
    /**
 
459
     * Sun-related Constants
 
460
     */
 
461
    constants: {
 
462
        au: 149597870700, // 1 au in meters (http://maia.usno.navy.mil/NSFA/IAU2009_consts.html)
 
463
        rsun: 695700000  // radius of the sun in meters (JHelioviewer)
343
464
    }
344
465
});
345