omf_web 1.0.0 → 1.2.0

data/bin/omf_web_server

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+# encoding: utf-8
+BIN_DIR = File.dirname(File.symlink?(__FILE__) ? File.readlink(__FILE__) : __FILE__)
+TOP_DIR = File.join(BIN_DIR, '..')
+$: << File.join(TOP_DIR, 'lib')
+
+require 'json'
+require 'omf-web/thin/server'
+
+DESCR = %{
+Start an OMF Web based Visualisation Server
+}
+
+opts = {
+  #footer_right: "V#{TuhuraViz::VERSION}",
+}
+
+OMF::Web::Server.start('omf_web_server', DESCR, TOP_DIR, opts)

data/example/bridge/README.md

@@ -0,0 +1,7 @@
+
+This would deserve a long write up as it shows off many of the neat features of the omf_web architecture.
+
+Running
+-------
+
+ruby -I example/bridge -I lib -e development  --fake-events  start 

data/example/bridge/data_sources/sensor-sqlite.rb

@@ -1,9 +1,9 @@
 require 'omf_web'
-require 'omf_common/lobject'
+require 'omf_base/lobject'
 require 'omf_oml/table'
 require 'omf_oml/sql_source'
 
-class LazySlicableTable < OMF::Common::LObject
+class LazySlicableTable < OMF::Base::LObject
 
   attr_reader :name
 #  attr_accessor :max_size
@@ -15,26 +15,26 @@ class LazySlicableTable < OMF::Common::LObject
     @schema = schema
     @block = block
   end
-  
+
   def create_sliced_table(col_name, col_value, table_opts = {})
     @block.call(col_name, col_value, table_opts)
   end
 
 end
 
-class BridgeSensor < OMF::Common::LObject
+class BridgeSensor < OMF::Base::LObject
   attr_reader :table
-  
+
   def initialize(db_name)
     @db_name = db_name
   end
-  
+
   # oml_sender_id INTEGER, oml_seq INTEGER, oml_ts_client REAL, oml_ts_server REAL, "eventID" TEXT, "sensorID" TEXT, "time" REAL, "x" REAL, "y" REAL, "z" REAL, "v1" REAL, "v2" REAL
   def process_acceleration(stream)
     #puts stream.class
     @table = stream.to_table(:sensors_raw, :include_oml_internals => true)
-    
-    #OMF::Web.register_datasource @table    
+
+    #OMF::Web.register_datasource @table
     OMF::Web.register_datasource(LazySlicableTable.new(:sensors, @table.schema) do |col_name, col_value, table_opts|
       @table.create_sliced_table(col_name, col_value, table_opts)
     end)
@@ -43,13 +43,13 @@ class BridgeSensor < OMF::Common::LObject
   def process_health(stream)
     if $fake_bridge_events
       fake_health
-      return   
+      return
     end
-    
+
     @table = stream.to_table(:health, :include_oml_internals => true)
-    OMF::Web.register_datasource @table 
+    OMF::Web.register_datasource @table
   end
-  
+
   def run
     #ep = OMF::OML::OmlSqlSource.new(@db_name, :offset => -500, :check_interval => 1.0)
     ep = OMF::OML::OmlSqlSource.new(@db_name, :check_interval => 3.0)
@@ -69,13 +69,13 @@ class BridgeSensor < OMF::Common::LObject
     ep.run
     self
   end
-  
+
   def fake_health()
     # oml_sender_id INTEGER, oml_seq INTEGER, oml_ts_client REAL, oml_ts_server REAL, "eventID" TEXT, "jointID" TEXT, "health" REAL
     schema = [[:oml_sender_id, :integer], [:oml_seq, :integer], [:oml_ts_client, :float], [:oml_ts_server, :float], [:eventID, :string], [:jointID, :string], [:health, :float]]
     table = OMF::OML::OmlTable.new 'health', schema, :max_size => 20
     OMF::Web.register_datasource table
-        
+
     Thread.new do
       begin
         seq_no = 1
