zeffii · November 10, 2011 13:13
diff --git a/visual_progress_report_p4.html b/visual_progress_report_p4.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/style2.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
 	08 Nov, Scrollability 
 	09 Nov, Layers, sorting Array
 	*/
 	
 	// Global variables
 	var layer2 = new Layer(); // background layer
 	var layer1 = new Layer(); // top layer
 		
 	var spacerHeight = 100;
 	
 	// Static variables 
 	var bufferHeight = 7;		// for outer border.
 	var cornerSize = new Size(7,7);	// radius of outer border rounding.
 	
 	
 	// Protein. 
 	
 	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';
 		path.fillColor = "#FFFFFF";
 		
 		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 ySize = itemList.length * 21;	//assumes itemList is not empty.
 		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;
 		path.fillColor = "#EEEEEE";
 		path.fillColor.alpha = .23;
 		
 		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.	
 		*/
 		// check layer
 		layer1.activate();	
 		
 		// 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.
 		layer2.activate();
 		var rectangleDimensions = draw_border(point, descriptionHeight, itemList);
 		return 40 + rectangleDimensions.height;
 		
 	}
 	
 	
 	// i haven't given much thought to this part so it's not very pretty.
 	
 	// Living Room
 	var itemList = new Array(	["Walls", 100], ["Coving", 95], ["Ceiling", 100], ["Carpet", 95], ["Dents", 100] );
 	var multilineText = null;
 	var areaInstance = new Array( "Living Room", itemList, multilineText);
 	
 	// Kitchen
 	var itemList2 = new Array(["Walls", 100], ["Ceiling", 100], ["Floor", 95], ["Dents", 100], ["Fridge", 100], ["Clothes Washer", 100], ["Cabinets", 80], ["Oven", 0] );
 	var multilineText2 = new Array("- Microwave : Done", "- Doorstop / Area behind door needs fixing");
 	var areaInstance2 = new Array( "Kitchen", itemList2, multilineText2);
 	
 	// Main Bedroom
 	var itemList3 = new Array(["Damp Patch", 0], ["Ceiling", 60], ["Floor", 95], ["Dents", 100], ["Walls", 50],["Ensuite Door", 80]);
 	var multilineText3 = new Array("- Damp Spot needs treatment", "- Condensation around window seems ok", "- Vent checked, it's open", "- Weird mould on the skirting board");
 	var areaInstance3 = new Array( "Master Bedroom", itemList3, multilineText3);
 	
 	// Ensuite
 	var itemList4 = new Array(["Walls", 30], ["Ceiling", 30], ["Floor", 35], ["Dents", 80], ["Mold", 85], ["Cabinet", 80], ["Shower", 30] );
 	var multilineText4 = new Array("- Walls need water resistant paint", "- No ventilation for condensation yet. need stairs/cord.");
 	var areaInstance4 = new Array( "Ensuite", itemList4, multilineText4);
 	
 	// Bathroom
 	var itemList5 = new Array(["Tiles", 100], ["Ceiling", 60], ["Floor", 95], ["Dents", 90], ["Bath", 80], ["Walls", 20] );
 	var multilineText5 = new Array("- Walls need water resistant paint", "- No ventilation for condensation yet. need stairs/cord.", 
 	"- Door needs paint, lock", "- Cistern fills very slow",  "- Need to replace wood under sink", "- Bath and Basin need filler");
 	var areaInstance5 = new Array( "Bathroom", itemList5, multilineText5);
 	
 	// Small Bedroom
 	var itemList6 = new Array(["Walls", 100], ["Ceiling", 100], ["Floor", 100], ["Dents", 100], ["Wardrobe", 80]);
 	var multilineText6 = new Array("- Wardrobe should be screwed together again", "- Windows are missing second lock", "- Door handle is bent, should add a doorstop too");
 	var areaInstance6 = new Array( "Small Bedroom", itemList6, multilineText6);
 	
 	// Hallway
 	var itemList7 = new Array(["Walls", 100], ["Ceiling", 100], ["Carpet", 100], ["Dents", 100]);
 	var multilineText7 = new Array("- Front door hangings look like a forced entry has taken place.");
 	var areaInstance7 = new Array( "Hallway", itemList7, multilineText7);
 	
 	// Area arrays compiled into one Array
 	var areaList = new Array(	areaInstance, areaInstance2, areaInstance3, 
 										areaInstance4, areaInstance5, areaInstance6, areaInstance7);

 	
 	// custom sorting,
 	
 	function get_average(areaInstance){
 	
 		/*
 		Each areaInstance contains an itemList. Every itemList has a list of percentages, 
 		i would like to know what the sum of percentages divided by the number of items 
 		in that itemList is, this gives an indication of the percentage completed for that specific area.
 		
 		input:	areaInstance
 		return:	average percentage in itemList
 		*/
 				
 		var itemList = areaInstance[1];
 		var arrayLength = itemList.length;
 		
 		var percents = 0;
 		for (i=0; i < arrayLength; i++){
 			percents += itemList[i][1];
 		}
 		
 		return percents / arrayLength;
 			
 	}
 		
 		
 	function sortfunction(x, y){
 		
 		/*
 		explanation:	(to self) it's a bit vague, x and y seem to be consecutive elements of the array to be sorted.
 		input:			a raw array
 		output:			an array, but sorted by the averaged percentage of itemList in each areaInstance, 
 							in descending order.
 		*/
 		
 		x = get_average(x);
 		y = get_average(y);
 		
 		if (x < y)
 			return 1;
 		else if (x== y)
 			return 0;
 		else 
 			return -1;
 			
 	}

 	areaList = areaList.sort(sortfunction);
 	
 	
 	
 										
 	// Main.										
 	var areaIndex = 0	
 	for (areaIndex; areaIndex < areaList.length; areaIndex++){
 		var current_yposition = draw_area(areaList[areaIndex], new Point(100, spacerHeight));
 		spacerHeight += current_yposition;
 		// console.log(i);
 	
 	}

 	
 	</script>
 </head>
 <body>
 	<canvas id="canvas" width="700" height="1900"></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/style2.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
	08 Nov, Scrollability
	09 Nov, Layers, sorting Array
	*/

	// Global variables
	var layer2 = new Layer(); // background layer
	var layer1 = new Layer(); // top layer

	var spacerHeight = 100;

	// Static variables
	var bufferHeight = 7; // for outer border.
	var cornerSize = new Size(7,7); // radius of outer border rounding.


	// Protein.

	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';
	path.fillColor = "#FFFFFF";

	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 ySize = itemList.length * 21; //assumes itemList is not empty.
	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;
	path.fillColor = "#EEEEEE";
	path.fillColor.alpha = .23;

	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.
	*/
	// check layer
	layer1.activate();

	// 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.
	layer2.activate();
	var rectangleDimensions = draw_border(point, descriptionHeight, itemList);
	return 40 + rectangleDimensions.height;

	}


	// i haven't given much thought to this part so it's not very pretty.

	// Living Room
	var itemList = new Array( ["Walls", 100], ["Coving", 95], ["Ceiling", 100], ["Carpet", 95], ["Dents", 100] );
	var multilineText = null;
	var areaInstance = new Array( "Living Room", itemList, multilineText);

	// Kitchen
	var itemList2 = new Array(["Walls", 100], ["Ceiling", 100], ["Floor", 95], ["Dents", 100], ["Fridge", 100], ["Clothes Washer", 100], ["Cabinets", 80], ["Oven", 0] );
	var multilineText2 = new Array("- Microwave : Done", "- Doorstop / Area behind door needs fixing");
	var areaInstance2 = new Array( "Kitchen", itemList2, multilineText2);

	// Main Bedroom
	var itemList3 = new Array(["Damp Patch", 0], ["Ceiling", 60], ["Floor", 95], ["Dents", 100], ["Walls", 50],["Ensuite Door", 80]);
	var multilineText3 = new Array("- Damp Spot needs treatment", "- Condensation around window seems ok", "- Vent checked, it's open", "- Weird mould on the skirting board");
	var areaInstance3 = new Array( "Master Bedroom", itemList3, multilineText3);

	// Ensuite
	var itemList4 = new Array(["Walls", 30], ["Ceiling", 30], ["Floor", 35], ["Dents", 80], ["Mold", 85], ["Cabinet", 80], ["Shower", 30] );
	var multilineText4 = new Array("- Walls need water resistant paint", "- No ventilation for condensation yet. need stairs/cord.");
	var areaInstance4 = new Array( "Ensuite", itemList4, multilineText4);

	// Bathroom
	var itemList5 = new Array(["Tiles", 100], ["Ceiling", 60], ["Floor", 95], ["Dents", 90], ["Bath", 80], ["Walls", 20] );
	var multilineText5 = new Array("- Walls need water resistant paint", "- No ventilation for condensation yet. need stairs/cord.",
	"- Door needs paint, lock", "- Cistern fills very slow", "- Need to replace wood under sink", "- Bath and Basin need filler");
	var areaInstance5 = new Array( "Bathroom", itemList5, multilineText5);

	// Small Bedroom
	var itemList6 = new Array(["Walls", 100], ["Ceiling", 100], ["Floor", 100], ["Dents", 100], ["Wardrobe", 80]);
	var multilineText6 = new Array("- Wardrobe should be screwed together again", "- Windows are missing second lock", "- Door handle is bent, should add a doorstop too");
	var areaInstance6 = new Array( "Small Bedroom", itemList6, multilineText6);

	// Hallway
	var itemList7 = new Array(["Walls", 100], ["Ceiling", 100], ["Carpet", 100], ["Dents", 100]);
	var multilineText7 = new Array("- Front door hangings look like a forced entry has taken place.");
	var areaInstance7 = new Array( "Hallway", itemList7, multilineText7);

	// Area arrays compiled into one Array
	var areaList = new Array( areaInstance, areaInstance2, areaInstance3,
	areaInstance4, areaInstance5, areaInstance6, areaInstance7);


	// custom sorting,

	function get_average(areaInstance){

	/*
	Each areaInstance contains an itemList. Every itemList has a list of percentages,
	i would like to know what the sum of percentages divided by the number of items
	in that itemList is, this gives an indication of the percentage completed for that specific area.

	input: areaInstance
	return: average percentage in itemList
	*/

	var itemList = areaInstance[1];
	var arrayLength = itemList.length;

	var percents = 0;
	for (i=0; i < arrayLength; i++){
	percents += itemList[i][1];
	}

	return percents / arrayLength;

	}


	function sortfunction(x, y){

	/*
	explanation: (to self) it's a bit vague, x and y seem to be consecutive elements of the array to be sorted.
	input: a raw array
	output: an array, but sorted by the averaged percentage of itemList in each areaInstance,
	in descending order.
	*/

	x = get_average(x);
	y = get_average(y);

	if (x < y)
	return 1;
	else if (x== y)
	return 0;
	else
	return -1;

	}

	areaList = areaList.sort(sortfunction);




	// Main.
	var areaIndex = 0
	for (areaIndex; areaIndex < areaList.length; areaIndex++){
	var current_yposition = draw_area(areaList[areaIndex], new Point(100, spacerHeight));
	spacerHeight += current_yposition;
	// console.log(i);

	}


	</script>
	</head>
	<body>
	<canvas id="canvas" width="700" height="1900"></canvas>

	</body>
	</html>