← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/js/UI/ImageScale.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/js/UI/ImageScale.js
1
 
/**
2
 
 * @fileOverview Contains the class definition for an ImageScale class.
3
 
 * @author <a href="mailto:jeff.stys@nasa.gov">Jeff Stys</a>
4
 
 */
5
 
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false,
6
 
eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true,
7
 
newcap: true, immed: true, maxlen: 80, sub: true */
8
 
/*globals $, Class */
9
 
"use strict";
10
 
var ImageScale = Class.extend(
11
 
    /** @lends ImageScale.prototype */
12
 
    {
13
 
    /**
14
 
     * @constructs
15
 
     *
16
 
     * Creates a new ImageScale
17
 
     */
18
 
    init: function () {
19
 
 
20
 
        // Solar radius in arcseconds, source: Djafer, Thuillier and Sofia (2008)
21
 
        this._rsunInArcseconds       = 959.705;
22
 
 
23
 
        this._earthSunRadiusFraction = 6367.5 / 695500.;  // km
24
 
 
25
 
        this._initScale();
26
 
 
27
 
        // Position and display ImageScale UI widget
28
 
        this.display();
29
 
    },
30
 
 
31
 
 
32
 
    _initScale: function() {
33
 
        var earthURL = 'resources/images/earth.png';
34
 
 
35
 
        if ( $('#earth-container').length > 0 ) {
36
 
           $('#earth-container').remove();
37
 
        }
38
 
 
39
 
        this._earthDiameterInPixels();
40
 
 
41
 
        this.scale_container = $('<div id="earth-container"></div>').appendTo("#helioviewer-viewport");
42
 
        this.scale_container.draggable();
43
 
        this.scale_container.css({
44
 
            'position'    : 'absolute',
45
 
            'bottom'      : '0',
46
 
            'z-index'     : '999',
47
 
            'width'       : '73px',
48
 
            'height'      : '56px',
49
 
            'background-color':'rgba(17,17,17,0.5)',
50
 
            'border-top'  : '1px solid #333',
51
 
            'border-right': '1px solid #333',
52
 
            'box-shadow'  : '0px 0px 5px black',
53
 
            'cursor'      : 'move',
54
 
            'display'     : 'none'
55
 
        });
56
 
        this.scale_container.attr('title','Click and drag to re-position scale indicator.');
57
 
 
58
 
        $('<div style="position:relative; height:12px;"><div id="earth-button" class="minimize ui-icon ui-icon-arrow-1-sw" style="float: right; cursor:pointer;" title="Hide Scale Indicator"></div><div id="earthLabel" style="color: white; background-color: #333; text-align: center; font-size: 10px; padding: 2px 0 2px 2px;">Earth Scale</div></div>').appendTo("#earth-container");
59
 
 
60
 
        $('<div style="position:relative; width:72px; height:45px;"><img id="earthScale" src="resources/images/earth.png" style="width: '+this.earthDiameterInPixels+'px;height: '+this.earthDiameterInPixels+'px; position: absolute; left: '+(36-(this.earthDiameterInPixels/2))+'px; top: '+(23-(this.earthDiameterInPixels/2))+'px;" /></div>').appendTo("#earth-container");
61
 
 
62
 
        this.scale_button    = this.scale_container.find('#earth-button');
63
 
        this.scale_image     = this.scale_container.find('#earthScale');
64
 
        this.scale_label     = this.scale_container.find('#earthLabel');
65
 
 
66
 
        $(document).bind("earth-scale",   $.proxy(this.earthRescale, this));
67
 
 
68
 
        this.scale_container.bind("mousedown", function () { return false; });
69
 
        this.scale_container.bind('dblclick',  function () { return false; });
70
 
        this.scale_container.bind('click',     function () { return false; });
71
 
 
72
 
        this.scale_container.bind('drag',     $.proxy(this.scaleContainerDrag, this));
73
 
        this.scale_container.bind('dragstop', $.proxy(this.scaleContainerDragStop, this));
74
 
 
75
 
        this.scale_button.bind('click', $.proxy(this.earthMinimize, this));
76
 
    },
77
 
 
78
 
    earthRescale: function() {
79
 
        // Grab new imageScale and recompute Earth scale pixel size
80
 
        this._earthDiameterInPixels();
81
 
 
82
 
        this.scale_image.css({
83
 
            'width' : this.earthDiameterInPixels+'px',
84
 
            'height': this.earthDiameterInPixels+'px',
85
 
            'position' : 'absolute',
86
 
            'left': (36-(this.earthDiameterInPixels/2))+'px',
87
 
            'top' : (23-(this.earthDiameterInPixels/2))+'px'
88
 
        });
89
 
 
90
 
        // Update X,Y position of scale container (in arcseconds)
91
 
        this.scaleContainerDragStop();
92
 
    },
93
 
 
94
 
    earthMinimize: function(event) {
95
 
        Helioviewer.userSettings.set("state.scale", false);
96
 
        Helioviewer.userSettings.set("state.scaleType", 'earth');
97
 
        Helioviewer.userSettings.set("state.scaleX", 0);
98
 
        Helioviewer.userSettings.set("state.scaleY", 0);
99
 
        this.scale_container.draggable({disabled:true});
100
 
        this.scale_image.hide();
101
 
        this.scale_label.hide();
102
 
        this.scale_button.attr('title','Show Scale Indicator');
103
 
        this.scale_container.css({
104
 
            'width'         : '10px',
105
 
            'height'        : '10px',
106
 
            'border'        : '1px solid #888',
107
 
            'border-left'   : '0',
108
 
            'border-bottom' : '0'
109
 
        });
110
 
        this.scale_container.css({
111
 
            'position'      : 'absolute',
112
 
            'top'           : 'auto',
113
 
            'bottom'        : '0px',
114
 
            'left'          : '0px'
115
 
        });
116
 
        this.scale_button.removeClass('minimize').addClass('maximize');
117
 
        this.scale_button.removeClass('ui-icon-arrow-1-sw').addClass('ui-icon-arrow-1-ne');
118
 
        this.scale_button.css({'margin':'-3px -3px 0 0'});
119
 
        this.scale_button.unbind();
120
 
        this.scale_button.bind('click',  $.proxy(this.earthMaximize,  this));
121
 
    },
122
 
 
123
 
    earthMaximize: function() {
124
 
        Helioviewer.userSettings.set("state.scale", true);
125
 
        Helioviewer.userSettings.set("state.scaleType", 'earth');
126
 
        Helioviewer.userSettings.set("state.scaleX", 0);
127
 
        Helioviewer.userSettings.set("state.scaleY", 0);
128
 
        this.scale_container.draggable({disabled:false});
129
 
        this.scale_image.show();
130
 
        this.scale_label.show();
131
 
        this.scale_button.attr('title','Hide Scale Indicator');
132
 
        this.scale_container.css({
133
 
            'position'      : 'absolute',
134
 
            'top'           : 'auto',
135
 
            'bottom'        : '0px',
136
 
            'left'          : '0px',
137
 
            'width'         : '73px',
138
 
            'height'        : '56px',
139
 
            'border'        : '1px solid #333',
140
 
            'border-left'   : '0',
141
 
            'border-bottom' : '0'
142
 
        });
143
 
        this.scale_button.removeClass('maximize').addClass('minimize');
144
 
        this.scale_button.removeClass('ui-icon-arrow-1-ne').addClass('ui-icon-arrow-1-sw');
145
 
        this.scale_button.css({'margin':'0'});
146
 
        this.scale_button.unbind();
147
 
        this.scale_button.bind('click',  $.proxy(this.earthMinimize,  this));
148
 
    },
149
 
 
150
 
    scaleContainerDrag: function() {
151
 
        this.scale_container.css({
152
 
            'border'        : '1px solid #888'
153
 
        });
154
 
    },
155
 
 
156
 
    scaleContainerDragTo: function(containerX, containerY) {
157
 
        this.scale_container.css({
158
 
            'position' : 'absolute',
159
 
            'top'      : containerY+'px',
160
 
            'left'     : containerX+'px',
161
 
            'border'   : '1px solid #888'
162
 
        });
163
 
    },
164
 
 
165
 
    scaleContainerDragStop: function(event) {
166
 
        var coords;
167
 
 
168
 
        coords = new HelioviewerMouseCoordinates(Helioviewer.userSettings.get("state.imageScale"), 959.705, false);
169
 
        coords = coords.computeMouseCoords(this.scale_container.offset().left, this.scale_container.offset().top)
170
 
 
171
 
        // Snap back to docked position if dragged outside of Viewport bounds
172
 
        if ( this.scale_container.position().left <= 0 ||
173
 
             this.scale_container.position().left+this.scale_container.width() >= this.scale_container.parent().width()  ||
174
 
             this.scale_container.position().top+this.scale_container.height() >= this.scale_container.parent().height() ||
175
 
             this.scale_container.position().top  <= 0 ) {
176
 
 
177
 
            this.earthMaximize();
178
 
        }
179
 
        else {
180
 
            Helioviewer.userSettings.set("state.scale",     true);
181
 
            Helioviewer.userSettings.set("state.scaleType",'earth');
182
 
            Helioviewer.userSettings.set("state.scaleX",    coords.x);
183
 
            Helioviewer.userSettings.set("state.scaleY",    coords.y);
184
 
            Helioviewer.userSettings.set("state.containerX",this.scale_container.position().left);
185
 
            Helioviewer.userSettings.set("state.containerY",this.scale_container.position().top);
186
 
        }
187
 
    },
188
 
 
189
 
 
190
 
    _earthDiameterInPixels: function() {
191
 
        this.imageScale  = Helioviewer.userSettings.get("state.imageScale");
192
 
        this.earthDiameterInPixels = Math.round(2 * this._earthSunRadiusFraction * (this._rsunInArcseconds / this.imageScale));
193
 
    },
194
 
 
195
 
    _getScaleSettings: function() {
196
 
        this.scale      = Helioviewer.userSettings.get("state.scale");
197
 
        this.scaleType  = Helioviewer.userSettings.get("state.scaleType");
198
 
        this.scaleX     = Helioviewer.userSettings.get("state.scaleX");
199
 
        this.scaleY     = Helioviewer.userSettings.get("state.scaleY");
200
 
        this.containerX = Helioviewer.userSettings.get("state.containerX");
201
 
        this.containerY = Helioviewer.userSettings.get("state.containerY");
202
 
    },
203
 
 
204
 
    display: function() {
205
 
        this._getScaleSettings();
206
 
 
207
 
        if ( this.scale === false ) {
208
 
            this.earthMinimize();
209
 
        }
210
 
        else {
211
 
 
212
 
            if ( this.scaleX == 0 || this.scaleY == 0 ) {
213
 
                this.earthMaximize();
214
 
            }
215
 
            else {
216
 
                this.scaleContainerDragTo(this.containerX, this.containerY);
217
 
            }
218
 
        }
219
 
 
220
 
        $(this.scale_container).css({
221
 
            'display'  :'block'
222
 
        });
223
 
    }
224
 
});