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 72 99658249716c
parent 70 cbbdbbae7ead
child 74 bdcc964b3c01
equal deleted inserted replaced
71:fb4ad86bc7f2 72:99658249716c 
     1 // Config vars
 
     1 // Config vars
 
     2 var logger = false;
 
     2 var logger = false;
 
     3 var sceneWidth = 1920;
 
     3 var sceneWidth = 1920;
 
     4 //var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals ->  better look
 
       
     5 var prHeight1 = 435;
 
     4 var prHeight1 = 435;
 
     6 var prHeight2 = 645;
 
     5 var prHeight2 = 645;
 
     7 var sceneHeight = prHeight1 + prHeight2;
 
     6 var sceneHeight = prHeight1 + prHeight2;
 
     8 var sceneBgColor = 0xFFFFFF;
 
     7 var sceneBgColor = 0xFFFFFF;
 
     9 var lineColor = 0x444444;
 
     8 var lineColor = 0x444444;
 
    10 //var manualFramerate = 24;
 
       
    11 var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
 
     9 var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
 
    12 var manualFramerate = pixelsPerSecond1 / 4;
 
    10 var manualFramerate = pixelsPerSecond1 / 4;
 
    13 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
 
    11 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
 
    14 var lineInterval = 5000; // means line every 5 seconds
 
    12 var lineInterval = 5000; // means line every 5 seconds
 
    15 var nbLines = -1;
 
    13 var nbLines = -1;
 
    18                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    16                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    19                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    17                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    20                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    18                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    21                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    19                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991, 
    22                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
 
    20                  0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
 
    23 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds
 
    21 // Vars
 
    24 //var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime();
 
    22 var noteDict = [];
 
    25 var noteDict = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
 
       
    26 var pianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si
 
       
    27 // Visual config
 
       
    28 var drawPianoNotes = false;
 
       
    29 var drawHorizontalLines = false;
 
       
    30 var drawVerticalLines = true;
 
       
    31 // Timecode method
 
    23 // Timecode method
 
    32 var timePageLoaded = Date.now();
 
    24 var timePageLoaded = Date.now();
 
    33 var offsetMusic = false;
 
    25 var offsetMusic = false;
 
    34 
    26 
    35 
    27 
    39 //create a renderer instance.
 
    31 //create a renderer instance.
 
    40 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
 
    32 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
 
    41 
    33 
    42 //add the renderer view element to the DOM
 
    34 //add the renderer view element to the DOM
 
    43 document.getElementById("canvasContainer").appendChild(renderer.view);
 
    35 document.getElementById("canvasContainer").appendChild(renderer.view);
 
    44 
       
    45 //requestAnimFrame( animate );
 
       
    46 
       
    47 
       
    48 //Draw 127 lines
 
       
    49 var delta = sceneHeight / 128;
 
       
    50 if(drawHorizontalLines){
 
       
    51     for(var i=1;i<128;i++){
 
       
    52         var graphics = new PIXI.Graphics();
 
       
    53         graphics.beginFill(0xFFFF00);
 
       
    54         graphics.lineStyle(1, 0xAAAAAA);
 
       
    55         var y = delta * i;
 
       
    56         graphics.moveTo(0, y);
 
       
    57         graphics.lineTo(sceneWidth, y);
 
       
    58         graphics.endFill();
 
       
    59         stage.addChild(graphics);
 
       
    60     }
 
       
    61 }
 
       
    62 
       
    63 //Draw piano notes on the left
 
       
    64 if(drawPianoNotes){
 
       
    65     for(var i=0;i<128;i++){
 
       
    66         var graphics = new PIXI.Graphics();
 
       
    67         var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000;
 
       
    68         if(i==60){
 
       
    69             color = 0xFFD700;
 
       
    70         }
 
       
    71         graphics.beginFill(color);
 
       
    72         graphics.lineStyle(1, 0xAAAAAA);
 
       
    73         var y = sceneHeight - delta * (i+1);
 
       
    74         graphics.drawRect(0, y, 20, delta);
 
       
    75         graphics.endFill();
 
       
    76         stage.addChild(graphics);
 
       
    77     }
 
       
    78 }
 
       
    79 
    36 
    80 var uberContainer = new PIXI.DisplayObjectContainer();
 
    37 var uberContainer = new PIXI.DisplayObjectContainer();
 
    81 uberContainer.position.x = Math.floor(sceneWidth*9/10);
 
    38 uberContainer.position.x = Math.floor(sceneWidth*9/10);
 
    82 uberContainer.position.y = 0;
 
    39 uberContainer.position.y = 0;
 
    83 stage.addChild(uberContainer);
 
    40 stage.addChild(uberContainer);
 
    84 
    41 
    85 
    42 
    86 var container1 = new PIXI.DisplayObjectContainer();
 
    43 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond){
 
    87 container1.position.x = 0;
 
    44     
    88 container1.position.y = 0;
 
    45     this.container = new PIXI.DisplayObjectContainer();
 
    89 uberContainer.addChild(container1);
 
    46     this.container.position.x = xInit;
 
    90 var container2 = new PIXI.DisplayObjectContainer();
 
    47     this.container.position.y = yInit;
 
    91 container2.position.x = 0;
 
    48     parentContainer.addChild(this.container);
 
    92 container2.position.y = prHeight1;
 
    49     
    93 uberContainer.addChild(container2);
 
    50     this.linesDown = linesDown;
 
       
    51     this.height = height;
 
       
    52     this.pixelsPerSecond = pixelsPerSecond;
 
       
    53     
       
    54     this.addNote = function(note, startTime, duration, velocity, canal){
 
       
    55         //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
 
       
    56         var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000;
 
       
    57         var width = duration * this.pixelsPerSecond / 1000;
 
       
    58         // We draw the rectangle
 
       
    59         var graphics = new PIXI.Graphics();
 
       
    60         //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
 
       
    61         graphics.beginFill(noteColor[canal], (velocity / 128));
 
       
    62         var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
 
       
    63         graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight);
 
       
    64         graphics.endFill();
 
       
    65         this.container.addChild(graphics);
 
       
    66     };
 
       
    67     
       
    68     this.addLine = function(lineNb){
 
       
    69         var graphics = new PIXI.Graphics();
 
       
    70         var x = -this.container.x;
 
       
    71         graphics.beginFill(0xFFFF00);
 
       
    72         graphics.lineStyle(1, lineColor);
 
       
    73         var y = this.linesDown ? this.height - 20 : 0;
 
       
    74         graphics.moveTo(x, y);
 
       
    75         graphics.lineTo(x, y + 20);
 
       
    76         graphics.endFill();
 
       
    77         this.container.addChild(graphics);
 
       
    78         // Add text
 
       
    79         var totalSec = lineNb * lineInterval / 1000;
 
       
    80         var hours = parseInt( totalSec / 3600 ) % 24;
 
       
    81         var minutes = parseInt( totalSec / 60 ) % 60;
 
       
    82         var seconds = totalSec % 60;
 
       
    83         var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
 
       
    84         var fontObj = { font: "10pt Arial", fill: "#444444" };
 
       
    85         var t = new PIXI.Text(timeStr, fontObj);
 
       
    86         t.x = x + 2;
 
       
    87         t.y = this.linesDown ? this.height - 15 : 2;
 
       
    88         this.container.addChild(t);
 
       
    89     }
 
       
    90     
       
    91     this.moveTo = function(diffTime){
 
       
    92         this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
 
       
    93     };
 
       
    94     
       
    95 }
 
       
    96 
       
    97 // Init containers
 
       
    98 var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1);
 
       
    99 var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2);
 
    94 
   100 
    95 // Line between two containers
 
   101 // Line between two containers
 
    96 var graphics = new PIXI.Graphics();
 
   102 var graphics = new PIXI.Graphics();
 
    97 graphics.beginFill(0xFFFF00);
 
   103 graphics.beginFill(0xFFFF00);
 
    98 graphics.lineStyle(1, lineColor);
 
   104 graphics.lineStyle(1, lineColor);
 
    99 var y = delta * i;
 
       
   100 graphics.moveTo(0, prHeight1);
 
   105 graphics.moveTo(0, prHeight1);
 
   101 graphics.lineTo(sceneWidth, prHeight1);
 
   106 graphics.lineTo(sceneWidth, prHeight1);
 
   102 graphics.endFill();
 
   107 graphics.endFill();
 
   103 stage.addChild(graphics);
 
   108 stage.addChild(graphics);
 
   104 
   109 
   105 
   110 
   106 function moveContainer(){
 
       
   107     container1.x -= pixelsPerSecond1/manualFramerate;
 
       
   108     container2.x -= pixelsPerSecond2/manualFramerate;
 
       
   109     renderer.render(stage);
 
       
   110 }
 
       
   111 function replaceContainers(){
 
   111 function replaceContainers(){
 
   112     var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
 
   112     var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
 
   113     //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
 
   113     //console.log("replace ! diff1 = ", container1.x - Math.floor(-diff*pixelsPerSecond1), ", diff 2 = ", container2.x - Math.floor(-diff*pixelsPerSecond2));
 
   114     container1.x = Math.floor(-diff*pixelsPerSecond1);
 
   114     container1.moveTo(-diff);
 
   115     container2.x = Math.floor(-diff*pixelsPerSecond2);
 
   115     container2.moveTo(-diff);
 
   116     renderer.render(stage);
 
   116     renderer.render(stage);
 
   117 }
 
       
   118 function moveContainerMore(){
 
       
   119     container1.x -= 50*(pixelsPerSecond1/manualFramerate);
 
       
   120     container2.x -= 50*(pixelsPerSecond2/manualFramerate);
 
       
   121     renderer.render(stage);
 
       
   122 }
 
       
   123 function moveContainerRight(){
 
       
   124     container1.x += 50*(pixelsPerSecond1/manualFramerate);
 
       
   125     container2.x += 50*(pixelsPerSecond2/manualFramerate);
 
       
   126     renderer.render(stage);
 
       
   127 }
 
       
   128 
       
   129 function addNoteInContainer(note, startTime, duration, velocity, pixelsPerSecond, container, prHeight, canal){
 
       
   130     //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
 
       
   131     var beginX = (offsetMusic + startTime) * pixelsPerSecond / 1000;
 
       
   132     var width = duration * pixelsPerSecond / 1000;
 
       
   133     // We draw the rectangle
 
       
   134     var graphics = new PIXI.Graphics();
 
       
   135     //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
 
       
   136     graphics.beginFill(noteColor[canal], (velocity / 128));
 
       
   137     var y = (128-note) * prHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
 
       
   138     graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight / 128)/2)), width, noteHeight);
 
       
   139     graphics.endFill();
 
       
   140     container.addChild(graphics);
 
       
   141 }
 
   117 }
 
   142 
   118 
   143 function addNotes(data){
 
   119 function addNotes(data){
 
   144     if(!offsetMusic){
 
   120     if(!offsetMusic){
 
   145         // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero
 
   121         // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero
 
   154     if(velocity===0){
 
   130     if(velocity===0){
 
   155         if(typeof noteDict[data.content[2]][note]!=='undefined'){
 
   131         if(typeof noteDict[data.content[2]][note]!=='undefined'){
 
   156             // We close the note in container one
 
   132             // We close the note in container one
 
   157             //console.log("coucou 2", data);
 
   133             //console.log("coucou 2", data);
 
   158             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
 
   134             var duration = data.content[1] - noteDict[data.content[2]][note].ts;
 
   159             addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond1, container1, prHeight1, data.content[2]);
 
   135             //addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond1, container1, prHeight1, data.content[2]);
 
   160             addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond2, container2, prHeight2, data.content[2]);
 
   136             //         addNote(note, startTime,                          duration, velocity,                                 canal)
 
       
   137             container1.addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]);
 
       
   138             //addNoteInContainer(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, pixelsPerSecond2, container2, prHeight2, data.content[2]);
 
       
   139             container2.addNote(note, noteDict[data.content[2]][note].ts, duration, noteDict[data.content[2]][note].velocity, data.content[2]);
 
   161             // delete entry
 
   140             // delete entry
 
   162             delete noteDict[data.content[2]][note];
 
   141             delete noteDict[data.content[2]][note];
 
   163         }
 
   142         }
 
   164     }
 
   143     }
 
   165     else{
 
   144     else{
 
   166         if(typeof noteDict[data.content[2]]==='undefined'){
 
   145         if(typeof noteDict[data.content[2]]==='undefined'){
 
   167             noteDict[data.content[2]] = {};
 
   146             noteDict[data.content[2]] = {};
 
   168         }
 
   147         }
 
   169         noteDict[data.content[2]][note] = {ts: data.content[1], velocity:velocity};
 
   148         noteDict[data.content[2]][note] = {ts: data.content[1], velocity:velocity};
 
   170     }
 
   149     }
 
       
   150 }
 
       
   151 
       
   152 function addLine(){
 
       
   153     nbLines++;
 
       
   154     container1.addLine(nbLines);
 
       
   155     container2.addLine(nbLines);
 
   171 }
 
   156 }
 
   172 
   157 
   173 // Socket management
 
   158 // Socket management
 
   174 var sock = null;
 
   159 var sock = null;
 
   175 var ellog = null;
 
   160 var ellog = null;
 
   219 
   204 
   220        sock.onmessage = function(e) {
 
   205        sock.onmessage = function(e) {
 
   221            if(logger){
 
   206            if(logger){
 
   222                log("Got message: " + e.data);
 
   207                log("Got message: " + e.data);
 
   223            }
 
   208            }
 
   224           addNotes(JSON.parse(e.data));
 
   209            addNotes(JSON.parse(e.data));
 
   225        }
 
   210        }
 
   226     }
 
   211     }
 
   227 };
 
   212 };
 
   228 
   213 
   229 
   214 
   230 function addLine(){
 
   215 // Init page and intervals
 
   231     nbLines++;
 
       
   232     var graphics = new PIXI.Graphics();
 
       
   233     //var x = nbLines * (lineInterval/1000) * pixelsPerSecond1;
 
       
   234     var x = -container1.x;
 
       
   235     //console.log("nbLines = ",nbLines, "x = ", x);
 
       
   236     graphics.beginFill(0xFFFF00);
 
       
   237     graphics.lineStyle(1, lineColor);
 
       
   238     graphics.moveTo(x, prHeight1 - 20);
 
       
   239     graphics.lineTo(x, prHeight1);
 
       
   240     graphics.endFill();
 
       
   241     container1.addChild(graphics);
 
       
   242     // Add text
 
       
   243     var totalSec = nbLines * lineInterval / 1000;
 
       
   244     var hours = parseInt( totalSec / 3600 ) % 24;
 
       
   245     var minutes = parseInt( totalSec / 60 ) % 60;
 
       
   246     var seconds = totalSec % 60;
 
       
   247     var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
 
       
   248     var fontObj = { font: "10pt Arial", fill: "#444444" };
 
       
   249     var t = new PIXI.Text(timeStr, fontObj);
 
       
   250     t.x = x + 2;
 
       
   251     t.y = prHeight1 - 15;
 
       
   252     container1.addChild(t);
 
       
   253     // Second container
 
       
   254     graphics = new PIXI.Graphics();
 
       
   255     //x = nbLines * (lineInterval/1000) * pixelsPerSecond2;
 
       
   256     x = -container2.x;
 
       
   257     graphics.beginFill(0xFFFF00);
 
       
   258     graphics.lineStyle(1, lineColor);
 
       
   259     graphics.moveTo(x, 0);
 
       
   260     graphics.lineTo(x, 20);
 
       
   261     graphics.endFill();
 
       
   262     container2.addChild(graphics);
 
       
   263     var t = new PIXI.Text(timeStr, fontObj);
 
       
   264     t.x = x + 2;
 
       
   265     t.y = 2;
 
       
   266     container2.addChild(t);
 
       
   267 }
 
       
   268 addLine();
 
   216 addLine();
 
   269 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate);
 
   217 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate);
 
   270 // To be sure of synchronism, we replace the container with time calculting every minute
 
   218 verticalLinesInterval = window.setInterval(addLine, lineInterval);
 
   271 //var replaceInterval = window.setInterval(replaceContainers, 60*1000);
 
   219 
   272 var verticalLinesInterval = false;
 
   220 // Little inteval to show time
 
   273 if(drawVerticalLines){
 
       
   274     verticalLinesInterval = window.setInterval(addLine, lineInterval);
 
       
   275 }
 
       
   276 var nbSec = 0;
 
   221 var nbSec = 0;
 
   277 var mySpan = document.getElementById("myspan");
 
   222 var mySpan = document.getElementById("myspan");
 
   278 function updateTime(){
 
   223 function updateTime(){
 
   279     nbSec++;
 
   224     nbSec++;
 
   280     var hours = parseInt( nbSec / 3600 ) % 24;
 
   225     var hours = parseInt( nbSec / 3600 ) % 24;
mons