mouseover on clicks will show client data
mouseover on clicks will show client data

var host = "/"; var host = "/";
   
function loadJs(i,s,o,g,c){ function loadJs(i,s,o,g,c){
a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m); a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
a.onload=function(){ a.onload=function(){
c(); c();
} }
} }
loadJs(window,document,'script','/socket.io-client/socket.io.js', function(){NRTTAdmin()}); loadJs(window,document,'script','/socket.io-client/socket.io.js', function(){NRTTAdmin()});
   
var viewportwidth; var viewportwidth;
var viewportheight; var viewportheight;
   
function onResize() { function onResize() {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') if (typeof window.innerWidth != 'undefined')
{ {
viewportwidth = window.innerWidth, viewportwidth = window.innerWidth,
viewportheight = window.innerHeight viewportheight = window.innerHeight
} }
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != && typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) 'undefined' && document.documentElement.clientWidth != 0)
{ {
viewportwidth = document.documentElement.clientWidth, viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight viewportheight = document.documentElement.clientHeight
} }
// older versions of IE // older versions of IE
else else
{ {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight viewportheight = document.getElementsByTagName('body')[0].clientHeight
} }
canvas.width = viewportwidth; canvas.width = viewportwidth;
} }
   
function NRTTAdmin(){ function NRTTAdmin(){
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60) window.setTimeout(callback, 1000 / 60)
}; };
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
onResize(); onResize();
window.onresize = onResize; window.onresize = onResize;
canvas.style = 'position:absolute;top:0;left:0'; canvas.style = 'position:absolute;top:0;left:0';
var width = viewportwidth; var width = viewportwidth;
var height = 5000; var height = 5000;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
   
var div = document.getElementById("canvas"); var div = document.getElementById("canvas");
document.body.insertBefore(canvas, div); document.body.insertBefore(canvas, div);
   
var clicks = []; var clicks = [];
var moves = []; var moves = [];
  var cursorX, cursorY;
  document.onmousemove = function(e){
  cursorX = - viewportwidth/2 + e.pageX;
  cursorY = e.pageY;
  }
   
  document.onclick = function(e){
  var _cursorX = - viewportwidth/2 + e.pageX;
  var _cursorY = e.pageY;
  console.log (_cursorX + " " + _cursorY);
  }
   
var step = function () { var step = function () {
render(); render();
animate(step); animate(step);
}; };
   
function render(){ function render(){
ctx.clearRect(0, 0, width, height); ctx.clearRect(0, 0, width, height);
for(key in clicks) { for(key in clicks) {
click = clicks[key]; click = clicks[key];
var x = viewportwidth/2 + click.x; var x = viewportwidth/2 + click.x;
if (click.time < Date.now()) { if (click.time < Date.now()) {
clicks.splice(key, 1); clicks.splice(key, 1);
} }
ctx.globalAlpha = 0.5; ctx.globalAlpha = 0.5;
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = click.color; if (cursorX >= click.x - 4 && cursorX <= click.x + 4 && cursorY >= click.y - 4 && cursorY <= click.y + 4) {
  ctx.strokeStyle = '#EBC167';
  ctx.fillStyle = '#EB1C8A';
  } else {
  ctx.strokeStyle = '#003300';
  ctx.fillStyle = click.color;
  }
ctx.arc(x, click.y, 4, 0, 2 * Math.PI, true); ctx.arc(x, click.y, 4, 0, 2 * Math.PI, true);
ctx.fill(); ctx.fill();
ctx.lineWidth = 0.5; ctx.lineWidth = 0.5;
ctx.strokeStyle = '#003300';  
ctx.stroke(); ctx.stroke();
} }
for(key in moves) { for(key in moves) {
move = moves[key]; move = moves[key];
if (move.time < Date.now()) { if (move.time < Date.now()) {
moves.splice(key, 1); moves.splice(key, 1);
} }
ctx.beginPath(); ctx.beginPath();
  ctx.strokeStyle = '#000000';
x0 = viewportwidth/2 + move[0].x; x0 = viewportwidth/2 + move[0].x;
x1 = viewportwidth/2 + move[1].x; x1 = viewportwidth/2 + move[1].x;
ctx.moveTo(x0, move[0].y); ctx.moveTo(x0, move[0].y);
ctx.lineTo(x1, move[1].y); ctx.lineTo(x1, move[1].y);
ctx.stroke(); ctx.stroke();
} }
} }
   
animate(step); animate(step);
   
