annot-server/static/js/pianoroll.js
changeset 79 bd2f2c3f205c
parent 77 1b578edc1578
--- a/annot-server/static/js/pianoroll.js	Tue Oct 28 18:11:16 2014 +0100
+++ b/annot-server/static/js/pianoroll.js	Wed Oct 29 12:50:30 2014 +0100
@@ -12,12 +12,8 @@
 var lineInterval = 5000; // means line every 5 seconds
 var nbLines = -1;
 var noteHeight = 110;
-var noteColor = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
-                 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
-                 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
-                 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
-                 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
-                 0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
+var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
+var colorsReg = {}
 // Vars
 var noteDict = [];
 // Timecode method
@@ -40,7 +36,7 @@
 stage.addChild(uberContainer);
 
 
-function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width){
+function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg){
     var _this = this;
     this.container = new PIXI.DisplayObjectContainer();
     this.container.position.x = xInit;
@@ -51,6 +47,8 @@
     this.height = height;
     this.pixelsPerSecond = pixelsPerSecond;
     this.width = width;
+    this.noteColors = noteColors;
+    this.colorsReg = colorsReg || {}
 
     this.addNote = function(note, startTime, duration, velocity, canal){
         //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
@@ -59,7 +57,17 @@
         // We draw the rectangle
         var graphics = new PIXI.Graphics();
         //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
-        graphics.beginFill(noteColor[canal], (velocity / 128));
+        var color = this.colorsReg[canal];
+        if(typeof(color) === 'undefined') {
+            var colorsRegSize = Object.keys(this.colorsReg).length
+            if(colorsRegSize < this.noteColors.length) {
+                color = this.colorsReg[canal] = this.noteColors[colorsRegSize];
+            }
+            else {
+                color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16);
+            }
+        }
+        graphics.beginFill(color, (velocity / 128));
         var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
         graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
         graphics.endFill();
@@ -112,16 +120,16 @@
         }
         //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
     };
-    
+
     // remove notes each scene width
     var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
-    
+
 }
 
 // Init containers
 var containerList = [];
-containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth));
-containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth));
+containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg));
+containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg));
 
 // Line between two containers
 var graphics = new PIXI.Graphics();
@@ -136,8 +144,7 @@
 function replaceContainers(){
     var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
     //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
-    var nb = containerList.length;
-    for(var i=0;i<nb;i++){
+    for(var i=0;i<containerList.length;i++){
         containerList[i].moveTo(-diff);
     }
     renderer.render(stage);
@@ -159,8 +166,7 @@
             // We close the note in container one
             //console.log("coucou 2", data);
             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
-            var nb = containerList.length;
-            for(var i=0;i<nb;i++){
+            for(var i=0;i<containerList.length;i++){
                 //               addNote(note, startTime,                          duration, velocity,                                 canal)
                 containerList[i].addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]);
             }
@@ -178,8 +184,7 @@
 
 function addLine(){
     nbLines++;
-    var nb = containerList.length;
-    for(var i=0;i<nb;i++){
+    for(var i=0;i<containerList.length;i++){
         containerList[i].addLine(nbLines);
     }
 }