# HG changeset patch
# User rougeronj
# Date 1421889675 -3600
# Node ID 25ac8802c1893688b7e4fd7ef97e313b7a3792b2
# Parent  685c5ebc59d047051c196c67a3a691b4e4ba5751
Improve interface + Add horizontal pianoroll to annotsvizview

diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/annotsvizview.html
--- a/client/annotviz/app/annotsvizview.html	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html	Thu Jan 22 02:21:15 2015 +0100
@@ -17,25 +17,20 @@
     <h1>Piano Roll vertical</h1>
     <noscript>You must enable JavaScript</noscript>
     <div id="canvasContainer"></div>
-    <p>
-        <a href="#" onclick="stop(); return false;">stop intervals</a> -
-        <a href="#" onclick="start(); return false;">start intervals</a> -
-        temps écoulé : <span id="timeStarted"></span>
-    </p>
     <!--pre id="log"></pre-->
     <script src="/js/libs-annotviz.js"></script>
     <script src="/js/annotviz.js"></script>
     <script>
 	    var pianorollChannel  = 'PIANOROLL';
 	    var annotationChannel = 'ANNOT';
-	    var eventCode = 'atelier2_test';
+	    var eventCode = 'test_1';
 	    var wsUri;
-// 	    if (window.location.protocol === 'file:') {
+	    if (window.location.protocol === 'file:') {
 	        wsUri = 'ws://172.16.0.20:8090/broadcast';
-// 	    }
-// 	    else {
-// 	        wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
-// 	    }
+	    }
+	    else {
+	        wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+	    }
 	    wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
 	    wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
 	
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/annotsroll.js
--- a/client/annotviz/app/js/annotsroll.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js	Thu Jan 22 02:21:15 2015 +0100
@@ -13,9 +13,9 @@
 var DEFAULT_ANNOT_COLOR = '#bababa';
 
 var defaultAnnotStyles = {
-    'label': { font: '20pt Arial Bold', fill: '#65A954' },
-    'text' : { font: '14pt Arial Regular', fill: '#444444' },
-    'user' : { font: '16pt Arial regular', fill: '#666666' },
+    'label': { font: '16pt Arial Bold', fill: '#65A954' },
+    'text' : { font: '12pt Arial Regular', fill: '#444444' },
+    'user' : { font: '14pt Arial regular', fill: '#666666' },
 };
 
 var defaultOptions = {
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/annotstimeline.js
--- a/client/annotviz/app/js/annotstimeline.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js	Thu Jan 22 02:21:15 2015 +0100
@@ -8,8 +8,8 @@
 'use strict';
 
 var PIXI = require('pixi');
+var Utils = require('./utils.js');
 var _ = require('lodash');
-var rgb2hex = require('./utils');
 
 var defaultOptions = {		
     logger: undefined,
@@ -46,6 +46,7 @@
     this.perimeter = 2*Math.PI* this.radius;
     this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
     
+    var currentTime = this.timeBegin;
     var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
     	
     this.cells = []
@@ -68,15 +69,23 @@
 
     //draw the base - circle and line to locate the scene
     var graphics = new PIXI.Graphics();
-    graphics.lineStyle(1, 0x000000)
+    graphics.lineStyle(2, 0x646464)
     	.drawCircle(this.circleX, this.circleY, this.radius - 3)
+    	.lineStyle(1, 0xD7D7D7)
     	.drawCircle(this.circleX, this.circleY, this.radius*2/3)
     	.drawCircle(this.circleX, this.circleY, this.radius/3)
-    	.moveTo(this.circleX, this.circleY)
-    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 30)
+    	.lineStyle(1, 0x646464)
+    	.moveTo(this.circleX, this.circleY - (this.radius/3)/2)
+    	.lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
     	.endFill()
     this.container.addChild(graphics);
     
+    //set time text
+    var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+    currentTimeText.x = this.circleX - currentTimeText.width/2;
+    currentTimeText.y = this.circleY - currentTimeText.height/2;
+    this.container.addChild(currentTimeText);
+    
     stageView.registerComponent(this);
 
     //Add Annotation to the TimeLine
@@ -105,6 +114,35 @@
     	this.container.addChild(cell.graphics);
     }
     
