--- a/client/annotviz/app/index.html Fri Jan 16 03:16:19 2015 +0100
+++ b/client/annotviz/app/index.html Fri Jan 16 20:20:28 2015 +0100
@@ -20,17 +20,17 @@
<p>
<a href="#" onclick="stop(); return false;">stop intervals</a> -
<a href="#" onclick="start(); return false;">start intervals</a> -
- temps écoulé : <span id="myspan"></span>
+ temps écoulé : <span id="timeStarted"></span>
</p>
<pre id="log"></pre>
<script src="/js/libs-annotviz.js"></script>
- <script>
- var eventCode = "test_1";
- </script>
<script src="/js/annotviz.js"></script>
<script>
- var stop = annotviz.stop;
- var start = annotviz.start;
+ 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/js/doubleroll.js Fri Jan 16 20:20:28 2015 +0100
@@ -0,0 +1,278 @@
+/**
+* scripts/doubleroll.js
+*
+* This is the starting point for your application.
+* Take a look at http://browserify.org/ for more info
+*/
+
+/* global window: false */
+/* global document: false */
+/* global WebSocket: false */
+/* global MozWebSocket: false */
+
+'use strict';
+
+
+var PIXI = require('pixi');
+var _ = require('lodash');
+var PianoRoll = require('./pianoroll.js');
+
+var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
+
+var defaultConfig = {
+ logger: false,
+ sceneWidth: 1920,
+ pianorolls : [
+ {
+ height: 435,
+ timeWidth: 10,
+ lineInterval: 5000,
+ noteHeight: undefined
+ },
+ {
+ height: 645,
+ timeWidth: 60,
+ lineInterval: 5000,
+ noteHeight: undefined
+ },
+ ],
+ framerate: 25,
+ offsetMusic: false,
+ sceneBgColor: 0xFFFFFF,
+ lineColor: 0x444444,
+ lineFillColor: 0xFFFF00,
+ noteColors: [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991],
+ canvasContainer: 'canvasContainer',
+ logContainer: 'log',
+ timeContainer: 'timeStarted',
+ noteHeight: undefined,
+ zeroShift: 0.9,
+ timeWidth: 60,
+ lineInterval: 5000,
+ annotationChannel: 'PIANOROLL'
+// wsUri: undefined,
+// eventCode: undefined
+
+};
+
+function DoubleRoll(options) {
+
+ var _this = this;
+ var opts = _(options).defaults(defaultConfig).value();
+
+ this.logger = opts.logger;
+ this.lineColor = opts.lineColor;
+ this.lineFillColor = opts.lineFillColor;
+ this.framerate = opts.framerate;
+ this.offsetMusic = opts.offsetMusic;
+ this.noteColors = opts.noteColors;
+
+ var noteHeight = opts.noteHeight;
+ var sceneBgColor = opts.sceneBgColor;
+ var sceneHeight = opts.sceneHeight || _(opts.pianorolls).reduce(function(s,p) { return s + p.height; }, 0);
+ var timeWidth = opts.timeWidth;
+ var lineInterval = opts.lineInterval;
+ var offsetMusic = opts.offsetMusic;
+
+ var sceneWidth = opts.sceneWidth;
+ var canvasContainer = opts.canvasContainer;
+ var logContainer = opts.logContainer;
+ var timeContainer = opts.timeContainer;
+
+ var zeroShift = opts.zeroShift;
+
+ var eventCode = opts.eventCode;
+ var annotationChannel = opts.annotationChannel;
+ var wsUri = opts.wsUri;
+ if(!wsUri) {
+ if (window.location.protocol === 'file:') {
+ wsUri = 'ws://127.0.0.1:8090/broadcast';
+ }
+ else {
+ wsUri = 'ws://' + window.location.hostname + ':8090/broadcast';
+ }
+ wsUri += '?channel='+annotationChannel+'&event_code='+eventCode;
+ }
+
+
+ var colorsReg = {};
+
+ //create an new instance of a pixi stage
+ var stage = new PIXI.Stage(sceneBgColor);
+ //create a renderer instance.
+ var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
+
+ var uberContainer = new PIXI.DisplayObjectContainer();
+ uberContainer.x = Math.floor(sceneWidth*zeroShift);
+ uberContainer.y = 0;
+ stage.addChild(uberContainer);
+
+ var pianorollList = [];
+
+ var pianorollOptions = {
+ parentContainer: uberContainer,
+ xInit: 0,
+ width: sceneWidth,
+ noteColors: this.noteColors,
+ colorsReg: colorsReg,
+ lineColor: this.lineColor,
+ lineInterval: lineInterval,
+ offsetMusic: offsetMusic,
+ };
+
+ var yInit = 0;
+ var linesDown = true;
+ _(opts.pianorolls).forEach(function(prDef, i) {
+ var prNoteHeight = noteHeight || prDef.noteHeight || prDef.height / 128;
+ var prTimeWidth = prDef.timeWidth || timeWidth;
+ pianorollList.push(new PianoRoll(_({
+ yInit: yInit,
+ height: prDef.height,
+ linesDown: linesDown,
+ pixelsPerSecond: Math.floor(sceneWidth / prTimeWidth),
+ noteHeight: prNoteHeight,
+ lineInterval: prDef.lineInterval
+ }).defaults(pianorollOptions).value()));
+ yInit += prDef.height;
+ linesDown = !linesDown;
+
+ if(i<(opts.pianorolls.length-1)) {
+ var lineGraphics = new PIXI.Graphics()
+ .beginFill(_this.lineFillColor)
+ .lineStyle(1, _this.lineColor)
+ .moveTo(0, yInit)
+ .lineTo(sceneWidth, yInit)
+ .endFill();
+ stage.addChild(lineGraphics);
+ }
+ });
+
+ this.init = function() {
+
+ if(typeof(canvasContainer) === 'string') {
+ canvasContainer = document.getElementById(canvasContainer);
+ }
+ if(typeof(logContainer) === 'string') {
+ logContainer = document.getElementById(logContainer);
+ }
+ if(typeof(timeContainer) === 'string') {
+ timeContainer = document.getElementById(timeContainer);
+ }
+
+
+ if(!this.logger){
+ document.body.removeChild(logContainer);
+ logContainer = undefined;
+ }
+ var sock;
+
+ canvasContainer.appendChild(renderer.view);
+
+ if ('WebSocket' in window) {
+ sock = new WebSocket(wsUri);
+ } else if ('MozWebSocket' in window) {
+ sock = new MozWebSocket(wsUri);
+ } else {
+ this.log('Browser does not support WebSocket!');
+ window.location = 'http://autobahn.ws/unsupportedbrowser';
+ }
+
+ if (!sock) {
+ return;
+ }
+ sock.onopen = function(){
+ if(_this.logger){
+ _this.log('Connected to ' + _this.wsUri);
+ }
+ };
+
+ sock.onclose = function(e) {
+ if(_this.logger){
+ _this.log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');
+ }
+ sock = null;
+ };
+
+ sock.onmessage = function(e) {
+ var dataJson = JSON.parse(e.data);
+ if(_this.logger){
+ var dataDate = new Date((dataJson.content[0]-NTP_EPOCH_DELTA)*1000);
+ _this.log('Got message: ' + e.data + ' - ' + dataDate.toISOString());
+ }
+ _this.addNotes(dataJson);
+ };
+
+ };
+
+
+ this.addNotes = function(data) {
+ var note = data.content[3];
+ var velocity = data.content[4];
+ var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;
+ var channel = data.content[2];
+ var sessionTs = data.content[1];
+
+ pianorollList.forEach(function(c) {
+ c.addNote(note, ts, sessionTs, velocity, channel, 0);
+ });
+ };
+
+ this.refreshStage = function() {
+ pianorollList.forEach(function(c) {
+ c.move();
+ });
+ renderer.render(stage);
+ };
+
+ // 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();
+ refreshInterval = window.setInterval(function() {_this.refreshStage();}, 1000/this.framerate);
+ refreshTimeInterval = window.setInterval(function() {_this.updateTime();}, 1000);
+ pianorollList.forEach(function(c) {
+ c.start();
+ });
+ };
+
+ this.stop = function() {
+ window.clearInterval(refreshInterval);
+ window.clearInterval(refreshTimeInterval);
+ pianorollList.forEach(function(c) {
+ c.stop();
+ });
+ };
+
+
+ this.log = function(m) {
+ if(this.logger){
+ this.logContainer.innerHTML += m + '\n';
+ this.logContainer.scrollTop = logContainer.scrollHeight;
+ }
+ };
+
+
+ window.onload = function() {
+ _this.init();
+ _this.start();
+ };
+
+ return this;
+}
+
+module.exports = {
+ DoubleRoll: DoubleRoll
+};
--- a/client/annotviz/app/js/main.js Fri Jan 16 03:16:19 2015 +0100
+++ b/client/annotviz/app/js/main.js Fri Jan 16 20:20:28 2015 +0100
@@ -5,211 +5,10 @@
* Take a look at http://browserify.org/ for more info
*/
- /* global window: false */
- /* global document: false */
- /* global WebSocket: false */
- /* global MozWebSocket: false */
-
- /* global eventCode: false */
'use strict';
-
-var PIXI = require('pixi');
-var _ = require('lodash');
-
-
-var NTP_EPOCH_DELTA = 2208988800; //c.f. RFC 868
-// Config vars
-var logger = false;
-var sceneWidth = 1920;
-var prHeight1 = 435;
-var prHeight2 = 645;
-var sceneHeight = prHeight1 + prHeight2;
-var sceneBgColor = 0xFFFFFF;
-var lineColor = 0x444444;
-var pixelsPerSecond1 = Math.floor(sceneWidth / 10); // nb of pixels per second
-var manualFramerate = pixelsPerSecond1 / 4;
-var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second
-var lineInterval = 5000; // means line every 5 seconds
-//var noteHeight = 110;
-var noteColors = [0xB90000, 0x4BDD71, 0xAF931E, 0x1C28BA, 0x536991];
-var colorsReg = {};
-// Timecode method
-var offsetMusic = false;
-
-
-//create an new instance of a pixi stage
-var stage = new PIXI.Stage(sceneBgColor);
-
-//create a renderer instance.
-var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight);
-
-//add the renderer view element to the DOM
-document.getElementById('canvasContainer').appendChild(renderer.view);
-
-var uberContainer = new PIXI.DisplayObjectContainer();
-uberContainer.position.x = Math.floor(sceneWidth*9/10);
-uberContainer.position.y = 0;
-stage.addChild(uberContainer);
-
-var PianoRoll = require('./pianoroll.js');
-
-// Init containers
-var containerList = [];
-
-var pianorollOptions = {
- parentContainer: uberContainer,
- xInit: 0,
- width: sceneWidth,
- noteColors: noteColors,
- colorsReg: colorsReg,
- lineColor: lineColor,
- lineInterval: lineInterval,
- offsetMusic: offsetMusic
-};
-
-
-containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), {
- yInit: 0,
- height: prHeight1,
- linesDown: true,
- pixelsPerSecond: pixelsPerSecond1,
- noteHeight: prHeight1 / 128
-})));
-containerList.push(new PianoRoll(_.extend(_.clone(pianorollOptions), {
- yInit: prHeight1,
- height: prHeight2,
- linesDown: false,
- pixelsPerSecond: pixelsPerSecond2,
- noteHeight: prHeight2 / 128
-})));
-
-
-// Line between two containers
-var graphics = new PIXI.Graphics();
-graphics.beginFill(0xFFFF00);
-graphics.lineStyle(1, lineColor);
-graphics.moveTo(0, prHeight1);
-graphics.lineTo(sceneWidth, prHeight1);
-graphics.endFill();
-stage.addChild(graphics);
-
-
-function addNotes(data){
- var note = data.content[3];
- var velocity = data.content[4];
- var ts = (data.content[0] - NTP_EPOCH_DELTA)*1000;
- var channel = data.content[2];
- var sessionTs = data.content[1];
-
- containerList.forEach(function(c) {
- c.addNote(note, ts, sessionTs, velocity, channel, 0);
- });
-}
-
-
-
-// Socket management
-var sock = null;
-var ellog = null;
-function log(m) {
- if(logger){
- ellog.innerHTML += m + '\n';
- ellog.scrollTop = ellog.scrollHeight;
- }
-}
-window.onload = function(){
-
- if(logger){
- ellog = document.getElementById('log');
- }
- else{
- document.body.removeChild(document.getElementById('log'));
- }
-
- var wsuri;
- if (window.location.protocol === 'file:') {
- wsuri = 'ws://127.0.0.1:8090/broadcast';
- } else {
- wsuri = 'ws://' + window.location.hostname + ':8090/broadcast';
- }
- wsuri = wsuri + '?channel=PIANOROLL&event_code='+eventCode;
-
- if ('WebSocket' in window) {
- sock = new WebSocket(wsuri);
- } else if ('MozWebSocket' in window) {
- sock = new MozWebSocket(wsuri);
- } else {
- log('Browser does not support WebSocket!');
- window.location = 'http://autobahn.ws/unsupportedbrowser';
- }
-
- if (sock) {
- sock.onopen = function(){
- if(logger){
- log('Connected to ' + wsuri);
- }
- };
-
- sock.onclose = function(e) {
- if(logger){
- log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = \'' + e.reason + '\')');
- }
- sock = null;
- };
-
- sock.onmessage = function(e) {
- var dataJson = JSON.parse(e.data);
- var dataDate = new Date((dataJson.content[0]-NTP_EPOCH_DELTA)*1000);
- if(logger){
- log('Got message: ' + e.data + ' - ' + dataDate.toISOString());
- }
- addNotes(dataJson);
- };
- }
-};
-
-function refreshStage() {
- containerList.forEach(function(c) {
- c.move();
- });
- renderer.render(stage);
-}
-
-
-// Init page and intervals
-var refreshInterval;
-
-function start() {
- refreshInterval = window.setInterval(refreshStage, 1000/manualFramerate);
- containerList.forEach(function(c) {
- c.start();
- });
-}
-
-function stop() {
- window.clearInterval(refreshInterval);
- containerList.forEach(function(c) {
- c.stop();
- });
-}
-
-// Little interval to show time
-var nbSec = 0;
-var mySpan = document.getElementById('myspan');
-function updateTime(){
- nbSec++;
- var hours = parseInt( nbSec / 3600 ) % 24;
- var minutes = parseInt( nbSec / 60 ) % 60;
- var seconds = nbSec % 60;
- var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
- mySpan.innerHTML = timeStr;
-}
-window.setInterval(updateTime, 1000);
-
-start();
+var doubleroll = require('./doubleroll.js');
module.exports = {
- start: start,
- stop: stop,
+ DoubleRoll: doubleroll.DoubleRoll
};
--- a/client/annotviz/app/js/pianoroll.js Fri Jan 16 03:16:19 2015 +0100
+++ b/client/annotviz/app/js/pianoroll.js Fri Jan 16 20:20:28 2015 +0100
@@ -17,8 +17,8 @@
function PianoRoll(options) {
var _this = this;
this.container = new PIXI.DisplayObjectContainer();
- this.container.position.x = options.xInit;
- this.container.position.y = options.yInit;
+ this.container.x = options.xInit;
+ this.container.y = options.yInit;
options.parentContainer.addChild(this.container);
this.linesDown = options.linesDown;
@@ -34,6 +34,8 @@
this.noteDict = {};
this.startTs = options.startTs || Date.now();
+ var started = false;
+
//TODO: I do not like the "regColor" object. This should not be global, but local
this.getColor = function(canal) {
@@ -192,8 +194,7 @@
};
this.start = function() {
- if(typeof(this.startTs) === 'undefined') {
- console.log('Container Started');
+ if(!started) {
this.startTs = Date.now();
this.addLine();
}