← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/Tiling/Layer/TileLayer.js

  • 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/Tiling/Layer/TileLayer.js
1
1
/**
2
2
 * @fileOverview Contains the class definition for an TileLayer class.
3
 
 * @author <a href="mailto:jeff.stys@nasa.gov">Jeff Stys</a>
4
3
 * @author <a href="mailto:keith.hughitt@nasa.gov">Keith Hughitt</a>
5
4
 * @author <a href="mailto:patrick.schmiedel@gmx.net">Patrick Schmiedel</a>
6
5
 * @see TileLayerAccordion, Layer
7
6
 * @requires Layer
8
 
 *
 
7
 * 
9
8
 * TODO 2011/01/09: Add check for zero-dimension tile requests
10
 
 *
 
9
 * 
11
10
 */
12
 
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true,
 
11
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true, 
13
12
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
14
13
/*global Class, Layer, $, JP2Image, Image, console, getUTCTimestamp, TileLoader */
15
14
"use strict";
16
 
var TileLayer = Layer.extend(
 
15
var TileLayer = Layer.extend( 
17
16
    /** @lends TileLayer.prototype */
18
 
    {
 
17
    {    
19
18
    /**
20
19
     * @description Default TileLayer options
21
20
     */
29
28
     * @constructs
30
29
     * @description Creates a new TileLayer
31
30
     */
32
 
    init: function (index, date, tileSize, viewportScale, tileVisibilityRange, name, visible, opacity) {
 
31
    init: function (index, date, tileSize, viewportScale, tileVisibilityRange, api, name, visible, 
 
32
            opacity, server) {
33
33
        $.extend(this, this.defaultOptions);
34
34
        this._super();
35
 
 
 
35
        
36
36
        this.loaded = false;
37
 
 
 
37
        
38
38
        this._requestDate = date;
39
39
        this.domNode = $('<div class="tile-layer-container" />').appendTo("#moving-container");
40
40
 
49
49
    updateTileVisibilityRange: function (range) {
50
50
        this.tileLoader.updateTileVisibilityRange(range, this.loaded);
51
51
    },
52
 
 
 
52
    
53
53
    /**
54
 
     *
 
54
     * 
55
55
     */
56
56
    updateImageScale: function (scale, tileVisibilityRange) {
57
57
        this.viewportScale = scale;
58
58
        this._updateDimensions();
59
 
 
 
59
        
60
60
        this.tileLoader.setTileVisibilityRange(tileVisibilityRange);
61
 
 
 
61
        
62
62
        if (this.visible) {
63
63
            this.tileLoader.reloadTiles(true);
64
64
        }
65
65
    },
66
 
 
 
66
    
67
67
    /**
68
68
     * Handles time changes
69
69
     */
70
70
    updateRequestTime: function (date) {
71
71
        this.image.updateTime(date);
72
72
    },
73
 
 
 
73
    
74
74
    /**
75
75
     * @description Returns a stringified version of the tile layer for use in URLs, etc
76
76
     * @return string String representation of the tile layer
77
77
     */
78
78
    serialize: function () {
79
 
        return this.image.getLayerName() + "," + (this.visible ? this.layeringOrder : "0") + "," + this.opacity;
 
79
        return this.image.getLayerName() + "," + (this.visible ? "1" : "0") + "," + this.opacity;
80
80
    },
81
 
 
 
81
    
82
82
    toggleVisibility: function (event, id) {
83
83
        if (this.id === id) {
84
84
            this._super();
85
85
            $(document).trigger("save-tile-layers");
86
86
        }
87
87
    },
88
 
 
 
88
    
89
89
    /**
90
90
     * Computes layer parameters relative to the current viewport image scale
91
 
     *
 
91
     *   
92
92
     * Center offset:
93
93
     *   The values for offsetX and offsetY reflect the x and y coordinates with the origin
94
94
     *   at the bottom-left corner of the image, not the top-left corner.
95
95
     */
96
96
    _updateDimensions: function () {
97
97
        var scaleFactor, offsetX, offsetY;
98
 
 
99
98
        // Ratio of original JP2 image scale to the viewport/desired image scale
100
99
        scaleFactor = this.image.scale / this.viewportScale;
101
100
 
102
101
        this.width  = this.image.width  * scaleFactor;
103
102
        this.height = this.image.height * scaleFactor;
104
103
 
105
 
        // Use Math.floor to avoid unnecessary tile requests when the computed
106
 
        // dimensions are something like 2048.32
107
 
        this.tileLoader.updateDimensions(Math.floor(this.width),
108
 
                                         Math.floor(this.height));
109
 
 
 
104
        this.tileLoader.updateDimensions(this.width, this.height);
 
105
        
110
106
        // Offset image
111
107
        offsetX = parseFloat((this.image.offsetX * scaleFactor).toPrecision(8));
112
108
        offsetY = parseFloat((this.image.offsetY * scaleFactor).toPrecision(8));
125
121
            "top" : - offsetY
126
122
        });
127
123
    },
128
 
 
 
124
    
129
125
    /**
130
 
     *
 
126
     * 
131
127
     */
132
128
    onLoadImage: function () {
133
129
        this.loaded = true;
134
130
        this._updateDimensions();
135
131
 
136
132
        this.tileLoader.reloadTiles(false);
137
 
 
 
133
        
138
134
        // Update viewport sandbox if necessary
139
135
        $(document).trigger("tile-layer-finished-loading", [this.getDimensions()]);
140
136
    },
141
 
 
 
137
    
142
138
    /**
143
139
     * @description Returns an array container the values of the positions for each edge of the TileLayer.
144
140
     */
152
148
     */
153
149
    setOpacity: function (opacity) {
154
150
        this.opacity = opacity;
155
 
 
 
151
        
156
152
        // IE
157
153
        if (!$.support.opacity) {
158
154
            $(this.domNode).find(".tile").each(function () {
164
160
            $(this.domNode).css("opacity", opacity / 100);
165
161
        }
166
162
    },
167
 
 
 
163
    
168
164
    /**
169
165
     * Reloads tiles if visibility is being set to true.
170
166
     * This method is almost identical to onLoadImage, except that reloadTiles
175
171
        if (visible) {
176
172
            this._updateDimensions();
177
173
            this.tileLoader.reloadTiles(true);
178
 
 
 
174
        
179
175
            // Update viewport sandbox if necessary
180
176
            $(document).trigger("tile-layer-finished-loading", [this.getDimensions()]);
181
177
        }
182
178
    },
183
 
 
 
179
    
184
180
    /**
185
181
     * @description Sets up image properties that are not dependent on the specific image,
186
182
     * but only on the type (source) of the image.
187
 
     *
 
183
     * 
188
184
     * IE7: Want z-indices < 1 to ensure event icon visibility
189
185
     */
190
186
    _loadStaticProperties: function () {
191
187
        this.domNode.css("z-index", parseInt(this.layeringOrder, 10) - 10);
192
 
 
 
188
        
193
189
        // opacity
194
190
        if (this.opacity !== 100) {
195
191
            this.setOpacity(this.opacity);
200
196
            this.setVisibility(false);
201
197
        }
202
198
    },
203
 
 
 
199
    
204
200
    /**
205
201
     * @description Toggle image sharpening
206
202
     */
207
203
    toggleSharpening: function () {
208
204
        if (this.sharpen === true) {
209
 
 
 
205
            
210
206
        } else {
211
207
            //$(this.domNode.childElements());
212
208
            //$("img.tile[src!=resources/images/transparent_512.gif]").pixastic("sharpen", {amount: 0.35});
213
209
        }
214
210
        this.sharpen = !this.sharpen;
215
211
    },
216
 
 
 
212
    
217
213
    /**
218
214
     * @description Generates URL to retrieve a single Tile and displays the transparent tile if request fails
219
215
     * @param {Int} x Tile X-coordinate
220
216
     * @param {Int} y Tile Y-coordinate
221
217
     * @param {Function} onTileLoadComplete -- callback function to this.tileLoader.onTileLoadComplete
222
218
     * @returns {String} URL to retrieve the requested tile
223
 
     *
224
 
     * IE: CSS opacities do not behave properly with absolutely positioned elements. Opacity is therefor
 
219
     * 
 
220
     * IE: CSS opacities do not behave properly with absolutely positioned elements. Opacity is therefor 
225
221
     * set at tile-level.
226
222
     */
227
223
    getTile: function (event, x, y, onTileLoadComplete) {
228
 
        var top, left, ts, img, rf, emptyTile;
 
224
        var top, left, ts, img, rf, emptyTile; 
229
225
 
230
226
        left = x * this.tileSize;
231
227
        top  = y * this.tileSize;
232
228
        ts   = this.tileSize;
233
 
 
 
229
        
234
230
        emptyTile = 'resources/images/transparent_' + ts + '.gif';
235
 
 
 
231
            
236
232
        //img = $('<img class="tile" style="left:' + left + 'px; top:' + top + 'px;"></img>');
237
233
        img = this.setImageProperties();
238
234
 
242
238
        if (!$.support.opacity) {
243
239
            img.css("opacity", this.opacity / 100);
244
240
        }
245
 
 
 
241
        
246
242
        // Load tile
247
243
        img.error(function (e) {
248
244
            img.unbind("error");
249
245
            $(this).attr("src", emptyTile);
250
246
        }).load(function () {
251
 
            $(this).width(512).height(512); // Wait until image is done loading specify dimensions in order to prevent
 
247
            $(this).width(512).height(512); // Wait until image is done loading specify dimensions in order to prevent 
252
248
                                            // Firefox from displaying place-holders
253
249
        }).attr("src", this.getTileURL(x, y));
254
250
 
258
254
            img.load(onTileLoadComplete);
259
255
        }
260
256
    },
261
 
 
 
257
    
262
258
    /**
263
259
     * Sets event handlers and properties of the image
264
260
     */
265
261
    setImageProperties: function () {
266
 
        var img, rf;
267
 
 
 
262
        var img, rf; 
 
263
        
268
264
        rf = function () {
269
265
            return false;
270
266
        };
271
 
 
 
267
        
272
268
        img = new Image();
273
269
 
274
270
        img.unselectable = 'on';
279
275
        img.oncontextmenu = rf;
280
276
        img.onselectstart = rf;
281
277
        img.galleryimg    = 'no';
282
 
 
 
278
        
283
279
        return img;
284
280
    }
285
281
});