swagr 0.0.5

data/examples/examples01/views/footer.slim

@@ -0,0 +1,2 @@
+h3 Footer...
+| Copyright © #{year} #{copyright_holders}

data/examples/examples01/views/index.slim

@@ -0,0 +1,80 @@
+h1 Hello, Swagr world!
+
+/! Example A: Some static svg
+div class="container"
+  svg width="400" height="50"
+    text x="0" y="35" font-family="Helvetica" font-size="20" SVG:
+    circle cx="175" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"
+    circle cx="200" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"
+    circle cx="225" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"
+    circle cx="250" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"
+    circle cx="275" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"
+    /! rect x="100" y="100" width="100" height="50"
+    /! ellipse cx="150" cy="80" rx="50" ry="25" fill="red"
+    /! line x1="0" y1="0" x2="300" y2="50" stroke="black"
+
+/! Example B: Using d3 to add elements dynamically
+script src="js/d3.v3.min.js"
+div class="container" id="d3a"
+div class="container" id="d3b"
+script type="text/javascript"
+  | var co = d3.select("#d3a");
+    co.append("p").text("Hello, d3.js world!");
+
+/! Example C: Coffee-script inline and importing from other files
+script src="js/coffee-script.js"
+script src="coffee/d3graph.js"
+script src="coffee/updating_text_graph.js"
+script src="coffee/updating_top_list.js"
+div class="container" id="d3_from_coffeescript"
+div class="container" id="updating_text"
+div class="container" id="top_list_header"
+  text class="update"
+div class="container" id="top_list"
+script type="text/coffeescript"
+  | a = 1.5
+    b = 2 + a
+    str = "Hello, coffee-script and d3.js world! b = " + b + ". And now an updating text graph from Coffee-script..."
+    console.log(str)    
+    d3.select("#d3_from_coffeescript").append("span").text(str)
+    root = exports ? window
+
+    # 1. Updating row of random int values
+    g = new root.Swagr.UpdatingTextGraph "#updating_text", "/data/randints/arrayofsize6.json", {
+      width:      500
+      height:     120
+    }
+    g.run_updates_for(5)
+    #g.start_updates()
+
+
+    # 2. Updating top list of positions found by BrownianSearcher
+
+    class MyUpdatingTopList extends root.Swagr.UpdatingToplist
+      _join_data: (data) ->
+        @svg.selectAll("text").data(data.top_list, (d, i) -> d.number)
+
+      textmapper: (elems, data) -> (d,i) -> 
+        (i+1).toString() + ". dist: " + d.distance.toFixed(2) + 
+          " pos: (" + d.x + ", " + d.y + ")" +
+          " step: " + d.number
+
+    g2 = new MyUpdatingTopList "#top_list", "/data/brownian_search/search_info.json", {
+      width:            500
+      height:           160
+      transition_y:     100
+      update_interval:  3.0
+      transition_time:  1000
+    }
+    #g2.run_updates_for(20)
+    g2.start_updates()
+
+    # 3. Header for the top list, showing current number of steps.
+    update_header = () ->
+      d3.json("/data/brownian_search/current_position.json", (error, data) ->
+        pos_str = "(" + data[0].x + ", " + data[0].y + ")"
+        d3.select("#top_list_header").select("text")
+          .text("Top 5 positions at step: " + data[0].number + ", pos: " + pos_str)
+      )
+    update_header()
+    setInterval(update_header, g2.opts.update_interval * 1000)

data/examples/examples01/views/layout.slim

@@ -0,0 +1,26 @@
+doctype html
+html
+  head
+    meta charset="utf-8"
+    title Swagr web app template
+    meta name="viewport" content="width=device-width, initial-scale=1.0"
+    meta name="description" content=""
+    meta name="author" content="FIXME: YOUR NAME"
+    link href="css/bootstrap.css" rel="stylesheet" /! media="screen"
+    link href="css/style.css" rel="stylesheet" /! media="screen"
+    style
+      | body {
+          padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
+        }
+  body
+
+    div class="container"
+      == slim :navbar
+      == yield
+
+    div class="container"
+      div id="footer"
+        == slim :footer
+
+    script src="js/jquery-latest.js"
+    script src="js/bootstrap.min.js"

data/examples/examples01/views/navbar.slim

@@ -0,0 +1,16 @@
+div class="navbar navbar-inverse navbar-fixed-top"
+  div class="navbar-inner"
+    div class="container"
+      a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"
+        span class="icon-bar"
+        span class="icon-bar"
+        span class="icon-bar"
+      a class="brand" href="#" SwagrApp
+      div class="nav-collapse collapse"
+        ul class="nav"
+          li class="active"
+            a href="#" Home
+          li 
+            a href="about" About
+          li 
+            a href="contact" Contact

data/lib/swagr.rb

@@ -0,0 +1,5 @@
+require "swagr/version"
+
+module Swagr
+  # Your code goes here...
+end

data/lib/swagr/version.rb

@@ -0,0 +1,3 @@
+module Swagr
+  VERSION = "0.0.5"
+end

data/swagr.gemspec

