source: Dev/branches/rest-dojo-ui/client/dojox/gauges/GlossyCircularGaugeBase.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

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