wip mouse click/path, grunt
wip mouse click/path, grunt

file:a/.gitignore -> file:b/.gitignore
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 bower_components
+dist
 

file:b/Gruntfile.js (new)
--- /dev/null
+++ b/Gruntfile.js
@@ -1,1 +1,69 @@
+module.exports = function(grunt) {
 
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+        concat: {
+            options: {
+                separator: ';'
+            },
+            dist: {
+                src: ['bower_components/socket.io-client/socket.io.js', 'src/js/c.js'],
+                dest: 'dist/<%= pkg.name %>.js'
+            }
+        },
+        uglify: {
+            options: {
+                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+            },
+            dist: {
+                files: {
+                    'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
+                }
+            }
+        },
+        cssmin: {
+            dist: {
+                options: {
+                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+                },
+                files: {
+                        'dist/css/<%= pkg.name %>.min.css': ['src/css/c.css']
+                }
+            }
+        },
+        copy: {
+          main: {
+            files: [
+                {expand: true, cwd: 'src/', src: ['admin.html'], dest: 'dist/'},
+                {expand: true, cwd: 'src/js', src: ['a.js'], dest: 'dist/js'},
+                ],
+            },
+        },
+        jshint: {
+            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
+            options: {
+                globals: {
+                    jQuery: true,
+                    console: true,
+                    module: true,
+                    document: true
+                }
+            }
+        },
+        watch: {
+          files: ['<%= jshint.files %>'],
+          tasks: ['jshint']
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+
+    //grunt.registerTask('test', ['jshint']);
+
+    grunt.registerTask('default', [/*'jshint', */'concat', 'uglify', 'cssmin', 'copy']);
+};

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -3,18 +3,15 @@
 var http = require('http').Server(app);
 var io = require('socket.io')(http);
 
-app.get('/', function(req, res){
-    res.sendFile(__dirname + '/public/index.html');
+app.get('/admin', function(req, res){
+    res.sendFile(__dirname + '/dist/admin.html');
 });
 
-app.get('/admin', function(req, res){
-    res.sendFile(__dirname + '/public/admin.html');
-});
-
-app.use(express.static(__dirname + '/public'));
+app.use(express.static(__dirname + '/dist'));
 app.use(express.static(__dirname + '/bower_components'));
 
 var admin = [];
+var resolutions = [];
 
 io.on('connection', function(socket){
     var mouse = [];
@@ -25,12 +22,22 @@
         if (msg.admin == 1234) {
             console.log ("admin connected " + id);
             admin.push(id);
+        } else {
+            console.log ("user connected " + id);
         }
         if (msg.color != null) {
             color = msg.color;
             socket.emit('t:connected', {});
         } else {
             socket.emit('t:connected', {color:color});
+        }
+        var resolution = msg.w + 'x' + msg.h;
+        index = resolutions.indexOf(resolution);
+        if (index == -1) {
+            resolutions.push(resolution);
+            for (key in admin) {
+                io.to(admin[key]).emit('t:resolutions', resolutions);
+            }
         }
     });
 
@@ -57,7 +64,6 @@
     socket.on('t:click', function(click){
         click.color = color;
         for (key in admin) {
-            //console.log ("\tsend click to admin " + admin[key]);
             io.to(admin[key]).emit('t:click', click);
         }
     });
@@ -70,7 +76,7 @@
     });
 });
 
-http.listen(3000, function(){
-    console.log('listening on *:3000');
+http.listen(80, '192.168.0.3', function(){
+    console.log('listening on 192.168.0.3:80');
 });
 

--- a/package.json
+++ b/package.json
@@ -5,6 +5,15 @@
   "dependencies": {
     "express": "4.10.2",
     "socket.io": "1.2.0"
+  },
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-copy": "^0.8.2",
+    "grunt-contrib-cssmin": "^0.14.0",
+    "grunt-contrib-jshint": "^0.12.0",
+    "grunt-contrib-uglify": "^0.11.0",
+    "grunt-contrib-watch": "^0.6.1"
   }
 }
 