var aSocket = io(); var aSocket = io();
aSocket.emit('t:connect', {w:window.width, h:window.height, admin:1234}); aSocket.emit('t:connect', {w:window.width, h:window.height, admin:1234});
aSocket.on('t:click', function(click){ aSocket.on('t:click', function(click){
click.time = Date.now() + 1500000; click.time = Date.now() + 150000;
clicks.push(click); clicks.push(click);
}); });
var xx = 1; var xx = 1;
aSocket.on('t:mousemove', function(move){ aSocket.on('t:mousemove', function(move){
move[0].time = Date.now() + 150000; move[0].time = Date.now() + 150000;
move[1].time = Date.now() + 150000; move[1].time = Date.now() + 150000;
moves.push(move); moves.push(move);
}); });
aSocket.on('t:resolutions', function(resolutions){ aSocket.on('t:resolutions', function(resolutions){
//console.log (resolutions); //console.log (resolutions);
}); });
aSocket.on('disconnect', function(){ aSocket.on('disconnect', function(){
}); });
} }
   
var host = "http://node.dev.webstyler.ro/"; var host = "http://node.dev.webstyler.ro/";
   
/*function loadJs(i,s,o,g,c){ /*function loadJs(i,s,o,g,c){
a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m); a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
a.onload=function(){ a.onload=function(){
c(); c();
} }
} }
loadJs(window,document,'script',host + 'socket.io-client/socket.io.js', function(){NRTT()});*/ loadJs(window,document,'script',host + 'socket.io-client/socket.io.js', function(){NRTT()});*/
   
function NRTT() { function NRTT() {
var connected = false; var connected = false;
   
var mouseAction = {enabled: true, interval:500}; var mouseAction = {enabled: true, interval:500};
var clickAction = {enabled : true}; var clickAction = {enabled : true};
   
var viewportwidth; var viewportwidth;
var viewportheight; var viewportheight;
   
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
   
if (typeof window.innerWidth != 'undefined') if (typeof window.innerWidth != 'undefined')
{ {
viewportwidth = window.innerWidth, viewportwidth = window.innerWidth,
viewportheight = window.innerHeight viewportheight = window.innerHeight
} }
   
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
   
else if (typeof document.documentElement != 'undefined' else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != && typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) 'undefined' && document.documentElement.clientWidth != 0)
{ {
viewportwidth = document.documentElement.clientWidth, viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight viewportheight = document.documentElement.clientHeight
} }
   
// older versions of IE // older versions of IE
   
else else
{ {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight viewportheight = document.getElementsByTagName('body')[0].clientHeight
} }
   
var cursorX, cursorY; var cursorX, cursorY;
document.onmousemove = function(e){ document.onmousemove = function(e){
cursorX = e.pageX; cursorX = e.pageX;
cursorY = e.pageY; cursorY = e.pageY;
} }
document.onclick = function(e){ document.onclick = function(e){
if (connected && clickAction.enabled) { if (connected && clickAction.enabled) {
var x = - viewportwidth/2 + e.pageX; var x = - viewportwidth/2 + e.pageX;
cSocket.emit('t:click', {x:x, y:e.pageY}); cSocket.emit('t:click', {x:x, y:e.pageY, url:window.location.href});
} }
} }
var cSocket = io(host); var cSocket = io(host);
var color = null; var color = null;
if(typeof(Storage) !== "undefined") { if(typeof(Storage) !== "undefined") {
color = localStorage.getItem('tcolor'); color = localStorage.getItem('tcolor');
} }
cSocket.emit('t:connect', {w:viewportwidth, h:viewportheight, color:color}); cSocket.emit('t:connect', {w:viewportwidth, h:viewportheight, color:color});
cSocket.on('t:connected', function(msg){ cSocket.on('t:connected', function(msg){
connected = true; connected = true;
if(typeof(Storage) !== "undefined") { if(typeof(Storage) !== "undefined") {
if (msg.color) { if (msg.color) {
localStorage.setItem("tcolor", msg.color); localStorage.setItem("tcolor", msg.color);
} }
} }
}); });
cSocket.on('disconnect', function(){ cSocket.on('disconnect', function(){
connected = false; connected = false;
}); });
cSocket.on('t:changemm', function(msg){ cSocket.on('t:changemm', function(msg){
mouseAction = msg; mouseAction = msg;
}); });
   
cSocket.on('t:changec', function(msg){ cSocket.on('t:changec', function(msg){
clickAction = msg; clickAction = msg;
}); });
   
setInterval(function(){ setInterval(function(){
if (connected && mouseAction.enabled) { if (connected && mouseAction.enabled) {
var x = - viewportwidth/2 + cursorX; var x = - viewportwidth/2 + cursorX;
cSocket.emit('t:mousemove', {x:x, y:cursorY}); cSocket.emit('t:mousemove', {x:x, y:cursorY, url:window.location.href});
} }
}, mouseAction.interval); }, mouseAction.interval);
} }
NRTT(); NRTT();
comments