Overview

• Introduction
• Code

Introduction

The basic idea of the BGX Vertical Gauge Component is to use on the lowest level a background clip ("backdropClip"),
above that a gradient clip ("gradientClip") is based and on top of that a mask ("_mcMask") which is then resized to reveal
only the parts of the gradientClip that correspond to the gauge values ("gaugeValue", "minVal","maxVal", "baseValue"
in relation to "gaugeHeight").

In addition to that markers with labels are placed beneath the gauge, whereby their vertical position and number is calculated
using the gaugeHeight, minVal, maxVal and the markerStep defined. The rest is mathematics.

back to top

Code

/**
* @tiptext Vertical Gauge Component.
*/


class BgxVerticalGauge extends mx.core.UIComponent 
{
	//version
	static var version:String = "1.1.3.0";
	static var symbolName:String = "BgxVerticalGauge";
	static var symbolOwner:Object = BgxVerticalGauge;
	var className:String = "BgxVerticalGauge";

	//private vars
	//values
	private var __width:Number;
	private var __height:Number;
	private var __minVal:Number;
	private var __maxVal:Number;
	private var __markerStep:Number;
	private var __gaugeHeight:Number;
	private var __gaugeWidth:Number;
	private var __gaugeX:Number;
	private var __markerX:Number;
	private var __baseValue:Number;
	private var __gaugeValue:Number;
	private var __showMarkers:Boolean;
	//skin elements
	private var __gradientClip:String;
	private var __markerClip:String = "bgxVG_MarkerLine";	
	private var __backdropClip:String = "bgxVG_Backdrop";
	private var __markerLabelClip:String = "bgxVG_MarkerLabelClip";	
	//private clips
	private var _mcMask:MovieClip;
	private var _mcBackdrop:MovieClip;
	private var _mcGradient:MovieClip;
	//private var dispatchEvent:Function;
	private var _clipArray:Array;
	private var _tempClip:MovieClip;
	private var _topOffset:Number = 8;
	//public vars
	var mcBoundingBox:MovieClip;
	
	
	
	//constructor
	function BgxVerticalGauge() 
	{	
	}	
	
	function draw(Void):Void 
	{			
		size();
	}
	
	function size(Void):Void 
	{
		super.size();
	}
	
	private function createChildren(Void):Void 
	{
		mcBoundingBox._visible = false;
		mcBoundingBox._width = 0;
		mcBoundingBox._height = 0;
		doLayout();
	}
	
	function doLayout()
	{
		if (__minVal > __maxVal) return;
		
			//array to keep trace of children, used to delete them when needed
			_clipArray = new Array();
			
			var _level = 0;
			var _numberSteps:Number = (__maxVal - __minVal)/__markerStep;
			var _displayStep:Number = __gaugeHeight/_numberSteps;
			var _step:Number = 0;
			var _markerWidth = __gaugeX - __markerX + __gaugeWidth; 
			//add markers if desired
			if (__showMarkers)
			{
				for (var i:Number = 0; i < __gaugeHeight + 1; i = i + _displayStep)
				{
					_tempClip = attachMovie(__markerClip,"_mcMarker" + _level,_level,{_x:__markerX,_y:i+_topOffset,_width: _markerWidth});
					_level++;
					_clipArray.push(_tempClip);
					var _markerVal:String = (__maxVal - (__markerStep*_step)).toString();
					_step++;
					if (_markerVal.indexOf(".") > -1) _markerVal = _markerVal.substr(0,_markerVal.indexOf(".") + 2);
					var _labelX:Number = __markerX - 5;
					_tempClip = attachMovie(__markerLabelClip,"_mcMarkerLabel" + _level,_level,{_x:_labelX,_y:i});
					
					_tempClip.label._x = _tempClip.label._x - _tempClip.label._width;
					_tempClip.label.autoSize = "right";
					_tempClip.label.text = _markerVal;
					_level++;
					_clipArray.push(_tempClip);
			}
		}		
		//add backdrop, gradient and mask
		_tempClip = attachMovie(__backdropClip,"_mcBackdrop",_level++);		
		_clipArray.push(_tempClip);
		_tempClip = attachMovie(__gradientClip,"_mcGradient",_level++);
		_clipArray.push(_tempClip);
		_tempClip = attachMovie("bgxVG_mask","_mcMask",_level++);		
		_clipArray.push(_tempClip);
		//position the elements
		arrange();
		//calculate masking
		bgxVG_setMask();
	}
	
