# HG changeset patch # User rougeronj # Date 1421775471 -3600 # Node ID 0d7dac03c1a0e79051552f42582fddc32f0458b3 # Parent 9d968fbcaa2add86ccac521c832140a46a494165# Parent 72d767c5142df7fc6387215096321295fbaaa73d Merge with 72d767c5142df7fc6387215096321295fbaaa73d Update doubleroll and annotsroll to support stageView diff -r 9d968fbcaa2a -r 0d7dac03c1a0 annot-server/websockets.py --- a/annot-server/websockets.py Tue Jan 20 12:00:40 2015 +0100 +++ b/annot-server/websockets.py Tue Jan 20 18:37:51 2015 +0100 @@ -1,4 +1,3 @@ - # # See LICENCE for detail # Copyright (c) 2014 IRI @@ -50,8 +49,8 @@ def register(self, client): if not client in self.clients: - print("registered client {}".format(client.peer)) - self.clients.append(client) + print("registered client {}".format(client.peer)) + self.clients.append(client) def unregister(self, client): if client in self.clients: @@ -60,11 +59,11 @@ if client in self.filters: self.filters.pop(client, None) - def broadcast(self, msg, filter): + def broadcast(self, msg, filter_list): print("broadcasting prepared message '{}' ..".format(msg)) preparedMsg = self.prepareMessage(msg) for c in self.clients: - if all([ (k in filter and filter[k] in v) for k,v in self.filters.get(c, {}).items()]): + if all([ (k in filter_list and filter_list[k] in v) for k,v in self.filters.get(c, {}).items()]): c.sendPreparedMessage(preparedMsg) print("prepared message sent to {}".format(c.peer)) diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/annotsroll.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/annotviz/app/annotsroll.html Tue Jan 20 18:37:51 2015 +0100 @@ -0,0 +1,92 @@ + + + + + + + + + + AnnotsRoll + + + + + + +

Piano Roll vertical

+ +
+

+ stop intervals - + start intervals - + temps écoulé : +

+ + + + + + diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/index.html --- a/client/annotviz/app/index.html Tue Jan 20 12:00:40 2015 +0100 +++ b/client/annotviz/app/index.html Tue Jan 20 18:37:51 2015 +0100 @@ -7,29 +7,21 @@ - Piano Roll + Piano Roll Tests -

Piano Roll

- -
+

Piano Roll Tests

- stop intervals - - temps écoulé : +

- 

