zeffii · November 7, 2011 16:11
diff --git a/example_user_display.html b/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>