1 var sock = null;

     2 var ellog = null;

     3 

     4 

     5 function log(m) {

     6    ellog.innerHTML += m + '\n';

     7    ellog.scrollTop = ellog.scrollHeight;

     8 };

     9 

    10 //Config vars

    11 var sceneWidth = 800;

    12 var sceneHeight = 400;

    13 var sceneBgColor = 0x66FF99;

    14 var manualFramerate = 24;

    15 var speed = 1; // container -x position at each frame. Speed = 1 ~ 110px for 2 seconds

    16 var pixelsPerSecond = 50; // nb of pixels per second

    17 var lineInterval = 2000; // means line every 2 seconds

    18 var nbLines = 0;

    19 

    20 var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime();

    21 

    22 

    23 //create an new instance of a pixi stage

    24 var stage = new PIXI.Stage(sceneBgColor);

    25 

    26 //create a renderer instance.

    27 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);

    28 

    29 //add the renderer view element to the DOM

    30 document.body.appendChild(renderer.view);

    31 

    32 //requestAnimFrame( animate );

    33 

    34 var uberContainer = new PIXI.DisplayObjectContainer();

    35 uberContainer.position.x = Math.floor(sceneWidth*4/5);

    36 uberContainer.position.y = 0;

    37 stage.addChild(uberContainer);

    38 var container = new PIXI.DisplayObjectContainer();

    39 container.position.x = 0;

    40 container.position.y = 0;

    41 uberContainer.addChild(container);

    42 

    43 //create a texture from an image path

    44 var texture = PIXI.Texture.fromImage("bunny.png");

    45 

    46 

    47 /*function animate() {

    48     requestAnimFrame( animate );

    49     // just for fun, lets rotate mr rabbit a little

    50     //bunny.rotation += 0.1;

    51     container.x -= speed;

    52     //console.log("container.x = ", container.x);

    53     // render the stage  

    54     renderer.render(stage);

    55 }*/

    56 

    57 function moveContainer() {

    58     container.x -= pixelsPerSecond/manualFramerate;

    59     renderer.render(stage);

    60 }

    61 

    62 function addBunny(data){

    63     // create a new Sprite using the texture

    64     var bunny = new PIXI.Sprite(texture);

    65     // center the sprites anchor point

    66     //bunny.anchor.x = 0.5;

    67     //bunny.anchor.y = 0.5;

    68     deltaMilliseconds = new Date(data.ts).getTime() - zeroTime;

    69     //bunny.position.x = (sceneWidth / 2) - container.x;

    70     //bunny.position.y = Math.floor(Math.random()*sceneHeight);

    71     var x = deltaMilliseconds * pixelsPerSecond / 1000;

    72     bunny.position.x = x;

    73     bunny.position.y = Math.floor( data.content[3] * sceneHeight / 128 );

    74     bunny.alpha = data.content[4] / 128;

    75     console.log("diff temporelle = ", x);

    76     container.addChild(bunny);

    77 }

    78 

    79 window.onload = function() {

    80 

    81     ellog = document.getElementById('log');

    82 

    83     var wsuri;

    84     if (window.location.protocol === "file:") {

    85        wsuri = "ws://127.0.0.1:8090/broadcast";

    86     } else {

    87        wsuri = "ws://" + window.location.hostname + ":8090/broadcast";

    88     }

    89     if ("WebSocket" in window) {

    90        sock = new WebSocket(wsuri);

    91     } else if ("MozWebSocket" in window) {

    92        sock = new MozWebSocket(wsuri);

    93     } else {

    94        log("Browser does not support WebSocket!");

    95        window.location = "http://autobahn.ws/unsupportedbrowser";

    96     }

    97 

    98     if (sock) {

    99        sock.onopen = function() {

   100           log("Connected to " + wsuri);

   101        }

   102 

   103        sock.onclose = function(e) {

   104           log("Connection closed (wasClean = " + e.wasClean + ", code = " + e.code + ", reason = '" + e.reason + "')");

   105           sock = null;

   106        }

   107 

   108        sock.onmessage = function(e) {

   109           log("Got message: " + e.data);

   110           addBunny(JSON.parse(e.data));

   111        }

   112     }

   113 };

   114 

   115 

   116 function addLine(){

   117     nbLines++;

   118     var graphics = new PIXI.Graphics();

   119     var x = nbLines * (lineInterval/1000) * pixelsPerSecond;

   120     console.log("nbLines = ",nbLines, "x = ", x);

   121     graphics.beginFill(0xFFFF00);

   122     graphics.lineStyle(1, 0x444444);

   123     graphics.moveTo(x, 0);

   124     graphics.lineTo(x, sceneHeight);

   125     graphics.endFill();

   126 

   127     container.addChild(graphics);

   128 }

   129 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate);

   130 var linesInterval = window.setInterval(addLine, lineInterval);