	private function arrange(Void):Void 
	{
		_mcBackdrop._x = __gaugeX;
		_mcBackdrop._y = _topOffset;
		_mcBackdrop._height = __gaugeHeight;
		_mcBackdrop._width = __gaugeWidth;
		_mcGradient._x = __gaugeX;
		_mcGradient._y = _topOffset + 1;		
		_mcGradient._width = __gaugeWidth;
		_mcGradient._height = __gaugeHeight - 1;	
		
		_mcMask._x = __gaugeX;			
		_mcMask._width = _mcGradient._width;
		_mcMask._height = _mcGradient._height;
		_mcMask._y = _mcGradient._y;
		_mcGradient.setMask(_mcMask);
	}
	
	private function reCreaete(Void):Void
	{
		//delete the existing clips 
		for (var i:Number = 0; i < _clipArray.length; i++)
		{
			_clipArray[i].removeMovieClip();
		}
		createChildren();
		arrange();
		bgxVG_setMask();
	}
	
	private function bgxVG_setMask(Void):Void
	{
		if (typeof __maxVal == "undefined" ||
			typeof __minVal == "undefined" ||
			typeof __gaugeHeight == "undefined") return;

		var _NumberUnits = (__maxVal - __minVal);
		if (_NumberUnits == 0) _NumberUnits = 1;
		var _unitHeight = __gaugeHeight/_NumberUnits;
		var mHeight:Number = (this.__gaugeValue - __baseValue) * _unitHeight;
		if (mHeight < 0) mHeight = mHeight * -1;
		_mcMask._height = mHeight;
		var _locBaseValue = ((__maxVal - __baseValue )* _unitHeight) + _topOffset;
		if (this.__gaugeValue > this.__baseValue)
		{
			 var maskY:Number =  _locBaseValue - _mcMask._height;	
			 _mcMask._y = maskY;
		}
		if (this.__gaugeValue < this.__baseValue)
		{
			_mcMask._y = _locBaseValue + 1;
		}
		if (this.__gaugeValue == this.__baseValue)
		{
			_mcMask._height = 1;
			_mcMask._y = _locBaseValue - 0.5;
		}	
		
	}
	
	
	var clipParameters:Object = { backdropClip:1, gradientClip:1, markerLabelClip:1, markerClip:1, minVal:1, maxVal:1, gaugeHeight:1, gaugeWidth:1, gaugeX:1,markerX:1, markerStep:1, baseValue:1, showMarkers:1, gaugeValue:1};


	//properties
	//[Inspectable(defaultValue="bgxVG_Backdrop")]
	public function set backdropClip(tClip:String):Void
	{	  
	  __backdropClip = tClip;
	  reCreaete();
	}
	
	public function get backdropClip():String 
	{
	  return __backdropClip;
	}
	
	//properties
	[Inspectable(defaultValue="BgxVG_GradientRedYellowBlue" enumeration="BgxVG_GradientRedYellowBlue,BgxVG_GradientGreenWhite,BgxVG_GradientBlueWhite")]
	public function set gradientClip(tClip:String):Void
	{	  
	  __gradientClip = tClip;
	  reCreaete();
	}
	
	public function get gradientClip():String 
	{
	  return __gradientClip;
	}
	
	//[Inspectable(defaultValue="bgxVG_MarkerLabelClip")]
	public function set markerLabelClip(tClip:String):Void
	{	  
	  __markerLabelClip = tClip;
	  reCreaete();
	}
	
	public function get markerLabelClip():String 
	{
	  return __markerLabelClip;
	}
	
	//[Inspectable(defaultValue="bgxVG_MarkerLine")]
	public function set markerClip(tClip:String):Void
	{	  
	  __markerClip = tClip;
	  reCreaete();
	}
	
	public function get markerClip():String 
	{
	  return __markerClip;
	}
	
