From c57b2e326198a50683d384f697dc2f8ca88e1063 Mon Sep 17 00:00:00 2001
From: mappu <mappu04@gmail.com>
Date: Mon, 23 Sep 2013 07:16:17 +0000
Subject: [PATCH] commit all archived files

---
 README.md                   |  12 ++
 dist-archive/monitortoy.htm | 312 ++++++++++++++++++++++++++++++++++++
 doc/monitortoy.png          | Bin 0 -> 5194 bytes
 3 files changed, 324 insertions(+)
 create mode 100644 README.md
 create mode 100644 dist-archive/monitortoy.htm
 create mode 100644 doc/monitortoy.png
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5f217bc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+# monitortoy
+
+![](https://img.shields.io/badge/written%20in-Javascript%20%28canvas%29-blue)
+
+A utility to help measure and layout a multimonitor setup.
+
+Features: Add monitors from a given diagonal and aspect ratio, swivel monitors, snap to edges, and measure between any two vertices.
+
+
+## Download
+
+- [⬇️ monitortoy.htm](dist-archive/monitortoy.htm) *(7.56 KiB)*
diff --git a/dist-archive/monitortoy.htm b/dist-archive/monitortoy.htm
new file mode 100644
index 0000000..fc5940b
--- /dev/null
+++ b/dist-archive/monitortoy.htm
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style type="text/css">
+body { text-align:center; } 
+#c {
+	border:1px solid darkgrey;
+	margin:2px;
+}
+		</style>
+	</head>
+	<body>
+		Monitor:
+		<input type="number" id="diag" value="24" min="7" max="70">
+		", ratio
+		<input type="number" id="ratioL" value="16" min="1" max="100">
+		<a href="javascript:;" id="swap">:</a>
+		<input type="number" id="ratioR" value="9" min="1" max="100">
+		
+		<input type="button" id="add" value="Add &raquo;">
+		|
+		<input type="button" id="del" value="Delete &raquo;">
+		|
+		<input type="button" id="swivel" value="Swivel &raquo;">
+		|
+		<input type="button" id="measure" value="Measure &raquo;">
+		<br>
+		<canvas id="c">old browser</canvas>
+		
+		<script type="text/javascript">
+var SCALE  = 6,
+	BOARDW = 512,
+	BOARDH = 512,
+	SNAPEDGE = 5,
+	PTSIZE = 5,
+	TEXTFADETIME = 2000;
+
+var SEL_NONE = 0, SEL_DELETE = 1, SEL_SWIVEL = 2, SEL_MEASURE1 = 3, SEL_MEASURE2 = 4;;
+	
+function id(s) { return document.getElementById(s); };
+
+var c, ctx, boxes=[], selidx=-1, dragoffset={}, selmode=SEL_NONE, measurept=[];
+var txt="", txttimeout;
+
+function onDraw() {
+	ctx.clearRect(0, 0, this.c.width, this.c.height);
+	ctx.fillStyle = "#FF0000";
+	
+	if (txt.length) {
+		ctx.fillText(txt, 10, 15);
+	}
+	
+	for (var i in boxes) {
+		if (selmode) {
+			ctx.strokeStyle="#FF0000";
+		} else if (selidx == i) {
+			ctx.strokeStyle="#0000FF";
+		} else {
+			ctx.strokeStyle="#000000";
+		};
+		
+		ctx.strokeRect(boxes[i].x, boxes[i].y, boxes[i].w, boxes[i].h);
+		if (selmode && boxes[i].highlight) {
+			ctx.fillRect(boxes[i].x, boxes[i].y, boxes[i].w, boxes[i].h);
+		} else {
+		}
+	}
+	
+	if (measurept.length) {
+		ctx.fillStyle = "#00FF00";
+		for (var i in measurept) {
+			if (measurept[i] === false) continue;
+			
+			ctx.fillRect(
+				measurept[i][0] - PTSIZE, 
+				measurept[i][1] - PTSIZE,
+				PTSIZE * 2,
+				PTSIZE * 2
+			);
+		}
+	}
+	
+	return true;
+};
+
+function roundfmt(val, decimals) {
+	if (decimals <= 0) return Math.round(val);
+	return Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals);
+	
+};
+
+function findBox(x, y) {
+	for (var i in boxes) {
+		if (
+			x > boxes[i].x && x < (boxes[i].x + boxes[i].w) &&
+			y > boxes[i].y && y < (boxes[i].y + boxes[i].h)
+		) {
+			return i;
+		}
+	}
+	return -1;
+}
+
+function findCorner(x, y) {
+	for (var i in boxes) {
+		if (Math.abs(x - boxes[i].x) < SNAPEDGE &&
+			Math.abs(y - boxes[i].y) < SNAPEDGE
+		) {
+			return [boxes[i].x, boxes[i].y];
+		}
+		
+		if (Math.abs(x - boxes[i].x - boxes[i].w) < SNAPEDGE &&
+			Math.abs(y - boxes[i].y) < SNAPEDGE
+		) {
+			return [boxes[i].x + boxes[i].w, boxes[i].y];
+		}
+		
+		if (Math.abs(x - boxes[i].x) < SNAPEDGE &&
+			Math.abs(y - boxes[i].y - boxes[i].h) < SNAPEDGE
+		) {
+			return [boxes[i].x, boxes[i].y + boxes[i].h];
+		}
+		
+		if (Math.abs(x - boxes[i].x - boxes[i].w) < SNAPEDGE &&
+			Math.abs(y - boxes[i].y - boxes[i].h) < SNAPEDGE
+		) {
+			return [boxes[i].x + boxes[i].w, boxes[i].y + boxes[i].h];
+		}
+	}
+	return false;
+}
+
+function onDown(x, y) {
+	if (selmode == SEL_MEASURE1 || selmode == SEL_MEASURE2) {
+		var c = findCorner(x, y);
+		if (c === false) {
+			// clicked out - cancel
+			selmode = SEL_NONE;
+			measurept = [];
+			return;
+		}
+		if (selmode == SEL_MEASURE1) {
+			selmode = SEL_MEASURE2;
+			return;
+			
+		} else {
+			// measure
+			var dx = (measurept[SEL_MEASURE1][0] - measurept[SEL_MEASURE2][0]) / SCALE,
+				dy = (measurept[SEL_MEASURE1][1] - measurept[SEL_MEASURE2][1]) / SCALE;
+			txt = "Measurement: "+roundfmt(Math.sqrt( dx*dx + dy*dy ), 2)+'"';
+			clearTimeout(txttimeout);
+			txttimeout = setTimeout(function() {
+				txt = "";
+			}, TEXTFADETIME);
+			
+			// clear
+			measurept = [];
+		}
+	}
+
+	var i = findBox(x, y);
+	if (i != -1) {
+		// found
+		if (selmode == SEL_DELETE) {
+			selmode = SEL_NONE;
+			selidx = -1;
+			delete boxes[i];
+			
+		} else if (selmode == SEL_SWIVEL) {
+			selmode = SEL_NONE;
+			selidx = -1;
+			var tmp = boxes[i].w; boxes[i].w = boxes[i].h; boxes[i].h = tmp;
+			boxes[i].highlight = false; // clear highlight
+			
+		} else {
+			selmode = SEL_NONE;
+			selidx = i;
+			dragoffset = {'x':x - boxes[i].x,'y':y - boxes[i].y};
+		}
+		
+	} else {
+		// not found
+		selmode = SEL_NONE;
+		selidx = -1;
+		
+	}
+};
+
+function onMove(x, y) {
+	if (selidx != -1) {
+		boxes[selidx].x = x - dragoffset.x;
+		boxes[selidx].y = y - dragoffset.y;
+		
+		// snap to edges
+		for (var i in boxes) {
+			if (selidx == i) continue;
+			
+			// horizontal snap
+			
+			if (Math.abs(boxes[selidx].x - boxes[i].x) < SNAPEDGE) {
+				boxes[selidx].x = boxes[i].x;
+			} else if (Math.abs(boxes[selidx].x - boxes[i].x - boxes[i].w) < SNAPEDGE) {
+				boxes[selidx].x = boxes[i].x + boxes[i].w;
+			} else if (Math.abs(boxes[selidx].x + boxes[selidx].w - boxes[i].x) < SNAPEDGE) {
+				boxes[selidx].x = boxes[i].x - boxes[selidx].w;
+			} else if (Math.abs(boxes[selidx].x + boxes[selidx].w - boxes[i].x - boxes[i].w) < SNAPEDGE) {
+				boxes[selidx].x = boxes[i].x + boxes[i].w - boxes[selidx].w;
+			}
+			
+			// vertical snap
+			
+			if (Math.abs(boxes[selidx].y - boxes[i].y) < SNAPEDGE) {
+				boxes[selidx].y = boxes[i].y;
+			} else if (Math.abs(boxes[selidx].y - boxes[i].y - boxes[i].h) < SNAPEDGE) {
+				boxes[selidx].y = boxes[i].y + boxes[i].h;
+			} else if (Math.abs(boxes[selidx].y + boxes[selidx].h - boxes[i].y) < SNAPEDGE) {
+				boxes[selidx].y = boxes[i].y - boxes[selidx].h;
+			} else if (Math.abs(boxes[selidx].y + boxes[selidx].h - boxes[i].y - boxes[i].h) < SNAPEDGE) {
+				boxes[selidx].y = boxes[i].y + boxes[i].h - boxes[selidx].h;
+			}
+		};
+		
+	} else if (selmode == SEL_MEASURE1 || selmode == SEL_MEASURE2) {
+		// collision detect with corner
+		measurept[selmode] = findCorner(x, y);
+		
+	} else if (selmode) {
+		// collision detect with monitor
+		for (var i in boxes) {
+			boxes[i].highlight = false;
+		}
+		var i = findBox(x, y);
+		if (i != -1) boxes[i].highlight = true;
+	}
+};
+
+function onUp() {
+	// Unselect
+	selidx = -1;
+};
+
+function createBox(diag, rl, rr) {
+	// Convert to width/height
+	var x = diag / (Math.sqrt(rl*rl + rr*rr));
+	return [rl * x * SCALE, rr * x * SCALE];
+};
+
+function onLoad() {
+
+	// Events
+	id('swap').onclick = function() {
+		var rl = id('ratioL').value, rr = id('ratioR').value;
+		id('ratioR').value = rl;
+		id('ratioL').value = rr;
+	};
+	id('add').onclick = function() {
+		var newbox = createBox(
+			parseInt(id('diag').value, 10),
+			parseInt(id('ratioL').value, 10),
+			parseInt(id('ratioR').value, 10)
+		);
+		boxes.push({
+			'x': 10, 'y': 10, 'w': newbox[0], 'h': newbox[1]
+		});
+	};
+	id('del').onclick = function() {
+		selidx = -1;
+		selmode = SEL_DELETE;
+	};
+	id('swivel').onclick = function() {
+		selidx = -1;
+		selmode = SEL_SWIVEL;
+	};
+	id('measure').onclick = function() {
+		selidx = -1;
+		selmode = SEL_MEASURE1;
+	};
+	
+	// Initialise canvas
+	
+	c = id('c'); ctx = c.getContext("2d");
+	c.width = BOARDW;
+	c.height = BOARDH;
+	
+	c.onmousedown = function(e) { return onDown(e.offsetX, e.offsetY); };
+	c.onmousemove = function(e) { return onMove(e.offsetX, e.offsetY); };
+	c.onmouseup   = onUp;
+	
+	var raf =
+		window.requestAnimationFrame ||
+		window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		function(callback, ev) {
+			window.setTimeout(callback, 1000 / 60);
+		};
+	var callFrame = function() {
+		raf(function() {
+			if (onDraw() !== false) callFrame();
+		});
+	}	
+	callFrame();
+};
+
+onLoad();
+		</script>
+	</body>
+</html>
+		
\ No newline at end of file
diff --git a/doc/monitortoy.png b/doc/monitortoy.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a4e38d56a2e7236528481d4f122fefedc92d75c
GIT binary patch
literal 5194
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

literal 0
HcmV?d00001

