dojo_app/js/library/dojox/dgauges/tests/gauges/AircraftGauge.js

define(["dojo/_base/lang", "dojo/_base/declare", "dojox/dgauges/CircularGauge", "dojox/dgauges/LinearScaler",
	"dojox/dgauges/CircularScale", "dojox/dgauges/CircularValueIndicator", "dojox/dgauges/CircularRangeIndicator",
	"dojox/dgauges/TextIndicator"],
	function(lang, declare, CircularGauge, LinearScaler, CircularScale, CircularValueIndicator, CircularRangeIndicator,
		 TextIndicator){
	return declare("dojox.dgauges.tests.gauges.AircraftGauge", CircularGauge, {
		_radius: 100,
		constructor: function(){
			this.font = {
				family: "Helvetica",
				style: "normal",
				size: "10pt",
				color: "#EFEFEF"
			};
			
			// Draws a triangle, used by 2 indicators
			var sharedIndicatorShapeFunc = function(group){
				return group.createPolyline([40, -6, 60, 0, 40, 6, 40, -6]).setFill("#EFEFEF");
			};
			
			// Draws the background
			this.addElement("background", lang.hitch(this, this.drawBackground));
			
			// The left scaler
			var scaler = new LinearScaler({
				minimum: 10,
				maximum: 40,
				majorTickInterval: 5,
				minorTickInterval: 1
			});
			
			// The left scale
			var scale = new CircularScale({
				scaler: scaler,
				originX: 100,
				originY: 100,
				startAngle: 110,
				endAngle: 250,
				radius: 70,
				labelPosition: "outside",
				tickShapeFunc: function(group, scale, tick){
					return group.createLine({
						x1: tick.isMinor ? 2 : 0,
						y1: 0,
						x2: tick.isMinor ? 8 : 12,
						y2: 0
					}).setStroke({
						color: "#EFEFEF",
						width: tick.isMinor ? 1 : 1
					})
				}
			});
			this.addElement("scale", scale);
			
			// The left value indicator
			var indicator = new CircularValueIndicator({
				interactionArea: "indicator",
				indicatorShapeFunc: sharedIndicatorShapeFunc,
				value: 27
			});
			scale.addIndicator("indicator", indicator);
			
			// The left range indicator (green)
			var rangeIndicator = new CircularRangeIndicator({
				start: 15,
				value: 23,
				radius: 68,
				fill: "#0BCD2F",
				interactionMode: "none"
			});
			scale.addIndicator("rangeIndicator", rangeIndicator, true);
			
			// The right scaler		
			var scaler2 = new LinearScaler({
				minimum: 0,
				maximum: 10,
				majorTickInterval: 1,
				minorTickInterval: 0.5
			});
			
			// The right scale
			var scale2 = new CircularScale({
				scaler: scaler2,
				originX: 100,
				originY: 100,
				startAngle: 70,
				endAngle: 290,
				orientation: "cclockwise",
				radius: 70,
				labelPosition: "outside",
				tickShapeFunc: function(group, scale, tick){
					var x1, x2, color, width = 1;
					// Strong red tick
					if (tick.value == 0.5 || tick.value == 8){
						x1 = -2;
						x2 = 14;
						color = "#FB0F00";
						width = 2;
					}else if(tick.isMinor){
						// minor ticks
						x1 = 2;
						x2 = 8;
							color = "#EFEFEF";
					}else{
						// Major tick
						x1 = 0;
						x2 = 12;
						color = "#EFEFEF";
					}
					
					return group.createLine({
						x1: x1,
						y1: 0,
						x2: x2,
						y2: 0
					}).setStroke({
						color: color,
						width: width
					})
				},
				// Label filter
				tickLabelFunc: function(tick){
					return (tick.value % 2) == 0 ? (tick.value).toString() : ""
				}
			});
			this.addElement("scale2", scale2);
			
			// The right value indicator
			var indicator2 = new CircularValueIndicator({
				interactionArea: "indicator",
				indicatorShapeFunc: sharedIndicatorShapeFunc,
				value: 8
			});
			scale2.addIndicator("indicator2", indicator2);
			
			// The right range indicator (green)
			var rangeIndicator2 = new CircularRangeIndicator({
				start: 0.5,
				value: 8,
				radius: 68,
				fill: "#0BCD2F",
				interactionMode: "none"
			});
			scale2.addIndicator("rangeIndicator2", rangeIndicator2, true);
			
			// Indicator Text: "MAN"
			this.addElement("text1", this._createText("MAN", 97, 90, 9, "end"));
			
			// Indicator Text: "PRESS"
			this.addElement("text2", this._createText("PRESS", 97, 100, 9, "end"));
			
			// Indicator Text: "IN HG"
			this.addElement("text3", this._createText("IN HG", 97, 113, 8, "end"));
			
			// Indicator Text: "FUEL
			this.addElement("text4", this._createText("FUEL", 103, 90, 9, "start"));
			
			// Indicator Text: "PRESS"
			this.addElement("text5", this._createText("PRESS", 103, 100, 9, "start"));
			
			// Indicator Text: "PSI"
			this.addElement("text6", this._createText("PSI", 103, 113, 8, "start"));
		},
		_createText: function(text, x, y, size, align){
			return new TextIndicator({
				value: text,
				x: x,
				y: y,
				color: "white",
				font: {
					family: "Helvetica",
					size: size
				},
				align: align
			});
		},
		
		drawBackground: function(g){
			var r = this._radius;
			var w = 2 * r;
			var h = w;
			g.createEllipse({
				cx: r,
				cy: r,
				rx: r,
				ry: r
			}).setFill("#000000");
			
			g.createEllipse({
				cx: r,
				cy: r,
				rx: r * 0.99,
				ry: r * 0.99
			}).setFill("#505050");
			
			g.createEllipse({
				cx: r,
				cy: r,
				rx: r * 0.92,
				ry: r * 0.92
			}).setFill("#333333").setStroke({
				color: "#000000",
				width: 0.5
			});
			
			g.createRect({
				x: 99,
				y: 20,
				width: 4,
				height: 50
			}).setFill("#EFEFEF");
			
			g.createRect({
				x: 99,
				y: 130,
				width: 4,
				height: 50
			}).setFill("#EFEFEF");
		}
	});
});