← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/js/Media/ScreenshotManagerUI.js

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

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/js/Media/ScreenshotManagerUI.js
1
 
/**
2
 
 * ScreenshotManagerUI class definition
3
 
 * @author <a href="mailto:jeff.stys@nasa.gov">Jeff Stys</a>
4
 
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a>
5
 
 */
6
 
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false,
7
 
eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true,
8
 
newcap: true, immed: true, maxlen: 80, sub: true */
9
 
/*global $, window, Helioviewer, helioviewer, MediaManagerUI, ScreenshotManager
10
 
*/
11
 
"use strict";
12
 
var ScreenshotManagerUI = MediaManagerUI.extend(
13
 
    /** @lends ScreenshotManagerUI */
14
 
    {
15
 
    /**
16
 
     * @constructs
17
 
     * Creates a new ScreenshotManagerUI instance
18
 
     *
19
 
     * @param {ScreenshotManager} model ScreenshotManager instance
20
 
     */
21
 
    init: function () {
22
 
        var screenshots = Helioviewer.userSettings.get('history.screenshots');
23
 
        this._manager = new ScreenshotManager(screenshots);
24
 
 
25
 
        this._super("screenshot");
26
 
 
27
 
        this._initEvents();
28
 
        this.show();
29
 
    },
30
 
 
31
 
    /**
32
 
     * Returns a URL to generate a screenshot of the current viewport
33
 
     *
34
 
     * Used to generate thumbnails for the current page
35
 
     */
36
 
    getScreenshotURL: function () {
37
 
        var roi, imageScale, layers, params;
38
 
 
39
 
        imageScale = helioviewer.getImageScale();
40
 
        roi        = helioviewer.getViewportRegionOfInterest();
41
 
 
42
 
        // Remove any layers which do not lie in the reguested region
43
 
        layers = this._checkLayers(helioviewer.getLayers());
44
 
 
45
 
        // Make sure selection region and number of layers are acceptible
46
 
        if (!this._validateRequest(roi, layers)) {
47
 
            return;
48
 
        }
49
 
 
50
 
        params = $.extend({
51
 
            action        : "takeScreenshot",
52
 
            imageScale    : imageScale,
53
 
            layers        : layers,
54
 
            date          : helioviewer.getDate().toISOString(),
55
 
            display       : true
56
 
        }, this._toArcsecCoords(roi, imageScale));
57
 
 
58
 
        return Helioviewer.api + "?" + $.param(params);
59
 
    },
60
 
 
61
 
    /**
62
 
     * Displays a jGrowl notification to the user informing them that their
63
 
     * download has completed
64
 
     */
65
 
    _displayDownloadNotification: function (screenshot) {
66
 
        var jGrowlOpts, body, self = this;
67
 
 
68
 
        // Options for the jGrowl notification
69
 
        jGrowlOpts = {
70
 
            sticky: true,
71
 
            header: "Just now"
72
 
        };
73
 
 
74
 
        // Download link
75
 
        body = "<a href='" + Helioviewer.api +
76
 
               "?action=downloadScreenshot&id=" +
77
 
               screenshot.id + "'>Your " + screenshot.name +
78
 
               " screenshot is ready! Click here to download. </a>";
79
 
 
80
 
        // Create the jGrowl notification.
81
 
        $(document).trigger("message-console-log",
82
 
                            [body, jGrowlOpts, true, true]);
83
 
    },
84
 
 
85
 
    /**
86
 
     * Initializes ScreenshotManager-related event handlers
87
 
     */
88
 
    _initEvents: function () {
89
 
        var self = this;
90
 
 
91
 
        this._super();
92
 
 
93
 
        // Screenshot ROI selection buttons
94
 
        this._fullViewportBtn.click(function () {
95
 
            self._takeScreenshot();
96
 
        });
97
 
 
98
 
        this._selectAreaBtn.click(function () {
99
 
            $(document).trigger("enable-select-tool",
100
 
                                $.proxy(self._takeScreenshot, self));
101
 
        });
102
 
 
103
 
        // Setup click handler for history items
104
 
        $("#screenshot-history .history-entry")
105
 
           .live('click', $.proxy(this._onScreenshotClick, this));
106
 
    },
107
 
 
108
 
    /**
109
 
     * Creates HTML for a preview tooltip with a preview thumbnail,
110
 
     * if available, and some basic information about the screenshot or movie
111
 
     */
112
 
    _buildPreviewTooltipHTML: function (screenshot) {
113
 
        var width, height, date, html;
114
 
 
115
 
        width  = Math.round((screenshot.x2 - screenshot.x1) /
116
 
                    screenshot.imageScale);
117
 
        height = Math.round((screenshot.y2 - screenshot.y1) /
118
 
                    screenshot.imageScale);
119
 
 
120
 
        date = screenshot.date.substr(0, 19).replace(/T/, " ");
121
 
 
122
 
        html = "<div style='text-align: center;'>" +
123
 
            "<img src='" + Helioviewer.api + "?action=downloadScreenshot&id=" + screenshot.id +
124
 
            "' alt='preview thumbnail' class='screenshot-preview' /></div>" +
125
 
            "<table class='preview-tooltip'>" +
126
 
            "<tr><td><b>Date:</b></td><td>" + date + "</td></tr>" +
127
 
            "<tr><td><b>Scale:</b></td><td>" +
128
 
            screenshot.imageScale.toFixed(2) +
129
 
            " arcsec/px</td></tr>" +
130
 
            "<tr><td><b>Dimensions:</b></td><td>" + width +
131
 
            "x" + height + " px</td></tr>" +
132
 
            "</table>";
133
 
 
134
 
        return html;
135
 
    },
136
 
 
137
 
    /**
138
 
     * When a screenshot history entry is clicked, and the screenshot has
139
 
     * finished processing, download the screenshot. Otherwise do nothing.
140
 
     */
141
 
    _onScreenshotClick: function (event) {
142
 
        var id = $(event.currentTarget).data('id'),
143
 
            url = Helioviewer.api + "?action=downloadScreenshot&id=" + id;
144
 
        window.open(url, '_parent');
145
 
 
146
 
        return false;
147
 
    },
148
 
 
149
 
    /**
150
 
     * Gathers all necessary information to generate a screenshot, and then
151
 
     * displays the image when it is ready.
152
 
     *
153
 
     * @param {Object} roi Region of interest to use in place of the current \
154
 
     * viewport roi
155
 
     */
156
 
    _takeScreenshot: function (roi) {
157
 
        var params, dataType, imageScale, layers, events, eventLabels, scale, scaleType, scaleX, scaleY, screenshot, self = this;
158
 
 
159
 
        if (typeof roi === "undefined") {
160
 
            roi = helioviewer.getViewportRegionOfInterest();
161
 
        }
162
 
 
163
 
        imageScale  = helioviewer.getImageScale();
164
 
        layers      = helioviewer.getVisibleLayers(roi);
165
 
        events      = helioviewer.getEvents();
166
 
 
167
 
        if ( Helioviewer.userSettings.get("state.eventLayerVisible") === false ) {
168
 
            events = '';
169
 
            eventLabels = false;
170
 
        }
171
 
 
172
 
        // Make sure selection region and number of layers are acceptible
173
 
        if (!this._validateRequest(roi, layers)) {
174
 
            return;
175
 
        }
176
 
 
177
 
        params = $.extend({
178
 
            action        : "takeScreenshot",
179
 
            imageScale    : imageScale,
180
 
            layers        : layers,
181
 
            events        : events,
182
 
            eventLabels   : Helioviewer.userSettings.get("state.eventLabels"),
183
 
            scale         : Helioviewer.userSettings.get("state.scale"),
184
 
            scaleType     : Helioviewer.userSettings.get("state.scaleType"),
185
 
            scaleX        : Helioviewer.userSettings.get("state.scaleX"),
186
 
            scaleY        : Helioviewer.userSettings.get("state.scaleY"),
187
 
            date          : helioviewer.getDate().toISOString(),
188
 
            display       : false
189
 
        }, this._toArcsecCoords(roi, imageScale));
190
 
 
191
 
        // AJAX Responder
192
 
        $.get(Helioviewer.api, params, function (response) {
193
 
            if ((response === null) || response.error) {
194
 
                $(document).trigger("message-console-info",
195
 
                    "Unable to create screenshot. Please try again later.");
196
 
                return;
197
 
            }
198
 
 
199
 
            screenshot = self._manager.add(
200
 
                response.id, params.imageScale, params.layers,
201
 
                new Date().toISOString(), params.date,
202
 
                params.x1, params.x2, params.y1, params.y2
203
 
            );
204
 
            self._addItem(screenshot);
205
 
            self._displayDownloadNotification(screenshot);
206
 
        }, Helioviewer.dataType);
207
 
    }
208
 
});