Merge with 72d767c5142df7fc6387215096321295fbaaa73d
Update doubleroll and annotsroll to support stageView
--- a/client/annotviz/app/annotsroll.html Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/annotsroll.html Tue Jan 20 18:37:51 2015 +0100
@@ -39,13 +39,15 @@
wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
-
-
var logger = new annotviz.ConsoleLogger(true);
+
+ var stageView = new annotviz.StageView({
+ logger: logger
+ });
var doubleroll = new annotviz.DoubleRoll({
- logger: logger,
- externalRefresh: true,
+ stageView : stageView,
+ logger: logger,
ws: new annotviz.WsWrapper(wsUriPianoroll, logger),
orientation: 'vertical',
sceneHeight: 1080,
@@ -59,10 +61,9 @@
]
});
-
var annotsroll = new annotviz.AnnotsRoll({
+ stageView : stageView,
logger: logger,
- externalRefresh: true,
ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
parentContainer: doubleroll.stage,
xInit: 1920 - 435 - 300,
@@ -75,112 +76,17 @@
annotColors: [{ts: 0, colors: {'ntm' : '#cdc83f'}}],
});
- var refreshInterval;
-
function stop() {
- doubleroll.stop();
- annotsroll.stop();
- window.clearInterval(refreshInterval);
+ stageView.stop();
}
function start() {
- doubleroll.start();
- annotsroll.start();
- refreshInterval = setInterval(function() { doubleroll.refresh(); annotsroll.refresh(); }, 1000/doubleroll.framerate);
+ stageView.start();
}
window.onload = function() {
- doubleroll.init();
- annotsroll.init();
+ stageView.init();
start();
}
-
-
-var sessionJson =
- {
- "categories": [
- {
- "color": "rgb(205,200,63)",
- "subcategories": [
- {
- "color": "rgb(205,200,63)",
- "code": "ntm",
- "full_label": "sous-catégorie 1-1",
- "label": "Batterie"
- },
-{
- "color": "rgb(205,200,63)",
- "code": "iam",
- "full_label": "sous-catégorie 1-2",
- "label": "Clavier"
-},
-{
- "color": "rgb(205,200,63)",
- "code": "hip",
- "full_label": "sous-catégorie 1-3",
- "label": "Guitare"
-},
-{
- "color": "rgb(205,200,63)",
- "code": "hop",
- "full_label": "sous-catégorie 1-4",
- "label": "Trombone"
-}
-],
-"full_label": "Liste des instruments disponibles",
-"label": "Instruments"
-},
-{
- "color": "rgb(222,139,83)",
- "subcategories": [
-{
- "color": "rgb(222,139,83)",
- "code": "rock",
- "full_label": "sous-catégorie 2-1",
- "label": "Accélération"
-},
-{
- "color": "rgb(222,139,83)",
- "code": "rap",
- "full_label": "sous-catégorie 2-2",
- "label": "Décélération"
-},
-{
- "color": "rgb(222,139,83)",
- "code": "classic",
- "full_label": "sous-catégorie 2-3",
- "label": "Pause"
-}
-],
-"full_label": "catégorie 2",
-"label": "Rythmique"
-},
-{
- "color": "rgb(197,163,202)",
- "subcategories": [
- {
- "color": "rgb(197,163,202)",
- "code": "drums",
- "full_label": "sous-catégorie 3-1",
- "label": "sub cat 3-1"
- },
- {
- "color": "rgb(197,163,202)",
- "code": "guitar",
- "full_label": "sous-catégorie 3-2",
- "label": "sub cat 3-2"
- }
- ],
- "full_label": "catégorie 3",
- "label": "Une 3ème cat"
-},
-{
- "color": "rgb(121,187,146)",
- "code": "bass",
- "full_label": "catégorie 4",
- "label": "Annot'direct"
-}
-]
-};
</script>
</body>
</html>
--- a/client/annotviz/app/index.html Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/index.html Tue Jan 20 18:37:51 2015 +0100
@@ -20,6 +20,7 @@
<li><a href="pianoroll_h.html">Horizontal Pianoroll</a></li>
<li><a href="pianoroll_v.html">Vertical Pianoroll</a></li>
<li><a href="annotsroll.html">AnnotsRoll</a></li>
+ <li><a href="annotstimeline.html">AnnotsTimeLine</a></li>
</ul>
</p>
</body>
--- a/client/annotviz/app/js/annotsroll.js Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js Tue Jan 20 18:37:51 2015 +0100
@@ -57,7 +57,6 @@
this.container.x = opts.xInit;
this.container.y = opts.yInit;
this.container.width = opts.width;
- opts.parentContainer.addChild(this.container);
this.height = opts.height;
this.width = opts.width;
@@ -71,7 +70,9 @@
var started = false;
var ws = opts.ws;
var externalRefresh = opts.externalRefresh;
-
+ var stageView = opts.stageView;
+
+ stageView.registerComponent(this);
var isHidden = function(child) {
// TODO: the origin point is an approximation. Should refine this
@@ -195,7 +196,6 @@
};
-
this.start = function() {
if(!started) {
this.startTs = Date.now();
--- a/client/annotviz/app/js/annotstimeline.js Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Tue Jan 20 18:37:51 2015 +0100
@@ -1,79 +1,134 @@
/**
-* js/annotsTimeline
+* js/annotstimeline
*
-* annotsTimeline basic component
+* annotstimeline basic component
*
*/
'use strict';
var PIXI = require('pixi');
-
-function AnnotsTimeline(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalSize){
-
-// var _this = this;
- this.container = new PIXI.DisplayObjectContainer();
- this.container.position.x = xInit;
- this.container.position.y = yInit;
- this.container.width = width;
- this.container.height = height;
- parentContainer.addChild(this.container);
+var _ = require('lodash');
+var rgb2hex = require('./utils');
- this.timeBegin = timeBegin;
- this.timeEnd = timeEnd;
- this.duration = (timeEnd - timeBegin)/1000;
- this.width = width;
- this.height = height;
- //define interval corresponding to the time of one step
- //e.g: 60 for a step of 60 seconds
- this.intervalSize = intervalSize;
- // define the step depending the interval we passed and the duration
- this.intervalDuration = (intervalSize*this.duration/width);
-
- //Initialise the list of step
- //each cell will contain the list categories and the number of annotations per categories
- this.cells = [];
+var defaultOptions = {
+ logger: undefined,
+ intervalWidth: 10,
+ intervalHeight: 5,
+ maxCellHeight: 20,
+};
+function AnnotsTimeLine(options){
+ var _this = this;
+ var opts = _(options).defaults(defaultOptions).value();
+
+ this.container = new PIXI.DisplayObjectContainer();
+ this.container.x = opts.xInit;
+ this.container.y = opts.yInit;
+ this.container.width = opts.width;
+ this.container.height = opts.height;
+
+ this.timeBegin = opts.timeBegin;
+ this.timeEnd = opts.timeEnd;
+ this.duration = (this.timeEnd - this.timeBegin)/1000;
+ this.width = opts.width;
+ this.height = opts.height;
+ this.intervalHeight = opts.intervalHeight;
+ this.intervalWidth = opts.intervalWidth;
+ this.maxCellHeight = opts.maxCellHeight;
+ this.intervalDuration = (this.intervalWidth * this.duration / this.width);
+ this.annotCategories = opts.annotCategories;
+
+ this.cells = []
+ for (var i=0; i<(this.width/this.intervalWidth) ; i++){
+ this.cells[i] = [];
+ this.cells[i].x = i * this.intervalWidth;
+ this.cells[i].totalAnnots = 0;
+ this.cells[i].graphics = new PIXI.Graphics();
+ this.container.addChild(this.cells[i].graphics);
+ this.cells[i].categories = {};
+
+ for (var category in this.annotCategories[0].colors){
+ this.cells[i].categories[category] = {
+ "count": 0,
+ "color": this.annotCategories[0].colors[category]
+ };
+ }
+ }
+
+ var ws = opts.ws;
+ var stageView = opts.stageView;
// draw temp line to locate the middle of the container
var graphics = new PIXI.Graphics();
- graphics.beginFill(0x000000);
- graphics.lineStyle(1, 0x000000);
- graphics.moveTo(xInit, (-this.height/2) );
- graphics.lineTo(this.width, (-this.height/2));
- graphics.endFill();
+ graphics.beginFill(0x000000)
+ .lineStyle(1, 0x000000)
+ .moveTo(this.container.x, (this.height/2))
+ .lineTo(this.width, (this.height/2))
+ .endFill();
this.container.addChild(graphics);
-
- this.addAnnot = function(category, time){
- var x = Math.floor( (time-this.timeBegin)/(1000*this.intervalDuration)) * this.intervalSize;
- var y = (-this.height/2);
+
+ stageView.registerComponent(this);
- //Check if cell is already set.
- //If yes get increment the numbere of annots in the category corresponding
- //If not initialise the cell
-// if (this.cells[x] === "undefined"){
-// cells[x].push({
-// "code" : category.code,
-// "color" : category.color,
-// "count" : 1
-// });
-// } else {
-// if (c)
-// }
+ //Add Annotation to the TimeLine
+ this.addAnnot = function(data){
+ if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){
+ var annotCode = data.content.category.code;
+ } else {
+ var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1];
+ }
+ var annotTime = Date.parse(data.ts);
+
+ if (this.timeEnd > Date.parse(data.ts)){
+ var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration));
+ this.cells[i].categories[annotCode].count += 1;
+ this.cells[i].totalAnnots +=1;
+ this.redrawCell(this.cells[i]);
+ }
+ };
+
+ //Draw the cellule
+ this.redrawCell = function(cell){
+ var x = cell.x;
+ var y = this.height/2;
+ cell.graphics.clear();
+
+ //Check if total height is higher than Max Cell Height
+ if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){
+ var heightStep = this.maxCellHeight/cell.totalAnnots;
+ } else {
+ var heightStep = this.intervalHeight;
+ }
+ //Draw the rect depending on the height step calculated
+ for (var i=0; i< this.annotCategories[0].order.length; i++){
+ var currentCode = this.annotCategories[0].order[i];
+ cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x"))
+ .drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep)
+ .endFill();
+ y -= cell.categories[currentCode].count*heightStep;
+ }
+ }
+
+ this.init = function() {
- console.log('x : ' + x + ' | y : ' + y);
+ ws.message(function(data) {
+ _this.addAnnot(data);
+ });
- // We draw the rectangle
- var graphics = new PIXI.Graphics();
- graphics.beginFill(0x536991);
- graphics.drawRect(x, y, this.intervalSize, -10);
- graphics.endFill();
-
- this.container.addChild(graphics);
+ };
+
+ this.start = function() {
};
-
+
+ this.refresh = function() {
+ };
+
+ this.stop = function(){
+ };
+
+ return this;
}
module.exports = {
- AnnotsTimeline : AnnotsTimeline
+ AnnotsTimeLine: AnnotsTimeLine
};
--- a/client/annotviz/app/js/doubleroll.js Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js Tue Jan 20 18:37:51 2015 +0100
@@ -16,7 +16,6 @@
var defaultConfig = {
orientation: 'horizontal',
- externalRefresh: false,
logger: undefined,
sceneWidth: 1920,
pianorolls : [
@@ -39,8 +38,6 @@
lineColor: 0x444444,
lineFillColor: 0xFFFF00,
noteColors: [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991],
- canvasContainer: 'canvasContainer',
- timeContainer: 'timeStarted',
noteHeight: undefined,
zeroShift: 0.9,
timeWidth: 60,
@@ -57,7 +54,6 @@
var orientation = opts.orientation;
var isHorizontal = (orientation !== 'vertical');
- var externalRefresh = opts.externalRefresh;
this.logger = opts.logger;
this.lineColor = opts.lineColor;
@@ -74,8 +70,7 @@
var offsetMusic = opts.offsetMusic;
var sceneWidth = opts.sceneWidth;
- var canvasContainer = opts.canvasContainer;
- var timeContainer = opts.timeContainer;
+ var stageView = opts.stageView;
var zeroShift = opts.zeroShift;
@@ -83,20 +78,16 @@
var colorsReg = {};
- //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 uberContainer = new PIXI.DisplayObjectContainer();
- uberContainer.x = Math.floor(sceneWidth*zeroShift);
- uberContainer.y = 0;
- this.stage.addChild(uberContainer);
+ this.container = new PIXI.DisplayObjectContainer();
+ this.container.x = Math.floor(sceneWidth*zeroShift);
+ this.container.y = 0;
+
+ stageView.registerComponent(this);
var pianorollList = [];
var pianorollOptions = {
- parentContainer: uberContainer,
+ parentContainer: this.container,
orientation: orientation,
xInit: 0,
width: sceneWidth,
@@ -130,29 +121,20 @@
.moveTo(Math.floor(sceneWidth*zeroShift), yInit)
.lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)
.endFill();
- uberContainer.addChild(lineGraphics);
+ _this.container.addChild(lineGraphics);
}
});
if(!isHorizontal) {
- uberContainer.rotation = Math.PI/2;
- uberContainer.y = sceneHeight;
- uberContainer.x = sceneWidth;
+ this.container.rotation = Math.PI/2;
+ this.container.y = sceneHeight;
+ this.container.x = sceneWidth;
}
this.init = function() {
- if(typeof(canvasContainer) === 'string') {
- canvasContainer = document.getElementById(canvasContainer);
- }
- if(typeof(timeContainer) === 'string') {
- timeContainer = document.getElementById(timeContainer);
- }
-
- canvasContainer.appendChild(renderer.view);
-
- ws.message(function(data) {
+ ws.message(function(data) {
_this.addNotes(data);
});
@@ -166,44 +148,25 @@
});
};
- this.refreshStage = this.refresh = function() {
+ this.refresh = function() {
pianorollList.forEach(function(c) {
c.move();
});
- renderer.render(this.stage);
};
// 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.refreshStage();}, 1000/this.framerate);
- }
- refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
pianorollList.forEach(function(c) {
c.start();
});
};
this.stop = function() {
- if(!externalRefresh) {
- clearInterval(refreshInterval);
- }
- clearInterval(refreshTimeInterval);
+
pianorollList.forEach(function(c) {
c.stop();
});
--- a/client/annotviz/app/js/main.js Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/js/main.js Tue Jan 20 18:37:51 2015 +0100
@@ -8,7 +8,9 @@
'use strict';
var doubleroll = require('./doubleroll');
-var annotroll = require('./annotsroll');
+var annotsroll = require('./annotsroll');
+var annotstimeline = require('./annotstimeline');
+var stageview = require('./stageview');
var wswrapper = require('./wswrapper');
var logger = require('./logger');
@@ -16,7 +18,9 @@
module.exports = _({})
.extend(doubleroll)
- .extend(annotroll)
+ .extend(annotsroll)
+ .extend(annotstimeline)
+ .extend(stageview)
.extend(wswrapper)
.extend(logger)
- .value();
+ .value();
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/utils.js Tue Jan 20 18:37:51 2015 +0100
@@ -0,0 +1,17 @@
+/**
+* js/utils.js
+*
+* basic tools
+*
+*/
+
+'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);
+};
+
+module.exports = rgb2hex;
\ No newline at end of file
--- a/client/annotviz/app/pianoroll_h.html Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/pianoroll_h.html Tue Jan 20 18:37:51 2015 +0100
@@ -36,18 +36,24 @@
wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
}
wsUri += '?channel='+annotationChannel+'&event_code='+eventCode;
-
+
+ var logger = new annotviz.HtmlLogger(false, 'log');
+
+ var stageView = new annotviz.StageView({
+ logger: logger
+ });
var doubleroll = new annotviz.DoubleRoll({
- logger: new annotviz.HtmlLogger(false, 'log'),
+ logger: logger,
+ stageView: stageView,
ws: new annotviz.WsWrapper(wsUri)
});
- function stop() { doubleroll.stop(); }
- function start() { doubleroll.start(); }
+ function stop() { stageView.stop(); }
+ function start() { stageView.start(); }
window.onload = function() {
- doubleroll.init();
+ stageView.init();
start();
}
</script>
--- a/client/annotviz/app/pianoroll_v.html Tue Jan 20 11:57:44 2015 +0100
+++ b/client/annotviz/app/pianoroll_v.html Tue Jan 20 18:37:51 2015 +0100
@@ -36,18 +36,24 @@
wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
}
wsUri += '?channel='+annotationChannel+'&event_code='+eventCode;
-
-
- var doubleroll = annotviz.DoubleRoll({
+
+ var logger = new annotviz.HtmlLogger(false, 'log');
+
+ var stageView = new annotviz.StageView({
+ logger: logger
+ });
+
+ var doubleroll = new annotviz.DoubleRoll({
orientation: 'vertical',
- logger: new annotviz.HtmlLogger(false, 'log'),
+ logger: logger,
+ stageView: stageView,
ws: new annotviz.WsWrapper(wsUri)
});
- function stop() { doubleroll.stop(); }
- function start() { doubleroll.start(); }
+ function stop() { stageView.stop(); }
+ function start() { stageView.start(); }
window.onload = function() {
- doubleroll.init();
+ stageView.init();
start();
};