Mercurial Mercurial > mons / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
annot-server/static/js/pianoroll.js
changeset 79 bd2f2c3f205c
parent 77 1b578edc1578
equal deleted inserted replaced
78:37bb8e326446 79:bd2f2c3f205c 
    10 var manualFramerate = pixelsPerSecond1 / 4;
 
    10 var manualFramerate = pixelsPerSecond1 / 4;
 
    11 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
 
    11 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
 
    12 var lineInterval = 5000; // means line every 5 seconds
 
    12 var lineInterval = 5000; // means line every 5 seconds
 
    13 var nbLines = -1;
 
    13 var nbLines = -1;
 
    14 var noteHeight = 110;
 
    14 var noteHeight = 110;
 
    15 var noteColor = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
 
    15 var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
 
    16                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
 
    16 var colorsReg = {}
 
    17                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
 
       
    18                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
 
       
    19                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991,
 
       
    20                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
 
       
    21 // Vars
 
    17 // Vars
 
    22 var noteDict = [];
 
    18 var noteDict = [];
 
    23 // Timecode method
 
    19 // Timecode method
 
    24 var timePageLoaded = Date.now();
 
    20 var timePageLoaded = Date.now();
 
    25 var offsetMusic = false;
 
    21 var offsetMusic = false;
 
    38 uberContainer.position.x = Math.floor(sceneWidth*9/10);
 
    34 uberContainer.position.x = Math.floor(sceneWidth*9/10);
 
    39 uberContainer.position.y = 0;
 
    35 uberContainer.position.y = 0;
 
    40 stage.addChild(uberContainer);
 
    36 stage.addChild(uberContainer);
 
    41 
    37 
    42 
    38 
    43 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width){
 
    39 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg){
 
    44     var _this = this;
 
    40     var _this = this;
 
    45     this.container = new PIXI.DisplayObjectContainer();
 
    41     this.container = new PIXI.DisplayObjectContainer();
 
    46     this.container.position.x = xInit;
 
    42     this.container.position.x = xInit;
 
    47     this.container.position.y = yInit;
 
    43     this.container.position.y = yInit;
 
    48     parentContainer.addChild(this.container);
 
    44     parentContainer.addChild(this.container);
 
    49 
    45 
    50     this.linesDown = linesDown;
 
    46     this.linesDown = linesDown;
 
    51     this.height = height;
 
    47     this.height = height;
 
    52     this.pixelsPerSecond = pixelsPerSecond;
 
    48     this.pixelsPerSecond = pixelsPerSecond;
 
    53     this.width = width;
 
    49     this.width = width;
 
       
    50     this.noteColors = noteColors;
 
       
    51     this.colorsReg = colorsReg || {}
 
    54 
    52 
    55     this.addNote = function(note, startTime, duration, velocity, canal){
 
    53     this.addNote = function(note, startTime, duration, velocity, canal){
 
    56         //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
 
    54         //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
 
    57         var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000;
 
    55         var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000;
 
    58         var width = duration * this.pixelsPerSecond / 1000;
 
    56         var width = duration * this.pixelsPerSecond / 1000;
 
    59         // We draw the rectangle
 
    57         // We draw the rectangle
 
    60         var graphics = new PIXI.Graphics();
 
    58         var graphics = new PIXI.Graphics();
 
    61         //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
 
    59         //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
 
    62         graphics.beginFill(noteColor[canal], (velocity / 128));
 
    60         var color = this.colorsReg[canal];
 
       
    61         if(typeof(color) === 'undefined') {
 
       
    62             var colorsRegSize = Object.keys(this.colorsReg).length
 
       
    63             if(colorsRegSize < this.noteColors.length) {
 
       
    64                 color = this.colorsReg[canal] = this.noteColors[colorsRegSize];
 
       
    65             }
 
       
    66             else {
 
       
    67                 color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16);
 
       
    68             }
 
       
    69         }
 
       
    70         graphics.beginFill(color, (velocity / 128));
 
    63         var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
 
    71         var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
 
    64         graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
 
    72         graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
 
    65         graphics.endFill();
 
    73         graphics.endFill();
 
    66         graphics.x = beginX;
 
    74         graphics.x = beginX;
 
    67         this.container.addChild(graphics);
 
    75         this.container.addChild(graphics);
 
   110             }
 
   118             }
 
   111             i++;
 
   119             i++;
 
   112         }
 
   120         }
 
   113         //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
 
   121         //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
 
   114     };
 
   122     };
 
   115     
   123 
   116     // remove notes each scene width
 
   124     // remove notes each scene width
 
   117     var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
 
   125     var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
 
   118     
   126 
   119 }
 
   127 }
 
   120 
   128 
   121 // Init containers
 
   129 // Init containers
 
   122 var containerList = [];
 
   130 var containerList = [];
 
   123 containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth));
 
   131 containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg));
 
   124 containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth));
 
   132 containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg));
 
   125 
   133 
   126 // Line between two containers
 
   134 // Line between two containers
 
   127 var graphics = new PIXI.Graphics();
 
   135 var graphics = new PIXI.Graphics();
 
   128 graphics.beginFill(0xFFFF00);
 
   136 graphics.beginFill(0xFFFF00);
 
   129 graphics.lineStyle(1, lineColor);
 
   137 graphics.lineStyle(1, lineColor);
 
   134 
   142 
   135 
   143 
   136 function replaceContainers(){
 
   144 function replaceContainers(){
 
   137     var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
 
   145     var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
 
   138     //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
 
   146     //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
 
   139     var nb = containerList.length;
 
   147     for(var i=0;i<containerList.length;i++){
 
   140     for(var i=0;i<nb;i++){
 
       
   141         containerList[i].moveTo(-diff);
 
   148         containerList[i].moveTo(-diff);
 
   142     }
 
   149     }
 
   143     renderer.render(stage);
 
   150     renderer.render(stage);
 
   144 }
 
   151 }
 
   145 
   152 
   157     if(velocity===0){
 
   164     if(velocity===0){
 
   158         if(typeof noteDict[data.content[2]][note]!=='undefined'){
 
   165         if(typeof noteDict[data.content[2]][note]!=='undefined'){
 
   159             // We close the note in container one
 
   166             // We close the note in container one
 
   160             //console.log("coucou 2", data);
 
   167             //console.log("coucou 2", data);
 
   161             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
 
   168             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
 
   162             var nb = containerList.length;
 
   169             for(var i=0;i<containerList.length;i++){
 
   163             for(var i=0;i<nb;i++){
 
       
   164                 //               addNote(note, startTime,                          duration, velocity,                                 canal)
 
   170                 //               addNote(note, startTime,                          duration, velocity,                                 canal)
 
   165                 containerList[i].addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]);
 
   171                 containerList[i].addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]);
 
   166             }
 
   172             }
 
   167             // delete entry
 
   173             // delete entry
 
   168             delete noteDict[data.content[2]][note];
 
   174             delete noteDict[data.content[2]][note];
 
   176     }
 
   182     }
 
   177 }
 
   183 }
 
   178 
   184 
   179 function addLine(){
 
   185 function addLine(){
 
   180     nbLines++;
 
   186     nbLines++;
 
   181     var nb = containerList.length;
 
   187     for(var i=0;i<containerList.length;i++){
 
   182     for(var i=0;i<nb;i++){
 
       
   183         containerList[i].addLine(nbLines);
 
   188         containerList[i].addLine(nbLines);
 
   184     }
 
   189     }
 
   185 }
 
   190 }
 
   186 
   191 
   187 
   192
mons