Context Navigation

source: Dev/branches/rest-dojo-ui/client/dojox/gauges/GlossySemiCircularGauge.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
1	define(["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"],
2	function(declare, Color, GlossyCircularGaugeBase) {
3
4	/*=====
5	GlossyCircularGaugeBase = dojox.gauges.GlossyCircularGaugeBase;
6	=====*/
7
8	return declare("dojox.gauges.GlossySemiCircularGauge", [GlossyCircularGaugeBase], {
9	// summary:
10	// Represents a semi circular gauge with a glossy appearance.
11	//
12	// example:
13	// \| <div dojoType="dojox.gauges.GlossySemiCircularGauge"
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	// \| >
36	// \| </div>
37
38
39	_designWidth: 381.25,
40	_designHeight: 221.25,
41	_designCx: 190.6675,
42	_designCy: 185.87665,
43	_designTextIndicatorX: 190.6675,
44	_designTextIndicatorY: 145.87665,
45
46
47	constructor: function(){
48	// summary:
49	// Creates a new GlossySemiCircularGauge
50	this.min = 0;
51	this.max = 100;
52	this.startAngle = -91.5;
53	this.endAngle = 91.5;
54	},
55
56	drawBackground: function(group){
57	// summary:
58	// Draws the background of the gauge
59	// group: dojox.gfx.Group
60	// The GFX group where the background must be drawn
61	var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
62	var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8);
63
64	var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
65	var transform = {
66	xx: scale,
67	xy: 0,
68	yx: 0,
69	yy: scale,
70	dx: -23.33928 * scale + (this.width - scale * this._designWidth) / 2,
71	dy: -483.30859 * scale + (this.height - scale * this._designHeight) / 2
72	};
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	this._gaugeBackground.createPath({
82	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"
83	}).setTransform({
84	xx: 1.25,
85	xy: 0,
86	yx: 0,
87	yy: -1.25,
88	dx: 400.74198,
89	dy: 690.00586
90	}).setFill(this.color);
91
92	this._gaugeBackground.createPath({
93	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"
94	}).setTransform({
95	xx: 1.25,
96	xy: 0,
97	yx: 0,
98	yy: -1.25,
99	dx: -177.58928,
100	dy: 1234.05859
101	}).setFill({
102	type: "linear",
103	x1: 175.688,
104	y1: 390.95189,
105	x2: 175.688,
106	y2: 474.45676,
107	colors: [{
108	offset: 0,
109	color: lighterColor1
110	}, {
111	offset: 1,
112	color: this.color
113	}]
114	});
115	this._gaugeBackground.createPath({
116	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"
117	}).setTransform({
118	xx: 1.25,
119	xy: 0,
120	yx: 0,
121	yy: -1.25,
122	dx: -177.58928,
123	dy: 1234.05859
124	}).setFill({
125	type: "linear",
126	x1: 175.75301,
127	y1: 442.04099,
128	x2: 175.75301,
129	y2: 588.32703,
130	colors: [{
131	offset: 0,
132	color: this.color
133	}, {
134	offset: 1,
135	color: lighterColor2
136	}]
137	});
138	this._gaugeBackground.createPath({
139	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"
140	}).setTransform({
141	xx: 1.25,
142	xy: 0,
143	yx: 0,
144	yy: -1.25,
145	dx: 386.81123,
146	dy: 667.59241
147	}).setFill([255, 255, 255, 0.12157]);
148	},
149
150
151	drawForeground: function(group){
152	// summary:
153	// Draws the foreground of the gauge
154	// group: dojox.gfx.Group
155	// The GFX group where the foreground must be drawn
156	var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
157	var transform = {
158	xx: scale,
159	xy: 0,
160	yx: 0,
161	yy: scale,
162	dx: (-160) * scale + (this.width - scale * this._designWidth) / 2,
163	dy: (-264.5) * scale + (this.height - scale * this._designHeight) / 2
164	};
165
166	var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
167	var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8);
168
169	if (this._foreground) {
170	this._foreground.setTransform(transform);
171	return;
172	}
173	this._foreground = group.createGroup();
174	this._foreground.setTransform(transform);
175
176	var group1 = this._foreground.createGroup().setTransform({
177	xx: 1.25,
178	xy: 0,
179	yx: 0,
180	yy: -1.25,
181	dx: -43.30358,
182	dy: 1015.57642
183	});
184	group1.createPath({
185	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"
186	}).setTransform({
187	xx: 1,
188	xy: 0,
189	yx: 0,
190	yy: 1,
191	dx: 336.31049,
192	dy: 451.43359
193	}).setFill(this.color);
194
195	group1.createPath({
196	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"
197	}).setFill({
198	type: "linear",
199	x1: 293.62201,
200	y1: 431.51501,
201	x2: 293.62201,
202	y2: 451.43401,
203	colors: [{
204	offset: 0,
205	color: lighterColor1
206	}, {
207	offset: 1,
208	color: this.color
209	}]
210	});
211
212	group1.createPath({
213	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"
214	}).setFill({
215	type: "linear",
216	x1: 293.63199,
217	y1: 450.22101,
218	x2: 293.63199,
219	y2: 471.353,
220	colors: [{
221	offset: 0,
222	color: this.color
223	}, {
224	offset: 1,
225	color: lighterColor2
226	}]
227	});
228
229	group1.createPath({
230	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"
231	}).setTransform({
232	xx: 1,
233	xy: 0,
234	yx: 0,
235	yy: 1,
236	dx: 333.4375,
237	dy: 451.8584
238	}).setFill([255, 255, 255, 0.12157]);
239
240	}
241
242
243	});
244	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: