Permalink
Browse files

massive redesign...

  • Loading branch information...
1 parent 7fb3add commit 773f1a4ac8a27eca193674404eed7bc9b338ff5a michael committed Oct 6, 2009
View
@@ -22,3 +22,4 @@ rspec_report.html
_Yardoc
*/ri
+mx:_
View
@@ -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.
@@ -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
@@ -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>
View
@@ -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')

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
Binary file not shown.
Binary file not shown.
@@ -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) {
@@ -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)
- }
}
}
@@ -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;
- }
- }
}
@@ -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();
}
@@ -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 + ")" ); }
Oops, something went wrong.

0 comments on commit 773f1a4

Please sign in to comment.