source: Dev/trunk/src/client/dojox/gauges/GlossyCircularGauge.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: 6.7 KB
Line 
1define(["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"],
2  function(declare, Color, GlossyCircularGaugeBase) {
3
4return declare("dojox.gauges.GlossyCircularGauge", [GlossyCircularGaugeBase], {
5        // summary:
6        //              Represents a circular gauge with a glossy appearance.
7        //
8        // example:
9        //      |       <div    dojoType="dojox.gauges.GlossyCircularGauge"
10        //      |               id="testGauge"
11        //      |               width="300"
12        //      |               height="300"
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        //      |               needleColor="#c4c4c4"
22        //      |               font="normal normal normal 10pt sans-serif"
23        //      |               textIndicatorFont="normal normal normal 20pt sans-serif"
24        //      |               textIndicatorVisible="true"
25        //      |               textIndicatorColor="#c4c4c4"
26        //      |               majorTicksLabelPlacement="inside"|"outside"
27        //      |               noChange="true"
28        //      |               title="title"
29        //      |               scalePrecision="0"
30        //      |               textIndicatorPrecision="0">
31        //      |       </div>
32
33        _designWidth : 376.25,
34        _designHeight : 382.5,
35        _designCx : 187.19173,
36        _designCy : 187.81589,
37        _designTextIndicatorX : 187.19173,
38        _designTextIndicatorY : 267.81589,     
39       
40
41        constructor: function(){
42                // summary:
43                //              Creates a new GlossyCircularGauge.
44                this.startAngle= -135;
45                this.endAngle= 135;
46                this.min = 0;
47                this.max = 100;
48        },
49
50        drawBackground: function(group){
51                // summary:
52                //              Draws the background of the gauge.
53                // group: dojox.gfx.Group
54                //              The GFX group where the background must be drawn
55
56                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
57                var transform = {
58                                xx: scale,
59                                xy: 0,
60                                yx: 0,
61                                yy: scale,
62                                dx: (-161) * scale + (this.width - scale * this._designWidth) / 2,
63                                dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2
64
65                };
66               
67                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 );
68                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 );         
69               
70               
71                if (this._gaugeBackground){
72                        this._gaugeBackground.setTransform(transform);
73                        return;
74                }
75                this._gaugeBackground = group.createGroup();
76                this._gaugeBackground.setTransform(transform);
77
78                this._gaugeBackground.createPath({
79                        path: "M0 0 C0.028 -82.393 -66.741 -149.207 -149.134 -149.235 C-231.526 -149.264 -298.341 -82.494 -298.369 -0.101 L-298.369 0 C-298.397 82.393 -231.627 149.207 -149.235 149.235 C-66.843 149.264 -0.028 82.494 0 0.102 L0 0 Z"
80                }).setTransform({
81                        xx: 1.25,
82                        xy: 0,
83                        yx: 0,
84                        yy: -1.25,
85                        dx: 535.09494,
86                        dy: 452.53442
87                }).setFill(this.color);
88
89                this._gaugeBackground.createPath({
90                        path: "M451.354 450.434 C451.382 374.317 389.698 312.593 313.581 312.566 C237.464 312.54 175.739 374.224 175.713 450.341 L175.713 450.434 C175.688 526.551 237.372 588.275 313.487 588.302 C389.604 588.327 451.329 526.644 451.354 450.527 L451.354 450.434 Z"
91                }).setTransform({
92                        xx: 1.25,
93                        xy: 0,
94                        yx: 0,
95                        yy: -1.25,
96                        dx: -43.30358,
97                        dy: 1015.57642
98                }).setFill({
99                        type: "linear",
100                        x1: 175.688,
101                        y1: 312.54001,
102                        x2: 175.688,
103                        y2: 422.85482,
104                        colors: [
105                                 {offset: 0, color: lighterColor1},
106                                 {offset: 1, color: this.color}
107                                 ]
108                });
109
110                this._gaugeBackground.createPath({
111                        path: "M451.321 453.375 C449.778 528.175 388.655 588.327 313.491 588.302 C238.359 588.276 177.295 528.135 175.753 453.377 C217.829 442.046 266.246 464.646 315.36 464.646 C364.489 464.646 409.364 442.041 451.321 453.375"
112                }).setTransform({
113                        xx: 1.25,
114                        xy: 0,
115                        yx: 0,
116                        yy: -1.25,
117                        dx: -43.30358,
118                        dy: 1015.57642
119                }).setFill({
120                        type: "linear",
121                        x1: 175.75301,
122                        y1: 442.04099,
123                        x2: 175.75301,
124                        y2: 588.32703,
125                        colors: [
126                                 {offset: 0, color: this.color},
127                                 {offset: 1, color: lighterColor2}
128                                 ]
129                });
130
131                this._gaugeBackground.createPath({
132                        path: "M0 0 C-1.543 74.8 -62.666 134.952 -137.83 134.927 C-212.962 134.901 -274.026 74.76 -275.568 0.002 C-233.492 -11.329 -185.075 11.271 -135.961 11.271 C-86.832 11.271 -41.957 -11.334 0 0"
133                }).setTransform({
134                        xx: 1.25,
135                        xy: 0,
136                        yx: 0,
137                        yy: -1.25,
138                        dx: 520.84441,
139                        dy: 448.85767
140                }).setFill([255,255,255,0.12157]);
141
142        },
143
144        drawForeground: function(group){
145                // summary:
146                //              Draws the foreground of the gauge.
147                // group: dojox.gfx.Group
148                //              The GFX group where the foreground must be drawn
149
150                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
151                var transform = {
152                                xx: scale,
153                                xy: 0,
154                                yx: 0,
155                                yy: scale,
156                                dx: (-160) * scale + (this.width - scale * this._designWidth) / 2,
157                                dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2
158                };
159               
160                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 );
161                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 );         
162                               
163                if (this._foreground){
164                        this._foreground.setTransform(transform);
165                        return;
166                }
167                this._foreground = group.createGroup();
168                this._foreground.setTransform(transform);
169
170                var group1 = this._foreground.createGroup();
171                group1.setTransform({
172                        xx: 1.25,
173                        xy: 0,
174                        yx: 0,
175                        yy: -1.25,
176                        dx: -43.30358,
177                        dy: 1015.57642
178                });
179                group1.createPath({
180                        path: "M0 0 C0.004 -12.579 -10.189 -22.779 -22.768 -22.784 C-35.349 -22.788 -45.549 -12.594 -45.553 -0.016 L-45.553 0 C-45.558 12.579 -35.363 22.779 -22.783 22.784 C-10.205 22.788 -0.004 12.594 0 0.015 L0 0 Z"
181                }).setTransform({
182                        xx: 1,
183                        xy: 0,
184                        yx: 0,
185                        yy: 1,
186                        dx: 336.31049,
187                        dy: 451.43359
188                }).setFill(this.color);
189
190                group1.createPath({
191                        path: "M333.443 451.434 C333.446 440.438 324.537 431.523 313.541 431.519 C302.546 431.515 293.63 440.425 293.626 451.42 L293.626 451.434 C293.622 462.429 302.532 471.345 313.527 471.349 C324.523 471.353 333.439 462.442 333.443 451.447 L333.443 451.434 Z"
192                }).setFill({
193                        type: "linear",
194                        x1: 293.62201,
195                        y1: 431.51501,
196                        x2: 293.62201,
197                        y2: 451.43401,
198                        colors: [
199                                 {offset: 0, color: lighterColor1},
200                                 {offset: 1, color: this.color}
201                                 ]
202                });
203
204                group1.createPath({
205                        path: "M333.438 451.858 C333.215 462.663 324.386 471.353 313.528 471.349 C302.675 471.345 293.854 462.658 293.632 451.858 C299.709 450.222 306.702 453.486 313.799 453.486 C320.895 453.486 327.377 450.221 333.438 451.858"
206                }).setFill({
207                        type: "linear",
208                        x1: 293.63199,
209                        y1: 450.22101,
210                        x2: 293.63199,
211                        y2: 471.353,
212                        colors: [
213                                 {offset: 0, color: this.color},
214                                 {offset: 1, color: lighterColor2}
215                                 ]
216                });
217
218                group1.createPath({
219                        path: "M0 0 C-0.223 10.805 -9.052 19.494 -19.909 19.49 C-30.763 19.486 -39.583 10.799 -39.806 0 C-33.729 -1.636 -26.735 1.628 -19.639 1.628 C-12.543 1.628 -6.061 -1.638 0 0"
220                }).setTransform({
221                        xx: 1,
222                        xy: 0,
223                        yx: 0,
224                        yy: 1,
225                        dx: 333.4375,
226                        dy: 451.8584
227                }).setFill([255,255,255,0.12157]);
228
229        }
230
231});
232});
Note: See TracBrowser for help on using the repository browser.