# HG changeset patch # User rougeronj # Date 1421867791 -3600 # Node ID 123a611c7903312f80c8b20514e132c8a9c422f1 # Parent cc7b06bfd5749dd6b04bcdf221ce009dcef0a703 minor update of options and add annotsvizview diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/annotsroll.html --- a/client/annotviz/app/annotsroll.html Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/annotsroll.html Wed Jan 21 20:16:31 2015 +0100 @@ -68,7 +68,7 @@ parentContainer: doubleroll.stage, xInit: 1920 - 435 - 300, yInit: 1080, - width: 1920, + width: 435 + 300, height: 1080, widthRoll: 300, framerate: doubleroll.framerate, diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/annotstimeline.html --- a/client/annotviz/app/annotstimeline.html Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/annotstimeline.html Wed Jan 21 20:16:31 2015 +0100 @@ -53,10 +53,10 @@ height: 1080, timeBegin: Date.now(), timeEnd: Date.now() + 300000, - intervalWidth: 4, + intervalWidth: 6, intervalHeight: 10, - maxCellHeight: 110, - radius: 300, + maxCellHeight: 100, + radius: 400, circleX:500, circleY:500, annotCategories: [{ diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/annotsvizview.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/annotviz/app/annotsvizview.html Wed Jan 21 20:16:31 2015 +0100 @@ -0,0 +1,69 @@ + + + + + + + + + + AnnotsVizView + + + + + + +

Piano Roll vertical

+ +
+

+ stop intervals - + start intervals - + temps écoulé : +

+ + + + + + diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/index.html --- a/client/annotviz/app/index.html Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/index.html Wed Jan 21 20:16:31 2015 +0100 @@ -21,6 +21,7 @@
  • Vertical Pianoroll
  • AnnotsRoll
  • AnnotsTimeLine
    • +
  • AnnotsVizView

    • diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/js/annotsroll.js --- a/client/annotviz/app/js/annotsroll.js Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/js/annotsroll.js Wed Jan 21 20:16:31 2015 +0100 @@ -10,34 +10,12 @@ var PIXI = require('pixi'); var _ = require('lodash'); -// -// -// -// options = { -// parentContainer:, -// externalRefresh: true/false -// ws:, -// xInit:, -// yInit:, -// width:, -// height:, -// widthRoll:, -// pixelsPerSecond:, -// framerate:, -// annotColors: [{ts: , colors: {code1 : '#dshdsj', code2: 'sdasd', 'default': 'dsadas'}}], -// defaultColor: default, -// annotStyles: { -// 'label': {font:, fill:}, -// 'text':{font:, fill:}, -// 'user':{font:, fill:}, -// } -// } var DEFAULT_ANNOT_COLOR = '#bababa'; var defaultAnnotStyles = { - 'label': { font: '26pt Arial Bold', fill: '#65A954' }, - 'text' : { font: '20pt Arial Regular', fill: '#444444' }, - 'user' : { font: '22pt Arial regular', fill: '#444444' }, + 'label': { font: '20pt Arial Bold', fill: '#65A954' }, + 'text' : { font: '14pt Arial Regular', fill: '#444444' }, + 'user' : { font: '16pt Arial regular', fill: '#666666' }, }; var defaultOptions = { diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/js/annotstimeline.js --- a/client/annotviz/app/js/annotstimeline.js Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/js/annotstimeline.js Wed Jan 21 20:16:31 2015 +0100 @@ -16,9 +16,7 @@ intervalWidth: 10, intervalHeight: 5, maxCellHeight: 200, - radius: 300, - circleX:500, - circleY:500 + radius: 300 }; @@ -42,8 +40,8 @@ this.maxCellHeight = opts.maxCellHeight; this.annotCategories = opts.annotCategories; - this.circleX = opts.circleX; - this.circleY = opts.circleY; + this.circleX = opts.circleX || (this.width/2); + this.circleY = opts.circleY || (this.height/2); this.radius = opts.radius; this.perimeter = 2*Math.PI* this.radius; this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); @@ -53,17 +51,13 @@ this.cells = [] for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ this.cells[i] = []; + this.cells[i].i = i; this.cells[i].totalAnnots = 0; - this.cells[i].graphics = new PIXI.Graphics(); - this.cells[i].graphics.position.x = this.circleX + this.radius * Math.sin(i*(360/totalIndex)*(Math.PI/180)); - this.cells[i].graphics.position.y = this.circleY - this.radius * Math.cos(i*(360/totalIndex)*(Math.PI/180)); - this.cells[i].graphics.rotation = (i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); - 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": 1, + "count": 0, "color": this.annotCategories[0].colors[category] }; } @@ -72,9 +66,12 @@ var ws = opts.ws; var stageView = opts.stageView; + //draw the base - circle and line to locate the scene var graphics = new PIXI.Graphics(); graphics.lineStyle(1, 0x000000) - .drawCircle(this.circleX, this.circleY, this.radius) + .drawCircle(this.circleX, this.circleY, this.radius - 3) + .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) .endFill() @@ -93,17 +90,31 @@ 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], i); } }; + this.initGraphics = function(cell){ + cell.graphics = new PIXI.Graphics(); + cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); + cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); + cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); + this.container.addChild(cell.graphics); + } + //Draw the cellule this.redrawCell = function(cell){ - var x = 0; + + if (typeof(cell.graphics) === 'undefined'){ + this.initGraphics(cell); + } else { + cell.graphics.clear(); + } + var y = 0; - cell.graphics.clear(); //Check if total height is higher than Max Cell Height if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ @@ -111,11 +122,12 @@ } 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(0, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep) + .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) .endFill(); y -= cell.categories[currentCode].count*heightStep; } @@ -130,20 +142,18 @@ }; this.start = function() { - for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ - this.redrawCell(this.cells[i]); - } }; this.refresh = function() { }; this.stop = function(){ + console.log(this.cells); }; return this; } module.exports = { - AnnotsTimeLine: AnnotsTimeLine + AnnotsTimeLine: AnnotsTimeLine }; diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/js/annotsvizview.js --- a/client/annotviz/app/js/annotsvizview.js Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/js/annotsvizview.js Wed Jan 21 20:16:31 2015 +0100 @@ -4,3 +4,155 @@ * This is the starting point for your application. * Take a look at http://browserify.org/ for more info */ + +'use strict'; + +var PIXI = require('pixi'); +var _ = require('lodash'); +var DoubleRoll = require('./doubleroll.js'); +var AnnotsTimeLine = require('./annotstimeline.js'); +var AnnotsRoll = require('./annotsroll.js'); + +var defaultOptions = { + xInit: 0, + yInit: 0, + width: 1080, + height: 1920, +}; + +function AnnotsVizView(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.width = opts.width; + this.height= opts.height; + + var wsPianoroll = opts.wsPianoroll; + var wsAnnot = opts.wsAnnot; + var stageView = opts.stageView; + + stageView.registerComponent(this); + + var timeLine = new AnnotsTimeLine.AnnotsTimeLine({ + stageView : stageView, + logger: logger, + ws: new annotviz.WsWrapper(wsUriAnnotation, logger), + xInit: 0, + yInit: 0, + width: 1920 - 435 - 300, + height: 1080, + timeBegin: Date.now(), + timeEnd: Date.now() + 300000, + intervalWidth: 6, + intervalHeight: 10, + maxCellHeight: 100, + radius: 400, + circleX:500, + circleY:500, + annotCategories: [{ + ts: 0, + colors: { + 'ntm': '#CDC83F', + 'iam': '#CDC83F', + 'hip': '#CDC83F', + 'hop': '#CDC83F', + 'rock': '#DE8B53', + 'rap': '#DE8B53', + 'classic': '#DE8B53', + 'drums': '#C5A3CA', + 'guitar': '#C5A3CA', + 'bass': '#79BB92', + 'default': '#808080' + }, + order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default'] + }] + }); + + + + var doubleRollV = new DoubleRoll.DoubleRoll({ + stageView : stageView, + logger: logger, + ws: wsPianoroll, + orientation: 'vertical', + sceneHeight: 1080, + pianorolls : [ + { + height: 300, + timeWidth: 60, + lineInterval: 5000, + noteHeight: undefined + }, + ] + }); + + var annotsRoll = new AnnotsRoll.AnnotsRoll({ + stageView : stageView, + logger: logger, + ws: wsAnnot, + parentContainer: doubleRollV.stage, + xInit: 1920 - 300 - 300, + yInit: 1080, + width: 300 + 300, + height: 1080, + widthRoll: 300, + framerate: doubleRollV.framerate, + pixelsPerSecond: Math.floor(1920 / 60), + annotColors: [{ + ts: 0, + colors: { + 'ntm': '#CDC83F', + 'iam': '#CDC83F', + 'hip': '#CDC83F', + 'hop': '#CDC83F', + 'rock': '#DE8B53', + 'rap': '#DE8B53', + 'classic': '#DE8B53', + 'drums': '#C5A3CA', + 'guitar': '#C5A3CA', + 'bass': '#79BB92', + 'default': '#808080' + } + }] + }); + + var limiter1 = new PIXI.Graphics() + .lineStyle(1, 0x000000) + .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) + .endFill(); + this.container.addChild(limiter2); + + +// var doubleRollV = new DoubleRoll.DoubleRoll({}); + + this.init = function(){ + + } + + this.start = function() { + }; + + this.refresh = function() { + }; + + this.stop = function(){ + }; + + return this; + +} + +module.exports = { + AnnotsVizView: AnnotsVizView +}; \ No newline at end of file diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/js/main.js --- a/client/annotviz/app/js/main.js Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/js/main.js Wed Jan 21 20:16:31 2015 +0100 @@ -10,6 +10,7 @@ var doubleroll = require('./doubleroll'); var annotsroll = require('./annotsroll'); var annotstimeline = require('./annotstimeline'); +var annotsvizview = require('./annotsvizview'); var stageview = require('./stageview'); var wswrapper = require('./wswrapper'); var logger = require('./logger'); @@ -20,6 +21,7 @@ .extend(doubleroll) .extend(annotsroll) .extend(annotstimeline) + .extend(annotsvizview) .extend(stageview) .extend(wswrapper) .extend(logger) diff -r cc7b06bfd574 -r 123a611c7903 client/annotviz/app/js/pianoroll.js --- a/client/annotviz/app/js/pianoroll.js Wed Jan 21 12:14:16 2015 +0100 +++ b/client/annotviz/app/js/pianoroll.js Wed Jan 21 20:16:31 2015 +0100 @@ -73,6 +73,7 @@ }; this.addNoteRaw = function(data) { + console.log(data); var note = data.content[3]; var velocity = data.content[4]; var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;