sinatra-multi-screen 0.0.2 → 0.0.3

data/.gitignore

@@ -16,3 +16,4 @@ test/version_tmp
 tmp
 *#*
 *~
+.sass-cache

data/History.txt

@@ -1,3 +1,9 @@
+=== 0.0.3 2013-02-14
+
+* add simple sample application
+* refact
+* push data from Remote to TV
+
 === 0.0.2 2013-02-19
 
 * separate channels

data/README.md

@@ -35,12 +35,12 @@ run Sinatra::Application
 <script src="<%= multi_screen_js %>"></script>
 ```
 
-### Remote --(dispatch UI Event)-> TV
+### Remote --(dispatch UI Event)--> TV
 
 Remote Side
 ```javascript
 var io = new CometIO().connect();
-var screen = new MultiScreen(io, {type: "remote"});
+var screen = new MultiScreen(io, {type: "remote", channel: "1"});
 var tv = screen.tv;
 
 io.on("connect", function(session){
@@ -54,7 +54,8 @@ TV Side
 ```
 ```javascript
 var io = new CometIO().connect();
-var screen = new MultiScreen(io, {type: "tv"});
+var screen = new MultiScreen(io, {type: "tv", channel: "1"});
+var remote = screen.remote;
 
 $(function(){
   $("#btn").click(function(e){ // regist click event
@@ -67,12 +68,7 @@ $(function(){
 
 TV Side
 ```javascript
-var io = new CometIO().connect();
-var screen = new MultiScreen(io, {type: "tv"});
-
-io.on("connect", function(session){
-  screen.remote.push("change_color", {color: #FF0000"});  // push "change_color" event to Remote
-};
+remote.push("change_color", {color: #FF0000"});  // push "change_color" event to Remote
 ```
 
 Remote Side
@@ -82,6 +78,20 @@ tv.on("change_color", function(data){ // regist "change_color" event
 });
 ```
 
+### Remote --(push event)--> TV
+
+Remote Side
+```javascript
+tv.push("mode", "fullscreen");  // push "mode" to TV
+```
+
+TV Side
+```javascript
+remote.on("mode", function(data){
+  console.log(data);
+});
+```
+
 Samples
 -------
 * https://github.com/shokai/sinatra-multi-screen/tree/master/sample

data/lib/js/multiscreen.js

@@ -1,18 +1,38 @@
 var MultiScreen = function(cometio, options){
-  if(typeof options === 'undefined' || typeof options.type === 'undefined'){
+  if(typeof options === 'undefined'){
+    throw new Error("argument error: option is empty.");
+  }
+  if(typeof options.type === 'undefined'){
     throw new Error("argument must have connection type.");
   }
+  if(typeof options.channel === 'undefined' || options.channel.length < 1){
+    options.channel = "__default__channel__";
+  }
   var self = this;
   this.io = cometio;
   this.options = options;
   this.io.on("connect", function(session){
     self.io.push("__multiscreen__options", self.options);
   });
+
+  var to;
+  if(options.type === 'remote') to = 'tv';
+  else if(options.type === 'tv') to = 'remote';
+  if(typeof to === 'undefined'){
+    throw new Error('argument error: type must be "tv" or "remote"');
+  }
+  this[to] = {};
+  new EventEmitter().apply(this[to]);
+  this[to].push = function(event_name, data){
+    self.io.push("__multiscreen__data", {event: event_name, data: data, options: self.options});
+  };
+  this.io.on("__multiscreen__data", function(data){
+    self[to].emit(data.event, data.data);
+  })
+
   if(options.type == "remote"){
-    this.tv = {};
-    new EventEmitter().apply(this.tv);
     this.tv.event = function(selector, event_name, args){
-      self.io.push("__multiscreen__event", {selector: selector, event: event_name, args: args, options: self.options});
+      self.tv.push("ui_event", {selector: selector, event: event_name, args: args});
     };
     this.tv.$ = function(selector){
       return {
@@ -39,18 +59,12 @@ var MultiScreen = function(cometio, options){
         }
       };
     };
-    this.io.on("__multiscreen__event", function(data){
-      self.tv.emit(data.event, data.args);
-    })
   }
 
   if(options.type == "tv"){
-    this.remote = {};
-    this.remote.push = function(event_name, args){
-      self.io.push("__multiscreen__event", {event: event_name, args: args, options: self.options});
-    };
-    this.io.on("__multiscreen__event", function(data){
-      if(typeof data.selector === 'undefined') return;
+    self.remote.on("ui_event", function(data){
+      if(typeof data.selector === 'undefined' ||
+         typeof data.event === 'undefined') return;
       if(typeof data.args === 'undefined'){
         $(data.selector)[data.event]();
       }else{

data/lib/sinatra-multi-screen/version.rb

@@ -1,3 +1,3 @@
 module SinatraMultiScreen
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/lib/sinatra/application.rb

@@ -1,10 +1,8 @@
-
-
 module Sinatra
 
   class Application
 
-    CometIO.on :__multiscreen__event do |data, from|
+    CometIO.on :__multiscreen__data do |data, from|
       opts = data["options"]
       raise ArgumentError, 'option is empty'  if !opts or opts.empty?
       raise ArgumentError, 'channel is empty' if opts["channel"].empty?
@@ -19,7 +17,7 @@ module Sinatra
                "tv"
              end
       MultiScreen.channels[opts["channel"]][type].each do |session_id|
-        CometIO.push :__multiscreen__event, data, {:to => session_id}
+        CometIO.push :__multiscreen__data, data, {:to => session_id}
       end
     end
 

data/sample/Gemfile

@@ -1,4 +1,4 @@
-source :rubygems
+source 'https://rubygems.org'
 
 gem 'foreman'
 gem 'rack'
@@ -9,4 +9,3 @@ gem 'sinatra-cometio'
 gem 'json'
 gem 'haml'
 gem 'sass'
-gem 'youtube_search'

data/sample/Gemfile.lock

@@ -1,5 +1,5 @@
 GEM
-  remote: http://rubygems.org/
+  remote: https://rubygems.org/
   specs:
     backports (2.8.2)
     daemons (1.1.9)
@@ -40,7 +40,6 @@ GEM
       rack (>= 1.0.0)
     thor (0.17.0)
     tilt (1.3.3)
-    youtube_search (0.1.7)
 
 PLATFORMS
   ruby
@@ -55,4 +54,3 @@ DEPENDENCIES
   sinatra-cometio
   sinatra-contrib
   thin
-  youtube_search

data/sample/README.md

@@ -1,5 +1,5 @@
-Multi-Screen Video Player
-=========================
+Sinatra-Multi-Screen Sample
+===========================
 
 * Ruby 1.8.7+ or 1.9.2+
 * sinatra-multi-screen with Sinatra1.3+

data/sample/main.rb

@@ -1,6 +1,6 @@
 helpers do
   def app_name
-    "Multi-Screen Video Player"
+    "Sinatra-Multi-Screen Sample"
   end
 
   def app_root
@@ -36,16 +36,6 @@ get '/remote/:channel' do
   haml :remote
 end
 
-get '/search.json' do
-  content_type 'application/json'
-  word = params[:word]
-  begin
-    YoutubeSearch.search(word).first.to_json
-  rescue => e
-    throw :halt, [500, 'Internal Server Error']
-  end
-end
-
 get '/:source.css' do
   scss params[:source].to_sym
 end

data/sample/public/js/remote.js

@@ -1,45 +1,28 @@
+// Remote Side
 var io = new CometIO().connect();
 var screen = new MultiScreen(io, {type: "remote", channel: channel});
 var tv = screen.tv;
 
 io.on("connect", function(session){
   console.log("connect!! "+session);
+});
 
-  $("#btn_search").click(function(e){
-    var word = $("#text_search").val();
-    tv.$("#text_search").val(word);
-    tv.$("#btn_search").click();
-  });
-
-  $("#text_search").keyup(function(e){
-    var word = $("#text_search").val();
-    console.log(word);
-    tv.$("#text_search").val(word);
-  });
-
-  $("#btn_play").click(function(e){
-    tv.$("#btn_play").click();
-  });
-
-  $("#btn_seek").click(function(e){
-    tv.$("#btn_seek").click();
-  });
-  $("#btn_seekback").click(function(e){
-    tv.$("#btn_seekback").click();
-  });
-
-  var range_seek = $("#range_seek");
-  range_seek.change(function(e){
-    tv.$("#range_seek").val( range_seek.val() );
-    tv.$("#range_seek").change();
-  });
+// from TV
+tv.on("message", function(msg){
+  console.log(msg);
+});
 
-  tv.on("seek", function(time){
-    $("#text_seek").val(time);
-    range_seek.val(time);
-  });
+$(function(){
+  generate_code();
+  $("select").change(generate_code);
 
-  tv.on("get_duration", function(duration){
-    range_seek.attr("max", duration);
+  $("#btn_dispatch").click(function(e){
+    eval( $("#code").val() ); // dispatch UI Event on TV
   });
 });
+
+var generate_code = function(){
+  var selector = $("#selector").val();
+  var event_name = $('#event_name').val();
+  $("#code").val( 'tv.$("'+selector+'").'+event_name+'();' );
+};

data/sample/public/js/tv.js

@@ -1,3 +1,4 @@
+// TV Side
 var io = new CometIO().connect();
 var screen = new MultiScreen(io, {type: "tv", channel: channel});
 var remote = screen.remote;
@@ -6,73 +7,20 @@ io.on("connect", function(session){
   console.log("connect!! "+session);
 });
 
-var youtube;
-var onYouTubePlayerReady = function(id){
-  console.log('youtube ready');
-  youtube = document.getElementById("player");
-  youtube.addEventListener("onStateChange", "onYouTubeStateChange");
-};
-
-var onYouTubeStateChange = function(status){
-  console.log("status changed:"+status);
-  switch(status){
-  case 1:
-    var duration = youtube.getDuration();
-    $("#range_seek").attr("max", duration);
-    remote.push("get_duration", duration);
-    break;
-  };
-};
+// catch UI Event from Remote
+remote.on("ui_event", function(data){
+  console.log(data);
+});
 
 $(function(){
-  var params = { allowScriptAccess: "always" };
-  var atts = { id: "player" };
-  var url = "http://www.youtube.com/apiplayer?enablejsapi=1&version=3";
-  swfobject.embedSWF(url, "youtube_player", "500", "400", "8", null, null, params, atts);
-
-  $("#btn_search").click(function(e){
-    var word = $("#text_search").val();
-    $.getJSON(search_api, {word: word}, function(res){
-      console.log(res);
-      $("h1").text(res.title);
-      youtube.cueVideoById(res.video_id);
-      var url = youtube.getVideoUrl();
-      $("#video_url").html(
-        $("<a>").attr("href", url).text(url)
-      );
-    });
-  });
-
-  var btn_play = $("#btn_play");
-  btn_play.click(function(e){
-    if(youtube.getPlayerState() == 1){
-      youtube.pauseVideo();
-      btn_play.val('play');
-    }
-    else{
-      youtube.playVideo();
-      btn_play.val('pause');
-    }
+  $(".btn").click(function(e){
+    alert(e.currentTarget.innerText);
+    remote.push("message", "click button #"+e.currentTarget.id);  // push to Remote
   });
 
-  $("#btn_seek").click(function(e){
-    youtube.seekTo(youtube.getCurrentTime() + 20);
+  $(".btn").mouseover(function(e){
+    var color = e.currentTarget.attributes['x-color'].value;
+    $("body").css("background-color", color);
+    remote.push("message", "mouse over "+color);  // push to Remote
   });
-  $("#btn_seekback").click(function(e){
-    youtube.seekTo(youtube.getCurrentTime() - 20);
-  });
-
-  var range_seek = $("#range_seek");
-  range_seek.change(function(e){
-    youtube.seekTo(range_seek.val());
-  });
-
-  setInterval(function(){
-    if(typeof youtube !== 'undefined'){
-      var time = youtube.getCurrentTime();
-      $("#range_seek").val(time);
-      $("#text_seek").val(time);
-      remote.push("seek", time);
-    }
-  }, 1000);
 });

data/sample/views/main.scss

@@ -24,7 +24,3 @@ input {
   border : 2px solid #BBB;
   border-radius : 8px;
 }
-
-input.range {
-  width : 300px;
-}

data/sample/views/remote.haml

@@ -13,15 +13,19 @@
   %a{:href => app_root} home
   %h1 Remote
 %div#main
-  %div#ctrl
-    %p
-      %input#text_search{:type => :text, :value => 'ロシア'}
-      %input#btn_search.btn{:type => :button, :value => 'search'}
-    %p
-      %input#btn_play.btn{:type => :button, :value => 'play'}
-    %p
-      %input#range_seek.range{:type => :range, :min => 0}
-      %input#text_seek{:type => :text, :readonly => true, :size => 7}
-    %p
-      %input#btn_seekback.btn{:type => :button, :value => '<<'}
-      %input#btn_seek.btn{:type => :button, :value => '>>'}
+  %div
+    %span selector :
+    %select#selector
+      %option #btn_red
+      %option #btn_green
+      %option #btn_blue
+  %div
+    %span event :
+    %select#event_name
+      %option click
+      %option mouseover
+  %div
+    %span code :
+    %input#code{:type => :text, :size => 50}
+  %div
+    %input#btn_dispatch{:type => :button, :value => "dispatch"}

data/sample/views/tv.haml

@@ -1,31 +1,18 @@
 - content_for :html_head do
   %title= @title
   :javascript
-    var search_api = "#{app_root}/search.json";
     var channel = "#{@channel}"
 
 - content_for :html_foot do
   %script{:src => "#{app_root}/js/jquery.js"}
   %script{:src => cometio_js}
   %script{:src => multi_screen_js}
-  %script{:src => "#{app_root}/js/swfobject.js"}
   %script{:src => "#{app_root}/js/tv.js"}
 
 %div#header
   %a{:href => app_root} home
   %h1 TV
 %div#main
-  %div#youtube_player
-  %div#video_url
-  %div#ctrl
-    %p
-      %input#text_search{:type => :text, :value => 'ロシア'}
-      %input#btn_search.btn{:type => :button, :value => 'search'}
-    %p
-      %input#btn_play.btn{:type => :button, :value => 'play'}
-    %p
-      %input#range_seek.range{:type => :range, :min => 0}
-      %input#text_seek{:type => :text, :readonly => true, :size => 7}
-    %p
-      %input#btn_seekback.btn{:type => :button, :value => '<<'}
-      %input#btn_seek.btn{:type => :button, :value => '>>'}
+  %span.btn#btn_red{:type => :button, 'x-color' => '#FAA'} id btn_red
+  %span.btn#btn_green{:type => :button, 'x-color' => '#AFA'} id btn_green
+  %span.btn#btn_blue{:type => :button, 'x-color' => '#AAF'} id btn_blue

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sinatra-multi-screen
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-18 00:00:00.000000000 Z
+date: 2013-02-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -67,7 +67,6 @@ files:
 - lib/sinatra-multi-screen/version.rb
 - lib/sinatra/application.rb
 - lib/sinatra/multi_screen.rb
-- sample/.gitignore
 - sample/Gemfile
 - sample/Gemfile.lock
 - sample/Procfile

data/sample/.gitignore

@@ -1,7 +0,0 @@
-*.tmp
-*~
-*#*
-vendor
-.sass-cache
-.bundle
-config.yml