From f5d5b0fe3618bca4e650d64699bfe2989cce9677 Mon Sep 17 00:00:00 2001 From: michael Date: Fri, 23 Oct 2009 21:32:02 +0200 Subject: [PATCH] summary and links are now displayed within sidebar. --- app/controllers/resources_controller.rb | 1 + app/views/layouts/application.html.haml | 6 +- app/views/resources/_details.html.haml | 73 +++++++++++--- app/views/resources/index.html.erb | 7 +- config/environment.rb | 13 +-- public/javascripts/pjs/network.pjs | 10 +- public/javascripts/pjs/resource.pjs | 70 ++++++++++--- public/javascripts/pjs/value.pjs | 3 +- public/stylesheets/global.css | 125 +++++++++++++++++------- 9 files changed, 223 insertions(+), 85 deletions(-) diff --git a/app/controllers/resources_controller.rb b/app/controllers/resources_controller.rb index c7a48ff..74e6a60 100644 --- a/app/controllers/resources_controller.rb +++ b/app/controllers/resources_controller.rb @@ -10,6 +10,7 @@ def details def show @resource = params[:id] ? Ken.get(params[:id]) : Ken.get("/en/new_order") + render :json => { :data => resource_json(@resource), :details_html => render_to_string(:partial => "details", :locals => { :resource => @resource }) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 05f066d..6f6b4ad 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,6 +9,7 @@ = yield :head %title Ask Ken - Showcase %body + %canvas#kenviz %header %section#title %h1 ASK KEN™ @@ -18,9 +19,8 @@ %br{:style => "clear: both;"} %section#content = yield - %aside - Text goes here - %br{:style => "clear: both"} + %aside + %footer .left A diff --git a/app/views/resources/_details.html.haml b/app/views/resources/_details.html.haml index b75cfc5..0096487 100644 --- a/app/views/resources/_details.html.haml +++ b/app/views/resources/_details.html.haml @@ -1,17 +1,58 @@ --# fur future use +- # retrive links +- links = [] +- result = Ken.session.mqlread({ :id => @resource.id, :"/common/topic/article" => [{:"/common/document/source_uri" => []}], :"/common/topic/webpage" => [{:uri => nil, :name => nil}] }) + +- # collect artist links +- if result + - result["/common/topic/webpage"].each do |webpage| + - links << {:uri => webpage["uri"], :name => webpage["name"]} unless links.include?(webpage["uri"]) + +-# for later use +-# artist["home_page"].each do |homepage| +-# artist_links << homepage["uri"] unless artist_links.include?(homepage["uri"]) +-# end + %h2= @resource.name -- @resource.views.each do |view| - - if view.attributes.length>0 - %h3= view - - view.attributes.each do |attribute| - %h4 - = attribute.property.name - %ul - - attribute.values.each do |value| - %li - - if attribute.property.expected_type=="/common/image" - %img{:src => "http://img.freebase.com/api/trans/image_thumb/#{value.id}?maxheight=70&mode=fit&maxwidth=70"} - - elsif attribute.property.object_type? - %a{:href => "/resources/show?id=#{value.id}"}= value - - else - = value \ No newline at end of file +%p.summary + - begin + - wikipedia_id = result["/common/topic/article"][0]["/common/document/source_uri"][0].split("/").last + - rescue + - wikipedia_id = "" + - image = @resource.attribute('/common/topic/image').values.first if @resource.attribute('/common/topic/image') + - if image + %img.summary-img{:src => "http://img.freebase.com/api/trans/image_thumb/#{image.id}?mode=fit&maxwidth=150"} + - descr = Ken.session.blurb_content(@resource.attribute('/common/topic/article').values.first.id, :maxlength => 500) if @resource.attribute('/common/topic/article') + - descr = "there's no description for this topic yet." if descr.length==0 + = descr + [ + %a{:href => "http://freebase.com/view#{resource.id}", :target => "_new"} Freebase Topic + + - if wikipedia_id != "" + | + = " " + %a{:href => "http://en.wikipedia.org/w/index.php?curid=#{wikipedia_id}", :target => "_new"} Wikipedia Article + ] + + - if links.length > 0 + %h3 Links + - if @resource.attribute('/common/topic/webpage') + %ul.links + - links.each do |link| + %li + %a{:href => link[:uri], :target => "_new"}= link[:name] + +-# - @resource.views.each do |view| +-# - if view.attributes.length>0 +-# %h3= view +-# - view.attributes.each do |attribute| +-# %h4 +-# = attribute.property.name +-# %ul +-# - attribute.values.each do |value| +-# %li +-# - if attribute.property.expected_type=="/common/image" +-# %img{:src => "http://img.freebase.com/api/trans/image_thumb/#{value.id}?maxheight=70&mode=fit&maxwidth=70"} +-# - elsif attribute.property.object_type? +-# %a{:href => "/resources/show?id=#{value.id}"}= value +-# - else +-# = value \ No newline at end of file diff --git a/app/views/resources/index.html.erb b/app/views/resources/index.html.erb index a29a899..e258ef4 100644 --- a/app/views/resources/index.html.erb +++ b/app/views/resources/index.html.erb @@ -11,7 +11,7 @@ } if (canvasSupported() && (!$.browser.mozilla || $.browser.version.substr(0,5)=="1.9.1")) { - $('#browser_not_supported').hide(); + $('#content').hide(); var canvas = document.getElementById("kenviz"); var p = Processing(canvas); @@ -46,7 +46,7 @@ search.val(search.attr('default')).addClass('ghost-input'); // init - p.resourceId = null; // "/en/new_order"; + 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")); initialized = true; @@ -59,9 +59,8 @@
Your Browser is currently not supported.

Try one of these:
- Firefox 3.5
Safari 4.0
Chrome
- + diff --git a/config/environment.rb b/config/environment.rb index 0e399b7..8d27930 100644 --- a/config/environment.rb +++ b/config/environment.rb @@ -14,11 +14,9 @@ # Add additional load paths for your own custom dirs # config.load_paths += %W( #{RAILS_ROOT}/extras ) - if RAILS_ENV == "production" - config.gem "michael-ken", :source => "gems.github.com", :lib => "ken" - else - config.gem "ken" - end + + config.gem "ken" + config.gem "extlib" #config.gem "transformer" @@ -55,7 +53,6 @@ Haml::Template.options[:format] = :html5 #Transformer.default_transformer = ResourceTransformer - # patch FETCH_DATA_QUERY module Ken FETCH_DATA_QUERY = { @@ -80,7 +77,7 @@ module Ken :link => nil, :name => nil, :optional => true, - :type => "/common/topic", + #:type => "/common/topic", :limit => 200 } ], @@ -90,7 +87,7 @@ module Ken :link => nil, :name => nil, :optional => true, - :type => "/common/topic", + #:type => "/common/topic", :limit => 200 } ], diff --git a/public/javascripts/pjs/network.pjs b/public/javascripts/pjs/network.pjs index c9fb5a4..06def52 100644 --- a/public/javascripts/pjs/network.pjs +++ b/public/javascripts/pjs/network.pjs @@ -30,10 +30,11 @@ Resource fetchResource(String resource) { dataType: 'json', success: function(response) { json = response.data; + html = response.details_html; } }); - Resource resource = new Resource(json.id, json.name); + Resource resource = new Resource(json.id, json.name, html); int numValues = 0; for (int i = 0 ; i < json.attributes.length(); i++) { Attribute attr = new Attribute(json.attributes[i].name, resource); @@ -65,7 +66,7 @@ int selectedNodeIndex; void resize() { - size(window.innerWidth-40, window.innerHeight-135); + size(window.innerWidth-10, window.innerHeight-15); } void setup() { @@ -83,6 +84,7 @@ void setup() { r = fetchResource(resourceId); g.addNode(root = new Node(r)); g.setSelectedNode(root); + $('aside').html(r.html); } } @@ -174,16 +176,20 @@ void mousePressed() { g.addNode(newNode = new Node(r2)); g.addEdge(new Edge(selectedNode, newNode)); g.setSelectedNode(newNode); + } else { g.addEdge(new Edge(selectedNode, n)); g.setSelectedNode(g.nodes[0]); } + + $('aside').html(g.getSelectedNode().getSubject().html); } else if (selectedNodeIndex != null) { // TODO: Zoom to node r.setClosed(); selectedNode = g.nodes[selectedNodeIndex]; selectedNode.getSubject().setOpen(); + $('aside').html(selectedNode.getSubject().html); g.setSelectedNode(selectedNode); g.setDragNode(selectedNode); } diff --git a/public/javascripts/pjs/resource.pjs b/public/javascripts/pjs/resource.pjs index fa5ab50..6dc8d23 100644 --- a/public/javascripts/pjs/resource.pjs +++ b/public/javascripts/pjs/resource.pjs @@ -36,16 +36,19 @@ public class Resource { int radius = 94; float radiusOuter = 110; + float radiusClosed = 40; int n = 40; float angle = 0; String id = ""; String name = ""; + String html = ""; - public Resource(String id, String name) { + public Resource(String id, String name, String html) { this.attributes = new ArrayList(); this.id = id; this.name = name; + this.html = html; } public void setPos(float x, float y) { @@ -254,35 +257,72 @@ public class Resource { } else { // draw closed noStroke(); - if (hovering) - fill(180, 180, 180, 100); - else - fill(222, 222, 222, 100); + // if (hovering) + // fill(180, 180, 180, 100); + // else + // fill(222, 222, 222, 100); + + // spacer + fill(255); + ellipse(this.x, this.y, radiusClosed*2+50, radiusClosed*2+50); + - ellipse(this.x, this.y, 110, 110); - ellipse(this.x, this.y, 130, 130); + fill(0,0,0,0); + stroke(222); + strokeWeight(20); + curContext.lineCap = "butt"; // processing.js patch! + + arc(this.x, this.y, radiusClosed*2+20, radiusClosed*2+20, 0, TWO_PI); + + float angle = 0; + // draw separators + for (int i=0; i<7; i++) { + stroke(255); + strokeWeight(2); + angle += TWO_PI/6; + line(this.x, this.y, this.x+cos(angle)*(radiusClosed+25), this.y+sin(angle)*(radiusClosed+25)); + } + + + // draw values + // for (int i = 0 ; i < attributes.size(); i++) { + // Attribute attribute = attributes[i]; + // ArrayList values = attribute.getValues(); + // + // for (int j = 0; j < values.size(); j++) { + // // stroke(colors[i%12]); + // // stroke(222); + // // strokeWeight(1); + // // line(this.x+cos(angle)*(radiusClosed), this.y+sin(angle)*(radiusClosed), this.x+cos(angle)*(radiusOuter+25), this.attr.getResource().y+sin(this.angleStop)*(radiusOuter+25)); + // // values[j].draw(); + // } + // // draw labels + // // attribute.draw(); + // } - // spacer - fill(255); - ellipse(this.x, this.y, 50, 50); + // ellipse(this.x, this.y, 110, 110); + // ellipse(this.x, this.y, 130, 130); + // + // // spacer + // fill(255); + // ellipse(this.x, this.y, 50, 50); - labelOffset = 0; + labelOffset = 30; } if (hovering) fill(0,0,0,150); else fill(66, 66, 66, 100); - + ellipse(this.x,this.y, diameter, diameter); fill(33); textFont(defaultFont, 13); fontWidth = defaultFont.width((idx+1)+". "+this.getName()) * fontSize; - - if (!selectedValueIndex) - text((idx+1)+". "+this.getName(), this.x-fontWidth/2, this.y+10+labelOffset+30); + // if (!selectedValueIndex) + text((idx+1)+". "+this.getName(), this.x-fontWidth/2, this.y+10+labelOffset+30); textFont(defaultFont, fontSize); diff --git a/public/javascripts/pjs/value.pjs b/public/javascripts/pjs/value.pjs index 22e41a7..6e4c5ad 100644 --- a/public/javascripts/pjs/value.pjs +++ b/public/javascripts/pjs/value.pjs @@ -70,6 +70,7 @@ public class Value { strokeWeight(2); line(this.attr.getResource().x+cos(this.angleStop)*(radius-10), this.attr.getResource().y+sin(this.angleStop)*(radius-10), this.attr.getResource().x+cos(this.angleStop)*(radiusOuter+25), this.attr.getResource().y+sin(this.angleStop)*(radiusOuter+25)); } + fill(0,0,0); if (hovering) { @@ -78,7 +79,7 @@ public class Value { stroke(0,0,0,20); strokeWeight(50); arc(this.attr.resource.x, this.attr.resource.y, (this.attr.resource.radiusOuter)*2, (this.attr.resource.radiusOuter)*2, angleStart, angleStop); - } + } strokeWeight(0); // reset if (selectedValueIndex!=null && attr.getResource().getSelectedAttribute()==attr) { diff --git a/public/stylesheets/global.css b/public/stylesheets/global.css index 26abadc..5d94d53 100644 --- a/public/stylesheets/global.css +++ b/public/stylesheets/global.css @@ -15,13 +15,13 @@ header, footer, section, nav { display:block; } footer { margin-top: 5px; padding: 10px; - background: #eaefe0; - + position: absolute; + bottom: 5px; + left: 5px; + right: 10px; font-family: GraublauWeb, Georgia,serif; - font-size:12px; - /*font-style:italic;*/ - line-height:1.4; - + font-size: 12px; + line-height: 1.4; /* clearing */ overflow: auto; } @@ -34,30 +34,33 @@ footer .right { float: right; } +.left { + float: left; +} + +.right { + float: right; +} + a { color: #000; text-decoration: none; - padding: 3px; } a:hover { color: #000; - border-bottom: 2px solid #000; -} - -header { - background: #eaefe0; - margin: 0; - padding: 5px; + /*border-bottom: 2px solid #000;*/ } header { - background: #eaefe0; margin: 0; padding: 5px; + position: absolute; + top: 5px; + left: 0px; + right: 0px; } - header section#title { float: left; margin-top: 5px; @@ -67,8 +70,6 @@ header section#title p { margin: 0; padding: 0; margin-left: 10px; - /*font-style: italic;*/ - font-family: GraublauWeb, Georgia,serif; font-size:12px; line-height:1.4; @@ -80,6 +81,10 @@ header section#search { margin-right: 0px; } +html { + overflow-x: hidden; +} + html,body { margin:0px; padding:0px; @@ -92,14 +97,11 @@ html,body { font-variant:normal; font-weight:normal; line-height:normal; - - /*background: #d3d8cb;*/ background: #eaefe0; - /*background: #fff;*/ - } + xs { color: #a68d49; } @@ -112,7 +114,6 @@ header h1 { font-family: GraublauWeb, "Helvetica Neue",Helvetica,Lucida,Arial,sans-serif; width: 200px; color: black; - /*letter-spacing: -2px;*/ font-weight: bold; margin: 0px; font-size:30px; @@ -120,23 +121,76 @@ header h1 { margin-left: 10px; } +h2 { + font-size: 19px; + color: #000; + border-bottom: 1px solid #000; +} + +h3 { + font-size: 15px; + color: #000; + border-bottom: 1px solid #000; +} section#content { + position: absolute; + top: 200px; + bottom: 200px; + left: 0px; + right: 0px; margin-top: 5px; - background: #eaefe0; - /*border: 2px solid #fff;*/ + margin: auto; + width: 400px; } - aside { - float: right; - width: 200px; - display: none; - background: #eaefe0; - border-left: 5px solid #e5e5e5; + font-size: 12px; + position: absolute; + right: 17px; + top: 80px; + bottom: 50px; + width: 290px; + padding: 10px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border: 1px solid #c1c1c1; + + background: #fff; + opacity: 0.9; + overflow: auto; +} + +p.summary img { + float: left; + margin-right: 5px; + margin-bottom: 5px; +} + +ul.links { + list-style: none; + margin: 0; + padding: 0; + border: none; +} + +ul.links li { + margin: 0; + margin-bottom: 3px; +} + +ul.links li:hover { + margin-bottom: 2px; + border-bottom: 1px solid #000; +} + +ul.links li a { + width: auto; } section#infovis { + display: none; height:550px; overflow: hidden; background-color:#F4F4F4; @@ -152,11 +206,9 @@ section#infovis { margin: auto; padding-top: 120px; line-height: 2em; - /* font-style: italic;*/ text-align: center; } - /* Clearing */ .clearfix:after, #frame:after, .navigation:after { content: "."; @@ -179,8 +231,10 @@ section#infovis { #fb-suggest { border: 1px solid #c1c1c1; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + opacity: 0.9; + border-radius: 5px; padding: 5px; width: 300px; font-family: GraublauWeb, "Georgia",Helvetica,Lucida,Arial,sans-serif; @@ -191,7 +245,6 @@ section#infovis { #search .ghost-input { color: #99a; - /* font-style: italic;*/ } #search .focused {