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