--- a/client/annotviz/app/annotsvizview.html Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/annotsvizview.html Thu Jan 22 02:21:15 2015 +0100
@@ -17,25 +17,20 @@
<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 = 'atelier2_test';
+ var eventCode = 'test_1';
var wsUri;
-// if (window.location.protocol === 'file:') {
+ if (window.location.protocol === 'file:') {
wsUri = 'ws://172.16.0.20:8090/broadcast';
-// }
-// else {
-// wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
-// }
+ }
+ else {
+ wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+ }
wsUriPianoroll = wsUri + '?channel=' + pianorollChannel + '&event_code=' + eventCode;
wsUriAnnotation = wsUri + '?channel=' + annotationChannel + '&event_code=' + eventCode;
--- a/client/annotviz/app/js/annotsroll.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotsroll.js Thu Jan 22 02:21:15 2015 +0100
@@ -13,9 +13,9 @@
var DEFAULT_ANNOT_COLOR = '#bababa';
var defaultAnnotStyles = {
- 'label': { font: '20pt Arial Bold', fill: '#65A954' },
- 'text' : { font: '14pt Arial Regular', fill: '#444444' },
- 'user' : { font: '16pt Arial regular', fill: '#666666' },
+ 'label': { font: '16pt Arial Bold', fill: '#65A954' },
+ 'text' : { font: '12pt Arial Regular', fill: '#444444' },
+ 'user' : { font: '14pt Arial regular', fill: '#666666' },
};
var defaultOptions = {
--- a/client/annotviz/app/js/annotstimeline.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotstimeline.js Thu Jan 22 02:21:15 2015 +0100
@@ -8,8 +8,8 @@
'use strict';
var PIXI = require('pixi');
+var Utils = require('./utils.js');
var _ = require('lodash');
-var rgb2hex = require('./utils');
var defaultOptions = {
logger: undefined,
@@ -46,6 +46,7 @@
this.perimeter = 2*Math.PI* this.radius;
this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter);
+ var currentTime = this.timeBegin;
var totalIndex = Math.floor(this.perimeter/this.intervalWidth);
this.cells = []
@@ -68,15 +69,23 @@
//draw the base - circle and line to locate the scene
var graphics = new PIXI.Graphics();
- graphics.lineStyle(1, 0x000000)
+ graphics.lineStyle(2, 0x646464)
.drawCircle(this.circleX, this.circleY, this.radius - 3)
+ .lineStyle(1, 0xD7D7D7)
.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)
+ .lineStyle(1, 0x646464)
+ .moveTo(this.circleX, this.circleY - (this.radius/3)/2)
+ .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10)
.endFill()
this.container.addChild(graphics);
+ //set time text
+ var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
+ currentTimeText.x = this.circleX - currentTimeText.width/2;
+ currentTimeText.y = this.circleY - currentTimeText.height/2;
+ this.container.addChild(currentTimeText);
+
stageView.registerComponent(this);
//Add Annotation to the TimeLine
@@ -105,6 +114,35 @@
this.container.addChild(cell.graphics);
}
+ this.initTimeTexts = function() {
+ var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+ tBeg.x = this.circleX + 15;
+ tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10;
+ this.container.addChild(tBeg);
+
+ var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' });
+ tEnd.x = this.circleX - 15 - tEnd.width;
+ tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10;
+ this.container.addChild(tEnd);
+
+ var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+ t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ;
+ t15.y = this.circleY - t15.height;
+ t15.rotation = Math.PI /2;
+ this.container.addChild(t15);
+
+ var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+ t30.x = this.circleX - t30.width/2;
+ t30.y = this.circleY + this.radius + this.maxCellHeight - 2;
+ this.container.addChild(t30);
+
+ var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' });
+ t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ;
+ t45.y = this.circleY + t15.height;
+ t45.rotation = -Math.PI/2;
+ this.container.addChild(t45);
+ }
+
//Draw the cellule
this.redrawCell = function(cell){
@@ -134,17 +172,33 @@
}
this.init = function() {
-
ws.message(function(data) {
_this.addAnnot(data);
});
-
+
+ this.initTimeTexts();
};
+ this.updateTime = function(){
+ currentTime += 1000;
+
+ var nbSec = currentTime / 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);
+
+ currentTimeText.setText(timeStr);
+ };
+
+ var refreshTimeInterval;
+
this.start = function() {
+ refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
};
this.refresh = function() {
+
};
this.stop = function(){
--- a/client/annotviz/app/js/annotsvizview.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/annotsvizview.js Thu Jan 22 02:21:15 2015 +0100
@@ -43,15 +43,13 @@
xInit: 0,
yInit: 0,
width: 1024 - 200 - 200,
- height: 768,
+ height: 768-200,
timeBegin: Date.now(),
- timeEnd: Date.now() + 300000,
+ timeEnd: Date.now() + 3000000,
intervalWidth: 6,
intervalHeight: 10,
- maxCellHeight: 100,
+ maxCellHeight: 70,
radius: 200,
- circleX:300,
- circleY:400,
annotCategories: [{
ts: 0,
colors: {
@@ -71,20 +69,34 @@
}]
});
-
+ var doubleRollH = new DoubleRoll.DoubleRoll({
+ stageView : stageView,
+ logger: logger,
+ ws: wsPianoroll,
+ yInit: (this.height - 200),
+ sceneHeight: 200,
+ pianorolls : [
+ {
+ height: 200,
+ timeWidth: 10,
+ lineInterval: 5000,
+ noteHeight: 10
+ },
+ ]
+ });
var doubleRollV = new DoubleRoll.DoubleRoll({
stageView : stageView,
logger: logger,
ws: wsPianoroll,
orientation: 'vertical',
- sceneHeight: 768,
+ sceneHeight: 768-200,
pianorolls : [
{
height: 200,
timeWidth: 60,
lineInterval: 5000,
- noteHeight: undefined
+ noteHeight: 5,
},
]
});
@@ -95,12 +107,12 @@
ws: wsAnnot,
parentContainer: doubleRollV.stage,
xInit: 1024 - 200 - 200,
- yInit: 768,
+ yInit: 768-200,
width: 200 + 200,
- height: 768,
+ height: 768-200,
widthRoll: 200,
framerate: doubleRollV.framerate,
- pixelsPerSecond: Math.floor(1920 / 60),
+ pixelsPerSecond: Math.floor(1024 / 60),
annotColors: [{
ts: 0,
colors: {
@@ -118,21 +130,20 @@
}
}]
});
-
- var limiter1 = new PIXI.Graphics()
- .lineStyle(1, 0x000000)
+
+ var limiters = new PIXI.Graphics()
+ .lineStyle(1, 0x646464)
.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)
+ .moveTo(0, this.height - 200)
+ .lineTo(this.width, this.height - 200)
+ .drawRect(0, 0, this.width -1, this.height -1)
+ .beginFill(0xECECEC)
+ .drawRect(1024 - 200, 0, 200, 768-200)
.endFill();
- this.container.addChild(limiter2);
-
+ this.container.addChild(limiters);
// var doubleRollV = new DoubleRoll.DoubleRoll({});
--- a/client/annotviz/app/js/doubleroll.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js Thu Jan 22 02:21:15 2015 +0100
@@ -98,7 +98,7 @@
offsetMusic: offsetMusic,
};
- var yInit = 0;
+ var yInit = opts.yInit || 0;
var linesDown = true;
_(opts.pianorolls).forEach(function(prDef, i) {
var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;
--- a/client/annotviz/app/js/stageview.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/stageview.js Thu Jan 22 02:21:15 2015 +0100
@@ -21,7 +21,6 @@
framerate: 25,
sceneBgColor: 0xFFFFFF,
canvasContainer: 'canvasContainer',
- timeContainer: 'timeStarted'
};
function StageView(options) {
@@ -37,13 +36,13 @@
var sceneWidth = opts.sceneWidth;
var sceneHeight = opts.sceneHeight;
var canvasContainer = opts.canvasContainer;
- var timeContainer = opts.timeContainer;
-
+ var timeContainer = [];
+ var components = [];
+
//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 components = [];
this.init = function() {
@@ -61,6 +60,10 @@
});
};
+ this.registerTimeContainer = function(container) {
+ timeContainer.push(container);
+ };
+
this.registerComponent = function(component) {
components.push(component);
this.stage.addChild(component.container);
@@ -75,25 +78,12 @@
// 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.refresh();}, 1000/this.framerate);
}
- refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
components.forEach(function(c){
c.start();
--- a/client/annotviz/app/js/utils.js Wed Jan 21 20:43:05 2015 +0100
+++ b/client/annotviz/app/js/utils.js Thu Jan 22 02:21:15 2015 +0100
@@ -7,11 +7,14 @@
'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);
+function formatTime (ts) {
+ var hours = Math.floor( (ts/1000) / 3600 ) % 24;
+ var minutes = Math.floor( (ts/1000) / 60 ) % 60;
+ var seconds = Math.floor( (ts/1000) % 60);
+ return ((hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds));
+}
+
+
+module.exports = {
+ formatTime: formatTime
};
-
-module.exports = rgb2hex;
\ No newline at end of file