@@ -0,0 +1,26 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'swagr/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "swagr"
+  gem.version       = Swagr::VERSION
+  gem.authors       = ["Robert Feldt"]
+  gem.email         = ["robert.feldt@gmail.com"]
+  gem.description   = %q{simple web app gui framework for ruby}
+  gem.summary       = %q{Simple, barebones web app gui framework for Ruby programs/processes. Based on Sinatra, Sass, Slim, Coffeescript and d3.js. Geared to interfacing with long-running Ruby processes.}
+  gem.homepage      = ""
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+
+  gem.add_dependency('thor')
+  gem.add_dependency('slim')
+  gem.add_dependency('sass')
+  gem.add_dependency('coffee-script')
+  gem.add_dependency('json')
+
+end

data/templates/app.rb

@@ -0,0 +1,104 @@
+require 'rubygems'
+require 'sinatra/base'
+require 'slim'
+require 'coffee-script'
+require 'json'
+require 'feldtruby'
+
+class CoffeeEngine < Sinatra::Base
+  
+  set :views,   File.dirname(__FILE__)    + '/coffee'
+  
+  get "/coffee/*.js" do
+    filename = params[:splat].first
+    coffee filename.to_sym
+  end
+
+  get "/js/*.coffee" do
+    filename = params[:splat].first
+    coffee filename.to_sym
+  end
+  
+end
+
+require File.join(".", File.dirname(__FILE__), "brownian_searcher")
+BrownianSearcher = BrownianMotion2DSearch.new(5, 2.0)
+Thread.new {BrownianSearcher.start_search}
+
+# The data engine should return the json or csv formatted data
+# that is used in your app. You need to set this up to dynamically deliver the
+# latest data about your running Ruby app/process/server.
+class DataEngine < Sinatra::Base
+  module SendAsJson
+    def json_response(data)
+      content_type :json
+      data.to_json
+    end
+  end
+
+  helpers SendAsJson
+
+  # Static data files are served from the "/data" dir
+  set :views,   File.dirname(__FILE__)    + '/data'
+
+  # Example handler that returns a random json data set for all example requests...
+  get %r{/data/randints/arrayofsize([\d]+).json} do |size|
+    a = Array.new(size.to_i).map {-5+(10*rand()).to_i}
+    #json_response a.uniq.sort
+    b = a.uniq.sort.map {|v| {"value" => v}}
+    json_response b
+  end
+
+  get '/data/brownian_search/search_info.json' do
+    json_response BrownianSearcher.search_info
+  end
+
+  get '/data/brownian_search/current_position.json' do
+    json_response [BrownianSearcher.pos]
+  end
+
+end
+
+class WAppGuiServer < Sinatra::Base
+
+  enable :logging
+  disable :dump_errors
+
+  use DataEngine
+  use CoffeeEngine
+
+  set :views,         File.dirname(__FILE__) + '/views'
+  set :public_folder, File.dirname(__FILE__) + '/static'
+
+#  get '/example_data.json' do
+#    content_type :json
+#    [-1, 2, 4, -7, -9].to_json
+#  end
+  
+  get '/' do
+    slim :index
+  end
+
+  def copyright_holders
+    "FIXME: Your Name(s)..."
+  end
+  
+  # Set the first year you started working on this app. The copyright will then go from then to current year.
+  def first_year
+    2012
+  end
+
+  def year
+    current_year = Time.now.year
+    if current_year != first_year
+      "#{first_year}-#{current_year}"
+    else
+      "#{first_year}"
+    end
+  end
+
+end
+
+if __FILE__ == $0
+  WAppGuiServer.run! :port => 4000
+end

data/templates/brownian_searcher.rb

@@ -0,0 +1,93 @@
+require 'json'
+
+# Our dummy long-running ruby process is a Brownian motion where
+# we are interested in the max x and y values found. Our GUI
+# will present a top list of the top 3 results found so far.
+class BrownianMotion2DSearch
+  Pos = Struct.new("Pos", :x, :y, :number)
+  class Pos
+    Origo = Pos.new(0,0,-1)
+
+    def distance_to(pos)
+      Math.sqrt( (pos.x - self.x)**2 + (pos.y - self.y)**2 )
+    end
+    
+    def to_json(*a)
+      {
+        'x' => x,
+        'y' => y,
+        'number' => number,
+        'distance' => self.distance_to(Origo)
+      }.to_json(*a)
+    end
+  end
+
+  attr_reader :num_steps, :pos
+
+  def initialize(maxToplistLength = 10, maxSleepSeconds = 2.0)
+    @max_top_list_length = maxToplistLength
+    @num_steps = 0
+    @max_sleep_seconds = maxSleepSeconds
+    @pos = new_pos(0, 0)
+    @top_list = [@pos]
+  end
+
+  def new_pos(x, y)
+    Pos.new(x, y, @num_steps)
+  end
+
+  def start_search
+    while true
+      take_brownian_step()
+      puts "Step = #{@num_steps}, at pos = #{@pos}"
+      update_top_list()
+      # Sleep so we are not searching all the time => simulate other long-running calcs...
+      sleep( @max_sleep_seconds * rand() )
+    end
+  end
+
+  # Return info about the search such as the number of steps taken and the current top list
+  def search_info
+    {"step" => @num_steps, "top_list" => @top_list}
+  end
+
+  def rand_unit_step
+    rand() < 0.495 ? -1 : 1
+  end
+
+  def take_brownian_step
+    @num_steps += 1
+    @pos = new_pos(@pos.x + rand_unit_step(), @pos.y + rand_unit_step())
+  end
+
+  def update_top_list
+    @top_list << @pos
+    sort_top_list
+    limit_top_list_length
+  end
+
+  def sort_top_list
+    # Add a small value based on when the position was found => older positions with same distance
+    # are ranked higher than later found positions with same distance.
+    @top_list = @top_list.sort_by {|p| -p.distance_to(Pos::Origo)+(p.number/(1000.0*@num_steps))}
+  end
+
+  def limit_top_list_length
+    @top_list = @top_list.take(@max_top_list_length)
+  end
+end
+
+if __FILE__ == $0
+  s = BrownianMotion2DSearch.new
+  Thread.new {s.start_search}
+  require 'pp'
+  Thread.new {
+    while true
+      sleep 5.0
+      pp s.search_info
+    end
+  }
+  sleep 20
+  pp s.search_info
+  exit -1
+end