	[Inspectable(defaultValue= "-50")]
	public function set minVal(mVal:Number):Void
	{	  
	  	if (isNaN(mVal))
		{
			trace("Bgx Vertical Gauge: minVal must be numeric.");
		}
		else if (typeof __maxVal != "undefined" && mVal >= __maxVal)
		{
			trace("Bgx Vertical Gauge: minVal must smaller then maxVal.");
		}
		else
		{
			__minVal = mVal;
	  		reCreaete();
		}
		
	}
	
	public function get minVal():Number 
	{
	  return __minVal;
	}
	
	[Inspectable(defaultValue=50)]
	public function set maxVal(mVal:Number):Void
	{	
		if (isNaN(mVal))
		{
			trace("Bgx Vertical Gauge: maxVal must be numeric.");
		}
		else if (typeof __minVal != "undefined" && mVal <= __minVal)
		{
			trace("Bgx Vertical Gauge: maxVal must bigger then minVal.");
		}
		else
		{
	  		__maxVal = mVal;
	  		reCreaete();
		}
	}
	
	public function get maxVal():Number 
	{
	  return __maxVal;
	}
	
	
	[Inspectable(defaultValue=200)]
	public function set gaugeHeight(mVal:Number):Void
	{	  
	  	if (Number(mVal) > 0)
		{
	  		__gaugeHeight = mVal;
	 		 reCreaete();
		}
		else
		{
			trace("Bgx Vertical Gauge: gaugeHeight must be a number > 0");
		}
	}
	
	public function get gaugeHeight():Number 
	{
	  return __gaugeHeight;
	}
	
	[Inspectable(defaultValue=15)]
	public function set gaugeWidth(mVal:Number):Void
	{	
		if (Number(mVal) > 0)
		{
	 	 	__gaugeWidth = mVal;
	  		reCreaete();
	 	 }
		else
		{
			trace("Bgx Vertical Gauge: gaugeWidth must be a number > 0");
		}
	}
	
	public function get gaugeWidth():Number 
	{
	  return __gaugeWidth;
	}
	
	[Inspectable(defaultValue=25)]
	public function set gaugeX(mVal:Number):Void
	{	  
	  	if (isNaN(mVal))
		{
			trace("Bgx Vertical Gauge: gaugeX must be numeric.");
		}
		else
		{
	  		__gaugeX = mVal;
	  		reCreaete();
		}
	}
	
	public function get gaugeX():Number 
	{
	  return __gaugeX;
	}
	
	[Inspectable(defaultValue=20)]
	public function set markerX(mVal:Number):Void
	{	  
	  	if (isNaN(mVal))
		{
			trace("Bgx Vertical Gauge: markerX must be numeric.");
		}
		else
		{
	  		__markerX = mVal;
	  		reCreaete();
		}
	}
	
	public function get markerX():Number 
	{
	  return __markerX;
	}
	
	[Inspectable(defaultValue=10)]
	public function set markerStep(mVal:Number):Void
	{	  
	 	if (Number(mVal) > 0)
		{
	 		__markerStep = mVal;
	  		reCreaete();
		}
		else
		{
			trace("Bgx Vertical Gauge: markerStep must be a number > 0");
		}
	}
	
	public function get markerStep():Number 
	{
	  return __markerStep;
	}

	[Inspectable(defaultValue=0)]
	public function set baseValue(bVal:Number):Void
	{	  
	    
	  	if (isNaN(bVal))
		{
			trace("Bgx Vertical Gauge: baseValue must be numeric.");
		}
		else
		{
	 		 __baseValue = bVal;
	 		 bgxVG_setMask();
		}
	}
	
	public function get baseValue():Number 
	{
	  return __baseValue;
	}
	
	[Inspectable(defaultValue="true" enumeration="true,false")]
	public function set showMarkers(bVal:Boolean):Void
	{	  
		 __showMarkers = (bVal.toString() == "true");
	 	reCreaete();
	}
	
	public function get showMarkers():Boolean 
	{
	  return __showMarkers;
	}
	
	[Inspectable(defaultValue=30)]
	public function set gaugeValue(gVal:Number):Void
	{	  
	  	if (isNaN(gVal))
		{
			trace("Bgx Vertical Gauge: gaugeValue must be numeric.");
		}
		else
		{
	  		__gaugeValue = gVal;
	   		reCreaete();
		}
	}
	
	public function get gaugeValue():Number 
	{
	  return __gaugeValue;
	}
	//end properties
}

back to top