sinatra-multi-screen

Sinatra Plugin for Multi-Screen Application.

Installation

% gem install sinatra-multi-screen

Requirements

Ruby 1.8.7+ or 1.9.2+
Sinatra 1.3.0+
EventMachine
jQuery
sinatra-comeio

Usage

Sinatra Setup

require 'sinatra'
require 'sinatra/cometio'
require 'sinatra/multi_screen'

run Sinatra::Application

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="<%= cometio_js %>"></script>
<script src="<%= multi_screen_js %>"></script>

Remote --(dispatch UI Event)--> TV

Remote Side

var io = new CometIO().connect();
var screen = new MultiScreen(io, {type: "remote", channel: "1"});
var tv = screen.tv;

io.on("connect", function(session){
  tv.$("#btn").click();  // dispatch CLICK event on TV Side
};

tv.on("ui_event", function(data){  // UI Event echo back from TV
  alert(data.event+' was dispatched on TV-side '+data.selector);
});

TV Side

<input type="button" id="btn" value="hello" />

var io = new CometIO().connect();
var screen = new MultiScreen(io, {type: "tv", channel: "1"});
var remote = screen.remote;

$(function(){
  $("#btn").click(function(e){ // regist click event
    alert("hello!!");
  });
});

TV --(push event)--> Remote

TV Side

remote.push("change_color", {color: #FF0000"});  // push "change_color" event to Remote

Remote Side

tv.on("change_color", function(data){ // regist "change_color" event
  $("body").css("background-color", data.color);
});

Remote --(push event)--> TV

Remote Side

tv.push("mode", "fullscreen");  // push "mode" to TV

TV Side

remote.on("mode", function(data){
  console.log(data);
});

Events on Server

Sinatra Side

MultiScreen.on :connect do |client|
  puts "new client #{client.inspect}"
  p MultiScreen.channels
end

MultiScreen.on :disconnect do |client|
  puts "client disconnect - #{client.inspect}"
  p MultiScreen.channels
end

MultiScreen.on :ui_event do |data, from|
  puts "Remote --(dispatch UI Event)--> TV"
end

Server ---(push event)--> TV or Remote

Sinatra Side

data = {:message => 'hello!!'}
MultiScreen.push :foo, data  # to all TV and Remote
MultiScreen.push :foo, data, {:type => "tv"}  # to all TV
MultiScreen.push :foo, data, {:type => "remote", :channel => "1"}

TV or Remote Side

screen.on("foo", function(data){
  alert(data.message);
});

Samples

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request