analytics/webcontent/dojo17/dojox/gauges/AnalogGauge.js

define("dojox/gauges/AnalogGauge", ["dojo/_base/kernel","dojo/_base/declare","dojo/_base/array","dojo/_base/lang","dojo/_base/html","dojo/_base/event",
		"dojox/gfx", "./_Gauge","./AnalogLineIndicator", "dojo/dom-geometry"],
	function(dojo, declare, arr, lang, html, event, 
			gfx, Gauge, AnalogLineIndicator, domGeometry) {

/*=====
	Gauge = dojox.gauges._Gauge;
=====*/

return declare("dojox.gauges.AnalogGauge",Gauge,{
	// summary:
	//		a gauge built using the dojox.gfx package.
	//
	// description:
	//		using dojo.gfx (and thus either SVG or VML based on what is supported), this widget
	//		builds a gauge component, used to display numerical data in a familiar format 
	//
	// example:
	//	|	<script type="text/javascript">
	//	|		require(["dojox/gauges/AnalogGauge"]);
	//	|	</script>
	//	|
	//	|	<div	dojoType="dojox.gauges.AnalogGauge"
	//	|			id="testGauge"
	//	|			width="300"
	//	|			height="200"
	//	|			cx=150
	//	|			cy=175
	//	|			radius=125
	//	|			image="gaugeOverlay.png"
	//	|			imageOverlay="false"
	//	|			imageWidth="280"
	//	|			imageHeight="155"
	//	|			imageX="12"
	//	|			imageY="38">
	//	|	</div>

	// startAngle: Number
	// 		angle (in degrees) for start of gauge (default is -90)
	startAngle: -90,

	// endAngle: Number
	// 		angle (in degrees) for end of gauge (default is 90)
	endAngle: 90,

	// cx: Number
	// 		center of gauge x coordinate (default is gauge width / 2)
	cx: 0,

	// cy: Number
	// 		center of gauge x coordinate (default is gauge height / 2)
	cy: 0,

	// radius: Number
	// 		radius of gauge (default is smaller of cx-25 or cy-25)
	radius: 0,
	
	// orientation: String
	// 		The orientation of the gauge. The value can be 'clockwise' or 'cclockwise' (default is 'clockwise')
	orientation: "clockwise",

	// _defaultIndicator: dojox.gauges._Indicator
	//		override of dojox.gauges._Gauge._defaultIndicator
	_defaultIndicator: AnalogLineIndicator,

	startup: function(){
		// handle settings from HTML by making sure all the options are
		// converted correctly to numbers and that we calculate defaults
		// for cx, cy and radius
		// also connects mouse handling events

		if(this.getChildren){
			arr.forEach(this.getChildren(), function(child){ child.startup(); });
		}

		this.startAngle = Number(this.startAngle);
		this.endAngle = Number(this.endAngle);

		this.cx = Number(this.cx);
		if(!this.cx){this.cx = this.width/2;}
		this.cy = Number(this.cy);
		if(!this.cy){this.cy = this.height/2;}
		this.radius = Number(this.radius);
		if(!this.radius){this.radius = Math.min(this.cx,this.cy) - 25;}
	

		this.inherited(arguments);
	},

	_getAngle: function(/*Number*/value){
		// summary:
		//		This is a helper function used to determine the angle that represents
		//		a given value on the gauge
		// value:	Number
		//		A value to be converted to an angle for this gauge.
		
		var v = Number(value);
		var angle;
		if (value == null || isNaN(v) || v <= this.min) 
			angle = this._mod360(this.startAngle);
		else
			if (v >= this.max) 
				angle = this._mod360(this.endAngle);
			else {
				var startAngle = this._mod360(this.startAngle);
				var relativeValue = (v - this.min);
				if (this.orientation != 'clockwise') 
					relativeValue = -relativeValue;

				angle = this._mod360(startAngle + this._getAngleRange() * relativeValue / Math.abs(this.min - this.max));
			}

		return angle;
	},

	_getValueForAngle: function(/*Number*/angle){
		// summary:
		//		This is a helper function used to determine the value represented by a
		//		given angle on the gauge
		// angle:	Number
		//		A angle to be converted to a value for this gauge.
		var startAngle = this._mod360(this.startAngle);
		var endAngle = this._mod360(this.endAngle);

		if (!this._angleInRange(angle)){

			var min1 = this._mod360(startAngle - angle);
			var min2 = 360 - min1;
			var max1 = this._mod360(endAngle - angle);
			var max2 = 360 - max1;
			if (Math.min(min1, min2) < Math.min(max1, max2)) 
				return this.min;
			else 
				return this.max;
		}
		else {
			var range = Math.abs(this.max - this.min);
			var relativeAngle = this._mod360(this.orientation == 'clockwise' ?
				(angle - startAngle): (-angle + startAngle));
			return this.min + range * relativeAngle / this._getAngleRange();
		}
	},

	_getAngleRange: function(){
		// summary:
		//		This is a helper function that returns the angle range
		//      from startAngle to endAngle according to orientation.
		var range;
		var startAngle = this._mod360(this.startAngle);
		var endAngle = this._mod360(this.endAngle);
		if (startAngle == endAngle) 
			return 360;
		if (this.orientation == 'clockwise'){
			if (endAngle < startAngle) 
				range = 360 - (startAngle - endAngle);
			else 
				range = endAngle - startAngle;
		}
		else {
			if (endAngle < startAngle) 
				range = startAngle - endAngle;
			else 
				range = 360 - (endAngle - startAngle); 
		}
		return range;
	},
	
	_angleInRange: function(value){
		// summary:
		//		Test if the angle value is in the startAngle/endAngle range
		var startAngle = this._mod360(this.startAngle);
		var endAngle = this._mod360(this.endAngle);
		if (startAngle == endAngle) 
			return true;
			value = this._mod360(value);
		if (this.orientation == "clockwise"){
			if (startAngle < endAngle) 
				return value >= startAngle && value <= endAngle;
			else 
				return !(value > endAngle && value < startAngle);
		}
		else {
			if (startAngle < endAngle) 
				return !(value > startAngle && value < endAngle);
			else 
				return value >= endAngle && value <= startAngle;
		}
	},
	
	_isScaleCircular: function(){
		// summary: 
		//		internal method to check if the scale is fully circular
		return (this._mod360(this.startAngle) == this._mod360(this.endAngle));
	},
	
	_mod360:function(v){
		// summary:
		//     returns the angle between 0 and 360;
		while (v>360) v = v - 360;
		while (v<0) v = v + 360;
		return v;
	},

	_getRadians: function(/*Number*/angle){
		// summary:
		//		This is a helper function than converts degrees to radians
		// angle:	Number
		//		An angle, in degrees, to be converted to radians.
		return angle*Math.PI/180;
	},

	_getDegrees: function(/*Number*/radians){
		// summary:
		//		This is a helper function that converts radians to degrees
		// radians:	Number
		//		An angle, in radians, to be converted to degrees.
		return radians*180/Math.PI;
	},


	drawRange: function(/*dojox.gfx.Group*/ group, /*Object*/range){
		// summary:
		//		This function is used to draw (or redraw) a range
		// description:
		//		Draws a range (colored area on the background of the gauge) 
		//		based on the given arguments.
		// group:
		//		The GFX group where the range must be drawn.
		// range:
		//		A range is a dojox.gauges.Range or an object
		//		with similar parameters (low, high, hover, etc.).
		var path;
		if(range.shape){
			range.shape.parent.remove(range.shape);
			range.shape = null;
		}
		var a1, a2;
		if((range.low == this.min) && (range.high == this.max) && ((this._mod360(this.endAngle) == this._mod360(this.startAngle)))){
			path = group.createCircle({cx: this.cx, cy: this.cy, r: this.radius});
		}else{
			
			
			a1 = this._getRadians(this._getAngle(range.low));
			a2 = this._getRadians(this._getAngle(range.high));
			if (this.orientation == 'cclockwise')
			{
				var a = a2;
				a2 = a1;
				a1 = a;
			}
			
			var x1=this.cx+this.radius*Math.sin(a1),
				y1=this.cy-this.radius*Math.cos(a1),
				x2=this.cx+this.radius*Math.sin(a2),
				y2=this.cy-this.radius*Math.cos(a2),
				big=0
			;
			
			var arange;
			if (a1<=a2)
			   arange = a2-a1;
			else
			   arange = 2*Math.PI-a1+a2;
			if(arange>Math.PI){big=1;}
			
			path = group.createPath();
			if(range.size){
				path.moveTo(this.cx+(this.radius-range.size)*Math.sin(a1),
							this.cy-(this.radius-range.size)*Math.cos(a1));
			}else{
				path.moveTo(this.cx,this.cy);
			}
			path.lineTo(x1,y1);
			path.arcTo(this.radius,this.radius,0,big,1,x2,y2);
			if(range.size){
				path.lineTo(this.cx+(this.radius-range.size)*Math.sin(a2),
							this.cy-(this.radius-range.size)*Math.cos(a2));
				path.arcTo((this.radius-range.size),(this.radius-range.size),0,big,0,
							this.cx+(this.radius-range.size)*Math.sin(a1),
							this.cy-(this.radius-range.size)*Math.cos(a1));
			}
			path.closePath();
		}

		if(lang.isArray(range.color) || lang.isString(range.color)){
			path.setStroke({color: range.color});
			path.setFill(range.color);
		}else if(range.color.type){
			// Color is a gradient
			a1 = this._getRadians(this._getAngle(range.low));
			a2 = this._getRadians(this._getAngle(range.high));
			range.color.x1 = this.cx+(this.radius*Math.sin(a1))/2;
			range.color.x2 = this.cx+(this.radius*Math.sin(a2))/2;
			range.color.y1 = this.cy-(this.radius*Math.cos(a1))/2;
			range.color.y2 = this.cy-(this.radius*Math.cos(a2))/2;
			path.setFill(range.color);
			path.setStroke({color: range.color.colors[0].color});
		}else if (gfx.svg){
			// We've defined a style rather than an explicit color
			path.setStroke({color: "green"});	// Arbitrary color, just have to indicate
			path.setFill("green");				// that we want it filled
			path.getEventSource().setAttribute("class", range.color.style);
		}
		
		path.connect("onmouseover", lang.hitch(this, this._handleMouseOverRange, range));
		path.connect("onmouseout", lang.hitch(this, this._handleMouseOutRange, range));
	
		range.shape = path;
	},

	getRangeUnderMouse: function(/*Object*/e){
		// summary:
		//		Determines which range the mouse is currently over
		// e:	Object
		//		The event object as received by the mouse handling functions below.
		var range = null,
			pos = domGeometry.getContentBox(this.gaugeContent),
			x = e.clientX - pos.x,
			y = e.clientY - pos.y,
			r = Math.sqrt((y - this.cy)*(y - this.cy) + (x - this.cx)*(x - this.cx))
		;
		if(r < this.radius){
			var angle = this._getDegrees(Math.atan2(y - this.cy, x - this.cx) + Math.PI/2),
			//if(angle > this.endAngle){angle = angle - 360;}
				value = this._getValueForAngle(angle)
			;
			if(this._rangeData){
				for(var i=0; (i<this._rangeData.length) && !range; i++){
					if((Number(this._rangeData[i].low) <= value) && (Number(this._rangeData[i].high) >= value)){
						range = this._rangeData[i];
					}
				}
			}
		}
		return range;
	},

	_dragIndicator: function(/*Object*/ widget, /*Object*/ e){
		// summary:
		//		Handles the dragging of an indicator to the event position, including moving/re-drawing
		// 		get angle for mouse position
		this._dragIndicatorAt(widget, e.pageX, e.pageY);
		event.stop(e);
	},
		
	_dragIndicatorAt: function(/*Object*/ widget, x,y){
		// summary:
		// 		Handles the dragging of an indicator to a specific position, including moving/re-drawing
		// 		get angle for mouse position
		var pos = domGeometry.position(widget.gaugeContent, true),
			xf = x - pos.x,
			yf = y - pos.y,
			angle = widget._getDegrees(Math.atan2(yf - widget.cy, xf - widget.cx) + Math.PI/2);
		
		// get value and restrict to our min/max
		var value = widget._getValueForAngle(angle);
		value = Math.min(Math.max(value, widget.min), widget.max);
		// update the indicator
		widget._drag.value = widget._drag.currentValue = value;
		// callback
		widget._drag.onDragMove(widget._drag);
		// rotate indicator
		widget._drag.draw(this._indicatorsGroup, true);
		widget._drag.valueChanged();
	}

});
});