wip mouse click/path, grunt
[realtime-mouse-tracking.git] / src / js / a.js
blob:a/src/js/a.js -> blob:b/src/js/a.js
--- a/src/js/a.js
+++ 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(){
+    });
+}
+

comments