Gauge

id: com.leorbrenman.tigauge

Widget has a default setting and can be configured at instantiation time via XML, TSS or JS and can also be modified at run time using built-in methods in JS. Widget height is programmable and width fills to parent container size.

This widget is modeled after the Mint iPhone app Budget Visualization gauge

• Arguments: percent gaugeColor gaugeBGColor overlayText overlayTextColor gaugeHeight isAnimationOn titleText titleRightText isAnimationOn (animation can only be enabled on iOS)

• Methods: setPercent getPercent setGaugeColor getGaugeColor setGaugeBackgroundColor getGaugeBackgroundColor setOverlayText getOverlayText setOverlayTextColor getOverlayTextColor enableAnimation disableAnimation getAnimationSetting setGaugeHeight getGaugeHeight setTitle getTitle clearTitle setTitleRight getTitleRight clearTitleRight

Sample instantiation:

• Add Widget com.leorbrenman.gtigauge to project/app/widgets folder

• Add dependency to config.json

"dependencies": {
	"com.leorbrenman.tigauge": "1.0"
}

• Add widget to screen as follows:

(A) In XML

<Widget id='myGauge1' src="com.leorbrenman.tigauge" color="#4ba90a" percent="20" overlayText="$200" titleText="Budget: April" />

and position and size in a view as follows:

<View top="50dp" height="Ti.UI.SIZE" width="200" left="10">
	<Widget id='myGauge1' src="com.leorbrenman.tigauge" color="#4ba90a" percent="20" overlayText="$200" titleText="Budget: April" />
</View>

or

(B) In JS

var myGauge = Alloy.createWidget("com.leorbrenman.tigauge", {
	percent: 33,
	color: "pink",
	titleText: "Budget: July",
	overlayText: "33%"
});
$.sv.add(myGauge.getView());

or

(C) Combination:

<Widget id='myGauge2' src="com.leorbrenman.tigauge"/>

AND

$.myGauge2.setPercent("88");
$.myGauge2.setBackgroundColor("black");
$.myGauge2.setOverlayText("88%");

OR

"#myGauge1": {
	 gaugeColor: "#4ba90a",
	 percent: "40",
	 overlayText: "$200M",
}