source: Dev/branches/rest-dojo-ui/client/dojox/gauges/GlossyHorizontalGauge.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.3 KB
Line 
1define(["dojo/_base/declare","dojo/_base/connect","dojo/_base/lang","dojo/_base/Color","dojox/gfx","./BarGauge","./BarCircleIndicator","./GlossyHorizontalGaugeMarker"],
2  function(declare, connect, lang, Color, gfx, BarGauge, BarCircleIndicator, GlossyHorizontalGaugeMarker) {
3
4
5var NumberUtils
6
7/*=====
8        BarGauge = dojox.gauges.BarGauge;
9=====*/
10
11return declare("dojox.gauges.GlossyHorizontalGauge", [BarGauge], {
12        // summary:
13        //              Represents an horizontal bar gauge with a glossy appearance.
14        //
15        // example:
16        //      |       <div dojoType="dojox.gauges.GlossyHorizontalGauge"
17        //      |               id="testGauge"
18        //      |               width="500"
19        //      |               height="100"
20        //      |               min="0"
21        //      |               max="100"
22        //      |               value="0"
23        //      |               majorTicksInterval="10"
24        //      |               majorTicksColor="#c4c4c4"
25        //      |               minorTicksInterval="5"
26        //      |               minorTicksColor="#c4c4c4"
27        //      |               color="black"
28        //      |               markerColor="#c4c4c4"
29        //      |               font="normal normal normal 10pt sans-serif"
30        //      |               noChange="true"
31        //      |               title="title"
32        //      |               scalePrecision="0"
33        //      |       >
34        //      |       </div>
35
36
37        // the type of default indicator to create
38        _defaultIndicator: BarCircleIndicator,
39       
40        // color: String
41        //              The main color of the gauge.
42        color: 'black',
43       
44        // needleColor: Color
45        //              The main color of the needle.
46        markerColor: 'black',
47       
48        // majorTicksInterval: Number
49        //              Interval between major ticks
50        majorTicksInterval: 10,
51       
52        // _majorTicksLength: Number
53        //              Major tick size, at design
54        _majorTicksLength: 10,
55       
56        // majorTicksColor: Color
57        //              Color of major tick marks
58        majorTicksColor: '#c4c4c4',
59       
60        // minorTicksInterval: Number
61        //              Interval between minor ticks
62        minorTicksInterval: 5,
63       
64        // _minorTicksLength: Number
65        //              Minor tick size, at design
66        _minorTicksLength: 6,
67       
68        // minorTicksColor: Color
69        //              Color of minor tick marks
70        minorTicksColor: '#c4c4c4',
71       
72        // value: Number
73        //              The value of the gauge.
74        value: 0,
75       
76        // noChange: Boolean
77        //              Indicates if the gauge reacts to touch events
78        noChange: false,
79       
80        // title: String
81        //              The title displayed in the needle's tooltip
82        title: "",
83       
84        // font: Object
85        //              The font of the gauge
86        font: "normal normal normal 10pt serif",
87       
88        // scalePrecision: Number
89        //              The precision for the formatting of numbers in the scale (default is 0)
90        scalePrecision: 0,
91       
92        _font: null,
93       
94        _margin: 2,
95        _minBorderWidth: 2,
96        _maxBorderWidth: 6,
97        _tickLabelOffset: 5,
98        _designHeight: 100,
99       
100        constructor: function(){
101                this.min = 0;
102                this.max = 100;
103        },
104       
105        startup: function(){
106                this.inherited(arguments);
107               
108                if (this._gaugeStarted) return;
109               
110                this._gaugeStarted = true;
111               
112                var scale = this.height / this._designHeight;
113               
114                this._minorTicksLength = this._minorTicksLength * scale;
115                this._majorTicksLength = this._majorTicksLength * scale;
116               
117                var font = this._font;
118                this._computeDataRectangle();
119               
120                // computing scale height
121               
122                var th = gfx.normalizedLength(font.size);
123                var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength);
124                // indicator in the middle of the gauge
125                var yOffset = Math.max(0, (this.height - scaleHeight) / 2);
126               
127                this.addRange({
128                        low: this.min ? this.min : 0,
129                        high: this.max ? this.max : 100,
130                        color: [0, 0, 0, 0]
131                });
132               
133                this.setMajorTicks({
134                        fixedPrecision: true,
135                        precision: this.scalePrecision,
136                        font: font,
137                        labelPlacement: 'inside',
138                        offset: yOffset - this._majorTicksLength / 2,
139                        interval: this.majorTicksInterval,
140                        length: this._majorTicksLength,
141                        color: this.majorTicksColor
142               
143                });
144               
145                this.setMinorTicks({
146                        labelPlacement: 'inside',
147                        offset: yOffset - this._minorTicksLength / 2,
148                        interval: this.minorTicksInterval,
149                        length: this._minorTicksLength,
150                        color: this.minorTicksColor
151               
152                });
153                this._needle = new GlossyHorizontalGaugeMarker({
154                        hideValue: true,
155                        title: this.title,
156                        noChange: this.noChange,
157                        offset: yOffset,
158                        color: this.markerColor,
159                        value: this.value
160                });
161                this.addIndicator(this._needle);
162               
163                connect.connect(this._needle, "valueChanged", lang.hitch(this, function(){
164                        this.value = this._needle.value;
165                        this.onValueChanged();
166                }));
167        },
168       
169        _layoutGauge: function(){
170                // summary:
171                //              Layout the gauge elements depending on the various parameters (size, font, tick length..)
172               
173                if (!this._gaugeStarted)
174                        return;
175               
176                var font = this._font;
177                this._computeDataRectangle();
178                var th = gfx.normalizedLength(font.size);
179                var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength);
180                // indicator in the middle of the gauge
181                var yOffset = Math.max(0, (this.height - scaleHeight) / 2);
182               
183               
184                this._setMajorTicksProperty({
185                        fixedPrecision: true,
186                        precision: this.scalePrecision,
187                        font: font,
188                        offset: yOffset - this._majorTicksLength / 2,
189                        interval: this.majorTicksInterval,
190                        length: this._majorTicksLength
191                });
192               
193                this._setMinorTicksProperty({
194                        offset: yOffset - this._minorTicksLength / 2,
195                        interval: this.minorTicksInterval,
196                        length: this._minorTicksLength
197                });
198               
199                this.removeIndicator(this._needle);
200                this._needle.offset = yOffset;
201                this.addIndicator(this._needle);
202        },
203       
204        _formatNumber: function(val){
205            var NumberUtils = this._getNumberModule();
206                if(NumberUtils){ // use internationalization if loaded
207                        return NumberUtils.format(val, {
208                                places: this.scalePrecision
209                        });
210                }else{
211                        return val.toFixed(this.scalePrecision);
212                }
213        },
214       
215        _computeDataRectangle: function(){
216                // summary:
217                //              Computes the rectangle that defines the data area of the gauge.
218               
219               
220                if (!this._gaugeStarted)
221                        return;
222               
223                var font = this._font;
224                var leftTextMargin = this._getTextWidth(this._formatNumber(this.min), font) / 2;
225                var rightTextMargin = this._getTextWidth(this._formatNumber(this.max), font) / 2;
226                var textMargin = Math.max(leftTextMargin, rightTextMargin);
227               
228                var margin = this._getBorderWidth() + Math.max(this._majorTicksLength, this._majorTicksLength) / 2 + textMargin;
229                this.dataHeight = this.height;
230                this.dataY = 0;
231                this.dataX = margin + this._margin;
232                this.dataWidth = Math.max(0, this.width - 2 * this.dataX);
233        },
234       
235        _getTextWidth: function(s, font){
236                return gfx._base._getTextBox(s, {
237                        font: gfx.makeFontString(gfx.makeParameters(gfx.defaultFont, font))
238                }).w ||
239                0;
240        },
241       
242        _getBorderWidth: function(){
243                // summary:
244                //              Computes the width of the border surrounding the gauge
245                return Math.max(this._minBorderWidth, Math.min(this._maxBorderWidth, this._maxBorderWidth * this.height / this._designHeight));
246        },
247       
248        drawBackground: function(group){
249                // summary:
250                //              Draws the background of the gauge
251                // group: dojox.gfx.Group
252                //              The GFX group where the background must be drawn
253                if (this._gaugeBackground){
254                        return;
255                }
256               
257                var lighterColor = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
258                this._gaugeBackground = group.createGroup();
259
260                var borderWidth = this._getBorderWidth();
261                var margin = this._margin;
262                var w = this.width;
263                var h = this.height;
264                var radius = Math.min(h / 4, 23);
265                this._gaugeBackground.createRect({
266                        x: margin,
267                        y: margin,
268                        width: Math.max(0, w - 2 * margin),
269                        height: Math.max(0, h - 2 * margin),
270                        r: radius
271                }).setFill(this.color);
272               
273                var left = margin + borderWidth;
274                var right = w - borderWidth - margin;
275                var top = margin + borderWidth;
276                var w2 = w - 2 * borderWidth - 2 * margin;
277                var h2 = h - 2 * borderWidth - 2 * margin;
278                if (w2 <= 0 || h2 <= 0)
279                        return;
280                radius = Math.min(radius, w2 / 2);
281                radius = Math.min(radius, h2 / 2);
282                this._gaugeBackground.createRect({
283                        x: left,
284                        y: top,
285                        width: w2,
286                        height: h2,
287                        r: radius
288                }).setFill({
289                        type: "linear",
290                        x1: left,
291                        y1: 0,
292                        x2: left,
293                        y2: h - borderWidth - margin,
294                        colors: [{
295                                offset: 0,
296                                color: lighterColor
297                        }, {
298                                offset: .2,
299                                color: this.color
300                        }, {
301                                offset: .8,
302                                color: this.color
303                        }, {
304                                offset: 1,
305                                color: lighterColor
306                        }]
307                });
308               
309                var f = 4 * (Math.sqrt(2) - 1) / 3 * radius;
310                this._gaugeBackground.createPath({
311                        path: 'M' + left + ' ' + (top + radius) +
312                        'C' +
313                        left +
314                        ' ' +
315                        (top + radius - f) +
316                        ' ' +
317                        (left + radius - f) +
318                        ' ' +
319                        top +
320                        ' ' +
321                        (left + radius) +
322                        ' ' +
323                        top +
324                        'L' +
325                        (right - radius) +
326                        ' ' +
327                        top +
328                        'C' +
329                        (right - radius + f) +
330                        ' ' +
331                        top +
332                        ' ' +
333                        right +
334                        ' ' +
335                        (top + radius - f) +
336                        ' ' +
337                        right +
338                        ' ' +
339                        (top + radius) +
340                        'L' +
341                        right +
342                        ' ' +
343                        (top + h / 2) +
344                        'L' +
345                        left +
346                        ' ' +
347                        (top + h / 3) +
348                        'Z'
349                }).setFill({
350                        type: "linear",
351                        x1: left,
352                        y1: top,
353                        x2: left,
354                        y2: top + this.height / 2,
355                        colors: [{
356                                offset: 0,
357                                color: lighterColor
358                        }, {
359                                offset: 1,
360                                color: Color.blendColors(new Color(this.color), new Color('white'), 0.2)
361                        }]
362                });
363        },
364       
365        onValueChanged: function(){
366                // summary:
367                //              Callback when the value of the gauge has changed.
368       
369        },
370       
371        //*******************************************************************************************
372        //* Property getters and setters
373        //*******************************************************************************************
374       
375        _setColorAttr: function(color){
376                // summary:
377                //              Sets the main color of the gauge
378                // color: String
379                //      The color               
380                this.color = color ? color : 'black';
381                if (this._gaugeBackground && this._gaugeBackground.parent)
382                        this._gaugeBackground.parent.remove(this._gaugeBackground);
383               
384                this._gaugeBackground = null;
385                this.draw();
386        },
387       
388        _setMarkerColorAttr: function(color){
389                // summary:
390                //              Sets the main color of the marker
391                // color: String
392                //      The color
393                this.markerColor = color;
394                if (this._needle){
395                        this.removeIndicator(this._needle);
396                        this._needle.color = color;
397                        this._needle.shape = null;
398                        this.addIndicator(this._needle);
399                }
400        },
401       
402        _setMajorTicksIntervalAttr: function(interval){
403                // summary:
404                //              Sets the interval between major ticks
405                this.majorTicksInterval = interval;
406                this._setMajorTicksProperty({
407                        'interval': this.majorTicksInterval
408                });
409        },
410       
411        setMajorTicksLength: function(length){
412                // summary:
413                //              Sets the size of the major ticks.
414                this._majorTicksLength = length;
415                this._layoutGauge();
416                return this;
417               
418        },
419       
420        getMajorTicksLength: function(){
421                // summary:
422                //              Returns the size of the major ticks.
423                return this._majorTicksLength;
424        },
425       
426        _setMajorTicksColorAttr: function(color){
427                // summary:
428                //              Sets the color of the major ticks.
429                this.majorTicksColor = color;
430                this._setMajorTicksProperty({
431                        'color': this.majorTicksColor
432                });
433        },
434       
435        _setMajorTicksProperty: function(prop){
436                if (this.majorTicks == null){
437                        return;
438                }
439                lang.mixin(this.majorTicks, prop);
440                this.setMajorTicks(this.majorTicks);
441        },
442       
443        _setMinorTicksIntervalAttr: function(interval){
444                // summary:
445                //              Sets the interval between minor ticks
446                this.minorTicksInterval = interval;
447                this._setMinorTicksProperty({
448                        'interval': this.minorTicksInterval
449                });
450        },
451       
452        setMinorTicksLength: function(length){
453                // summary:
454                //              Sets the size of the minor ticks.
455                this._minorTicksLength = length;
456                this._layoutGauge();
457                return this;
458        },
459       
460        getMinorTicksLength: function(){
461                // summary:
462                //              Gets the size of the minor ticks.
463                return this._minorTicksLength;
464        },
465       
466        _setMinorTicksColorAttr: function(color){
467                // summary:
468                //              Sets the color of the minor ticks.
469                this.minorTicksColor = color;
470                this._setMinorTicksProperty({
471                        'color': this.minorTicksColor
472                });
473        },
474       
475        _setMinorTicksProperty: function(prop){
476                if (this.minorTicks == null){
477                        return;
478                }
479                lang.mixin(this.minorTicks, prop);
480                this.setMinorTicks(this.minorTicks);
481        },
482       
483        _setMinAttr: function(min){
484                this.min = min;
485                this._computeDataRectangle();
486                if (this.majorTicks != null)
487                        this.setMajorTicks(this.majorTicks);
488                if (this.minorTicks != null)
489                        this.setMinorTicks(this.minorTicks);
490                this.draw();
491        },
492       
493        _setMaxAttr: function(max){
494                this.max = max;
495                this._computeDataRectangle();
496                if (this.majorTicks != null)
497                        this.setMajorTicks(this.majorTicks);
498                if (this.minorTicks != null)
499                        this.setMinorTicks(this.minorTicks);
500                this.draw();
501        },
502       
503        _setValueAttr: function(value){
504                // summary:
505                //              Changes the value of the gauge
506                // value: Number
507                //              The new value for the gauge.                   
508               
509                value = Math.min(this.max, value);
510                value = Math.max(this.min, value);
511                this.value = value;
512                if (this._needle){
513                        // update will not work if noChange is true.
514                        var noChange = this._needle.noChange;
515                        this._needle.noChange = false;
516                        this._needle.update(value);
517                        this._needle.noChange = noChange;
518                }
519        },
520       
521        _setScalePrecisionAttr: function(value){
522                // summary:
523                //              Changes precision of the numbers in the scale of the gauge
524                // value: Number
525                //              The new value
526                this.scalePrecision = value;
527                this._layoutGauge();
528        },
529       
530        _setNoChangeAttr: function(value){
531                // summary:
532                //              Indicates if the value of the gauge can be changed or not
533                // value: boolean
534                //              true indicates that the gauge's value cannot be changed
535                this.noChange = value;
536                if (this._needle)
537                        this._needle.noChange = this.noChange;
538        },
539       
540        _setTitleAttr: function(value){
541                // summary:
542                //              Sets the title displayed by the needle's tooltip .
543                // value: String
544                //              the title
545               
546                this.title = value;
547                if (this._needle){
548                        this._needle.title = this.title;
549                }
550        },
551       
552        _setFontAttr: function(font){
553                // summary:
554                //              Sets the font of the gauge
555                // summary:
556                //              Sets the font of the gauge
557                // font: String
558                //              An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif' 
559                //
560               
561                this.font = font;
562                this._font = gfx.splitFontString(font);
563                this._layoutGauge();
564        }
565});
566});
567
Note: See TracBrowser for help on using the repository browser.