--- a/client/annotviz/app/index.html Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/index.html Mon Jan 19 13:31:28 2015 +0100
@@ -7,30 +7,19 @@
<meta name="author" content="I.R.I">
<link rel="shortcut icon" href="/img/favicon.ico">
- <title>Piano Roll</title>
+ <title>Piano Roll Tests</title>
<!-- Custom styles for this template -->
<link href="/css/annotviz.css" rel="stylesheet">
</head>
<body>
- <h1>Piano Roll</h1>
- <noscript>You must enable JavaScript</noscript>
- <div id="canvasContainer"></div>
+ <h1>Piano Roll Tests</h1>
<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>
+ <ul>
+ <li><a href="pianoroll_h.html">Horizontal Pianoroll</a></li>
+ <li><a href="pianoroll_v.html">Vertical Pianoroll</a></li>
+ </ul>
</p>
- <pre id="log"></pre>
- <script src="/js/libs-annotviz.js"></script>
- <script src="/js/annotviz.js"></script>
- <script>
- var doubleroll = annotviz.DoubleRoll({
- eventCode: "test_1"
- });
- function stop() { doubleroll.stop(); }
- function start() { doubleroll.start(); }
- </script>
</body>
</html>
--- a/client/annotviz/app/js/doubleroll.js Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/js/doubleroll.js Mon Jan 19 13:31:28 2015 +0100
@@ -20,6 +20,7 @@
var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
var defaultConfig = {
+ orientation: 'horizontal',
logger: false,
sceneWidth: 1920,
pianorolls : [
@@ -60,6 +61,9 @@
var _this = this;
var opts = _(options).defaults(defaultConfig).value();
+ var orientation = opts.orientation;
+ var isHorizontal = (orientation !== 'vertical');
+
this.logger = opts.logger;
this.lineColor = opts.lineColor;
this.lineFillColor = opts.lineFillColor;
@@ -111,6 +115,7 @@
var pianorollOptions = {
parentContainer: uberContainer,
+ orientation: orientation,
xInit: 0,
width: sceneWidth,
noteColors: this.noteColors,
@@ -140,13 +145,20 @@
var lineGraphics = new PIXI.Graphics()
.beginFill(_this.lineFillColor)
.lineStyle(1, _this.lineColor)
- .moveTo(0, yInit)
- .lineTo(sceneWidth, yInit)
+ .moveTo(Math.floor(sceneWidth*zeroShift), yInit)
+ .lineTo(-sceneWidth - Math.floor(sceneWidth*zeroShift), yInit)
.endFill();
- stage.addChild(lineGraphics);
+ uberContainer.addChild(lineGraphics);
}
});
+ if(!isHorizontal) {
+ uberContainer.rotation = Math.PI/2;
+ uberContainer.y = sceneHeight;
+ uberContainer.x = sceneWidth;
+ }
+
+
this.init = function() {
if(typeof(canvasContainer) === 'string') {
--- a/client/annotviz/app/js/pianoroll.js Fri Jan 16 20:20:28 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js Mon Jan 19 13:31:28 2015 +0100
@@ -21,6 +21,9 @@
this.container.y = options.yInit;
options.parentContainer.addChild(this.container);
+ var orientation = options.orientation;
+ var isHorizontal = (orientation !== 'vertical');
+
this.linesDown = options.linesDown;
this.height = options.height;
this.pixelsPerSecond = options.pixelsPerSecond;
@@ -36,6 +39,11 @@
var started = false;
+ var isHidden = function(child) {
+ // TODO: the origin point is an approximation. Should refine this
+ var globalPos = child.toGlobal(new PIXI.Point(0,0));
+ return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
+ };
//TODO: I do not like the "regColor" object. This should not be global, but local
this.getColor = function(canal) {
@@ -54,7 +62,6 @@
this.getNoteRect = function(x, y, color, alpha, width, height) {
var graphics = new PIXI.Graphics();
- //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity);
graphics.beginFill(color, alpha);
graphics.drawRect(0, 0, width, height);
graphics.endFill();
@@ -111,7 +118,6 @@
graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight);
this.container.addChild(graphics);
- //console.log(color, alpha, graphics.lineColor, graphics.fillAlpha);
}
else {
graphics.width = width;
@@ -128,14 +134,17 @@
if(typeof(ts) === 'undefined') {
ts = new Date();
}
- var graphics = new PIXI.Graphics();
var x = -this.container.x;
- graphics.beginFill(0xFFFF00);
- graphics.lineStyle(1, this.lineColor);
var y = this.linesDown ? this.height - 20 : 0;
- graphics.moveTo(x, y);
- graphics.lineTo(x, y + 20);
- graphics.endFill();
+
+ var graphics = new PIXI.Graphics()
+ .beginFill(0xFFFF00)
+ .lineStyle(1, this.lineColor)
+ .moveTo(0, 0)
+ .lineTo(0, 20)
+ .endFill();
+ graphics.x = x;
+ graphics.y = y;
this.container.addChild(graphics);
// Add text
//var totalSec = lineNb * this.lineInterval / 1000;
@@ -146,8 +155,15 @@
var fontObj = { font: '10pt Arial', fill: '#444444' };
var t = new PIXI.Text(timeStr, fontObj);
- t.x = x + 2;
- t.y = this.linesDown ? this.height - 15 : 2;
+ if(isHorizontal) {
+ t.x = x + 2;
+ t.y = this.linesDown ? this.height - 15 : 2;
+ }
+ else {
+ t.rotation = -Math.PI/2;
+ t.x = x ;
+ t.y = this.linesDown ? this.height - 2 : t.width + 2;
+ }
this.container.addChild(t);
};
@@ -171,26 +187,14 @@
this.removePassedObjets = function(){
var nbChilds = _this.container.children.length;
- var i = 0, childIsNowDisplayed = false, childrenToRemove = [];
- while(i<nbChilds && !childIsNowDisplayed){
- var child = _this.container.children[i++];
- //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)));
- if(typeof(child) === 'undefined') {
- continue;
- }
- if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){
- childrenToRemove.push(child);
- //console.log(" remove !!!");
- }
- else {
- childIsNowDisplayed = true;
- //console.log(" childIsNowDisplayed");
- }
- }
+ var childrenToRemove = [];
+ _(_this.container.children).forEach(function(child) {
+ return typeof(child) === 'undefined'
+ || (isHidden(child) && childrenToRemove.push(child));
+ });
childrenToRemove.forEach(function(child) {
_this.container.removeChild(child);
});
- //console.log("before : ", nbChilds, ", after : ", _this.container.children.length);
};
this.start = function() {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/pianoroll_h.html Mon Jan 19 13:31:28 2015 +0100
@@ -0,0 +1,36 @@
+<!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>Piano Roll</title>
+
+ <!-- Custom styles for this template -->
+ <link href="/css/annotviz.css" rel="stylesheet">
+</head>
+
+<body>
+ <h1>Piano Roll</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 doubleroll = annotviz.DoubleRoll({
+ eventCode: "test_1"
+ });
+ function stop() { doubleroll.stop(); }
+ function start() { doubleroll.start(); }
+ </script>
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/annotviz/app/pianoroll_v.html Mon Jan 19 13:31:28 2015 +0100
@@ -0,0 +1,37 @@
+<!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>Piano Roll Vertical</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 doubleroll = annotviz.DoubleRoll({
+ eventCode: 'test_1',
+ orientation: 'vertical',
+ });
+ function stop() { doubleroll.stop(); }
+ function start() { doubleroll.start(); }
+ </script>
+</body>
+</html>