source: Dev/trunk/src/client/dojox/gauges/GlossySemiCircularGauge.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.8 KB
Line 
1define(["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"],
2  function(declare, Color, GlossyCircularGaugeBase) {
3
4return declare("dojox.gauges.GlossySemiCircularGauge", [GlossyCircularGaugeBase], {
5        // summary:
6        //              Represents a semi circular gauge with a glossy appearance.
7        //
8        // example:
9        //      |       <div    dojoType="dojox.gauges.GlossySemiCircularGauge"
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        //      |       >
32        //      |       </div>
33       
34       
35        _designWidth: 381.25,
36        _designHeight: 221.25,
37        _designCx: 190.6675,
38        _designCy: 185.87665,
39        _designTextIndicatorX: 190.6675,
40        _designTextIndicatorY: 145.87665,
41       
42
43        constructor: function(){
44                // summary:
45                //              Creates a new GlossySemiCircularGauge
46                this.min = 0;
47                this.max = 100;
48                this.startAngle = -91.5;
49                this.endAngle = 91.5;
50        },
51
52        drawBackground: function(group){
53                // summary:
54                //              Draws the background of the gauge
55                // group: dojox.gfx.Group
56                //              The GFX group where the background must be drawn
57                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
58                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8);
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: -23.33928 * scale + (this.width - scale * this._designWidth) / 2,
67                        dy: -483.30859 * scale + (this.height - scale * this._designHeight) / 2
68                };
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                this._gaugeBackground.createPath({
78                        path: "M0 0 C0.023 0.892 0.037 9.147 0.045 15.97 C-0.349 98.05 -67.016 164.455 -149.182 164.427 C-231.347 164.398 -297.969 97.949 -298.307 15.869 C-298.299 9.081 -298.285 0.884 -298.262 -0.006 C-298.119 -5.424 -293.686 -9.742 -288.265 -9.742 L-9.996 -9.742 C-4.574 -9.742 -0.139 -5.42 0 0"
79                }).setTransform({
80                        xx: 1.25,
81                        xy: 0,
82                        yx: 0,
83                        yy: -1.25,
84                        dx: 400.74198,
85                        dy: 690.00586
86                }).setFill(this.color);
87               
88                this._gaugeBackground.createPath({
89                        path: "M451.297 436.5 C451.333 437.807 451.355 449.118 451.354 450.434 L451.354 450.527 C451.329 526.644 389.604 588.327 313.487 588.302 C237.372 588.275 175.688 526.551 175.713 450.434 C175.713 450.403 175.735 437.776 175.771 436.5 L451.297 436.5 Z"
90                }).setTransform({
91                        xx: 1.25,
92                        xy: 0,
93                        yx: 0,
94                        yy: -1.25,
95                        dx: -177.58928,
96                        dy: 1234.05859
97                }).setFill({
98                        type: "linear",
99                        x1: 175.688,
100                        y1: 390.95189,
101                        x2: 175.688,
102                        y2: 474.45676,
103                        colors: [{
104                                offset: 0,
105                                color: lighterColor1
106                        }, {
107                                offset: 1,
108                                color: this.color
109                        }]
110                });
111                this._gaugeBackground.createPath({
112                        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"
113                }).setTransform({
114                        xx: 1.25,
115                        xy: 0,
116                        yx: 0,
117                        yy: -1.25,
118                        dx: -177.58928,
119                        dy: 1234.05859
120                }).setFill({
121                        type: "linear",
122                        x1: 175.75301,
123                        y1: 442.04099,
124                        x2: 175.75301,
125                        y2: 588.32703,
126                        colors: [{
127                                offset: 0,
128                                color: this.color
129                        }, {
130                                offset: 1,
131                                color: lighterColor2
132                        }]
133                });
134                this._gaugeBackground.createPath({
135                        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"
136                }).setTransform({
137                        xx: 1.25,
138                        xy: 0,
139                        yx: 0,
140                        yy: -1.25,
141                        dx: 386.81123,
142                        dy: 667.59241
143                }).setFill([255, 255, 255, 0.12157]);
144        },
145       
146       
147        drawForeground: function(group){
148                // summary:
149                //              Draws the foreground of the gauge
150                // group: dojox.gfx.Group
151                //              The GFX group where the foreground must be drawn
152                var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
153                var transform = {
154                        xx: scale,
155                        xy: 0,
156                        yx: 0,
157                        yy: scale,
158                        dx: (-160) * scale + (this.width - scale * this._designWidth) / 2,
159                        dy: (-264.5) * scale + (this.height - scale * this._designHeight) / 2
160                };
161               
162                var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
163                var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8);
164               
165                if (this._foreground) {
166                        this._foreground.setTransform(transform);
167                        return;
168                }
169                this._foreground = group.createGroup();
170                this._foreground.setTransform(transform);
171               
172                var group1 = this._foreground.createGroup().setTransform({
173                        xx: 1.25,
174                        xy: 0,
175                        yx: 0,
176                        yy: -1.25,
177                        dx: -43.30358,
178                        dy: 1015.57642
179                });
180                group1.createPath({
181                        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"
182                }).setTransform({
183                        xx: 1,
184                        xy: 0,
185                        yx: 0,
186                        yy: 1,
187                        dx: 336.31049,
188                        dy: 451.43359
189                }).setFill(this.color);
190               
191                group1.createPath({
192                        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"
193                }).setFill({
194                        type: "linear",
195                        x1: 293.62201,
196                        y1: 431.51501,
197                        x2: 293.62201,
198                        y2: 451.43401,
199                        colors: [{
200                                offset: 0,
201                                color: lighterColor1
202                        }, {
203                                offset: 1,
204                                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,
218                                color: this.color
219                        }, {
220                                offset: 1,
221                                color: lighterColor2
222                        }]
223                });
224               
225                group1.createPath({
226                        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"
227                }).setTransform({
228                        xx: 1,
229                        xy: 0,
230                        yx: 0,
231                        yy: 1,
232                        dx: 333.4375,
233                        dy: 451.8584
234                }).setFill([255, 255, 255, 0.12157]);
235               
236        }
237       
238       
239});
240});
Note: See TracBrowser for help on using the repository browser.