file:a/public/admin.html (deleted)
--- a/public/admin.html
+++ /dev/null
@@ -1,16 +1,1 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset='utf-8'>
-<meta content='IE=edge' http-equiv='X-UA-Compatible'>
-<meta content='width=device-width,initial-scale=1' name='viewport'>
-<title>Tracking</title>
-</head>
-<body>
-<div id="div"></div>
-<script type="text/javascript">
-    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/a.js');
-</script>
 
-</body>
-</html>

file:a/public/index.html (deleted)
--- a/public/index.html
+++ /dev/null
@@ -1,17 +1,1 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset='utf-8'>
-<meta content='IE=edge' http-equiv='X-UA-Compatible'>
-<meta content='width=device-width,initial-scale=1' name='viewport'>
-<title>Tracking</title>
-</head>
-<body>
-<div id="div"></div>
-<script type="text/javascript">
-    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/a.js');
-    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/c.js');
-</script>
 
-</body>
-</html>

file:a/public/js/a.js (deleted)
--- a/public/js/a.js
+++ /dev/null
@@ -1,76 +1,1 @@
-var host = "/";
 
-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.onload=function(){
-        c();
-    }
-}
-loadJs(window,document,'script','/socket.io-client/socket.io.js', function(){NRTTAdmin()});
-
-function NRTTAdmin(){
-    var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
-            window.setTimeout(callback, 1000 / 60)
-    };
-    var canvas = document.createElement("canvas");
-    var width = 1920;
-    var height = 1080;
-    canvas.width = width;
-    canvas.height = height;
-    var ctx = canvas.getContext('2d');
-
-    var div = document.getElementById("canvas");
-    document.body.insertBefore(canvas, div);
-
-    var clicks = [];
-    var moves = [];
-
-    var step = function () {
-        render();
-        animate(step);
-    };
-
-    function render(){
-        ctx.clearRect(0, 0, width, height);
-        for(key in clicks) {
-            click = clicks[key];
-            if (click.time < Date.now()) {
-                clicks.splice(key, 1);
-            }
-            ctx.globalAlpha = 0.5;
-            ctx.beginPath();
-            ctx.fillStyle = click.color;
-            ctx.arc(click.x, click.y, 4, 0, 2 * Math.PI, true);
-            ctx.fill();
-            ctx.lineWidth = 0.5;
-            ctx.strokeStyle = '#003300';
-            ctx.stroke();
-        }
-        for(key in moves) {
-            move = moves[key];
-            if (move.time < Date.now()) {
-                moves.splice(key, 1);
-            }
-            ctx.beginPath();
-            ctx.moveTo(move[0].x, move[0].y);
-            ctx.lineTo(move[1].x, move[1].y);
-            ctx.stroke();
-        }
-    }
-
-    animate(step);
-
-    var aSocket = io();
-    aSocket.emit('t:connect', {w:window.width, h:window.height, admin:1234});
-    aSocket.on('t:click', function(click){
-        click.time = Date.now() + 15000;
-        clicks.push(click);
-    });
-    aSocket.on('t:mousemove', function(move){
-        move.time = Date.now() + 15000;
-        moves.push(move);
-    });
-    aSocket.on('disconnect', function(){
-    });
-}
-

file:a/public/js/c.js (deleted)
--- a/public/js/c.js
+++ /dev/null
@@ -1,58 +1,1 @@
-var host = "/";
 