data/templates/coffee/d3graph.coffee

@@ -0,0 +1,54 @@
+root = exports ? window
+root.Swagr = if root.Swagr then root.Swagr else {}
+class root.Swagr.D3Graph
+  default_options =
+    width:                  960
+    height:                 500
+    update_interval:        1.5               # seconds
+    transition_y:           50
+    transition_x:           50
+    transition_time:        750               # milliseconds
+
+  constructor: (@selector, @dataUrl, opts = {}) ->
+    @opts = @set_default_options_unless_given(opts, default_options)
+    @_append_elements()
+    @update()     # First update so we have something to show...
+
+  set_default_options_unless_given: (givenOpts, defaultOpts) ->
+    for own option, value of defaultOpts
+      givenOpts[option] = value unless givenOpts.hasOwnProperty(option)
+    givenOpts
+
+  # Append the svg to the top-level selector
+  _append_elements: () ->
+    @svg = d3.select(@selector).append("svg")
+                .attr("width", @opts.width)
+                .attr("height", @opts.height)
+              .append("g")
+                .attr("transform", @_transform_string())
+
+  # Start updating the graph
+  start_updates: ->
+    @interval_id = root.setInterval ( => @update() ), @opts.update_interval*1000
+
+  # Stop updating the graph
+  stop_updates: -> root.clearInterval(@interval_id)
+
+  # Run the updates for a given number of seconds
+  run_updates_for: (seconds) ->
+    @start_updates()
+    setTimeout ( => @stop_updates(); console.log("Stopped updating graph!"); ), seconds*1000
+
+  update: ->
+    d3.json(@dataUrl, (error, data) =>
+      @data = data
+      # D3's general update pattern:
+      # 1. DATA JOIN - Join new data with old elements, if any, then update, enter and exit below.
+      @elems = @_join_data(data)
+      # 2. UPDATE - Update existing elements as needed.
+      @_update_existing_elements()
+      # 3. ENTER - Create new elements as needed.
+      @_enter_new_elements()
+      # 4. EXIT - Remove old elements as needed.
+      @_remove_exiting_elements()
+    )

data/templates/coffee/updating_text_graph.coffee

@@ -0,0 +1,43 @@
+root = exports ? window
+root.Swagr = if root.Swagr then root.Swagr else {}
+
+# Assumes d3graph.coffee has been required before this one...
+class root.Swagr.UpdatingTextGraph extends root.Swagr.D3Graph
+  _transform_string: -> "translate(16," + (@opts.height / 2) + ")"
+
+  _join_data: (data) -> 
+    @svg.selectAll("text").data(data, (d) -> d.value)
+
+  _update_existing_elements: (text) ->
+    @elems.attr("class", "update")
+        .text(@textmapper(@elems, @data))
+        .transition()
+        .duration(@opts.transition_time)
+        .attr("x", @xmapper(@elems, @data))
+
+  _enter_new_elements: (text) ->
+    @elems.enter().append("text")
+        .attr("class", "enter")
+        .attr("dy", ".35em")
+        .attr("y", -@opts.transition_y)
+        .attr("x", @xmapper(@elems, @data))
+        .style("fill-opacity", 1e-6)
+        .text(@textmapper(@elems, @data))
+        .transition()
+        .duration(@opts.transition_time)
+        .attr("y", 0)
+        .style("fill-opacity", 1)
+
+  _remove_exiting_elements: (text) ->
+    @elems.exit()
+        .attr("class", "exit")
+        .transition()
+        .duration(@opts.transition_time)
+        .attr("y", @opts.transition_y)
+        .style("fill-opacity", 1e-6)
+        .remove()
+
+  xmapper: (elems, data) -> (d,i) -> i * 70
+
+  textmapper: (elems, data) -> (d,i) -> 
+    d.value + ( if (i+1 isnt data.length) then "," else "" )