zeffii · November 9, 2011 17:56
diff --git a/graphic_report_view_09_w_layers.html b/graphic_report_view_09_w_layers.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
 	*/
 	
 	// 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);

 										
 										
 	// 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
	*/

	// 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);



	// 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>