--- 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,
--- 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: [{
--- /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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <meta name="description" content="">
+ <meta name="author" content="I.R.I">
+ <link rel="shortcut icon" href="/img/favicon.ico">
+
+ <title>AnnotsVizView</title>
+
+ <!-- Custom styles for this template -->
+ <link href="/css/annotviz.css" rel="stylesheet">
+</head>
+
+<body>
+ <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 = 'test_1';
+ var wsUri;
+ if (window.location.protocol === 'file:') {
+ wsUri = 'ws://127.0.0.1:8090/broadcast';
+ }
+ else {
+ wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+ }
+ 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 annotsvizview = new annotviz.AnnotsVizView({
+ logger: logger,
+ stageView: stageView,
+ wsPianoroll: new annotviz.WsWrapper(wsUriPianoroll, logger),
+ wsAnnot: new annotviz.WsWrapper(wsUriAnnotation, logger),
+ });
+
+
+ function stop() {
+ stageView.stop();
+ }
+ function start() {
+ stageView.start();
+ }
+
+ window.onload = function() {
+ stageView.init();
+ start();
+ }
+ </script>
+</body>
+</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 @@
<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>
+ <li><a href="annotsvizview.html">AnnotsVizView</a></li>
</ul>
</p>
</body>
--- 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 = {
--- 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
};
--- 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
--- 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)
--- 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;