source: Dev/branches/rest-dojo-ui/client/dojox/gauges/GlossyCircularGauge.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: 6.8 KB
Line 
1define(["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"],
2  function(declare, Color, GlossyCircularGaugeBase) {
3
4/*=====
5        GlossyCircularGaugeBase = dojox.gauges.GlossyCircularGaugeBase;
6=====*/
7
8return declare("dojox.gauges.GlossyCircularGauge", [GlossyCircularGaugeBase], {
9        // summary:
10        //              Represents a circular gauge with a glossy appearance.
11        //
12        // example:
13        //      |       <div    dojoType="dojox.gauges.GlossyCircularGauge"
14        //      |               id="testGauge"
15        //      |               width="300"
16        //      |               height="300"
17        //      |               min="0"
18        //      |               max="100"
19        //      |               value="0"
20        //      |               majorTicksInterval="10"
21        //      |               majorTicksColor="#c4c4c4"
22        //      |               minorTicksInterval="5"
23        //      |               minorTicksColor="#c4c4c4"
24        //      |               color="black"
25        //      |               needleColor="#c4c4c4"
26        //      |               font="normal normal normal 10pt sans-serif"
27        //      |               textIndicatorFont="normal normal normal 20pt sans-serif"
28        //      |               textIndicatorVisible="true"
29        //      |               textIndicatorColor="#c4c4c4"
30        //      |               majorTicksLabelPlacement="inside"|"outside"
31        //      |               noChange="true"
32        //      |               title="title"
33        //      |               scalePrecision="0"
34        //      |               textIndicatorPrecision="0">
35        //      |       </div>
36
37        _designWidth : 376.25,
38        _designHeight : 382.5,
39        _designCx : 187.19173,
40        _designCy : 187.81589,
41        _designTextIndicatorX : 187.19173,
42        _designTextIndicatorY : 267.81589,     
43       
44
45        constructor: function(){
46                // summary:
47                //              Creates a new GlossyCircularGauge.
48                this.startAngle= -135;
49                this.endAngle= 135;
50                this.min = 0;
51                this.max = 100;
52        },
53
54        drawBackground: function(group){
55                // summary:
56                //              Draws the background of the gauge.
57                // group: dojox.gfx.Group
58                //              The GFX group where the background must be drawn
59
60                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
61                var transform = {
62                                xx: scale,
63                                xy: 0,
64                                yx: 0,
65                                yy: scale,
66                                dx: (-161) * scale + (this.width - scale * this._designWidth) / 2,
67                                dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2
68
69                };
70               
71                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 );
72                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 );         
73               
74               
75                if (this._gaugeBackground){
76                        this._gaugeBackground.setTransform(transform);
77                        return;
78                }
79                this._gaugeBackground = group.createGroup();
80                this._gaugeBackground.setTransform(transform);
81
82                this._gaugeBackground.createPath({
83                        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"
84                }).setTransform({
85                        xx: 1.25,
86                        xy: 0,
87                        yx: 0,
88                        yy: -1.25,
89                        dx: 535.09494,
90                        dy: 452.53442
91                }).setFill(this.color);
92
93                this._gaugeBackground.createPath({
94                        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"
95                }).setTransform({
96                        xx: 1.25,
97                        xy: 0,
98                        yx: 0,
99                        yy: -1.25,
100                        dx: -43.30358,
101                        dy: 1015.57642
102                }).setFill({
103                        type: "linear",
104                        x1: 175.688,
105                        y1: 312.54001,
106                        x2: 175.688,
107                        y2: 422.85482,
108                        colors: [
109                                 {offset: 0, color: lighterColor1},
110                                 {offset: 1, color: this.color}
111                                 ]
112                });
113
114                this._gaugeBackground.createPath({
115                        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"
116                }).setTransform({
117                        xx: 1.25,
118                        xy: 0,
119                        yx: 0,
120                        yy: -1.25,
121                        dx: -43.30358,
122                        dy: 1015.57642
123                }).setFill({
124                        type: "linear",
125                        x1: 175.75301,
126                        y1: 442.04099,
127                        x2: 175.75301,
128                        y2: 588.32703,
129                        colors: [
130                                 {offset: 0, color: this.color},
131                                 {offset: 1, color: lighterColor2}
132                                 ]
133                });
134
135                this._gaugeBackground.createPath({
136                        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"
137                }).setTransform({
138                        xx: 1.25,
139                        xy: 0,
140                        yx: 0,
141                        yy: -1.25,
142                        dx: 520.84441,
143                        dy: 448.85767
144                }).setFill([255,255,255,0.12157]);
145
146        },
147
148        drawForeground: function(group){
149                // summary:
150                //              Draws the foreground of the gauge.
151                // group: dojox.gfx.Group
152                //              The GFX group where the foreground must be drawn
153
154                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
155                var transform = {
156                                xx: scale,
157                                xy: 0,
158                                yx: 0,
159                                yy: scale,
160                                dx: (-160) * scale + (this.width - scale * this._designWidth) / 2,
161                                dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2
162                };
163               
164                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 );
165                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 );         
166                               
167                if (this._foreground){
168                        this._foreground.setTransform(transform);
169                        return;
170                }
171                this._foreground = group.createGroup();
172                this._foreground.setTransform(transform);
173
174                var group1 = this._foreground.createGroup();
175                group1.setTransform({
176                        xx: 1.25,
177                        xy: 0,
178                        yx: 0,
179                        yy: -1.25,
180                        dx: -43.30358,
181                        dy: 1015.57642
182                });
183                group1.createPath({
184                        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"
185                }).setTransform({
186                        xx: 1,
187                        xy: 0,
188                        yx: 0,
189                        yy: 1,
190                        dx: 336.31049,
191                        dy: 451.43359
192                }).setFill(this.color);
193
194                group1.createPath({
195                        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"
196                }).setFill({
197                        type: "linear",
198                        x1: 293.62201,
199                        y1: 431.51501,
200                        x2: 293.62201,
201                        y2: 451.43401,
202                        colors: [
203                                 {offset: 0, color: lighterColor1},
204                                 {offset: 1, color: this.color}
205                                 ]
206                });
207
208                group1.createPath({
209                        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"
210                }).setFill({
211                        type: "linear",
212                        x1: 293.63199,
213                        y1: 450.22101,
214                        x2: 293.63199,
215                        y2: 471.353,
216                        colors: [
217                                 {offset: 0, color: this.color},
218                                 {offset: 1, color: lighterColor2}
219                                 ]
220                });
221
222                group1.createPath({
223                        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"
224                }).setTransform({
225                        xx: 1,
226                        xy: 0,
227                        yx: 0,
228                        yy: 1,
229                        dx: 333.4375,
230                        dy: 451.8584
231                }).setFill([255,255,255,0.12157]);
232
233        }
234
235});
236});
Note: See TracBrowser for help on using the repository browser.