@@ -94,7 +94,7 @@ class BridgeSensor < OMF::Common::LObject
         puts ex
         puts ex.backtrace.join("\n")
       end
-    end    
+    end
   end
 end
 wv = BridgeSensor.new($oml_database).run()

data/example/bridge/htdocs/graph/js/bridge.js

@@ -1,46 +1,38 @@
 
-L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
+define(["graph/abstract_chart"], function(abstract_chart) {
 
-  function () {
-
-  OML.bridge = OML.abstract_chart.extend({
+  var bridge = abstract_chart.extend({
     decl_properties: [
-      ['health', 'key'], 
-      ['fill_color', 'color', 'blue'], 
+      ['health', 'key'],
+      ['fill_color', 'color', 'blue'],
     ],
-    
+
     defaults: function() {
       return this.deep_defaults({
         width: 1.0,  // <= 1.0 means set width to enclosing element
         height: 200,  // <= 1.0 means fraction of width
-        
-        /*
-        axis: {
-          orientation: 'horizontal'
-        }
-        */
-      }, OML.bridge.__super__.defaults.call(this));      
-    },    
-    
+      }, bridge.__super__.defaults.call(this));
+    },
+
     base_css_class: 'oml-bridge',
-    
+
     initialize: function(opts) {
-      OML.bridge.__super__.initialize.call(this, opts);
-      
+      bridge.__super__.initialize.call(this, opts);
+
       var self = this;
       OHUB.bind("bridge.event_selected", function(evt) {
         var joint_id = evt.datum[evt.schema.jointID.index];
         self.redraw_sensor_locator(joint_id);
       });
     },
-    
-    
+
+
     configure_base_layer: function(vis) {
       var base = this.base_layer = vis.append("svg:g")
                                       .attr("class", "bridge")
                                       ;
-    
-      var ca = this.chart_area; 
+
+      var ca = this.chart_area;
       var bgl = this.background_layer = base.append("svg:g");
       this.draw_background(bgl);
 
@@ -53,7 +45,7 @@ L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
       var o = this.opts;
       var ca = this.widget_area;
       var m = this.mapping;
-      
+
       var events = this.data_layer.selectAll('.event')
                     .data(data)
                     ;
@@ -70,17 +62,17 @@ L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
             .attr("r", 2)
             .attr('cy', m.y + 50)
             .style("stroke-opacity", 1e-6)
-            .remove();          
+            .remove();
           ;
     },
-    
+
     redraw_sensor_locator: function(joint_id) {
       var self = this;
       var o = this.opts;
       var ca = this.widget_area;
       var m = this.mapping;
       var self= this;
-      
+
       function locator(g) {
         g.append('svg:rect')
           .attr('x', m.joint2x)
@@ -100,27 +92,24 @@ L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
             ;
          return g;
       }
-      
+
       var selector = this.selector_layer.selectAll('.locator')
                     .data([joint_id], function(d) { return d; })
                     ;
       selector
         .enter().append('g')
             .attr('class', 'locator')
-            .call(locator)
+            .call(locator);
       selector.exit().remove();
     },
-    
+
     draw_background: function(bgl) {
-      
-      var bw = 600, bh = 180; // bridge dim       
-      var y = -977.36218 + bh - 75; 
+      var bw = 600, bh = 180; // bridge dim
+      var y = -977.36218 + bh - 75;
       var boffset = 70;
-      
       var lmargin = (this.w - (2 * boffset + bw)) / 2;
-  
       var stroke = 'silver';
-      
+
       bgl.append('g')
         .attr("transform", 'translate(' + (boffset + lmargin) + ', ' + y + ')')
         .append('path')
@@ -139,11 +128,11 @@ L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
           .attr('x1', 0)
           .attr('x2', 2 * boffset + bw)
           .attr('y1', ly)
-          .attr('y2', ly)        
+          .attr('y2', ly)
           .attr('stroke', stroke)
           .attr('stroke-width', '4px')
         ;
-        
+
       var self = this;
       var jid = this.schema.jointID.index;
       var scale = d3.scale.linear().domain([0, 60]).range([lmargin, lmargin + 2 * boffset + bw]);
@@ -152,14 +141,15 @@ L.provide('OML.bridge', ["graph/js/abstract_chart", "#OML.abstract_chart"],
         var joint = parseInt(joint_s);
         var x = scale(joint);
         return x;
-      }
+      };
       this.mapping.x = function(d) {
         return joint2x(d[jid]);
-      }
-      
+      };
       this.mapping.y = ly;
     },
-    
-    
-  }) // end of histogram
-}) // end of provide
+
+
+  }); // end of bridge
+
+  return bridge;
+});

