add annotsRoll class and create it in main. Adapt main and pianoroll to allow horizontal or vertical view
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/annotsRoll.js Thu Jan 15 17:59:41 2015 +0100
@@ -0,0 +1,93 @@
+/**
+* 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, catColor){
+ var graphics = new PIXI.Graphics();
+ var color = catColor;
+ 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: '#65A954' });
+ 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<nbChilds && !childIsNowDisplayed){
+ var child = _this.container.children[i++];
+
+ if(typeof(child) == 'undefined') {
+ continue;
+ }
+ if((child.y + child.height) < (Math.abs(_this.container.y) - _this.height)){
+ childrenToRemove.push(child);
+ }
+ else {
+ childIsNowDisplayed = true;
+ }
+ }
+ childrenToRemove.forEach(function(child) {
+ _this.container.removeChild(child);
+ });
+ };
+
+ window.setInterval(this.removePassedObjets, 1000 * this.height / this.pixelsPerSecond );
+
+}
+
+module.exports = AnnotsRoll;
--- a/client/annotviz/app/js/main.js Thu Jan 15 17:56:57 2015 +0100
+++ b/client/annotviz/app/js/main.js Thu Jan 15 17:59:41 2015 +0100
@@ -11,16 +11,27 @@
var PIXI = require('pixi');
// Config vars
+var horizontalView = false;
var logger = false;
var sceneWidth = 1920;
-var prHeight1 = 435;
-var prHeight2 = 645;
-var sceneHeight = prHeight1 + prHeight2;
+var sceneHeight = 1080;
+var prSize1 = 435;
+var prSize2 = 435;
+var prSize3 = 300;
var sceneBgColor = 0xFFFFFF;
var lineColor = 0x444444;
-var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
+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;
-var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
+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;
@@ -32,7 +43,6 @@
var timePageLoaded = Date.now();
var offsetMusic = false;
-
//create an new instance of a pixi stage
var stage = new PIXI.Stage(sceneBgColor);
@@ -43,36 +53,48 @@
document.getElementById('canvasContainer').appendChild(renderer.view);
var uberContainer = new PIXI.DisplayObjectContainer();
-uberContainer.position.x = Math.floor(sceneWidth*9/10);
-uberContainer.position.y = 0;
+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')
-// Init containers
var containerList = [];
-containerList.push(new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight1 / 128));
-containerList.push(new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, prHeight2 / 128));
+
+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);
-graphics.moveTo(0, prHeight1);
-graphics.lineTo(sceneWidth, prHeight1);
+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 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));
- for(var i=0;i<containerList.length;i++){
- containerList[i].moveTo(-diff);
- }
- renderer.render(stage);
-}
-
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
@@ -80,14 +102,12 @@
var now = Date.now();
var timeBetweenNowAndStart = now - timePageLoaded;
offsetMusic = timeBetweenNowAndStart - data.content[1];
- //console.log("start: ", timePageLoaded, ", now: ", now, ", timeBetweenNowAndStart = ", timeBetweenNowAndStart, ", offsetMusic = ", offsetMusic);
}
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
- //console.log("coucou 2", data);
var duration = data.content[1] - noteDict[data.content[2]][note].ts;
for(var i=0;i<containerList.length;i++){
// addNote(note, startTime, duration, velocity, canal)
@@ -112,10 +132,27 @@
}
}
+/* ---------------------------------------------------------------- */
+/* ------------------- Init AnnotsRoll containers ----------------- */
+/* ---------------------------------------------------------------- */
+var AnnotsRoll = require('./annotsRoll.js')
+
+var AnnotationRoll = new AnnotsRoll(uberContainer, sceneWidth - (prSize2 + prSize3), 0, prSize3 + prSize2, sceneHeight, prSize3, pixelsPerSecond3, lineInterval);
-// Socket management
+function addAnnots(data){
+ var title = data.content.category.label;
+ var user = data.content.user;
+ var colorAnnot = 0x65A954;
+ AnnotationRoll.addAnnot(title, user, colorAnnot);
+}
+
+/* ---------------------------------------------------------------- */
+/* ----------------------- Socket management ---------------------- */
+/* ---------------------------------------------------------------- */
+
var sock = null;
+var sock2 = null;
var ellog = null;
function log(m) {
if(logger){
@@ -132,18 +169,24 @@
document.body.removeChild(document.getElementById('log'));
}
+ var wsuriInit;
var wsuri;
+ var wsuri2;
+
if (window.location.protocol === 'file:') {
- wsuri = 'ws://127.0.0.1:8090/broadcast';
+ wsuriInit = 'ws://127.0.0.1:8090/broadcast';
} else {
- wsuri = 'ws://' + window.location.hostname + ':8090/broadcast';
+ wsuriInit = 'ws://' + window.location.hostname + ':8090/broadcast';
}
- wsuri = wsuri + '?channel=PIANOROLL&event_code='+eventCode;
-
+ wsuri = wsuriInit + '?channel=PIANOROLL&event_code='+eventCode;
+ wsuri2 = wsuriInit + '?channel=ANNOT&event_code='+eventCode;
+
if ('WebSocket' in window) {
sock = new WebSocket(wsuri);
+ sock2 = new WebSocket(wsuri2);
} else if ('MozWebSocket' in window) {
sock = new MozWebSocket(wsuri);
+ sock2 = new WebSocket(wsuri2);
} else {
log('Browser does not support WebSocket!');
window.location = 'http://autobahn.ws/unsupportedbrowser';
@@ -170,8 +213,44 @@
addNotes(JSON.parse(e.data));
};
}
+
+ if (sock2) {
+ sock2.onopen = function(){
+ if(logger){
+ log('Connected to ' + wsuri);
+ }
+ };
+
+ sock2.onclose = function(e) {
+ if(logger){
+ log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');
+ }
+ sock2 = null;
+ };
+
+ sock2.onmessage = function(e) {
+ if(logger){
+ log('Got message: ' + e.data);
+ }
+ addAnnots(JSON.parse(e.data));
+ };
+ }
};
+function replaceContainers(){
+ var diff = (Date.now() - timePageLoaded)/1000;// nb of seconds since page loaded
+
+ for(var i=0;i<containerList.length;i++){
+ containerList[i].moveTo(-diff);
+ AnnotationRoll.moveTo(-diff);
+ }
+
+ renderer.render(stage);
+}
+
+/* ---------------------------------------------------------------- */
+/* ---------------------------- Main ------------------------------ */
+/* ---------------------------------------------------------------- */
// Init page and intervals
addLine();
--- a/client/annotviz/app/js/pianoroll.js Thu Jan 15 17:56:57 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js Thu Jan 15 17:59:41 2015 +0100
@@ -10,11 +10,14 @@
var PIXI = require('pixi');
var randomColor = require('randomColor');
-function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight){
+function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval, offsetMusic, noteHeight, horizontalView){
var _this = this;
this.container = new PIXI.DisplayObjectContainer();
this.container.position.x = xInit;
this.container.position.y = yInit;
+ if (!horizontalView){
+ this.container.width = width;
+ }
parentContainer.addChild(this.container);
this.linesDown = linesDown;
@@ -29,16 +32,22 @@
this.noteHeight = noteHeight;
this.addNote = function(note, startTime, duration, velocity, canal){
- //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight);
- var beginX = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000;
- var width = duration * this.pixelsPerSecond / 1000;
- if((beginX+width) < (Math.abs(this.container.x) - this.width)) {
- // not visible. do nothing
- return;
+ var begin = (this.offsetMusic + startTime) * this.pixelsPerSecond / 1000;
+ if (horizontalView){
+ var width = duration * this.pixelsPerSecond / 1000;
+ if((begin+width) < (Math.abs(this.container.x) - this.width)) {
+ // not visible. do nothing
+ return;
+ }
+ } else {
+ var height = duration * this.pixelsPerSecond / 1000;
+ if((begin+height) < (Math.abs(this.container.y) - this.height)) {
+ // not visible. do nothing
+ return;
+ }
}
// We draw the rectangle
var graphics = new PIXI.Graphics();
- //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
var color = this.colorsReg[canal];
if(typeof(color) === 'undefined') {
var colorsRegSize = Object.keys(this.colorsReg).length;
@@ -50,21 +59,37 @@
}
}
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();
- graphics.x = beginX;
+ if (horizontalView){
+ 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();
+ graphics.x = begin;
+ } else {
+ var x = (128-note) * this.width / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0
+ graphics.drawRect(Math.floor(x - (noteHeight/2) + ((this.width / 128)/2)), 0, noteHeight, height);
+ graphics.endFill();
+ graphics.y = begin;
+ }
this.container.addChild(graphics);
};
this.addLine = function(ts){
var graphics = new PIXI.Graphics();
- var x = -this.container.x;
+ if (horizontalView){
+ var x = -this.container.x;
+ var y = this.linesDown ? this.height - 20 : 0;
+ } else {
+ var x = this.linesDown ? 0 : this.width - 20 ;
+ var y = -this.container.y;
+ }
graphics.beginFill(0xFFFF00);
graphics.lineStyle(1, this.lineColor);
- var y = this.linesDown ? this.height - 20 : 0;
graphics.moveTo(x, y);
- graphics.lineTo(x, y + 20);
+ if (horizontalView){
+ graphics.lineTo(x, y + 20);
+ } else {
+ graphics.lineTo(x + 20, y);
+ }
graphics.endFill();
this.container.addChild(graphics);
// Add text
@@ -76,13 +101,22 @@
var fontObj = { font: '10pt Arial', fill: '#444444' };
var t = new PIXI.Text(timeStr, fontObj);
- t.x = x + 2;
- t.y = this.linesDown ? this.height - 15 : 2;
+ if (horizontalView){
+ t.x = x + 2;
+ t.y = this.linesDown ? this.height - 15 : 2;
+ } else {
+ t.x = this.linesDown ? 2 : this.width - 55;
+ t.y = y + 2;
+ }
this.container.addChild(t);
};
this.moveTo = function(diffTime){
- this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
+ if (horizontalView){
+ this.container.x = Math.floor(diffTime*this.pixelsPerSecond);
+ } else {
+ this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
+ }
};
this.removePassedObjets = function(){
@@ -90,28 +124,37 @@
var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
while(i<nbChilds && !childIsNowDisplayed){
var child = _this.container.children[i++];
- //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
if(typeof(child) == 'undefined') {
continue;
}
- if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
- childrenToRemove.push(child);
- //console.log(" remove !!!");
- }
- else {
- childIsNowDisplayed = true;
- //console.log(" childIsNowDisplayed");
+ if (horizontalView){
+ if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
+ childrenToRemove.push(child);
+ }
+ else {
+ childIsNowDisplayed = true;
+ }
+ } else {
+ if((child.y + child.height) < (Math.abs(_this.container.y) - _this.height)){
+ childrenToRemove.push(child);
+ }
+ else {
+ childIsNowDisplayed = true;
+ }
}
}
childrenToRemove.forEach(function(child) {
_this.container.removeChild(child);
});
- //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
};
// remove notes each scene width
//var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond );
- window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond );
+ if (horizontalView){
+ window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond );
+ } else {
+ window.setInterval(this.removePassedObjets, 1000 * this.height / this.pixelsPerSecond );
+ }
}