--- a/client/annotviz/app/js/annotsRoll.js Mon Jan 19 09:52:52 2015 +0100
+++ b/client/annotviz/app/js/annotsRoll.js Tue Jan 20 12:00:40 2015 +0100
@@ -24,9 +24,8 @@
this.pixelsPerSecond = pixelsPerSecond;
this.lineInterval = lineInterval;
- this.addAnnot = function(category, user, catColor){
+ this.addAnnot = function(category, user, color){
var graphics = new PIXI.Graphics();
- var color = catColor;
var x = 0;
var y = -this.container.y;
graphics.beginFill(color);
@@ -35,7 +34,7 @@
this.container.addChild(graphics);
- var catText = new PIXI.Text(category, { font: '16pt Arial', fill: '#65A954' });
+ var catText = new PIXI.Text(category, { font: '16pt Arial', fill: color.replace("0x", "#") });
catText.x = x + 20;
catText.y = y - 23;
this.container.addChild(catText);
@@ -45,7 +44,7 @@
userText.y = y + 2;
this.container.addChild(userText);
- this.addAnnotLine(color)
+ this.addAnnotLine(color);
};
this.addAnnotLine = function(color){
--- a/client/annotviz/app/js/generalView.js Mon Jan 19 09:52:52 2015 +0100
+++ b/client/annotviz/app/js/generalView.js Tue Jan 20 12:00:40 2015 +0100
@@ -9,9 +9,9 @@
var PIXI = require('pixi');
var randomColor = require('randomColor');
+var rgb2hex = require('./utils');
-function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalSize){
- console.log(width);
+function GeneralView(parentContainer, xInit, yInit, width, height, timeBegin, timeEnd, intervalWidth, intervalHeight, maxCellHeight, categories){
var _this = this;
this.container = new PIXI.DisplayObjectContainer();
this.container.position.x = xInit;
@@ -25,54 +25,72 @@
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);
+ this.intervalHeight = intervalHeight;
+ this.intervalWidth = intervalWidth;
+ this.maxCellHeight = maxCellHeight;
+ this.intervalDuration = (intervalWidth*this.duration/width);
- //Initialise the list of step
+
+ //Initialise the list of step
//each cell will contain the list categories and the number of annotations per categories
this.cells = []
-
-
+ for (var i=0; i<(width/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 categories){
+ this.cells[i].categories[category] = {
+ "count": 0,
+ "color": categories[category]
+ };
+ }
+ }
// 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(xInit, (-this.height/2) )
+ .lineTo(this.width, (-this.height/2))
+ .endFill();
this.container.addChild(graphics);
+ //Add Annotation to the TimeLine
this.addAnnot = function(category, time){
- var x = Math.floor( (time-this.timeBegin)/(1000*this.intervalDuration)) * this.intervalSize;
- var y = (-this.height/2);
+ console.log(this.timeEnd);
+ console.log(time);
+ if (this.timeEnd < time){
+ return;
+ }
+ var i = Math.floor((time-this.timeBegin)/(1000*this.intervalDuration));
+ this.cells[i].categories[category].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 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)
-// }
-
- console.log("x : " + x + " | y : " + y);
-
- // 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);
- };
-
+ //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 category in cell.categories){
+ cell.graphics.beginFill(cell.categories[category].color)
+ .drawRect(x, y, this.intervalWidth, -cell.categories[category].count * heightStep)
+ .endFill();
+ y -= cell.categories[category].count*heightStep;
+ }
+ }
}
module.exports = GeneralView;
--- a/client/annotviz/app/js/main.js Mon Jan 19 09:52:52 2015 +0100
+++ b/client/annotviz/app/js/main.js Tue Jan 20 12:00:40 2015 +0100
@@ -9,6 +9,7 @@
var PIXI = require('pixi');
+var rgb2hex = require('./utils');
// Config vars
var horizontalView = false;
@@ -42,6 +43,19 @@
// Timecode method
var timePageLoaded = Date.now();
var offsetMusic = false;
+var categoriesColor = {
+ "ntm" : rgb2hex(205,200,63),
+ "iam" : rgb2hex(205,200,63),
+ "hip" : rgb2hex(205,200,63),
+ "hop" : rgb2hex(205,200,63),
+ "rock" : rgb2hex(222,139,83),
+ "rap" : rgb2hex(222,139,83),
+ "classic" : rgb2hex(222,139,83),
+ "drums" : rgb2hex(197,163,202),
+ "guitar" : rgb2hex(197,163,202),
+ "bass" : rgb2hex(121,187,146),
+ "default": rgb2hex(128,128,128)
+};
//create an new instance of a pixi stage
var stage = new PIXI.Stage(sceneBgColor);
@@ -146,17 +160,23 @@
var GeneralView = require('./generalView.js')
-var GeneralRoll = new GeneralView(uberContainer, 0, 0, sceneWidth - (prSize2 + prSize3), sceneHeight, Date.now(), Date.now() + 300000, 30);
+var GeneralRoll = new GeneralView(uberContainer, 0, 0, sceneWidth - (prSize2 + prSize3), sceneHeight, Date.now(), Date.now() + 300000, 30, 5, 100, categoriesColor);
function addAnnots(data){
var title = data.content.category.label;
+ var code = data.content.category.code;
var user = data.content.user;
- //Test cat and color
- var colorAnnot = 0x65A954;
+ if (typeof(categoriesColor[code]) != 'undefined'){
+ var color = categoriesColor[code];
+ }
+ else {
+ var code = "default";
+ var color = categoriesColor[code];
+ }
- AnnotationRoll.addAnnot(title, user, colorAnnot);
- GeneralRoll.addAnnot(title, Date.now());
+ AnnotationRoll.addAnnot(title, user, color);
+ GeneralRoll.addAnnot(code, Date.now());
}
/* ---------------------------------------------------------------- */
@@ -244,7 +264,7 @@
if(logger){
log('Got message: ' + e.data);
}
- console.log(e);
+// console.log(e);
addAnnots(JSON.parse(e.data));
};
}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/js/utils.js Tue Jan 20 12:00:40 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