-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.onload=function(){
-        c();
-    }
-}
-loadJs(window,document,'script',host + 'socket.io-client/socket.io.js', function(){NRTT()});
-
-function NRTT() {
-    var connected = false;
-
-    var mouseAction = {enabled: false, interval:100};
-    var clickAction = {enabled : true};
-
-    var cursorX, cursorY;
-    document.onmousemove = function(e){
-        cursorX = e.pageX;
-        cursorY = e.pageY;
-    }
-    document.onclick = function(e){
-        if (connected && clickAction.enabled) {
-            cSocket.emit('t:click', {x:e.pageX, y:e.pageY});
-        }
-    }
-    var cSocket = io();
-    var color = null;
-    if(typeof(Storage) !== "undefined") {
-        color = localStorage.getItem('tcolor');
-    }
-    cSocket.emit('t:connect', {w:window.width, h:window.height, color:color});
-    cSocket.on('t:connected', function(msg){
-        connected = true;
-        if(typeof(Storage) !== "undefined") {
-            if (msg.color) {
-                localStorage.setItem("tcolor", msg.color);
-            }
-        }
-    });
-    cSocket.on('disconnect', function(){
-        connected = false;
-    });
-    cSocket.on('t:changemm', function(msg){
-        mouseAction = msg;
-    });
-
-    cSocket.on('t:changec', function(msg){
-        clickAction = msg;
-    });
-
-    setInterval(function(){
-        if (connected && mouseAction.enabled) {
-            cSocket.emit('t:mousemove', {x:cursorX,y:cursorY});
-        }
-    }, mouseAction.interval);
-}
-

file:b/src/admin.html (new)
--- /dev/null
+++ b/src/admin.html
@@ -1,1 +1,16 @@
-
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8'>
+<meta content='IE=edge' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1' name='viewport'>
+<title>Tracking</title>
+</head>
+<body>
+<iframe src="" width="100%" height="2000" frameborder="0" scrolling="no" seamless="seamless"></iframe>
+<div id="div" style=""></div>
+<script type="text/javascript">
+    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/a.js');
+</script>
+</body>
+</html>

file:b/src/index.html (new)
--- /dev/null
+++ b/src/index.html
@@ -1,1 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8'>
+<meta content='IE=edge' http-equiv='X-UA-Compatible'>
+<meta content='width=device-width,initial-scale=1' name='viewport'>
+<title>Tracking</title>
+</head>
+<body>
+<div id="div"></div>
+<script type="text/javascript">
+    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/a.js');
+    (function(i,s,o,g){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','/js/c.js');
+</script>
 
+</body>
+</html>

file:b/src/js/a.js (new)
--- /dev/null
+++ b/src/js/a.js
@@ -1,1 +1,114 @@
+var host = "/";
 
+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.onload=function(){
+        c();
+    }
+}
+loadJs(window,document,'script','/socket.io-client/socket.io.js', function(){NRTTAdmin()});
+
+var viewportwidth;
+var viewportheight;
+
+function onResize() {
+    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
+    if (typeof window.innerWidth != 'undefined')
+    {
+      viewportwidth = window.innerWidth,
+      viewportheight = window.innerHeight
+    }
+    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
+    else if (typeof document.documentElement != 'undefined'
+     && typeof document.documentElement.clientWidth !=
+     'undefined' && document.documentElement.clientWidth != 0)
+    {
+       viewportwidth = document.documentElement.clientWidth,
+       viewportheight = document.documentElement.clientHeight
+    }
+    // older versions of IE
+    else
+    {
+       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
+       viewportheight = document.getElementsByTagName('body')[0].clientHeight
+    }
+    canvas.width = viewportwidth;
+}
+
+function NRTTAdmin(){
+    var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+            window.setTimeout(callback, 1000 / 60)
+    };
+    canvas = document.createElement("canvas");
+    onResize();
+    window.onresize = onResize;
+    canvas.style = 'position:absolute;top:0;left:0';
+    var width = viewportwidth;
+    var height = 5000;
+    canvas.width = width;
+    canvas.height = height;
+    var ctx = canvas.getContext('2d');
+
+    var div = document.getElementById("canvas");
+    document.body.insertBefore(canvas, div);
+
+    var clicks = [];
+    var moves = [];
+
+    var step = function () {
+        render();
+        animate(step);
+    };
+
+    function render(){
+        ctx.clearRect(0, 0, width, height);
+        for(key in clicks) {
+            click = clicks[key];
+            var x = viewportwidth/2 + click.x;
+            if (click.time < Date.now()) {
+                clicks.splice(key, 1);
+            }
+            ctx.globalAlpha = 0.5;
+            ctx.beginPath();
+            ctx.fillStyle = click.color;
+            ctx.arc(x, click.y, 4, 0, 2 * Math.PI, true);
+            ctx.fill();
+            ctx.lineWidth = 0.5;
+            ctx.strokeStyle = '#003300';
+            ctx.stroke();
+        }
+        for(key in moves) {
+            move = moves[key];
+            if (move.time < Date.now()) {
+                moves.splice(key, 1);
+            }
+            ctx.beginPath();
+            x0 = viewportwidth/2 + move[0].x;
+            x1 = viewportwidth/2 + move[1].x;
+            ctx.moveTo(x0, move[0].y);
+            ctx.lineTo(x1, move[1].y);
+            ctx.stroke();
+        }
+    }
+
+    animate(step);
+
+    var aSocket = io();
+    aSocket.emit('t:connect', {w:window.width, h:window.height, admin:1234});
+    aSocket.on('t:click', function(click){
+        click.time = Date.now() + 1500000;
+        clicks.push(click);
+    });
+    var xx = 1;
+    aSocket.on('t:mousemove', function(move){
+        move[0].time = Date.now() + 150000;
+        move[1].time = Date.now() + 150000;
+        moves.push(move);
+    });
+    aSocket.on('t:resolutions', function(resolutions){
+        //console.log (resolutions);
+    });
+    aSocket.on('disconnect', function(){
+    });
+}
+

