mouseover on clicks will show client data
[realtime-mouse-tracking.git] / src / js / a.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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