Skip to content

Instantly share code, notes, and snippets.

@jeffkreeftmeijer

jeffkreeftmeijer/mice.css

Created July 24, 2010 09:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jeffkreeftmeijer/488562 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jeffkreeftmeijer/488562 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jeff Kreeftmeijer revised this gist Dec 16, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ server.listen(8000);
    socket.on('connection', function(client){
    client.on('message', function(message){
    try {
    request = JSON.parse(message.replace('<', '&lt;').replace('<', '&gt;'));
    request = JSON.parse(message.replace('<', '&lt;').replace('>', '&gt;'));
    } catch (SyntaxError) {
    log('Invalid JSON:');
    log(message);
  2. jeffkreeftmeijer revised this gist Aug 9, 2010. 1 changed file with 14 additions and 16 deletions.
    30 changes: 14 additions & 16 deletions mice.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ function ratelimit(fn, ms) {
    }

    function move(mouse){
    if(disabled == false){
    if(disabled == false){
    if($('#mouse_'+mouse['id']).length == 0) {
    $('body').append('<span class="mouse" id="mouse_'+mouse['id']+'"><span style="display:none;" class="chat"/></span>');
    }
    @@ -27,26 +27,26 @@ function speak(data){
    clearTimeout(timeouts[data['id']]);
    $('#mouse_'+data['id']+' img').remove();
    $('#mouse_'+data['id']).append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');
    if(data['text'] == '') {

    if(data['text'] == '') {
    return $('#mouse_'+data['id']+' .chat').hide();
    }
    $('#mouse_'+data['id']+' .chat').show().html(data['text']);

    $('#mouse_'+data['id']+' .chat').show().html(data['text']);
    timeouts[data['id']] = setTimeout("$('#mouse_"+data['id']+" .chat').hide()", 5000)
    };

    function preview(data){
    clearTimeout(timeouts[data['preview']]);
    $('#preview img').remove();
    $('#preview').append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');
    if(data['text'] == '') {

    if(data['text'] == '') {
    return $('#preview .chat').hide();
    }

    $('#preview').show();
    $('#preview .chat').show().html(data['text']);
    $('#preview .chat').show().html(data['text']);
    timeouts['preview'] = setTimeout("$('#preview').hide()", 5000)
    };

    @@ -66,17 +66,17 @@ $(document).ready(function(){
    if($('form#chat input#email').val() == '') {
    return alert('You forgot to fill in your e-mail address.');
    }

    socket.send(JSON.stringify({
    action: 'speak',
    email: $('form#chat input#email').val(),
    text: $('form#chat input#text').val().substring(0, 140)
    }));

    email: $('form#chat input#text').val('')
    return false;
    })

    $('body').append('<span id="preview"><span style="display:none;" class="chat"/></span>');
    });

    @@ -89,16 +89,14 @@ $(document).mousemove(
    w: $(window).width(),
    h: $(window).height()
    }))

    $('#preview').css({
    'left' : e.pageX + 'px',
    'top' : e.pageY + 'px'
    })
    }, 40)
    );



    var disabled = false,
    socket = new io.Socket('jeffkreeftmeijer.com', {port: 8000}),
    timeouts = {};
    @@ -110,7 +108,7 @@ if(socket.connect()){
    $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'speak') {
    if(data['id']) {
    speak(data);
    speak(data);
    } else {
    preview(data);
    }
  3. jeffkreeftmeijer revised this gist Aug 9, 2010. 3 changed files with 143 additions and 30 deletions.
    57 changes: 53 additions & 4 deletions mice.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,56 @@
    .mouse{
    .mouse, #preview{
    position: absolute;
    background-image: url('../images/cursor.png');
    width: 15px;
    background-repeat: no-repeat;
    height: 22px;
    min-width: 15px;
    z-index: 100;
    }
    }

    .mouse{
    background-image: url('../images/cursor.png');
    }

    span.chat{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background-color:#222;
    box-shadow:0 1px 0 #fff;
    color:#fff;
    font-size: 12px;
    margin: 0 0 0 15px;
    display: block;
    opacity: 0.75;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 5px;
    float:right;
    }

    span.mouse img, span#preview img{
    padding: 0 5px;
    float:left;
    margin: 0 -15px 0 15px;
    width: 20px;
    height: 20px;
    }


    form
    {
    margin: 0px 0px 0px -10px;
    width:470px;
    }

    form#chat input{
    width: 185px;
    border:0;
    padding:10px;
    margin:10px;
    -moz-border-radius:5px;
    -moz-box-shadow:0 1px 0 #fff;
    -webkit-border-radius:5px;
    -webkit-box-shadow:0 1px 0 #fff;
    border: 5px #bbb solid;

    }
    87 changes: 73 additions & 14 deletions mice.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,16 +14,43 @@ function ratelimit(fn, ms) {
    function move(mouse){
    if(disabled == false){
    if($('#mouse_'+mouse['id']).length == 0) {
    $('body').append('<div class="mouse" id="mouse_'+mouse['id']+'"/>');
    $('body').append('<span class="mouse" id="mouse_'+mouse['id']+'"><span style="display:none;" class="chat"/></span>');
    }
    $('#mouse_'+mouse['id']).css({
    'left' : (($(window).width() - mouse['w']) / 2 + mouse['x']) + 'px',
    'top' : mouse['y'] + 'px'
    })
    })
    }
    }
    };

    $(document).ready(function(){
    function speak(data){
    clearTimeout(timeouts[data['id']]);
    $('#mouse_'+data['id']+' img').remove();
    $('#mouse_'+data['id']).append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');

    if(data['text'] == '') {
    return $('#mouse_'+data['id']+' .chat').hide();
    }

    $('#mouse_'+data['id']+' .chat').show().html(data['text']);
    timeouts[data['id']] = setTimeout("$('#mouse_"+data['id']+" .chat').hide()", 5000)
    };

    function preview(data){
    clearTimeout(timeouts[data['preview']]);
    $('#preview img').remove();
    $('#preview').append('<img src="http://www.gravatar.com/avatar/' + data['email'] + '?s=20" />');

    if(data['text'] == '') {
    return $('#preview .chat').hide();
    }

    $('#preview').show();
    $('#preview .chat').show().html(data['text']);
    timeouts['preview'] = setTimeout("$('#preview').hide()", 5000)
    };

    $(document).ready(function(){
    $('#mouse_toggle a').toggle(function(){
    $('.mouse').hide();
    disabled = true;
    @@ -32,32 +59,64 @@ $(document).ready(function(){
    $('.mouse').show();
    disabled = false;
    $(this).html('disable');
    });

    $('form#chat input#email').focus();
    $('form#chat').submit(function(){
    if($('form#chat input#email').val() == '') {
    return alert('You forgot to fill in your e-mail address.');
    }

    socket.send(JSON.stringify({
    action: 'speak',
    email: $('form#chat input#email').val(),
    text: $('form#chat input#text').val().substring(0, 140)
    }));

    email: $('form#chat input#text').val('')
    return false;
    })
    })

    $('body').append('<span id="preview"><span style="display:none;" class="chat"/></span>');
    });

    $(document).mousemove(
    ratelimit(function(e){
    socket.send(JSON.stringify({
    'action': 'move',
    'x': e.pageX,
    'y': e.pageY,
    'w': $(window).width(),
    'h': $(window).height()
    }));
    socket.send(JSON.stringify({
    action: 'move',
    x: e.pageX,
    y: e.pageY,
    w: $(window).width(),
    h: $(window).height()
    }))

    $('#preview').css({
    'left' : e.pageX + 'px',
    'top' : e.pageY + 'px'
    })
    }, 40)
    );



    var disabled = false,
    socket = new io.Socket('jeffkreeftmeijer.com', {port: 8000});
    socket = new io.Socket('jeffkreeftmeijer.com', {port: 8000}),
    timeouts = {};

    if(socket.connect()){
    if(socket.connect()){
    socket.on('message', function(data){
    data = JSON.parse(data);
    if(data['action'] == 'close'){
    $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'speak') {
    if(data['id']) {
    speak(data);
    } else {
    preview(data);
    }
    } else if(data['action'] == 'move'){
    move(data);
    };
    });
    };

    29 changes: 17 additions & 12 deletions server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,39 @@
    var sys = require('sys'),
    http = require('http'),
    io = require('../'),
    server = http.createServer(),
    socket = io.listen(server),
    crypto = require('crypto');
    io = require('../'),
    server = http.createServer(),
    socket = io.listen(server),
    json = JSON.stringify,
    log = sys.puts;

    server.listen(8000);

    socket.on('connection', function(client){
    client.on('message', function(message){
    try {
    request = JSON.parse(message);
    client.on('message', function(message){
    try {
    request = JSON.parse(message.replace('<', '&lt;').replace('<', '&gt;'));
    } catch (SyntaxError) {
    log('Invalid JSON:');
    log(message);
    return false;
    }

    if(request.action != 'close' && request.action != 'move') {
    if(request.action != 'close' && request.action != 'move' && request.action != 'speak') {
    log('Ivalid request:' + "\n" + message);
    return false;
    }

    if(request.action == 'speak') {
    request.email = crypto.createHash('md5').update(request.email).digest("hex");
    client.send(json(request));
    }

    request.id = client.sessionId
    client.broadcast(json(request));
    });
    client.broadcast(json(request));
    });

    client.on('disconnect', function(){
    client.broadcast(json({'id': client.sessionId, 'action': 'close'}));
    client.on('disconnect', function(){
    client.broadcast(json({'id': client.sessionId, 'action': 'close'}));
    });
    });

  4. jeffkreeftmeijer revised this gist Aug 3, 2010. 2 changed files with 56 additions and 31 deletions.
    45 changes: 26 additions & 19 deletions mice.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    io.setPath('/js/socket/');

    function ratelimit(fn, ms) {
    var last = (new Date()).getTime();
    return (function() {
    @@ -17,40 +19,45 @@ function move(mouse){
    $('#mouse_'+mouse['id']).css({
    'left' : (($(window).width() - mouse['w']) / 2 + mouse['x']) + 'px',
    'top' : mouse['y'] + 'px'
    })
    })
    }
    }

    $(document).ready(function(){
    $('#mouse_toggle a').toggle(function(){
    $('.mouse').hide();
    disabled = true;
    $(this).html('enable');
    }, function(){
    $('.mouse').show();
    disabled = false;
    $(this).html('disable');
    })
    })

    $(document).mousemove(
    ratelimit(function(e){
    if (conn) {
    conn.send(JSON.stringify({
    socket.send(JSON.stringify({
    'action': 'move',
    'x': e.pageX,
    'y': e.pageY,
    'w': $(window).width(),
    'h': $(window).height()
    }));
    }
    }, 40)
    );


    var disabled = false,
    conn;
    socket = new io.Socket('jeffkreeftmeijer.com', {port: 8000});

    var connect = function() {
    if (window["WebSocket"]) {
    $('#mouse_toggle').show();
    $('#no_web_sockets').hide();
    conn = new WebSocket("ws://jeffkreeftmeijer.com:8000");
    conn.onmessage = function(evt) {
    data = JSON.parse(evt.data);
    if(data['action'] == 'close'){
    $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'move'){
    move(data);
    };
    if(socket.connect()){
    socket.on('message', function(data){
    data = JSON.parse(data);
    if(data['action'] == 'close'){
    $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'move'){
    move(data);
    };
    }
    });
    };
    window.onload = connect;
    42 changes: 30 additions & 12 deletions server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,34 @@
    var ws = require(__dirname + '/lib/ws'),
    server = ws.createServer();
    var sys = require('sys'),
    http = require('http'),
    io = require('../'),
    server = http.createServer(),
    socket = io.listen(server),
    json = JSON.stringify,
    log = sys.puts;

    server.addListener("connection", function(conn){
    conn.addListener("message", function(message){
    message = JSON.parse(message);
    message['id'] = conn.id
    conn.broadcast(JSON.stringify(message));
    });
    });
    server.listen(8000);

    socket.on('connection', function(client){
    client.on('message', function(message){
    try {
    request = JSON.parse(message);
    } catch (SyntaxError) {
    log('Invalid JSON:');
    log(message);
    return false;
    }

    server.addListener("close", function(conn){
    conn.broadcast(JSON.stringify({'id': conn.id, 'action': 'close'}));
    if(request.action != 'close' && request.action != 'move') {
    log('Ivalid request:' + "\n" + message);
    return false;
    }

    request.id = client.sessionId
    client.broadcast(json(request));
    });

    client.on('disconnect', function(){
    client.broadcast(json({'id': client.sessionId, 'action': 'close'}));
    });
    });

    server.listen(8000);
  5. jeffkreeftmeijer revised this gist Jul 24, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mice.js
    View file
    Original file line number Diff line number Diff line change
    @@ -42,7 +42,7 @@ var connect = function() {
    if (window["WebSocket"]) {
    $('#mouse_toggle').show();
    $('#no_web_sockets').hide();
    conn = new WebSocket("ws://jeffkreeftmeijer.com:8000/test");
    conn = new WebSocket("ws://jeffkreeftmeijer.com:8000");
    conn.onmessage = function(evt) {
    data = JSON.parse(evt.data);
    if(data['action'] == 'close'){
  6. jeffkreeftmeijer renamed this gist Jul 24, 2010. 1 changed file with 0 additions and 0 deletions.
    0 gistfile3.txt → mice.css
    View file
    File renamed without changes.
  7. jeffkreeftmeijer created this gist Jul 24, 2010.
    7 changes: 7 additions & 0 deletions gistfile3.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    .mouse{
    position: absolute;
    background-image: url('../images/cursor.png');
    width: 15px;
    height: 22px;
    z-index: 100;
    }
    56 changes: 56 additions & 0 deletions mice.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    function ratelimit(fn, ms) {
    var last = (new Date()).getTime();
    return (function() {
    var now = (new Date()).getTime();
    if (now - last > ms) {
    last = now;
    fn.apply(null, arguments);
    }
    });
    }

    function move(mouse){
    if(disabled == false){
    if($('#mouse_'+mouse['id']).length == 0) {
    $('body').append('<div class="mouse" id="mouse_'+mouse['id']+'"/>');
    }
    $('#mouse_'+mouse['id']).css({
    'left' : (($(window).width() - mouse['w']) / 2 + mouse['x']) + 'px',
    'top' : mouse['y'] + 'px'
    })
    }
    }

    $(document).mousemove(
    ratelimit(function(e){
    if (conn) {
    conn.send(JSON.stringify({
    'action': 'move',
    'x': e.pageX,
    'y': e.pageY,
    'w': $(window).width(),
    'h': $(window).height()
    }));
    }
    }, 40)
    );

    var disabled = false,
    conn;

    var connect = function() {
    if (window["WebSocket"]) {
    $('#mouse_toggle').show();
    $('#no_web_sockets').hide();
    conn = new WebSocket("ws://jeffkreeftmeijer.com:8000/test");
    conn.onmessage = function(evt) {
    data = JSON.parse(evt.data);
    if(data['action'] == 'close'){
    $('#mouse_'+data['id']).remove();
    } else if(data['action'] == 'move'){
    move(data);
    };
    };
    }
    };
    window.onload = connect;
    16 changes: 16 additions & 0 deletions server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    var ws = require(__dirname + '/lib/ws'),
    server = ws.createServer();

    server.addListener("connection", function(conn){
    conn.addListener("message", function(message){
    message = JSON.parse(message);
    message['id'] = conn.id
    conn.broadcast(JSON.stringify(message));
    });
    });

    server.addListener("close", function(conn){
    conn.broadcast(JSON.stringify({'id': conn.id, 'action': 'close'}));
    });

    server.listen(8000);