zeffii/example_user_display.html

## example_user_display.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Apt Progress</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">

	/*
	visual work progress report
	written by Dealga McArdle 2011, November.
	MIT license

	07 Nov, Modularized Code
	*/


	function draw_item(location, name, percentage){

		/*
		helper function for item specific percentage representation
		*/

		// area name stuff
		var itemNameText = new PointText(location);
		itemNameText.justification = 'right';
		itemNameText.fillColor = '#222222';
		itemNameText.content = name;

		// draw rects for readout
		var progressBarLocation = new Point(location.x + 20, location.y - 12);
		var progressBarSize = new Size(400,12);
		var rectangle = new Rectangle(progressBarLocation, progressBarSize);
		var path = new Path.Rectangle(rectangle);
		path.strokeColor = '#1f9edd';

		var progressBarReadoutLocation = new Point(location.x + 21, location.y - 11);
		var progressBarReadout = new Size(percentage*4, 10);
		var innerRectangle = new Rectangle(progressBarReadoutLocation, progressBarReadout);
		var pathInner = new Path.Rectangle(innerRectangle);
		pathInner.strokeColor = '#1f9edd';
		pathInner.fillColor = '#1f9edd';

	}


	function draw_description(multilineText, descriptionLocation){

		/*
		only reaches this point if multilineText was not null.
		This function draws the discription and returns the height
		of the area it produces as an integer.

		input:	multilineText, and initial location for first line of description text.
		output:	height of generated text
		*/

		var verticalDistance = new Point(0,21);
		for (i=0; i < multilineText.length; i++){
			var descriptionText = new PointText(descriptionLocation);
			descriptionText.content = multilineText[i];
			descriptionText.characterStyle = {
				fillColor: 'black',
				fontSize: 9
			};
			descriptionLocation = descriptionLocation + verticalDistance;

		}
		return 21 * multilineText.length;

	}


	function draw_area_name(areaName, areaNameLocation){

		/*
		takes a string and a location x.y and draws them.
		*/

		var areaNameText = new PointText(areaNameLocation);
		areaNameText.justification = 'left';
		areaNameText.content = areaName;
		areaNameText.characterStyle = {
			fillColor: 'black',
			fontSize: 16
		};

	}


	function draw_border(point, descriptionHeight, itemList){

		/*
		Takes into account the location of the rectangle,
		adjusts final rectangle size with the values found in descriptionHeight and the
		length of the itemList

		return: rectangle dimensions ( to be used for placing the point for subsequent rectangles areas
		*/

		// outer border setup, take into account item list and description length
		var bufferHeight = 7;
		var ySize = itemList.length * 21;	//assumes itemList is not empty.
		var cornerSize = new Size(7,7);
		var rectangleDimensions = new Size(530, ySize + descriptionHeight + bufferHeight);

		// outer border drawing
		var rectangle = new Rectangle(point, rectangleDimensions);
		var path = new Path.RoundRectangle(rectangle, cornerSize);
		path.strokeColor = '#DDDDDD';
		path.strokeWidth = 2;

		return rectangleDimensions;

	}


	function draw_area(areaInstance, point){

		/*
		input:	areaInstance, contains all data for this area
		output:	draw areaName, items + percentages, description (if present.)
		return:	location.y for a next areaInstance.
		*/

		// disect the area instance
		var areaName = areaInstance[0];
		var itemList = areaInstance[1];
		var multilineText = areaInstance[2];

		// draw area name
		var areaNameLocation = new Point(point.x, point.y-10);
		draw_area_name(areaName, areaNameLocation);

		// draw items and percentages
		var itemLocation = new Point(point.x+100, point.y+20);
		var verticalDistance = new Point(0,21);
		for (i=0; i < itemList.length; i++){
			draw_item(itemLocation, itemList[i][0], itemList[i][1]);
			itemLocation = itemLocation + verticalDistance;
		}

		// use multilineText, draw if present.
		// use the last area item location to set the location of the following description in multilineText
		var descriptionHeight = 0;
		if (multilineText != null){
			var alignToProgressbar = new Point(20,0);
			var descriptionLocation = itemLocation + alignToProgressbar;
			descriptionHeight = draw_description(multilineText, descriptionLocation);
		}

		// draw border and return its height for the next areaInstance (if there is one.)
		// use this to space out consecutive Areas.
		var rectangleDimensions = draw_border(point, descriptionHeight, itemList);
		return 30 + rectangleDimensions.height;

	}


	var itemList = new Array(	["Walls", 100], ["Coving", 95], ["Ceiling", 100], ["Carpet", 95], ["Dents", 100] );
	var multilineText = new Array("line 1", "line 2 extra", "line 3 etcetc");
	var areaInstance = new Array( "Living Room", itemList, multilineText);

	draw_area(areaInstance, new Point(100, 100));


	// project.activeLayer.position = view.center;
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Apt Progress</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../lib/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">

	/*
	visual work progress report
	written by Dealga McArdle 2011, November.
	MIT license

	07 Nov, Modularized Code
	*/


	function draw_item(location, name, percentage){

	/*
	helper function for item specific percentage representation
	*/

	// area name stuff
	var itemNameText = new PointText(location);
	itemNameText.justification = 'right';
	itemNameText.fillColor = '#222222';
	itemNameText.content = name;

	// draw rects for readout
	var progressBarLocation = new Point(location.x + 20, location.y - 12);
	var progressBarSize = new Size(400,12);
	var rectangle = new Rectangle(progressBarLocation, progressBarSize);
	var path = new Path.Rectangle(rectangle);
	path.strokeColor = '#1f9edd';

	var progressBarReadoutLocation = new Point(location.x + 21, location.y - 11);
	var progressBarReadout = new Size(percentage*4, 10);
	var innerRectangle = new Rectangle(progressBarReadoutLocation, progressBarReadout);
	var pathInner = new Path.Rectangle(innerRectangle);
	pathInner.strokeColor = '#1f9edd';
	pathInner.fillColor = '#1f9edd';

	}


	function draw_description(multilineText, descriptionLocation){

	/*
	only reaches this point if multilineText was not null.
	This function draws the discription and returns the height
	of the area it produces as an integer.

	input: multilineText, and initial location for first line of description text.
	output: height of generated text
	*/

	var verticalDistance = new Point(0,21);
	for (i=0; i < multilineText.length; i++){
	var descriptionText = new PointText(descriptionLocation);
	descriptionText.content = multilineText[i];
	descriptionText.characterStyle = {
	fillColor: 'black',
	fontSize: 9
	};
	descriptionLocation = descriptionLocation + verticalDistance;

	}
	return 21 * multilineText.length;

	}


	function draw_area_name(areaName, areaNameLocation){

	/*
	takes a string and a location x.y and draws them.
	*/

	var areaNameText = new PointText(areaNameLocation);
	areaNameText.justification = 'left';
	areaNameText.content = areaName;
	areaNameText.characterStyle = {
	fillColor: 'black',
	fontSize: 16
	};

	}


	function draw_border(point, descriptionHeight, itemList){

	/*
	Takes into account the location of the rectangle,
	adjusts final rectangle size with the values found in descriptionHeight and the
	length of the itemList

	return: rectangle dimensions ( to be used for placing the point for subsequent rectangles areas
	*/

	// outer border setup, take into account item list and description length
	var bufferHeight = 7;
	var ySize = itemList.length * 21; //assumes itemList is not empty.
	var cornerSize = new Size(7,7);
	var rectangleDimensions = new Size(530, ySize + descriptionHeight + bufferHeight);

	// outer border drawing
	var rectangle = new Rectangle(point, rectangleDimensions);
	var path = new Path.RoundRectangle(rectangle, cornerSize);
	path.strokeColor = '#DDDDDD';
	path.strokeWidth = 2;

	return rectangleDimensions;

	}


	function draw_area(areaInstance, point){

	/*
	input: areaInstance, contains all data for this area
	output: draw areaName, items + percentages, description (if present.)
	return: location.y for a next areaInstance.
	*/

	// disect the area instance
	var areaName = areaInstance[0];
	var itemList = areaInstance[1];
	var multilineText = areaInstance[2];

	// draw area name
	var areaNameLocation = new Point(point.x, point.y-10);
	draw_area_name(areaName, areaNameLocation);

	// draw items and percentages
	var itemLocation = new Point(point.x+100, point.y+20);
	var verticalDistance = new Point(0,21);
	for (i=0; i < itemList.length; i++){
	draw_item(itemLocation, itemList[i][0], itemList[i][1]);
	itemLocation = itemLocation + verticalDistance;
	}

	// use multilineText, draw if present.
	// use the last area item location to set the location of the following description in multilineText
	var descriptionHeight = 0;
	if (multilineText != null){
	var alignToProgressbar = new Point(20,0);
	var descriptionLocation = itemLocation + alignToProgressbar;
	descriptionHeight = draw_description(multilineText, descriptionLocation);
	}

	// draw border and return its height for the next areaInstance (if there is one.)
	// use this to space out consecutive Areas.
	var rectangleDimensions = draw_border(point, descriptionHeight, itemList);
	return 30 + rectangleDimensions.height;

	}


	var itemList = new Array( ["Walls", 100], ["Coving", 95], ["Ceiling", 100], ["Carpet", 95], ["Dents", 100] );
	var multilineText = new Array("line 1", "line 2 extra", "line 3 etcetc");
	var areaInstance = new Array( "Living Room", itemList, multilineText);

	draw_area(areaInstance, new Point(100, 100));



	// project.activeLayer.position = view.center;
	</script>
	</head>
	<body>
	<canvas id="canvas" resize></canvas>
	</body>
	</html>