--- 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();