-    
-    
-    
-    
 
 
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/annotsRoll.js
--- a/client/annotviz/app/js/annotsRoll.js	Tue Jan 20 12:00:40 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,92 +0,0 @@
-/**
-* js/annotsRoll.js
-*
-* annotsRoll basic component
-*
-*/
-
-'use strict';
-
-var PIXI = require('pixi');
-var randomColor = require('randomColor');
-
-function AnnotsRoll(parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors, lineInterval){
-    var _this = this;
-    this.container = new PIXI.DisplayObjectContainer();
-    this.container.position.x = xInit;
-    this.container.position.y = yInit;
-    this.container.width = width;
-    parentContainer.addChild(this.container);
-
-    this.height = height;
-    this.width = width;
-    this.widthRoll = widthRoll;
-    this.pixelsPerSecond = pixelsPerSecond;
-    this.lineInterval = lineInterval;
-
-    this.addAnnot = function(category, user, color){
-    	var graphics = new PIXI.Graphics();
-    	var x = 0;
-    	var y = -this.container.y;
-        graphics.beginFill(color);
-        graphics.drawRect(x, y, 10, 3);
-        graphics.endFill();
-        
-        this.container.addChild(graphics);
-
-        var catText = new PIXI.Text(category, { font: '16pt Arial', fill: color.replace("0x", "#") });
-        catText.x = x + 20;
-        catText.y = y - 23;
-        this.container.addChild(catText);
-        
-        var userText = new PIXI.Text(user, { font: '10pt Arial', fill: '#444444' });
-        userText.x = x + 20;
-        userText.y = y + 2;
-        this.container.addChild(userText);
-        
-        this.addAnnotLine(color);
-    };
-
-    this.addAnnotLine = function(color){
-    	var x = this.widthRoll;
-    	var y = -this.container.y;
-    	
-    	var graphics = new PIXI.Graphics();
-    	
-        graphics.beginFill(color);
-        graphics.drawRect(x, y, this.width - x, 3);
-        graphics.endFill();
-        
-        this.container.addChild(graphics);
-    };
-
-    this.moveTo = function(diffTime){
-    	this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
-    };
-
-    this.removePassedObjets = function(){
-        var nbChilds = _this.container.children.length;
-        var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
-        while(i Date.parse(data.ts)){
+	    	var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
+			this.cells[i].categories[annotCode].count += 1;
+			this.cells[i].totalAnnots +=1;
+			this.redrawCell(this.cells[i]);
+    	}
+    };
+    
+    //Draw the cellule
+    this.redrawCell = function(cell){
+    	var x = cell.x; 
+    	var y = this.height/2;
+    	cell.graphics.clear();
+    	
+    	//Check if total height is higher than Max Cell Height
+    	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
+    		var heightStep = this.maxCellHeight/cell.totalAnnots;
+    	} else {
+    		var heightStep = this.intervalHeight;
+    	}
+    	//Draw the rect depending on the height step calculated
+    	for (var i=0; i< this.annotCategories[0].order.length; i++){
+    		var currentCode = this.annotCategories[0].order[i];
+			cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
+    			.drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
+    			.endFill();
+    		y -= cell.categories[currentCode].count*heightStep;
+    	}
+    }
+    
+    this.init = function() {
+
+    	ws.message(function(data) {
+            _this.addAnnot(data);
+        });
+
+    };
+    
+    this.start = function() {
+    };
+    
+    this.refresh = function() {
+    };
+    
+    this.stop = function(){
+    };
+    
+    return this;
+}
+
+module.exports = {
+		AnnotsTimeLine: AnnotsTimeLine
+};
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/annotsvizview.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/annotsvizview.js	Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,6 @@
+/**
+* js/annotsvizview.js
+*
+* This is the starting point for your application.
+* Take a look at http://browserify.org/ for more info
+*/
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/doubleroll.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/doubleroll.js	Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,189 @@
+/**
+* scripts/doubleroll.js
+*
+* This is the starting point for your application.
+* Take a look at http://browserify.org/ for more info
+*/
+
+/* global document: false */
+
+'use strict';
+
+
+var PIXI = require('pixi');
+var _ = require('lodash');
+var PianoRoll = require('./pianoroll.js');
+
+var defaultConfig = {
+    orientation: 'horizontal',
+    logger: undefined,
+    sceneWidth: 1920,
+    pianorolls : [
+      {
+        height: 435,
+        timeWidth: 10,
+        lineInterval: 5000,
+        noteHeight: undefined
+      },
+      {
+        height: 645,
+        timeWidth: 60,
+        lineInterval: 5000,
+        noteHeight: undefined
+      },
+    ],
+    framerate: 25,
+    offsetMusic: false,
+    sceneBgColor: 0xFFFFFF,
+    lineColor: 0x444444,
+    lineFillColor: 0xFFFF00,
+    noteColors: [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991],
+    noteHeight: undefined,
+    zeroShift: 0.9,
+    timeWidth: 60,
+    lineInterval: 5000,
+//    wsUri: undefined,
+//    eventCode: undefined
+
+};
+
+function DoubleRoll(options) {
+
+    var _this = this;
+    var opts = _(options).defaults(defaultConfig).value();
+
+    var orientation = opts.orientation;
+    var isHorizontal = (orientation !== 'vertical');
+
+    this.logger = opts.logger;
+    this.lineColor = opts.lineColor;
+    this.lineFillColor = opts.lineFillColor;
+    this.framerate = opts.framerate;
+    this.offsetMusic = opts.offsetMusic;
+    this.noteColors = opts.noteColors;
+
+    var noteHeight = opts.noteHeight;
+    var sceneBgColor = opts.sceneBgColor;
+    var sceneHeight = opts.sceneHeight || _(opts.pianorolls).reduce(function(s,p) { return s + p.height; }, 0);
+    var timeWidth = opts.timeWidth;
+    var lineInterval = opts.lineInterval;
+    var offsetMusic = opts.offsetMusic;
+
+    var sceneWidth = opts.sceneWidth;
+    var stageView = opts.stageView;
+
+    var zeroShift = opts.zeroShift;
+
+    var ws = opts.ws;
+
+    var colorsReg = {};
+
+    this.container = new PIXI.DisplayObjectContainer();
+    this.container.x = Math.floor(sceneWidth*zeroShift);
+    this.container.y = 0;
+    
+    stageView.registerComponent(this);
+
+    var pianorollList = [];
+
+    var pianorollOptions = {
+        parentContainer: this.container,
+        orientation: orientation,
+        xInit: 0,
+        width: sceneWidth,
+        noteColors: this.noteColors,
+        colorsReg: colorsReg,
+        lineColor: this.lineColor,
+        lineInterval: lineInterval,
+        offsetMusic: offsetMusic,
+    };
+
+    var yInit = 0;
+    var linesDown = true;
+    _(opts.pianorolls).forEach(function(prDef, i) {
+        var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;
+        var prTimeWidth = prDef.timeWidth || timeWidth;
+        pianorollList.push(new PianoRoll(_({
+            yInit: yInit,
+            height: prDef.height,
+            linesDown: linesDown,
+            pixelsPerSecond: Math.floor(sceneWidth / prTimeWidth),
+            noteHeight: prNoteHeight,
+            lineInterval: prDef.lineInterval
+        }).defaults(pianorollOptions).value()));
+        yInit += prDef.height;
+        linesDown = !linesDown;
+
+        if(i<(opts.pianorolls.length-1)) {
+            var lineGraphics = new PIXI.Graphics()
+                .beginFill(_this.lineFillColor)
+                .lineStyle(1, _this.lineColor)
+                .moveTo(Math.floor(sceneWidth*zeroShift), yInit)
+                .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)
+                .endFill();
+            _this.container.addChild(lineGraphics);
+        }
+    });
+
+    if(!isHorizontal) {
+        this.container.rotation = Math.PI/2;
+        this.container.y = sceneHeight;
+        this.container.x = sceneWidth;
+    }
+
+
+    this.init = function() {
+
+    	ws.message(function(data) {
+            _this.addNotes(data);
+        });
+
+    };
+
+
+    this.addNotes = function(data) {
+
+        pianorollList.forEach(function(c) {
+            c.addNoteRaw(data);
+        });
+    };
+
+    this.refresh = function() {
+        pianorollList.forEach(function(c) {
+            c.move();
+        });
+    };
+
+    // Init page and intervals
+    var startTs;
+
+    this.start = function() {
+
+        startTs = Date.now();
+        pianorollList.forEach(function(c) {
+            c.start();
+        });
+    };
+
+    this.stop = function() {
+    	
+        pianorollList.forEach(function(c) {
+            c.stop();
+        });
+    };
+
+
+    this.log = function(m) {
+        if(this.logger) {
+            this.logger.log(m);
+        }
+    };
+
+
+
+    return this;
+}
+
+module.exports = {
+    DoubleRoll: DoubleRoll
+};
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/generalView.js
--- a/client/annotviz/app/js/generalView.js	Tue Jan 20 12:00:40 2015 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,96 +0,0 @@
-/**
-* js/generalView
-*
-* generalView basic component
-*
-*/
-
-'use strict';
-
-var PIXI = require('pixi');
-var randomColor = require('randomColor');
-var rgb2hex = require('./utils');
-
-function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalWidth, intervalHeight, maxCellHeight, categories){
-    var _this = this;
-    this.container = new PIXI.DisplayObjectContainer();
-    this.container.position.x = xInit;
-    this.container.position.y = yInit;
-    this.container.width = width;
-    this.container.height = height;
-    parentContainer.addChild(this.container);
-    
-    this.timeBegin = timeBegin;
-    this.timeEnd = timeEnd;
-    this.duration = (timeEnd - timeBegin)/1000 
-    this.width = width;
-    this.height = height;
-    this.intervalHeight = intervalHeight;
-    this.intervalWidth = intervalWidth;
-    this.maxCellHeight = maxCellHeight;
-    this.intervalDuration = (intervalWidth*this.duration/width);
-    
-    
-    //Initialise the list of step
-    //each cell will contain the list categories and the number of annotations per categories
-    this.cells = []
-    for (var i=0; i<(width/intervalWidth) ; i++){
-    	this.cells[i] = [];
-    	this.cells[i].x = i * this.intervalWidth;
-    	this.cells[i].totalAnnots = 0;
-    	this.cells[i].graphics = new PIXI.Graphics();
-    	this.container.addChild(this.cells[i].graphics);
-    	this.cells[i].categories = {};
-    	
-    	for (var category in categories){
-    		this.cells[i].categories[category] = {
-				"count": 0,
-				"color": categories[category]
-    		};
-    	}
-    }
-    // draw temp line to locate the middle of the container
-    var graphics = new PIXI.Graphics();
-    graphics.beginFill(0x000000)
-    	.lineStyle(1, 0x000000)
-    	.moveTo(xInit, (-this.height/2) )
-    	.lineTo(this.width, (-this.height/2))
-    	.endFill();
-    this.container.addChild(graphics);
-
-    //Add Annotation to the TimeLine
-    this.addAnnot = function(category, time){
-    	console.log(this.timeEnd);
-    	console.log(time);
-    	if (this.timeEnd < time){
-    		return;
-    	}
-    	var i = Math.floor((time-this.timeBegin)/(1000*this.intervalDuration));
-		this.cells[i].categories[category].count += 1;
-		this.cells[i].totalAnnots +=1;
-		this.redrawCell(this.cells[i]);
-    };
-    
-    //Draw the cellule
-    this.redrawCell = function(cell){
-    	var x = cell.x; 
-    	var y = -this.height/2;
-    	cell.graphics.clear();
-    	
-    	//Check if total height is higher than Max Cell Height
-    	if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
-    		var heightStep = this.maxCellHeight/cell.totalAnnots;
-    	} else {
-    		var heightStep = this.intervalHeight;
-    	}
-    	//Draw the rect depending on the height step calculated
-    	for (var category in cell.categories){
-			cell.graphics.beginFill(cell.categories[category].color)
-    			.drawRect(x, y, this.intervalWidth, -cell.categories[category].count * heightStep)
-    			.endFill();
-    		y -= cell.categories[category].count*heightStep;
-    	}
-    }
-}
-
-module.exports = GeneralView;
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/logger.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/logger.js	Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,45 @@
+/**
+* js/wswrapper.js
+*
+* simple logger service
+*
+*/
+
+/* global document: false */
+
+'use strict';
+
+function HtmlLogger(doLog, container) {
+
+    var logContainer = container;
+    if(typeof(container) === 'string') {
+        logContainer = document.getElementById(container);
+    }
+    if(!doLog) {
+        document.body.removeChild(logContainer);
+        logContainer = undefined;
+    }
+
+
+    this.log = function(msg) {
+        if(doLog && logContainer) {
+            logContainer.innerHTML += msg + '\n';
+            logContainer.scrollTop = logContainer.scrollHeight;
+        }
+    };
+}
+
+function ConsoleLogger(doLog) {
+
+    this.log = function(msg) {
+        if(doLog) {
+            console.log(msg);
+        }
+    }
+
+}
+
+module.exports = {
+    HtmlLogger: HtmlLogger,
+    ConsoleLogger: ConsoleLogger
+};
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/js/main.js
--- a/client/annotviz/app/js/main.js	Tue Jan 20 12:00:40 2015 +0100
+++ b/client/annotviz/app/js/main.js	Tue Jan 20 18:37:51 2015 +0100
@@ -7,304 +7,20 @@
 
 'use strict';
 