file:b/src/js/c.js (new)
--- /dev/null
+++ b/src/js/c.js
@@ -1,1 +1,89 @@
+var host = "http://node.dev.webstyler.ro/";
 
+/*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.onload=function(){
+        c();
+    }
+}
+loadJs(window,document,'script',host + 'socket.io-client/socket.io.js', function(){NRTT()});*/
+
+function NRTT() {
+    var connected = false;
+
+    var mouseAction = {enabled: true, interval:500};
+    var clickAction = {enabled : true};
+
+    var viewportwidth;
+    var viewportheight;
+
+    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
+
+    if (typeof window.innerWidth != 'undefined')
+    {
+      viewportwidth = window.innerWidth,
+      viewportheight = window.innerHeight
+    }
+
+    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
+
+    else if (typeof document.documentElement != 'undefined'
+     && typeof document.documentElement.clientWidth !=
+     'undefined' && document.documentElement.clientWidth != 0)
+    {
+       viewportwidth = document.documentElement.clientWidth,
+       viewportheight = document.documentElement.clientHeight
+    }
+
+    // older versions of IE
+
+    else
+    {
+       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
+       viewportheight = document.getElementsByTagName('body')[0].clientHeight
+    }
+
+    var cursorX, cursorY;
+    document.onmousemove = function(e){
+        cursorX = e.pageX;
+        cursorY = e.pageY;
+    }
+    document.onclick = function(e){
+        if (connected && clickAction.enabled) {
+            var x = - viewportwidth/2 + e.pageX;
+            cSocket.emit('t:click', {x:x, y:e.pageY});
+        }
+    }
+    var cSocket = io(host);
+    var color = null;
+    if(typeof(Storage) !== "undefined") {
+        color = localStorage.getItem('tcolor');
+    }
+    cSocket.emit('t:connect', {w:viewportwidth, h:viewportheight, color:color});
+    cSocket.on('t:connected', function(msg){
+        connected = true;
+        if(typeof(Storage) !== "undefined") {
+            if (msg.color) {
+                localStorage.setItem("tcolor", msg.color);
+            }
+        }
+    });
+    cSocket.on('disconnect', function(){
+        connected = false;
+    });
+    cSocket.on('t:changemm', function(msg){
+        mouseAction = msg;
+    });
+
+    cSocket.on('t:changec', function(msg){
+        clickAction = msg;
+    });
+
+    setInterval(function(){
+        if (connected && mouseAction.enabled) {
+            var x = - viewportwidth/2 + cursorX;
+            cSocket.emit('t:mousemove', {x:x, y:cursorY});
+        }
+    }, mouseAction.interval);
+}
+NRTT();

comments