massive redesign...

.gitignore

@@ -22,3 +22,4 @@ rspec_report.html
 _Yardoc
 */ri
 
+mx:_

README.textile

@@ -1,6 +1,6 @@
 h1. ASK KEN™ - Visual Knowledge Browser
 
-"ASK KEN™":http://askken.heroku.com is some sort of a Node-Link diagram that allows to visually navigate through the "Freebase":http://www.freebase.com graph. 
+"ASK KEN™":http://askken.heroku.com is some sort of a Node-Link diagram that allows to visually navigate through interconnected topics provided by "Freebase":http://www.freebase.com.
 
 It uses "Rails":http://rubyonrails.org and the "Ken Ruby Freebase API Wrapper":http://github.com/michael/ken in the backend and "Processing.js":http://processingjs.org on front.
 

app/views/layouts/application.html.haml

@@ -4,7 +4,7 @@
   %head
     %link{:rel => 'stylesheet', :href => '/stylesheets/global.css', :type => 'text/css', :media => 'screen, projection'}
     %script{:type => 'text/javascript', :src => '/javascripts/jquery-1.3.2.min.js'}
-    %script{:type => 'text/javascript', :src => '/javascripts/processing.min.js'}
+    %script{:type => 'text/javascript', :src => '/javascripts/processing.js'}
     %script{:type => 'text/javascript', :src => '/javascripts/freebase.suggest.min.js'}
     = yield :head
     %title Ask Ken - Showcase
@@ -18,6 +18,9 @@
       %br{:style => "clear: both;"}
     %section#content
       = yield
+      %aside
+        Text goes here
+      %br{:style => "clear: both"}
     %footer
       .left
         A

app/views/resources/index.html.erb

@@ -42,9 +42,9 @@
           $(this).val($(this).attr('default')).addClass('ghost-input');
         }
       });
-
+      
       search.val(search.attr('default')).addClass('ghost-input');
-  
+
       // init
       p.resourceId = null; // "/en/new_order";
       p.init(p.ajax("/javascripts/pjs/physics.pjs")+p.ajax("/javascripts/pjs/value.pjs")+p.ajax("/javascripts/pjs/attribute.pjs")+p.ajax("/javascripts/pjs/resource.pjs")+p.ajax("/javascripts/pjs/node.pjs")+p.ajax("/javascripts/pjs/edge.pjs")+p.ajax("/javascripts/pjs/graph.pjs")+p.ajax("/javascripts/pjs/network.pjs"));
@@ -53,7 +53,6 @@
       $(window).resize(function(){
         p.resize();
       });
-
     }
   });
 </script>

config/environment.rb

@@ -1,7 +1,7 @@
 # Be sure to restart your server when you modify this file
 
 # Specifies gem version of Rails to use when vendor/rails is not present
-RAILS_GEM_VERSION = '2.3.2' unless defined? RAILS_GEM_VERSION
+# RAILS_GEM_VERSION = '2.3.2' unless defined? RAILS_GEM_VERSION
 
 # Bootstrap the Rails environment, frameworks, and default configuration
 require File.join(File.dirname(__FILE__), 'boot')

public/javascripts/pjs/attribute.pjs

