# HG changeset patch # User rougeronj # Date 1421751640 -3600 # Node ID 9d968fbcaa2add86ccac521c832140a46a494165 # Parent a323578ea954b64dab616ce82381f1aa6e140ff4 Add General Time Line + minor change in annotsRoll diff -r a323578ea954 -r 9d968fbcaa2a client/annotviz/app/js/annotsRoll.js --- 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){ diff -r a323578ea954 -r 9d968fbcaa2a client/annotviz/app/js/generalView.js --- 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; diff -r a323578ea954 -r 9d968fbcaa2a client/annotviz/app/js/main.js --- 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)); }; } diff -r a323578ea954 -r 9d968fbcaa2a client/annotviz/app/js/utils.js --- /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