+    this.initTimeTexts = function() {
+	    var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tBeg.x = this.circleX + 15;
+	    tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tBeg);
+	    
+	    var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
+	    tEnd.x = this.circleX - 15 - tEnd.width;
+	    tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
+	    this.container.addChild(tEnd);
+	    
+	    var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
+	    t15.y = this.circleY - t15.height;
+	    t15.rotation = Math.PI /2;
+	    this.container.addChild(t15);
+	    
+	    var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t30.x = this.circleX - t30.width/2;
+	    t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
+	    this.container.addChild(t30);
+	    
+	    var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+	    t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
+	    t45.y = this.circleY + t15.height;
+	    t45.rotation = -Math.PI/2;
+	    this.container.addChild(t45);
+    }
+    
     //Draw the cellule
     this.redrawCell = function(cell){
     	
@@ -134,17 +172,33 @@
     }
     
     this.init = function() {
-
     	ws.message(function(data) {
             _this.addAnnot(data);
         });
-
+    	
+    	this.initTimeTexts();
     };
     
+    this.updateTime = function(){
+    	currentTime += 1000;
+    	
+        var nbSec = currentTime / 1000;
+        var hours = Math.floor( nbSec / 3600 ) % 24;
+        var minutes = Math.floor( nbSec / 60 ) % 60;
+        var seconds = Math.floor(nbSec % 60);
+        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
+        
+        currentTimeText.setText(timeStr);
+    };
+    
+    var refreshTimeInterval;
+    
     this.start = function() {
+    	refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
     };
     
     this.refresh = function() {
+    	
     };
     
     this.stop = function(){
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/annotsvizview.js
--- a/client/annotviz/app/js/annotsvizview.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js	Thu Jan 22 02:21:15 2015 +0100
@@ -43,15 +43,13 @@
         xInit: 0,
         yInit: 0,
         width: 1024 - 200 - 200,
-        height: 768,
+        height: 768-200,
         timeBegin: Date.now(),
-        timeEnd: Date.now() + 300000,
+        timeEnd: Date.now() + 3000000,
         intervalWidth: 6,
         intervalHeight: 10,
-        maxCellHeight: 100,
+        maxCellHeight: 70,
         radius: 200,
-        circleX:300,
-        circleY:400,
         annotCategories: [{
        		ts: 0, 
        		colors: {		
@@ -71,20 +69,34 @@
        	}]
     });
 	
-	
+	var doubleRollH = new DoubleRoll.DoubleRoll({
+        stageView : stageView,
+    	logger: logger,
+        ws: wsPianoroll,
+        yInit: (this.height - 200),
+        sceneHeight: 200,
+        pianorolls : [
+            {
+                height: 200,
+                timeWidth: 10,
+                lineInterval: 5000,
+                noteHeight: 10
+            },
+        ]
+    });
 	
 	var doubleRollV = new DoubleRoll.DoubleRoll({
         stageView : stageView,
     	logger: logger,
         ws: wsPianoroll,
         orientation: 'vertical',
-        sceneHeight: 768,
+        sceneHeight: 768-200,
         pianorolls : [
             {
                 height: 200,
                 timeWidth: 60,
                 lineInterval: 5000,
-                noteHeight: undefined
+                noteHeight: 5,
             },
         ]
     });
@@ -95,12 +107,12 @@
         ws: wsAnnot,
         parentContainer: doubleRollV.stage,
         xInit: 1024 - 200 - 200,
-        yInit: 768,
+        yInit: 768-200,
         width: 200 + 200,
-        height: 768,
+        height: 768-200,
         widthRoll: 200,
         framerate: doubleRollV.framerate,
-        pixelsPerSecond: Math.floor(1920 / 60),
+        pixelsPerSecond: Math.floor(1024 / 60),
         annotColors: [{
         	ts: 0, 
         	colors: {		
@@ -118,21 +130,20 @@
 			}
         }]
     });
-
-	var limiter1 = new PIXI.Graphics()
-		.lineStyle(1, 0x000000)
+	
+	var limiters = new PIXI.Graphics()
+		.lineStyle(1, 0x646464)
 		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
 		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
