Permalink
Browse files

final presentation page

  • Loading branch information...
andregoncalves committed Dec 5, 2009
1 parent 1d8ef42 commit c0ea431ae14c46f731fb3049ebf58efe1d2f36f4
@@ -1,49 +1,48 @@
var Cyclops = function(type) {
- this.eventStorage = [];
-
- if (type == "master")
- {
- pubsub.subscribe('/record/start', this, "startRecording");
- pubsub.subscribe('/record/stop', this, "stopRecording");
- }
- else
- {
- pubsub.subscribe('/listen/start', this, 'startListening');
- //pubsub.subscribe('/listen/new', this, 'startListeningFromStorage');
- //pubsub.subscribe('/listen/stop', this, 'stopListening');
- }
+ this.eventStorage = [];
+
+ if (type == "master")
+ {
+ pubsub.subscribe('/record/start', this, "startRecording");
+ pubsub.subscribe('/record/stop', this, "stopRecording");
+ }
+ else
+ {
+ pubsub.subscribe('/listen/start', this, 'startListening');
+ //pubsub.subscribe('/listen/new', this, 'startListeningFromStorage');
+ //pubsub.subscribe('/listen/stop', this, 'stopListening');
+ }
}
-
-cyclops_get_lastModified = null;
+
Cyclops.prototype.startListening = function() {
-
- $.getJSON("/activity?id="+$.cookie('cyclops_queue_id'), function(ev) {
- //console.info(ev.when+': Playing event '+ev.type);
- slave['playEvent_'+ev.type](ev);
- slave.startListening();
- });
+ $.getJSON("/activity?id="+$.cookie('cyclops_queue_id'), function(ev) {
+ //console.info(ev.when+': Playing event '+ev.type);
+ // TODO: detect network conditions (retry?)
+ slave['playEvent_'+ev.type](ev);
+ slave.startListening();
+ });
/*
var temp_cyclops_get_lastModified = null;
$.ajax({
beforeSend: function(XMLHttpRequest) {
if(cyclops_get_lastModified != null) {
- XMLHttpRequest.setRequestHeader("If-Modified-Since", cyclops_get_lastModified);
+ XMLHttpRequest.setRequestHeader("If-Modified-Since", cyclops_get_lastModified);
}
},
- type: "GET",
+ type: "GET",
url: "/activity?id="+$.cookie('cyclops_queue_id'),
dataType: "json",
async: true,
success: function(ev){
//console.info('data = '+data);
//ev = JSON.parse(data);
//try {
- console.info(ev.when+': Playing event '+ev.type);
- slave['playEvent_'+ev.type](ev);
+ console.info(ev.when+': Playing event '+ev.type);
+ slave['playEvent_'+ev.type](ev);
//} catch(exception) {
- //if (self['console'])
- //console.error(exception);
+ //if (self['console'])
+ //console.error(exception);
//}
},
complete: function(XMLHttpRequest) {
@@ -53,67 +52,63 @@ Cyclops.prototype.startListening = function() {
}
console.info('Last-Modified = '+temp_cyclops_get_lastModified);
slave.startListening();
-
+
}
})
console.info('Last-Modified = '+temp_cyclops_get_lastModified);
*/
-
+
}
-
+
Cyclops.prototype.startListeningFromStorage = function() {
- events = master.eventStorage.reverse();
- el = events.pop();
-
- if (el)
- {
- //console.info(el.type);
- slave["playEvent_"+el.type](el);
- }
+ events = master.eventStorage.reverse();
+ el = events.pop();
+
+ if (el)
+ {
+ //console.info(el.type);
+ slave["playEvent_"+el.type](el);
+ }
}
Cyclops.prototype.startRecording = function() {
+ $(document).bind('mousemove', this.sendEvent);
+ $(document).bind('click', this.sendEvent);
+ //$(document).bind('mouseover', this.sendEvent);
+ $(window).bind('resize', this.sendEvent);
+ $(window).bind('scroll', this.sendEvent);
- $(document).bind('mousemove', this.sendEvent);
- $(document).bind('click', this.sendEvent);
- $(document).bind('mouseover', this.sendEvent);
- $(window).bind('resize', this.sendEvent);
- $(window).bind('scroll', this.sendEvent);
-
- /*
- $(document).bind('mouseout', this.sendEvent);
- $(document).bind('mouseenter', this.sendEvent);
- $(document).bind('mouseleave', this.sendEvent);
- $(document).bind('mouseup', this.sendEvent);
- $(document).bind('mousedown', this.sendEvent);
-*/
- // TODO: add more events
+ // TODO: add more events here
}
-
+
Cyclops.prototype.stopRecording = function() {
- $(document).unbind('mousemove', this.storeEvent);
+ $(document).unbind('mousemove', this.sendEvent);
+ $(document).unbind('click', this.sendEvent);
+ //$(document).unbind('mouseover', this.sendEvent);
+ $(window).unbind('resize', this.sendEvent);
+ $(window).unbind('scroll', this.sendEvent);
+
+ // TODO: add more events here
}
Cyclops.prototype.storeEvent = function(e) {
- master.eventStorage.push(e);
- pubsub.publish('/listen/new', e, 'new event');
+ master.eventStorage.push(e);
+ pubsub.publish('/listen/new', e, 'new event');
}
Cyclops.prototype.sendEvent = function(e) {
-
-
- var ev = master['getEvent_'+e.type](e);
+ var ev = master['getEvent_'+e.type](e);
//console.info(ev.when+': sending '+e.type);
$.post('/publish?id='+$.cookie('cyclops_queue_id'), ev.serialize(), function(data, textStatus) {});
-
- if(e.type == 'click') {
- var href = $(e.target).attr('href');
- if(href) {
- $(e.target).attr('href', href+'?cyclops_master=true');
- }
- //console.info(e.nodeName);
+
+ if (e.type == 'click') {
+ var href = $(e.target).attr('href');
+ if (href) {
+ $(e.target).attr('href', href+'?cyclops_master=true');
+ }
+ //console.info(e.nodeName);
};
}
@@ -147,14 +142,13 @@ Cyclops.prototype.getEvent_mousedown = function(e) {
return new CyEvent("mousedown", { x:e.pageX, y:e.pageY, clicks:e.detail });
}
-
Cyclops.prototype.getEvent_click = function(e) {
return new CyEvent("click", { x:e.pageX, y:e.pageY });
}
Cyclops.prototype.getEvent_resize = function(e) {
-// console.info('resize');
- return new CyEvent("resize", { height:$(window).height(), width:$(window).width() });
+ // console.info('resize');
+ return new CyEvent("resize", { height:$(window).height(), width:$(window).width() });
}
Cyclops.prototype.getEvent_scroll = function(e) {
@@ -171,14 +165,12 @@ Cyclops.prototype.__find_object_in_location = function(x, y) {
}
Cyclops.prototype.__create_event = function(type, pageX, pageY) {
- ev = jQuery.Event(type);
- ev.pageX=parseInt(pageX);
- ev.clientX=ev.pageX - (document.body.scrollLeft
- + document.documentElement.scrollLeft) ;
- ev.pageY=parseInt(pageY);
- ev.clientY=ev.pageY - (document.body.scrollTop
- + document.documentElement.scrollTop);
- return ev;
+ ev = jQuery.Event(type);
+ ev.pageX=parseInt(pageX);
+ ev.clientX=ev.pageX - (document.body.scrollLeft + document.documentElement.scrollLeft) ;
+ ev.pageY=parseInt(pageY);
+ ev.clientY=ev.pageY - (document.body.scrollTop + document.documentElement.scrollTop);
+ return ev;
}
@@ -260,26 +252,22 @@ Cyclops.prototype.playEvent_click = function(e) {
if(el = slave.__find_object_in_location(e.data.x, e.data.y)) {
//console.info(el);
if(href = $(el).attr('href')) {
- document.location = href+'?cyclops_slave=true';
+ document.location = href+'?cyclops_slave=true';
} else {
$(el).click();
}
} else {
//console.info('object not found for click');
}
-
}
Cyclops.prototype.playEvent_resize = function(e) {
- window.resizeTo(e.data.width, e.data.height+170);
+ // TODO: try resize hack
+ window.resizeTo(e.data.width, e.data.height+170);
}
Cyclops.prototype.playEvent_scroll = function(e) {
//console.info('scrolling to '+e.data.left+','+e.data.top);
window.scrollTo(e.data.left, e.data.top);
}
-$(window).load(function() {
-
-});
-
@@ -5,6 +5,5 @@ function CyEvent(type, data) {
}
CyEvent.prototype.serialize = function() {
-
return JSON.stringify(this);
}
@@ -47,6 +47,11 @@ $(document).ready(function() {
CyNotify.subscribe('/record/stop');
CyNotify.subscribe('/listen/start');
+ $("table td").mousemove(function() {
+ $("table td").css('backgroundColor', 'white');
+ $(this).css('backgroundColor', 'blue');
+ });
+
});
@@ -1,13 +1,29 @@
+body { font-family:Verdana, Arial; padding:0; margin:0; background-color:#EEE; }
+
+#header { background-color:#CCC; margin:0; padding:20px; }
+#header h1 { margin:0; }
+
+#left { width:200px; float:left; padding:1em; }
+#right { width:200px; float:left; padding:1em;}
+table { border-collapse:collapse; }
+table td { width:50px; height:50px; border:1px solid black; }
+
+div#right { font-size:12px; color:red; }
+
+#canvas { padding:0 1em;}
+
#message {
padding: 1em;
- background-color: grey;
- border: 1px solid black;
+ background-color: green;
+ color:#FFF;
+
}
canvas#painthere {
width: 300px;
height: 300px;
padding: 0;
border: 1px solid black;
+ background-color:#FFF;
}
#overboard {
width: 100%;
@@ -8,19 +8,53 @@
<link rel="stylesheet" href="../assets/stylesheets/jquery.jgrowl.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
- <h1>Cyclops Demo 1</h1>
- <p>
- <a href="application2.html">Página 2 »</a>
- </p>
- <h2>Message:</h2>
- <div id="message" style="display:none"><h3>Hello World!</h3></div>
- <button id="show_message">Show message</button>
- <button id="hide_message">Hide message</button>
- <h2>Paint here:</h2>
- <canvas width="300" height="300" id="painthere"></canvas>
-
- <footer>
- </footer>
+ <div id="header">
+ <h1>Cyclops Demo</h1>
+ Controlling remote browser sessions (broadcast possible) with a pure JS solution.<br/>
+ <small>Andre Goncalves (<strong>@andregoncalves</strong>) / Pedro Teixeira (<strong>@pedrogteixeira</strong>)</small>
+ </div>
+
+ <div id="left">
+ <table>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
+ </div>
+
+ <div id="right">
+ Recording is maintained even when user clicks on hyperlinks!<br/>
+ <a href="application2.html">Click me to try it</a>
+
+ <div style="margin-top:1em">
+ Events are injected into slave's event queue.
+ <div id="message" style="display:none"><h3>Hello World!</h3></div>
+ <div style="margin-top:5px">
+ <button id="show_message">Show Me</button>
+ <button id="hide_message">Hide Me</button>
+ </div>
+ </div>
+ </div>
+
+ <div style="clear:both">
+
+ </div>
+ <div id="canvas">
+ <h2>Canvas works (Yay!)</h2>
+ <canvas width="300" height="300" id="painthere"></canvas>
+ </div>
<img src="../assets/images/cursor.png" id="mouse" style="position:absolute" />
<script src="../assets/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../assets/javascripts/final.js" type="text/javascript" charset="utf-8"></script>
View
@@ -0,0 +1,6 @@
+2009/12/05 12:10:30 [error] 520#0: *2 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 127.0.0.1, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "localhost:8000"
+2009/12/05 12:10:33 [error] 520#0: *1 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 127.0.0.1, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "localhost:8000"
+2009/12/05 12:40:25 [error] 520#0: *58 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 213.13.77.115, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "213.13.78.79:8000"
+2009/12/05 12:40:28 [error] 520#0: *62 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 213.13.77.115, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "213.13.78.79:8000"
+2009/12/05 12:40:28 [error] 520#0: *58 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 213.13.77.115, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "213.13.78.79:8000"
+2009/12/05 13:20:35 [error] 520#0: *143 open() "/Users/andregoncalves/projects/codebits.cyclops/favicon.ico" failed (2: No such file or directory), client: 127.0.0.1, server: vostok.local, request: "GET /favicon.ico HTTP/1.1", host: "localhost:8000", referrer: "http://localhost:8000/demo_final/application.html?cyclops_slave=true"
View
@@ -38,7 +38,7 @@ http {
server {
listen 8000;
- root /home/pgte/dev/cyclops;
+ root /Users/andregoncalves/projects/codebits.cyclops;
# internal publish endpoint (keep it private / protected)
location /publish {

0 comments on commit c0ea431

Please sign in to comment.