-
-var PIXI = require('pixi');
-var rgb2hex = require('./utils');
-
-// Config vars
-var horizontalView = false;
-var logger = false;
-var sceneWidth = 1920;
-var sceneHeight = 1080;
-var prSize1 = 435;
-var prSize2 = 435;
-var prSize3 = 300;
-var sceneBgColor = 0xFFFFFF;
-var lineColor = 0x444444;
-if (horizontalView){
-	var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
-} else{
-	var pixelsPerSecond1 = Math.floor(sceneHeight / 10); // nb of pixels per second
-}
-var manualFramerate = pixelsPerSecond1 / 4;
-if (horizontalView){
-	var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
-} else {
-	var pixelsPerSecond2 = Math.floor(sceneHeight / 60); // nb of pixels per second
-}
-var pixelsPerSecond3 = Math.floor(sceneHeight / 60); // nb of pixels per second
-var lineInterval = 5000; // means line every 5 seconds
-var nbLines = -1;
-var noteHeight = 110;
-var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
-var colorsReg = {};
-// Vars
-var noteDict = [];
-// Timecode method
-var timePageLoaded = Date.now();
-var offsetMusic = false;
-var categoriesColor = {		
-	"ntm" : rgb2hex(205,200,63),
-    "iam" : rgb2hex(205,200,63),
-    "hip" : rgb2hex(205,200,63),
-    "hop" : rgb2hex(205,200,63),
-    "rock" : rgb2hex(222,139,83),
-    "rap" : rgb2hex(222,139,83),
-    "classic" : rgb2hex(222,139,83),
-    "drums" : rgb2hex(197,163,202),
-    "guitar" : rgb2hex(197,163,202),
-    "bass" : rgb2hex(121,187,146),
-    "default": rgb2hex(128,128,128)
-};
-
-//create an new instance of a pixi stage
-var stage = new PIXI.Stage(sceneBgColor);
-
-//create a renderer instance.
-var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
-
-//add the renderer view element to the DOM
-document.getElementById('canvasContainer').appendChild(renderer.view);
-
-var uberContainer = new PIXI.DisplayObjectContainer();
-if (horizontalView){
-	uberContainer.position.x = Math.floor(sceneWidth*9/10);
-	uberContainer.position.y = 0;
-} else {
-	uberContainer.position.x = 0;
-	uberContainer.position.y = Math.floor(sceneHeight*9/10);
-}
-stage.addChild(uberContainer);
-
-/* ---------------------------------------------------------------- */
-/* ------------------- Init Pianoroll containers ------------------ */
-/* ---------------------------------------------------------------- */
-
-var PianoRoll = require('./pianoroll.js')
+var doubleroll = require('./doubleroll');
+var annotsroll = require('./annotsroll');
+var annotstimeline = require('./annotstimeline');
+var stageview = require('./stageview');
+var wswrapper = require('./wswrapper');
+var logger = require('./logger');
 