data/example/bridge/htdocs/graph/js/event_line_chart.js

@@ -1,17 +1,17 @@
 
-L.provide('OML.event_line_chart', ["graph/js/line_chart3", "#OML.line_chart3"], function () {
+define(["graph/line_chart3"], function (line_chart3) {
 
-  OML.event_line_chart  = OML.line_chart3.extend({
+  var event_line_chart  = line_chart3.extend({
     defaults: function() {
       return this.deep_defaults({
-      }, OML.event_line_chart .__super__.defaults.call(this));      
-    },    
-    
+      }, event_line_chart .__super__.defaults.call(this));
+    },
+
     base_css_class: 'oml-event-line-chart',
-    
+
     initialize: function(opts) {
-      OML.event_line_chart.__super__.initialize.call(this, opts);
-      
+      event_line_chart.__super__.initialize.call(this, opts);
+
       var self = this;
       OHUB.bind("bridge.event_selected", function(evt) {
         self.event_id = evt.datum[evt.schema.eventID.index];
@@ -19,26 +19,28 @@ L.provide('OML.event_line_chart', ["graph/js/line_chart3", "#OML.line_chart3"],
         self.update();
       });
     },
-    
+
     update: function() {
-      var eid = this.event_id
+      var eid = this.event_id;
       if (! eid) return;
-      
+
       var data;
       if ((data = this.data_source.rows()) == null) {
-        throw "Missing events array in data source"
+        throw "Missing events array in data source";
       }
-      
+
       var ei = this.schema.eventID.index;
       data = _.filter(data, function(r) {
         return r[ei] == eid;
-      })
+      });
       if (data.length == 0) return;
       this.redraw(data);
-      
+
       var i = 0;
     },
 
-    
-  }) // end of event-line_chart
-}) // end of provide
+
+  }); // end of event-line_chart
+
+  return event_line_chart;
+}); // end of provide

data/example/bridge/htdocs/graph/js/event_table.js

@@ -1,34 +1,30 @@
 