@@ -72,13 +72,22 @@ public class Attribute {
 	}
 
   public void draw() {
-		float radiusOuter = this.resource.radiusOuter;
-		fill(0,0,0, 90);
-		if (this==resource.selectedAttribute) {
-			RadialText radialText = new RadialText(this.getName(), resource.x, resource.y, 73);
-			radialText.draw(PI, angleStop);
-			fill(col);		
-		}
+		float radius = this.resource.radius;
+		fill(col);
+
+		textFont(defaultFont, 45);
+    if (this==resource.selectedAttribute) {
+     textFont(defaultFont, 45);
+     text(resource.selectedAttribute.getValues().size()+"", resource.x-50, resource.y-80, 100);
+     textFont(defaultFont, 13);
+
+     text("Resources", resource.x-50, resource.y-30, 100);
+     textFont(defaultFont, 18);
+     text(this.getName(), resource.x-50, resource.y+10, 100);
+
+     fill(col);
+    }
+		textFont(defaultFont, fontSize);
   }
 
   public void addValue(Value val) {

public/javascripts/pjs/graph.pjs

@@ -144,7 +144,17 @@ class Graph {
 
 	public void draw() {
 		Arraylist nodeList = this.depthFirstWalk(nodes[0]);
-
+
+
+		// Draw edges
+    for ( int i = 0; i < edges.size(); i++ ) {
+         Edge e = edges.get(i);
+         stroke(255);
+         strokeWeight(10);
+
+         line(e.getFrom().getParticle().position().x, e.getFrom().getParticle().position().y, e.getTo().getParticle().position().x, e.getTo().getParticle().position().y)
+    }
+
 		// Draw nodes
 		for (int i=0; i < nodeList.size(); i++) {
 			if (nodeList[i]!=selectedNode)
@@ -153,12 +163,5 @@ class Graph {
 
 		selectedNode.draw();
 
-		// Draw edges
-	  stroke(1);
-	  for ( int i = 0; i < edges.size(); i++ ) {
-			Edge e = edges.get(i);
-			stroke(60,60,60,80);
-			line(e.getFrom().getParticle().position().x, e.getFrom().getParticle().position().y, e.getTo().getParticle().position().x, e.getTo().getParticle().position().y)
-	  }
   }
 }

public/javascripts/pjs/network.pjs

@@ -1,16 +1,25 @@
-color[] colors = new color[8];
-colors[0] = color(0, 126, 255, 100)
-colors[1] = color(200, 120, 255, 100)
-colors[2] = color(60, 70, 100, 100)
-colors[3] = color(52, 126, 30, 100)
-colors[4] = color(20, 126, 211, 100)
-colors[5] = color(10, 210, 150, 100)
-colors[6] = color(62, 50, 198, 100)
-colors[7] = color(34, 40, 111, 100)
-
-
-PFont defaultFont = loadFont("/fonts/Helvetica.svg");
-int fontSize = 12.5;
+color[] colors = new color[12];
+
+colors[0] = color(171, 199, 49);
+colors[1] = color(162, 195, 85);
+colors[2] = color(154, 191, 123);
+colors[3] = color(147, 186, 161);
+colors[4] = color(141, 181, 200);
+colors[5] = color(134, 162, 169);
+colors[6] = color(128, 142, 137);
+colors[7] = color(122, 122, 104);
+colors[8] = color(177, 102, 73);
+colors[9] = color(131, 127, 67);
+colors[10] = color(144, 150, 60);
+colors[11] = color(157, 175, 55);
+
+PFont defaultFont = loadFont("/fonts/GraublauWeb-Regular.svg");
+PFont boldFont = loadFont("/fonts/GraublauWeb-Bold.svg");
+int fontSize = 11.3;
+int fontSizeCaption = 16;
+
+int nodeCount = 0;
+
 Resource fetchResource(String resource) {
 	var json;
 	$.ajax({
@@ -37,7 +46,9 @@ Resource fetchResource(String resource) {
 	}
 
 	resource.setNumValues(numValues);
-
+	resource.idx = nodeCount;
+  nodeCount++;
+
 	return resource;
 }
 
@@ -66,7 +77,7 @@ void setup() {
   fill(0);
   smooth();
   frameRate(30);
-	background(255);
+	background(234,239,224);
 
 	if (resourceId) {
 		r = fetchResource(resourceId);
@@ -76,12 +87,11 @@ void setup() {
 }
 
 void draw() {
-	if (g.nodes.size()>0) {
-	  g.tick();
-		background(255);
-
-	  g.draw();
-	}
+  if (g.nodes.size()>0) {
+    g.tick();
+    background(234,239,224);
+    g.draw();
+  }
 }
 
 void mouseMoved() {
@@ -93,6 +103,7 @@ void mouseMoved() {
 		Attribute oldSelectedAttribute = r.getSelectedAttribute();
 		int oldValueIndex = selectedValueIndex;
 		selectedValueIndex = null;
+
 		// Iterate over values
 		for (int i = 0; i < values.size(); i++) {
 			if (values[i].mouseOver()) {
@@ -108,7 +119,6 @@ void mouseMoved() {
 					if (r.previousSelectedAttribute!=null) r.previousSelectedAttribute.weight = 1.0;
 					r.selectedAttribute.weight = 4.0;
 					// r.transitioning = true;
-
 					float targetAngle = (values[selectedValueIndex].angleStart +values[selectedValueIndex].angleStop) / 2;
 					if (oldSelectedAttribute!=null) oldSelectedAttribute.targetWeight = 1.0;
 					r.getSelectedAttribute().targetWeight = 4.0;
@@ -192,34 +202,4 @@ void mouseDragged() {
   if (g.getDragNode() != null) {
     g.getDragNode().setPos(mouseX, mouseY, 0);
   }
-}
-
-public class RadialText
-{
-	String value;
-	float x;
-	float y;
-	float radius;
-
-  RadialText(String value, float x, float y, float radius)
-  {
-		this.value = value;
-    this.x = x;
-		this.y = y;
-		this.radius = radius;
-  }
-
-  public void draw(float angleStart, float angleStop) {
-    float theta = angleStart;
-		float angleStep = 0.2; // (angleStop-angleStart)/value.length;
-
-    for (int i = 0; i < value.length(); ++i) {
-      pushMatrix();
-      translate( this.x+cos(theta)*radius, this.y+sin(theta)*radius);
-      rotate(theta+PI/2);
-      text(value.substring(i, i+1 ), 0, 0);
-      popMatrix();
-      theta += angleStep;
-    }
-  }
 }

public/javascripts/pjs/node.pjs

@@ -68,7 +68,6 @@ class Node {
   public void draw() {
 		// draw subject
 		subject.setPos(this.p.position().x, this.p.position().y);
-		subject.setRadiusOuter(150);
 		subject.update();
 		subject.draw();
   }

public/javascripts/pjs/physics.pjs

@@ -1043,7 +1043,6 @@ public class Vector3D
 	public float length()                 			{ return (float)Math.sqrt( x*x + y*y + z*z ); }
 	public float lengthSquared()						{ return x*x + y*y + z*z; }
 
-
 	public void clear()                   				{ x = 0; y = 0; z = 0; }
 
 	public String toString()              				{ return new String( "(" + x + ", " + y + ", " + z + ")" ); }