Square Progress indicators in Titanium/Alloy

gistfile1.md

This is one approach to create a square progress indicator with Titanium views. In it, we draw a background view with a border, and use 5 view sections to indicate progress.

I'm including a <Slider> to test progress on the device.

XML

<View id="container">
	<View class="off-border"></View>
	<View id="view1" class="part"></View>
	<View id="view2" class="part"></View>
	<View id="view3" class="part"></View>
	<View id="view4" class="part"></View>
	<View id="view5" class="part"></View>
</View>
<Slider id="slider" top="50" min="0" max="100" width="600" value="69" onChange="update"/>

JS

Alloy.CFG.CONTAINER_WIDTH = 90;
Alloy.CFG.CONTAINER_WIDTH_HALF = 45;
Alloy.CFG.LINE_WIDTH = 8;
var containerWidth = Alloy.CFG.CONTAINER_WIDTH;

function updateSquare(percent) {
	if (isNaN(percent) || percent > 1 || percent < 0) {
		return console.error('send me a float between 0 and 1');
	}
	//progressDiff = what pct of line's max width do we have to show?
	var progressDiff;
	if (percent < 0.125) {
		$.view1.height = Alloy.CFG.LINE_WIDTH;
		progressDiff = percent / 0.125;
		$.view1.width = (containerWidth / 2) * progressDiff;
		resetProgress([$.view2, $.view3, $.view4, $.view5]);
	} else if (percent >= 0.125 && percent < 0.375) {
		maximizeViews([$.view1]);

		progressDiff = (percent - 0.125) / 0.250;
		$.view2.width = Alloy.CFG.LINE_WIDTH;
		$.view2.height = containerWidth * progressDiff;

		resetProgress([$.view3, $.view4, $.view5]);
	} else if (percent >= 0.375 && percent < 0.625) {
		maximizeViews([$.view2, $.view1]);

		progressDiff = (percent - 0.375) / 0.250;
		$.view3.height = Alloy.CFG.LINE_WIDTH;
		$.view3.width = containerWidth * progressDiff;

		resetProgress([$.view4, $.view5]);
	} else if (percent >= 0.625 && percent < 0.875) {
		maximizeViews([$.view3, $.view2, $.view1]);

		progressDiff = (percent - 0.625) / 0.250;
		$.view4.width = Alloy.CFG.LINE_WIDTH;
		$.view4.height = containerWidth * progressDiff;
		resetProgress([$.view5]);
	} else if (percent >= 0.875) {
		maximizeViews([$.view4, $.view3, $.view2, $.view1]);

		progressDiff = (percent - 0.875) / 0.125;
		$.view5.height = Alloy.CFG.LINE_WIDTH;
		$.view5.width = (containerWidth / 2) * progressDiff;
	}
}

function maximizeViews(views) {
	views.forEach(function(view) {
		view.width = view._onWidth;
		view.height = view._onHeight;
	});
}

function resetProgress(views) {
	views.forEach(function(view) {
		view.width = 0;
		view.height = 0;
	});
}

function update(e) {
	var pct = parseFloat($.slider.value, 10) / 100;
	updateSquare(pct);
}

.tss

"#container": {
	width: Alloy.CFG.CONTAINER_WIDTH,
	height: Alloy.CFG.CONTAINER_WIDTH
}
".off-border": {
	width: Alloy.CFG.CONTAINER_WIDTH,
	height: Alloy.CFG.CONTAINER_WIDTH,
	borderColor: "#000",
	borderWidth: Alloy.CFG.LINE_WIDTH
}
"#view1": {
	left: Alloy.CFG.CONTAINER_WIDTH_HALF,
	top: 0,
	_onWidth: Alloy.CFG.CONTAINER_WIDTH_HALF,
	_onHeight: Alloy.CFG.LINE_WIDTH
},
"#view2": {
	right: 0,
	top: 0,
	_onWidth: Alloy.CFG.LINE_WIDTH,
	_onHeight: Alloy.CFG.CONTAINER_WIDTH
},
"#view3": {
	bottom: 0,
	right: 0,
	_onWidth: Alloy.CFG.CONTAINER_WIDTH,
	_onHeight: Alloy.CFG.LINE_WIDTH
},
"#view4": {
	left: 0,
	bottom: 0,
	_onWidth: Alloy.CFG.LINE_WIDTH,
	_onHeight: Alloy.CFG.CONTAINER_WIDTH
},
"#view5": {
	left: 0,
	top: 0,
	_onWidth: Alloy.CFG.CONTAINER_WIDTH_HALF,
	_onHeight: Alloy.CFG.LINE_WIDTH
},
".part": {
	backgroundColor: "#bada55",
	height: 0,
	width: 0,
}