-// L.provide('slickgrid/checkbox', [
-                 // 'vendor/slickgrid/slick.core.js',
-                 // 'vendor/slickgrid/slick.formatters.js',
-                 // 'vendor/slickgrid/slick.editors.js',
-                 // 'vendor/slickgrid/plugins/slick.rowselectionmodel.js',
-                 // 'vendor/slickgrid/slick.grid.js',
-                 // 'vendor/slickgrid/slick.dataview.js',
+define(["graph/table2",
+                 'vendor/slickgrid/plugins/slick.checkboxselectcolumn',
+                 'css!/resource/css/bridge.css'], function(table2) {
 
-L.provide('OML.event_table', ["graph/js/table2", "#OML.table2", 
-                                'vendor/slickgrid/plugins/slick.checkboxselectcolumn.js',
-                                'css/bridge.css'
-                             ], function () {
+// L.provide('OML.event_table', ["graph/js/table2", "#OML.table2",
+                                // 'vendor/slickgrid/plugins/slick.checkboxselectcolumn.js',
+                                // 'css/bridge.css'
+                             // ], function () {
 
-  OML.event_table = OML.table2.extend({
+  var event_table = table2.extend({
     decl_properties: [
     ],
-    
+
     defaults: function() {
       return this.deep_defaults({
-      }, OML.event_table.__super__.defaults.call(this));      
-    },    
-    
+      }, event_table.__super__.defaults.call(this));
+    },
+
     base_css_class: 'oml-event-table',
-    
+
     init_grid: function() {
-      OML.event_table.__super__.init_grid.call(this);
+      event_table.__super__.init_grid.call(this);
 
       var grid = this.grid;
       var self = this;
-      
+
       grid.setSelectionModel(new Slick.RowSelectionModel());
       grid.onSelectedRowsChanged.subscribe(function(e, args) {
         var rindex = args.rows[0];
@@ -39,22 +35,22 @@ L.provide('OML.event_table', ["graph/js/table2", "#OML.table2",
         }
       });
     },
-    
+
     init_columns: function() {
-      var columns = OML.event_table.__super__.init_columns.call(this);
-      
+      var columns = event_table.__super__.init_columns.call(this);
+
       // var checkboxSelector = new Slick.CheckboxSelectColumn({
         // cssClass: "slick-cell-checkboxsel"
       // });
       // columns.splice(0, 0, checkboxSelector.getColumnDefinition());
-      
+
       function health_formatter(row, cell, value, columnDef, dataContext) {
         if (value == null || value === "") {
           return "";
         }
         var value = Math.round(100 * (1 - value));
         var color;
-    
+
         if (value < 30) {
           color = "silver";
         } else if (value < 50) {
@@ -69,10 +65,12 @@ L.provide('OML.event_table', ["graph/js/table2", "#OML.table2",
       }
       var hc = columns[2];
       hc.formatter = health_formatter;
-      hc.name = 'Attention'
+      hc.name = 'Attention';
       return columns;
     },
 
-    
-  }) // end of event-table
-}) // end of provide
+
+  }); // end of event-table
+
+  return event_table;
+});

data/example/bridge/viz_server.rb

@@ -1,14 +1,10 @@
 
-#require 'omf-common/mobject2'
-require 'omf_common/lobject'
-# require 'yaml'
-# require 'log4r'
+require 'omf_base/lobject'
 
-#OMF::Common::Loggable.init_log 'bridge', 'development', :searchPath => File.dirname(__FILE__)
-OMF::Common::Loggable.init_log 'bridge', :searchPath => File.dirname(__FILE__)
+OMF::Base::Loggable.init_log 'bridge', :searchPath => File.dirname(__FILE__)
 
 
-# If set, create fake sensor events 
+# If set, create fake sensor events
 $fake_bridge_events = false
 # Path to OML database
 $oml_database = 'sqlite://example/bridge/data_sources/test3.sq3'
@@ -20,10 +16,10 @@ def load_environment
   Dir.glob("#{File.dirname(__FILE__)}/data_sources/*.rb").each do |fn|
     load fn
   end
-  
+
   require 'yaml'
   Dir.glob("#{File.dirname(__FILE__)}/widgets/*.yaml").each do |fn|
-    OMF::Common::LObject.debug "Load yaml file '#{fn}'"
+    OMF::Base::LObject.debug "Load yaml file '#{fn}'"
     h = YAML.load_file(fn)
     if w = h['widget']
       OMF::Web.register_widget w

data/example/demo/demo_viz_server.rb

@@ -1,7 +1,7 @@
 #ENV['BUNDLE_GEMFILE'] = "#{File.dirname(__FILE__)}/../../Gemfile"
 #require 'bundler/setup'
-require 'omf_common/lobject'
-OMF::Common::Loggable.init_log 'demo', :searchPath => File.dirname(__FILE__)
+require 'omf_base/lobject'
+OMF::Base::Loggable.init_log 'demo', :searchPath => File.dirname(__FILE__)
 
 
 require 'omf_oml/table'

data/example/demo/widgets/linked_graphs_tab.yaml

@@ -13,7 +13,7 @@ widget:
     - name: Network
       type: data/network2
       width: 1.0
-      data_source: 
+      data_source:
         name: static_network
         unique_column: id  # only use the latest link and row descriptions
         dynamic: true
@@ -21,7 +21,7 @@ widget:
         nodes:
           x:
             property: x
-          y: 
+          y:
             property: y
         links:
           stroke_width:
@@ -31,44 +31,21 @@ widget:
           stroke_color:
             property: load
             color: red_yellow20_green() #green_yellow80_red()
-      margin: 
+      margin:
         left: 30
         right: 30
       interaction_mode: click  # click on link to create event
 
 
-    # - name: Link Stats All
-      # type: data/line_chart3
-      # #area: true # color the area between line and zero line
-      # data_source: 
-        # name: static_network/links
-        # dynamic: true
-      # group_by: name
-      # mapping:
-        # x_axis: ts
-        # y_axis: 
-          # property:  load 
-          # min: 0
-          # max: 1
-      # axis:
-        # x:
-          # ticks:
-            # type: time
-            # #transition: 0
-          # legend: Time (sec)
-        # y:
-          # legend: Load (bps)
-      # margin: 
-        # left: 100
-        
+
   right:
     - name: Single Link Stats
       type: data/line_chart3
       #area: true # color the area between line and zero line
       data_source:
         name: link_history
-        #name: static_network/links   
-        
+        #name: static_network/links
+
         # Only fetch a 'slice' of the underlying data source. A slice
         # is defined by specific value in the 'slice_column' of all rows
         slice:
@@ -79,8 +56,8 @@ widget:
       group_by: name
       mapping:
         x_axis: ts
-        y_axis: 
-          property:  load 
+        y_axis:
+          property:  load
           min: 0
           max: 1
       axis:
@@ -91,5 +68,5 @@ widget:
           legend: Time (sec)
         y:
           legend: Load (bps)
-      margin: 
+      margin:
         left: 100

data/example/openflow-gec15/code_tab.yaml

@@ -1,32 +1,27 @@
-
-
-
-# Simple tab showing a line chart with supporting table
 #
-
+# Tab showing the source code used in this demo
+#
 widget:
   id: code
   name: Code
   top_level: true
   priority: 600
   type: layout/tabbed
-  widgets: 
-    
-
+  widgets:
     - name: OIDL
       type: code
       width: 1.0
       #height: 800
       content:
-        url: file:code:of-exp.rb 
-        
+        url: file:code:of-exp.rb
+
     - name: Trema
       type: code
       width: 1.0
       #height: 800
       content:
-        url: file:code:trema-ctl6.rb 
-        
+        url: file:code:trema-ctl6.rb
+
 
 
 

data/example/openflow-gec15/dashboard_tab.yaml

@@ -1,8 +1,7 @@
-
-
-# Define a 'dashboard' consisting of two columns of widgets
 #
-
+# First tab showing the network on the left and
+# link stats on the right.
+#
 widget:
   id: linked_graphs
   name: Dashboard
@@ -14,7 +13,7 @@ widget:
       type: data/network2
       width: 1.0
       height: 1.0
-      data_source: 
+      data_source:
         name: network
         unique_column: id  # only use the latest link and row descriptions
         dynamic: true
@@ -22,7 +21,7 @@ widget:
         nodes:
           x:
             property: x
-          y: 
+          y:
             property: y
           radius: 20
         links:
@@ -35,12 +34,12 @@ widget:
             property: load
             max: 1.0
             color: green_yellow80_red()
-      margin: 
+      margin:
         left: 30
         right: 30
-      #interaction_mode: click  # click on link to create event
+      interaction_mode: click  # click on link to create event
+
 
-        
   right:
     - name: Link Stats
       type: data/line_chart3
@@ -51,8 +50,8 @@ widget:
         name: link_history
       mapping:
         x_axis: ts
-        y_axis: 
-          property:  rate 
+        y_axis:
+          property:  rate
           #max: 1
         group_by: name
       axis:
@@ -68,5 +67,5 @@ widget:
           ticks:
             format: 's'
           transition: 0
-      margin: 
+      margin:
         left: 100