Add 'box' demo

minyoon · Jun 4, 2013 · 67424d3 · 67424d3
1 parent e68a2a0
commit 67424d3
Show file tree

Hide file tree

Showing 7 changed files with 812 additions and 0 deletions.
diff --git a/examples/boxes/LICENSE b/examples/boxes/LICENSE
@@ -0,0 +1,54 @@
+Portions of this program utilize 3rd-party code and are copyright of their 
+respective owners, and are distributed under the following license conditions:
+
+###############################################################################
+
+spin.js
+
+The MIT License
+
+Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+###############################################################################
+
+stat.js
+
+The MIT License
+
+Copyright (c) 2009-2012 Mr.doob
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/examples/boxes/boxes.ftl b/examples/boxes/boxes.ftl
@@ -0,0 +1,54 @@
+interface IRoot { 
+	var w : float;
+	var h : float;
+}
+
+interface Node { 
+	var w : float;
+	var h : float;
+	var x : float;
+	var rx : float;
+	var y : float;
+
+    var depth : int;
+}
+
+class Root : IRoot { 
+	children {
+		child : Node;
+	}
+
+	actions {
+		w := child.w + 10;
+		h := child.h + 10;
+		child.x := 5;
+		child.rx := child.x + child.w;
+		child.y := 5;
+
+		child.depth := 0;
+	}
+}
+
+class HBox : Node { 
+	children {
+		childs : [ Node ];
+	}
+	actions {
+		loop childs {
+			childs.depth := depth + 1;
+			w := fold 5 .. $-.w + childs$i.w + 5;
+			childs.rx := fold x .. childs$-.rx + 5 + childs$i.w;
+			childs.x := childs$i.rx - childs$i.w; 
+			h := fold 5 .. $-.h > (childs$i.h + 10) ? $-.h : (childs$i.h + 10);
+			childs.y := y + 5;
+		}
+		@render @RectangleOutline(x, y, w, h, rgb(100,0,0));
+	}
+}
+class Leaf : Node { 
+	actions {
+		w := 10;
+		h := 10;
+		@render @Rectangle(x, y, w, h, rgb(255,0,0));
+	}
+}
diff --git a/examples/boxes/data_sc_big.json b/examples/boxes/data_sc_big.json
@@ -0,0 +1,18 @@
+data = {
+	class: "Root", 
+	children: {
+		"child": {
+			class: "HBox",
+			children: {
+				"childs": [
+					{class: "Leaf"},
+					{class: "Leaf"},
+					{class: "HBox",
+					 children: {
+					   childs: [{class: "Leaf"}, {class: "Leaf"}]}},
+					{class: "Leaf"},
+					{class: "Leaf"}]						   
+			}
+		} 
+	}
+};	
diff --git a/examples/boxes/data_sc_small.json b/examples/boxes/data_sc_small.json
@@ -0,0 +1,18 @@
+data = {
+	class: "Root", 
+	children: {
+		"child": {
+			class: "HBox",
+			children: {
+				"childs": [
+					{class: "Leaf"},
+					{class: "Leaf"},
+					{class: "HBox",
+					 children: {
+					   childs: [{class: "Leaf"}, {class: "Leaf"}]}},
+					{class: "Leaf"},
+					{class: "Leaf"}]						   
+			}
+		} 
+	}
+};
diff --git a/examples/boxes/index.html b/examples/boxes/index.html
@@ -0,0 +1,77 @@
+	<!DOCTYPE html>
+<html>
+	<head>
+	<title>Superconductor Template</title>
+	<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
+	<style type="text/css">
+		#visualization {
+			width: 1024px;
+			height: 768px;
+			box-shadow: 0 .3em 0.3em #333;
+			background-color: #EBEBEB;
+			border: 1px solid #CCC;
+		}	
+	</style>	
+	<script src="/superconductorjs/superconductor.js" type="text/javascript"></script>
+	<script type="text/javascript">
+
+	var tinyData = { //set to null to instead load JSON file
+		class: "Root", 
+		children: {
+			"child": {
+				class: "HBox",
+				children: {
+					"childs": [
+						{class: "Leaf"},
+						{class: "Leaf"},
+						{class: "HBox",
+						 children: {
+						   childs: [{class: "Leaf"}, {class: "Leaf"}]}},
+						{class: "Leaf"},
+						{class: "Leaf"}]
+				}
+			} 
+		}
+	};
+
+	var useDummyData = false; //dummy small or real big JSON file
+
+	function updateDisplay() {
+		window.superconductor.layoutAndRender();
+	}
+
+	window.onload = function() {
+		var canvas = document.getElementById("visualization");
+		window.superconductor = new Superconductor("kernels.visualization", canvas);
+		window.superconductor.glr.setW(10.0);
+
+		var setDefaults = function () {
+			window.superconductor.startVisualization();
+			updateDisplay();
+		};		
+
+		setTimeout(function() { 
+				if (tinyData) {
+					console.log("using in-memory tiny data", tinyData);
+					window.superconductor.loadDataObj(tinyData, setDefaults);
+				} else {
+			    	window.superconductor.loadData(
+			    		useDummyData ? "data_sc_small.json" : "data_sc_big.json", 
+			    		setDefaults);	
+				}
+			}, 500);
+
+
+
+	};
+	</script>
+</head>
+
+<body>
+	<div>	
+			<h1>Superconductor</h1>
+			<canvas id="visualization" >ERROR: HTML canvas support not found.</canvas>
+
+	</div>
+</body>
+</html>