-var containerList = [];
-
-if (horizontalView){
-	containerList.push(new PianoRoll(uberContainer, 0, 0, prSize1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize1 / 128, horizontalView));
-	containerList.push(new PianoRoll(uberContainer, 0, prSize1, prSize2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
-} else {
-//	containerList.push(new PianoRoll(uberContainer, sceneWidth - prSize1, 0, sceneHeight, true, pixelsPerSecond1, prSize1, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize1 / 128, horizontalView));
-//	containerList.push(new PianoRoll(uberContainer, sceneWidth - (prSize1 + prSize2), 0, sceneHeight, false, pixelsPerSecond2, prSize2, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
-	containerList.push(new PianoRoll(uberContainer, sceneWidth - prSize1, 0, sceneHeight, false, pixelsPerSecond2, prSize2, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prSize2 / 128, horizontalView));
-}
-
-// Line between two containers
-var graphics = new PIXI.Graphics();
-graphics.beginFill(0xFFFF00);
-graphics.lineStyle(1, lineColor);
-if (horizontalView){
-	graphics.moveTo(0, prSize1);
-	graphics.lineTo(sceneWidth, prSize1);
-} else {
-	graphics.moveTo(sceneWidth - prSize1, 0);
-	graphics.lineTo(sceneWidth - prSize1, sceneHeight);
-	graphics.moveTo(sceneWidth - (prSize1 + prSize3), 0);
-	graphics.lineTo(sceneWidth - (prSize1 + prSize3), sceneHeight);
-}
-graphics.endFill();
-stage.addChild(graphics);
-
-function addNotes(data){
-    if(!offsetMusic){
-        // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero
-        // in order to place in real time
-        var now = Date.now();
-        var timeBetweenNowAndStart = now - timePageLoaded;
-        offsetMusic = timeBetweenNowAndStart - data.content[1];
-    }
-    var note = data.content[3];
-    var velocity = data.content[4];
-    if(velocity===0){
-        if(typeof noteDict[data.content[2]][note]!=='undefined'){
-            // We close the note in container one
-            var duration = data.content[1] - noteDict[data.content[2]][note].ts;
-            for(var i=0;i
+
+
+    
+    
+    
+    
+    
+
+    Horizontal Piano Roll
+
+    
+    
+
+
+
+    
Horizontal Piano Roll

+    
+    

+    

+        stop intervals -
+        start intervals -
+        temps écoulé : 
+    

+    

+    
+    
+    
+
+
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/app/pianoroll_v.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/pianoroll_v.html	Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,62 @@
+
+
+
+    
+    
+    
+    
+    
+
+    Vertical Piano Roll
+
+    
+    
+
+
+
+    
Vertical Piano Roll

+    
+    

+    

+        stop intervals -
+        start intervals -
+        temps écoulé : 
+    

+    

+    
+    
+    
+
+
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/bower.json
--- a/client/annotviz/bower.json	Tue Jan 20 12:00:40 2015 +0100
+++ b/client/annotviz/bower.json	Tue Jan 20 18:37:51 2015 +0100
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "randomColor": "davidmerfield/randomColor#~0.1.1",
-    "pixi": "~2.2.3"
+    "pixi": "~2.2.3",
+    "lodash": "~2.4.1"
   }
 }
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/annotviz/gulp/tasks/browserify.js
--- a/client/annotviz/gulp/tasks/browserify.js	Tue Jan 20 12:00:40 2015 +0100
+++ b/client/annotviz/gulp/tasks/browserify.js	Tue Jan 20 18:37:51 2015 +0100
@@ -15,6 +15,7 @@
   return browserify({debug: true})
     .require('./app/lib/pixi/bin/pixi.js', { expose: 'pixi' })
     .require('./app/lib/randomColor/randomColor.js', {expose: 'randomColor'})
+    .require('./app/lib/lodash/dist/lodash.js', {expose: 'lodash'})
     .bundle()
     .pipe(source('libs-'+p.name+'.js'))
     .pipe(gulp.dest(config.dist + '/js/'));
@@ -26,6 +27,7 @@
     .add('./app/js/main.js')
     .external('pixi')
     .external('randomColor')
+    .external('lodash')
     .transform(partialify) // Transform to allow requireing of templates
     .bundle()
     .pipe(source(p.name+'.js'))
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 client/pianoroll/app/js/main.js
--- a/client/pianoroll/app/js/main.js	Tue Jan 20 12:00:40 2015 +0100
+++ b/client/pianoroll/app/js/main.js	Tue Jan 20 18:37:51 2015 +0100
@@ -84,7 +84,7 @@
     }
     var note = data.content[3];
     var velocity = data.content[4];
-    if(velocity===0){
+    if(velocity===0) {
         if(typeof noteDict[data.content[2]][note]!=='undefined'){
             // We close the note in container one
             //console.log("coucou 2", data);
diff -r 9d968fbcaa2a -r 0d7dac03c1a0 utils/pianoroll-client.py
--- a/utils/pianoroll-client.py	Tue Jan 20 12:00:40 2015 +0100
+++ b/utils/pianoroll-client.py	Tue Jan 20 18:37:51 2015 +0100
@@ -7,6 +7,7 @@
 
 import argparse
 import csv
+import signal
 import time
 
 import ntplib
@@ -19,7 +20,7 @@
     """
     Example that sends UDP messages.
     """
-    def __init__(self, port, host, address, rows, shift):
+    def __init__(self, port, host, address, rows, shift, token):
         self.port = port
         self.host = host
         self.client = async.DatagramClientProtocol()
@@ -27,6 +28,7 @@
         self.rows = rows
         self.address = address
         self.shift = shift
+        self.token = token
         reactor.callLater(0, self.send_messages)
 
     def _send(self, element):
@@ -36,19 +38,31 @@
 
     def send_messages(self):
         t0 = time.time()
+        #tc = 0
         for row in self.rows:
+            if not self.token.running:
+                break
             if self.shift:
-                row[0] = ntplib.system_to_ntp_time(t0 + float(row[1])/10**3)
+                row[0] = ntplib.system_to_ntp_time(t0 + float(row[1])/1000.0)
             row_conv = [ osc.TimeTagArgument(float(row[0]))] + [osc.IntArgument(int(a)) for a in row[1:]]
-            #time.sleep((row_conv[1].value-tc)/10**3)
-            time.sleep(0.1)
-            #tc = row_conv[1].value
+            #time.sleep((row_conv[1].value-tc)/1000.0)
+            sleep_time = t0+float(row[1])/1000.0-time.time()
+            if sleep_time > 0:
+                time.sleep(sleep_time)
+            #time.sleep(0.1)
+            tc = row_conv[1].value
             self._send(osc.Message(self.address,*row_conv))
         print("Goodbye.")
         reactor.callLater(0.1, reactor.stop)
 
+class Token(object):
+    def __init__(self):
+        self.running = True
+
 if __name__ == "__main__":
 
+    token = Token()
+
     parser = argparse.ArgumentParser(description='Simulate an (osc) pianoroll client.')
     parser.add_argument('datafile', metavar='DATAFILE', help='The file containing the pianoroll data (CSV).')
     parser.add_argument('-e', '--event', dest='event', metavar='EVENT', required=True, help='the event code.')
@@ -56,8 +70,16 @@
 
     args = parser.parse_args()
 
+    def customHandler(signum, _):
+        print("Got signal: %s" % signum)
+        token.running = False
+        if reactor.running:
+            reactor.callFromThread(reactor.stop) # to stop twisted code when in the reactor loop
+    signal.signal(signal.SIGINT, customHandler)
+
+
     with open(args.datafile, 'rU') as datafile:
         reader = csv.reader(datafile, delimiter=' ')
-        app = UDPSenderApplication(9090, "127.0.0.1", "/pianoroll/%s/" % args.event, list(reader), args.shift)
+        app = UDPSenderApplication(9090, "127.0.0.1", "/pianoroll/%s/" % args.event, list(reader), args.shift, token)
 
     reactor.run()