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
- https://github.com/shokai/sinatra-multi-screen/tree/master/sample
- http://multiscreen-youtube.herokuapp.com
- https://github.com/shokai/multiscreen-youtube-sample
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