source: Dev/trunk/src/client/dojox/gauges/GlossyCircularGaugeBase.js @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 13.8 KB
Line 
1define(["dojo/_base/declare","dojo/_base/lang","dojo/_base/connect","dojox/gfx","./AnalogGauge","./AnalogCircleIndicator","./TextIndicator","./GlossyCircularGaugeNeedle"],
2function(declare, lang, connect, gfx, AnalogGauge, AnalogCircleIndicator, TextIndicator, GlossyCircularGaugeNeedle) {
3
4return declare("dojox.gauges.GlossyCircularGaugeBase", [AnalogGauge], {
5        // summary:
6        //              The base class for GlossyCircularGauge and GlossySemiCircularGauge.
7       
8       
9        //_defaultIndicator : _Indicator
10        //              the type of default indicator to create
11        _defaultIndicator: AnalogCircleIndicator,
12       
13        // _needle: dojox.gauges.GlossyCircularGaugeNeedle
14        //              the needle of this circular gauge
15        _needle: null,
16       
17        // _textIndicator: dojox.gauges.TextIndicator
18        //              the text displaying the gauge's value
19        _textIndicator: null,
20       
21        _textIndicatorAdded: false,
22       
23        // _range: Object
24        //              the range of this gauge
25        _range: null,
26       
27        // value: Number
28        //              The value of the gauge.
29        value: 0,
30       
31        // color: String
32        //              The main color of the gauge.
33        color: 'black',
34       
35        // needleColor: Color
36        //              The main color of the needle.
37        needleColor: '#c4c4c4',
38       
39        // textIndicatorFont: String
40        //              The font of the text indicator
41        textIndicatorFont: "normal normal normal 20pt serif",
42       
43        // textIndicatorVisible: Boolean
44        //              Indicates if the text indicator is visible
45        textIndicatorVisible: true,
46       
47        // textIndicatorColor: Color
48        //               The color of the text indicator
49        textIndicatorColor: '#c4c4c4',
50       
51        // _majorTicksOffset: Number
52        //              Distance, at design, from gauge's center to major ticks
53        _majorTicksOffset: 130,
54       
55        // majorTicksInterval: Number
56        //              Interval between major ticks
57        majorTicksInterval: 10,
58       
59        // _majorTicksLength: Number
60        //              Major tick size, at design
61        _majorTicksLength: 5,
62       
63        // majorTicksColor: Color
64        //              Color of major tick marks
65        majorTicksColor: '#c4c4c4',
66       
67        // majorTicksLabelPlacement: String
68        //              Placement of major tick labels
69        majorTicksLabelPlacement: 'inside',
70       
71        // _minorTicksOffset: Number
72        //              Distance, at design, from gauge's center to minor ticks
73        _minorTicksOffset: 130,
74       
75        // minorTicksInterval: Number
76        //              Interval between minor ticks
77        minorTicksInterval: 5,
78       
79        // _minorTicksLength: Number
80        //              Minor tick size, at design
81        _minorTicksLength: 3,
82       
83        // minorTicksColor: Color
84        //              Color of minor tick marks
85        minorTicksColor: '#c4c4c4',
86       
87        // noChange: Boolean
88        //              Indicates if the gauge reacts to touch events
89        noChange: false,
90       
91        // title: String
92        //              The title displayed in the needle's tooltip
93        title: "",
94       
95        // font: Object
96        //               The font of the gauge
97        font: "normal normal normal 10pt serif",
98       
99        // scalePrecision: Number
100        //              The precision for the formatting of numbers in the scale (default is 0)
101        scalePrecision: 0,
102       
103        // textIndicatorPrecision: Number
104        //               The precision for the formatting of numbers in the text indicator (default is 0)
105        textIndicatorPrecision: 0,
106       
107        _font: null,
108       
109       
110        constructor: function(){
111                this.startAngle = -135;
112                this.endAngle = 135;
113                this.min = 0;
114                this.max = 100;
115        },
116       
117        startup: function(){
118                // summary:
119                //              Overrides AnalogGauge.startup
120                this.inherited(arguments);
121               
122                //just in case someone calls the startup twice.
123
124                if (this._needle) return;
125               
126                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
127                this.cx = scale * this._designCx + (this.width - scale * this._designWidth) / 2;
128                this.cy = scale * this._designCy + (this.height - scale * this._designHeight) / 2;
129               
130                this._range = {
131                        low: this.min ? this.min : 0,
132                        high: this.max ? this.max : 100,
133                        color: [255, 255, 255, 0]
134                };
135                this.addRange(this._range);
136               
137                this._majorTicksOffset = this._minorTicksOffset = scale * this._majorTicksOffset;
138                this._majorTicksLength = scale * this._majorTicksLength;
139                this._minorTicksLength = scale * this._minorTicksLength;
140               
141                // creates and add the major ticks
142                this.setMajorTicks({
143                        fixedPrecision: true,
144                        precision: this.scalePrecision,
145                        font: this._font,
146                        offset: this._majorTicksOffset,
147                        interval: this.majorTicksInterval,
148                        length: this._majorTicksLength,
149                        color: this.majorTicksColor,
150                        labelPlacement: this.majorTicksLabelPlacement
151                });
152               
153                // creates and add the minor ticks
154                this.setMinorTicks({
155                        offset: this._minorTicksOffset,
156                        interval: this.minorTicksInterval,
157                        length: this._minorTicksLength,
158                        color: this.minorTicksColor
159                });
160               
161                // creates and adds the needle
162                this._needle = new GlossyCircularGaugeNeedle({
163                        hideValue: true,
164                        title: this.title,
165                        noChange: this.noChange,
166                        color: this.needleColor,
167                        value: this.value
168                });
169                this.addIndicator(this._needle);
170               
171                // creates and add the text indicator
172                this._textIndicator = new TextIndicator({
173                        x: scale * this._designTextIndicatorX + (this.width - scale * this._designWidth) / 2,
174                        y: scale * this._designTextIndicatorY + (this.height - scale * this._designHeight) / 2,
175                        fixedPrecision: true,
176                        precision: this.textIndicatorPrecision,
177                        color: this.textIndicatorColor,
178                        value: this.value ? this.value : this.min,
179                        align: "middle",
180                        font: this._textIndicatorFont
181                });
182               
183                if (this.textIndicatorVisible){
184                        this.addIndicator(this._textIndicator);
185                        this._textIndicatorAdded = true;
186                }
187               
188                // connect needle and text
189                connect.connect(this._needle, "valueChanged", lang.hitch(this, function(){
190                        this.value = this._needle.value;
191                        this._textIndicator.update(this._needle.value);
192                        this.onValueChanged();
193                }));
194               
195        },
196       
197       
198        onValueChanged: function(){
199                // summary:
200                //              Invoked when the value of the gauge has changed.
201       
202        },
203       
204        //*******************************************************************************************
205        //* Property getters and setters
206        //*******************************************************************************************
207       
208        _setColorAttr: function(color){
209                // summary:
210                //              Sets the main color of the gauge
211                // color: String
212                //              The color
213                this.color = color ? color : 'black';
214                if (this._gaugeBackground && this._gaugeBackground.parent)
215                        this._gaugeBackground.parent.remove(this._gaugeBackground);
216                if (this._foreground && this._foreground.parent)
217                        this._foreground.parent.remove(this._foreground);
218                this._gaugeBackground = null;
219                this._foreground = null;
220                this.draw();
221        },
222       
223        _setNeedleColorAttr: function(color){
224                // summary:
225                //              Sets the main color of the needle
226                // color: String
227                //              The color
228                this.needleColor = color;
229                if (this._needle){
230                        this.removeIndicator(this._needle);
231                        this._needle.color = this.needleColor;
232                        this._needle.shape = null;
233                        this.addIndicator(this._needle);
234                }
235        },
236       
237        _setTextIndicatorColorAttr: function(color){
238                // summary:
239                //              Sets the color of text indicator display the gauge's value
240                // color: String
241                //              The color
242                this.textIndicatorColor = color;
243                if (this._textIndicator){
244                        this._textIndicator.color = this.textIndicatorColor;
245                        this.draw();
246                }
247        },
248       
249        _setTextIndicatorFontAttr: function(font){
250                // summary:
251                //              Sets the font of the text indicator
252                // font: String
253                //              An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif' 
254                //
255               
256                this.textIndicatorFont = font;
257                this._textIndicatorFont = gfx.splitFontString(font);
258                if (this._textIndicator){
259                        this._textIndicator.font = this._textIndicatorFont;
260                        this.draw();
261                }
262        },
263       
264        setMajorTicksOffset: function(offset){
265                // summary:
266                //              Sets the distance from gauge's center to major ticks
267                this._majorTicksOffset = offset;
268                this._setMajorTicksProperty({
269                        'offset': this._majorTicksOffset
270                });
271                return this;
272        },
273       
274        getMajorTicksOffset: function(){
275                // summary:
276                //              Return the distance from gauge's center to major ticks
277                return this._majorTicksOffset;
278        },
279       
280        _setMajorTicksIntervalAttr: function(interval){
281                // summary:
282                //              Sets the interval between major ticks
283                this.majorTicksInterval = interval;
284                this._setMajorTicksProperty({
285                        'interval': this.majorTicksInterval
286                });
287        },
288       
289        setMajorTicksLength: function(length){
290                // summary:
291                //              Sets the size of the major ticks.
292                this._majorTicksLength = length;
293                this._setMajorTicksProperty({
294                        'length': this._majorTicksLength
295                });
296                return this;
297        },
298       
299        getMajorTicksLength: function(){
300                // summary:
301                //              Returns the size of the major ticks.
302                return this._majorTicksLength;
303        },
304       
305        _setMajorTicksColorAttr: function(color){
306                // summary:
307                //              Sets the color of the major ticks.
308                this.majorTicksColor = color;
309                this._setMajorTicksProperty({
310                        'color': this.majorTicksColor
311                });
312        },
313       
314        _setMajorTicksLabelPlacementAttr: function(placement){
315                // summary:
316                //              Sets the placement of labels relatively to major ticks.
317                // placement: String
318                //              'inside' or 'outside'
319                this.majorTicksLabelPlacement = placement;
320                this._setMajorTicksProperty({
321                        'labelPlacement': this.majorTicksLabelPlacement
322                });
323        },
324       
325        _setMajorTicksProperty: function(prop){
326                if (this.majorTicks){
327                        lang.mixin(this.majorTicks, prop);
328                        this.setMajorTicks(this.majorTicks);
329                }
330        },
331       
332        setMinorTicksOffset: function(offset){
333                // summary:
334                //              Sets the distance from gauge's center to minor ticks
335                this._minorTicksOffset = offset;
336                this._setMinorTicksProperty({
337                        'offset': this._minorTicksOffset
338                });
339                return this;
340        },
341       
342        getMinorTicksOffset: function(){
343                // summary:
344                //              Returns the distance from gauge's center to minor ticks
345                return this._minorTicksOffset;
346        },
347       
348        _setMinorTicksIntervalAttr: function(interval){
349                // summary:
350                //              Sets the interval between minor ticks
351                this.minorTicksInterval = interval;
352                this._setMinorTicksProperty({
353                        'interval': this.minorTicksInterval
354                });
355        },
356       
357        setMinorTicksLength: function(length){
358                // summary:
359                //              Sets the size of the minor ticks.
360                this._minorTicksLength = length;
361                this._setMinorTicksProperty({
362                        'length': this._minorTicksLength
363                });
364                return this;
365        },
366       
367        getMinorTicksLength: function(){
368                // summary:
369                //              Return the size of the minor ticks.
370                return this._minorTicksLength;
371        },
372       
373        _setMinorTicksColorAttr: function(color){
374                // summary:
375                //              Sets the color of the minor ticks.
376                this.minorTicksColor = color;
377                this._setMinorTicksProperty({
378                        'color': this.minorTicksColor
379                });
380        },
381       
382        _setMinorTicksProperty: function(prop){
383                if (this.minorTicks){
384                        lang.mixin(this.minorTicks, prop);
385                        this.setMinorTicks(this.minorTicks);
386                }
387        },
388       
389        _setMinAttr: function(min){
390                this.min = min;
391       
392                if (this.majorTicks != null)
393                        this.setMajorTicks(this.majorTicks);
394                if (this.minorTicks != null)
395                        this.setMinorTicks(this.minorTicks);
396                this.draw();
397                this._updateNeedle();
398        },
399       
400        _setMaxAttr: function(max){
401                this.max = max;
402       
403                if (this.majorTicks != null)
404                        this.setMajorTicks(this.majorTicks);
405                if (this.minorTicks != null)
406                        this.setMinorTicks(this.minorTicks);
407                this.draw();
408                this._updateNeedle();
409        },
410       
411        _setScalePrecisionAttr: function(value){
412                // summary:
413                //              Changes precision of the numbers in the scale of the gauge
414                // value: Number
415                //              The new value
416                this.scalePrecision = value;
417                this._setMajorTicksProperty({
418                        'precision': value
419                });
420        },
421       
422        _setTextIndicatorPrecisionAttr: function(value){
423                // summary:
424                //              Changes precision of the numbers in the text indicator
425                // value: Number
426                //              The new value
427                this.textIndicatorPrecision = value;
428                this._setMajorTicksProperty({
429                        'precision': value
430                });
431        },
432       
433        _setValueAttr: function(value){
434                // summary:
435                //              Changes the value of the gauge
436                // value: Number
437                //              The new value for the gauge.                   
438               
439                value = Math.min(this.max, value);
440                value = Math.max(this.min, value);
441                this.value = value;
442                if (this._needle){
443                        // update will not work if noChange is true.
444                        var noChange = this._needle.noChange;
445                        this._needle.noChange = false;
446                        this._needle.update(value);
447                        this._needle.noChange = noChange;
448                }
449        },
450       
451        _setNoChangeAttr: function(value){
452                // summary:
453                //              Indicates if the value of the gauge can be changed or not
454                // value: boolean
455                //              true indicates that the gauge's value cannot be changed
456                this.noChange = value;
457                if (this._needle)
458                        this._needle.noChange = this.noChange;
459        },
460       
461        _setTextIndicatorVisibleAttr: function(value){
462                // summary:
463                //              Changes the visibility of the text indicator displaying the gauge's value.
464                // value: boolean
465                //              true to show the indicator, false to hide.
466               
467                this.textIndicatorVisible = value;
468                if (this._textIndicator && this._needle){
469                        if (this.textIndicatorVisible && !this._textIndicatorAdded){
470                                this.addIndicator(this._textIndicator);
471                                this._textIndicatorAdded = true;
472                                this.moveIndicatorToFront(this._needle);
473                               
474                        }
475                        else
476                                if (!this.textIndicatorVisible && this._textIndicatorAdded){
477                                        this.removeIndicator(this._textIndicator);
478                                        this._textIndicatorAdded = false;
479                                }
480                }
481        },
482       
483        _setTitleAttr: function(value){
484                // summary:
485                //              Sets the title displayed by the needle's tooltip .
486                // value: String
487                //              the title
488               
489                this.title = value;
490                if (this._needle){
491                        this._needle.title = this.title;
492                }
493        },
494       
495        _setOrientationAttr: function(orientation){
496                // summary:
497                //              Sets the orientation of the gauge
498                // orientation: String
499                //              Either "clockwise" or "cclockwise"     
500               
501                this.orientation = orientation;
502                if (this.majorTicks != null)
503                        this.setMajorTicks(this.majorTicks);
504                if (this.minorTicks != null)
505                        this.setMinorTicks(this.minorTicks);
506                this.draw();
507                this._updateNeedle();
508       
509        },
510       
511        _updateNeedle: function(){
512                // updates the needle with no animation
513                this.value = Math.max(this.min, this.value);
514                this.value = Math.min(this.max, this.value);
515               
516                if (this._needle){
517                        // update will not work if noChange is true.
518                        var noChange = this._needle.noChange;
519                        this._needle.noChange = false;
520                        this._needle.update(this.value, false);
521                        this._needle.noChange = noChange;
522                } // to redraw the needle
523        },
524       
525        _setFontAttr: function(font){
526                // summary:
527                //              Sets the font of the gauge
528                // font: String
529                //              An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif'
530               
531                this.font = font;
532                this._font = gfx.splitFontString(font);
533                this._setMajorTicksProperty({
534                        'font': this._font
535                });
536        }});
537});
Note: See TracBrowser for help on using the repository browser.