-		.endFill();
-	this.container.addChild(limiter1);
-	
-	var limiter2 = new PIXI.Graphics()
-		.lineStyle(1, 0x000000)
 		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
 		.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
+		.moveTo(0, this.height - 200)
+		.lineTo(this.width, this.height - 200)
+		.drawRect(0, 0, this.width -1, this.height -1)
+		.beginFill(0xECECEC)
+		.drawRect(1024 - 200, 0, 200, 768-200)
 		.endFill();
-	this.container.addChild(limiter2);
-	
+	this.container.addChild(limiters);
 	
 //	var doubleRollV = new DoubleRoll.DoubleRoll({});
 	
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/doubleroll.js
--- a/client/annotviz/app/js/doubleroll.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js	Thu Jan 22 02:21:15 2015 +0100
@@ -98,7 +98,7 @@
         offsetMusic: offsetMusic,
     };
 
-    var yInit = 0;
+    var yInit = opts.yInit || 0;
     var linesDown = true;
     _(opts.pianorolls).forEach(function(prDef, i) {
         var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/stageview.js
--- a/client/annotviz/app/js/stageview.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/stageview.js	Thu Jan 22 02:21:15 2015 +0100
@@ -21,7 +21,6 @@
     framerate: 25,
     sceneBgColor: 0xFFFFFF,
     canvasContainer: 'canvasContainer',
-    timeContainer: 'timeStarted'
 };
 
 function StageView(options) {
@@ -37,13 +36,13 @@
     var sceneWidth = opts.sceneWidth;
     var sceneHeight = opts.sceneHeight;
     var canvasContainer = opts.canvasContainer;
-    var timeContainer = opts.timeContainer;
-
+    var timeContainer = [];
+    var components = []; 
+    
     //create an new instance of a pixi stage
     this.stage = new PIXI.Stage(sceneBgColor);
     //create a renderer instance.
     var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
-    var components = []; 
     	
     this.init = function() {
 
@@ -61,6 +60,10 @@
     	});
     };
     
+    this.registerTimeContainer = function(container) {
+    	timeContainer.push(container);
+    };
+    
     this.registerComponent = function(component) {
     	components.push(component);
     	this.stage.addChild(component.container);
@@ -75,25 +78,12 @@
 
     // Init page and intervals
     var refreshInterval;
-    var refreshTimeInterval;
-    var startTs;
-
-    this.updateTime = function(){
-        var nbSec = (Date.now() - startTs) / 1000;
-        var hours = Math.floor( nbSec / 3600 ) % 24;
-        var minutes = Math.floor( nbSec / 60 ) % 60;
-        var seconds = Math.floor(nbSec % 60);
-        var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);
-        timeContainer.innerHTML = timeStr;
-    };
 
     this.start = function() {
 
-        startTs = Date.now();
         if(!externalRefresh) {
             refreshInterval = setInterval(function() {_this.refresh();}, 1000/this.framerate);
         }
-        refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
         
         components.forEach(function(c){
     		c.start();
diff -r 685c5ebc59d0 -r 25ac8802c189 client/annotviz/app/js/utils.js
--- a/client/annotviz/app/js/utils.js	Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/utils.js	Thu Jan 22 02:21:15 2015 +0100
@@ -7,11 +7,14 @@
 
 'use strict';
 
-function rgb2hex (r, g, b) {
-	return "0x"
-		 + ("0" + parseInt(r, 10).toString(16)).slice(-2)
-		 + ("0" + parseInt(g, 10).toString(16)).slice(-2)
-		 + ("0" + parseInt(b, 10).toString(16)).slice(-2);
+function formatTime (ts) {
+	var hours = Math.floor( (ts/1000) / 3600 ) % 24;
+	var minutes = Math.floor( (ts/1000) / 60 ) % 60;
+	var seconds = Math.floor( (ts/1000) % 60);
+	return ((hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds));
+}
+
+
+module.exports = {
+	formatTime: formatTime
 };
-
-module.exports = rgb2hex;
\ No newline at end of file