Mercurial Mercurial > mons / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/annotviz/app/js/annotsvizview.js
changeset 131 0bb70072a56f
parent 129 7181e1f28eb0
child 134 119b6193c493
equal deleted inserted replaced
130:0a2b4991d48c 131:0bb70072a56f 
     2 * js/annotsvizview.js
 
     2 * js/annotsvizview.js
 
     3 *
 
     3 *
 
     4 * This is the starting point for your application.
 
     4 * This is the starting point for your application.
 
     5 * Take a look at http://browserify.org/ for more info
 
     5 * Take a look at http://browserify.org/ for more info
 
     6 */
 
     6 */
 
       
     7 /*jshint unused:false */
 
     7 
     8 
     8 'use strict';
 
     9 'use strict';
 
     9 
    10 
    10 var PIXI = require('pixi');
 
    11 var PIXI = require('pixi');
 
    11 var _ = require('lodash');
 
    12 var _ = require('lodash');
 
    12 var DoubleRoll = require('./doubleroll.js');
 
    13 var DoubleRoll = require('./doubleroll');
 
    13 var AnnotsTimeLine = require('./annotstimeline.js');
 
    14 var AnnotsTimeLine = require('./annotstimeline');
 
    14 var AnnotsRoll = require('./annotsroll.js');
 
    15 var AnnotsRoll = require('./annotsroll');
 
    15 var Utils = require('./utils.js');
 
    16 var Utils = require('./utils');
 
    16 
    17 
    17 var defaultOptions = {
 
    18 var defaultOptions = {
 
    18     xInit: 0,
 
    19     xInit: 0,
 
    19     yInit: 0,
 
    20     yInit: 0,
 
    20     width: 1024,
 
    21     width: 1024,
 
    21     height: 768
 
    22     height: 768
 
    22 };
 
    23 };
 
    23 
    24 
    24 function AnnotsVizView(options){
 
    25 function AnnotsVizView(options){
 
    25 	var _this = this;
 
    26     var _this = this;
 
    26     var opts = _(options).defaults(defaultOptions).value();
 
    27     var opts = _(options).defaults(defaultOptions).value();
 
    27 
    28 
    28     this.container = new PIXI.DisplayObjectContainer();
 
    29     this.container = new PIXI.DisplayObjectContainer();
 
    29     this.container.x = opts.xInit;
 
    30     this.container.x = opts.xInit;
 
    30     this.container.y = opts.yInit;
 
    31     this.container.y = opts.yInit;
 
    31 	this.width = opts.width;
 
    32     this.width = opts.width;
 
    32 	this.height= opts.height;
 
    33     this.height= opts.height;
 
    33     this.timeBegin = opts.timeBegin;
 
    34     this.timeBegin = opts.timeBegin;
 
    34     this.timeEnd = opts.timeEnd;
 
    35     this.timeEnd = opts.timeEnd;
 
    35     this.annotCategories = [];
 
    36     this.annotCategories = [];
 
    36     
    37 
    37     Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
 
    38     Utils.getAnnotCategories(opts.urlCategories, this.annotCategories);
 
    38     
    39 
    39 	var wsPianoroll = opts.wsPianoroll;
 
    40     var wsPianoroll = opts.wsPianoroll;
 
    40 	var wsAnnot = opts.wsAnnot;
 
    41     var wsAnnot = opts.wsAnnot;
 
    41 	var stageView = opts.stageView;
 
    42     var stageView = opts.stageView;
 
    42 	var currentTime = Date.now() + 3600*1000;
 
    43     var eventCode = opts.eventCode;
 
    43 	var eventCode = opts.eventCode;
 
       
    44     var channel = opts.channel;
 
    44     var channel = opts.channel;
 
       
    45     var logger = opts.logger;
 
    45 
    46 
    46 	stageView.registerComponent(this);
 
    47     stageView.registerComponent(this);
 
    47 
    48 
    48 	var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
 
    49     var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({
 
    49     	stageView : stageView,
 
    50         stageView : stageView,
 
    50         logger: logger,
 
    51         logger: logger,
 
    51         ws: new annotviz.WsWrapper(wsUriAnnotation, logger),
 
    52         ws: wsAnnot,
 
    52         xInit: 0,
 
    53         xInit: 0,
 
    53         yInit: 0,
 
    54         yInit: 0,
 
    54         width: 1024 - 200 - 200,
 
    55         width: 1024 - 200 - 200,
 
    55         height: 768-200,
 
    56         height: 768-200,
 
    56         timeBegin: this.timeBegin,
 
    57         timeBegin: this.timeBegin,
 
    61         radius: 200,
 
    62         radius: 200,
 
    62         eventCode: eventCode,
 
    63         eventCode: eventCode,
 
    63         channel: channel,
 
    64         channel: channel,
 
    64         annotCategories: this.annotCategories
 
    65         annotCategories: this.annotCategories
 
    65     });
 
    66     });
 
    66 	
    67 
    67     //Archive day 1
 
    68     //Archive day 1
 
       
    69     /*jshint -W098 */
 
    68     var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
 
    70     var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({
 
    69     	stageView : stageView,
 
    71         stageView : stageView,
 
    70         archive: true,
 
    72         archive: true,
 
    71         xInit: 0,
 
    73         xInit: 0,
 
    72         yInit: 0,
 
    74         yInit: 0,
 
    73         width: 1024 - 200 - 200,
 
    75         width: 1024 - 200 - 200,
 
    74         height: 768-200,
 
    76         height: 768-200,
 
    75         timeBegin: Date.parse("2015-01-22T09:30:00+01:00"),
 
    77         timeBegin: Date.parse('2015-01-22T09:30:00+01:00'),
 
    76         timeEnd: Date.parse("2015-01-22T18:30:00+01:00"),
 
    78         timeEnd: Date.parse('2015-01-22T18:30:00+01:00'),
 
    77         circleX: timeLineDay2.circleX,
 
    79         circleX: timeLineDay2.circleX,
 
    78         circleY: timeLineDay2.circleY,
 
    80         circleY: timeLineDay2.circleY,
 
    79         intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
 
    81         intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius,
 
    80         intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight,
 
    82         intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight,
 
    81         maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4,
 
    83         maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4,
 
    83         annotCategories: this.annotCategories,
 
    85         annotCategories: this.annotCategories,
 
    84         eventCode: eventCode,
 
    86         eventCode: eventCode,
 
    85         channel: channel,
 
    87         channel: channel,
 
    86         showClockGraphics:false
 
    88         showClockGraphics:false
 
    87     });
 
    89     });
 
    88     
    90 
    89     var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' });
 
    91     var currentTimeText = new PIXI.Text('-- : -- : --', { font: '18pt Gothic Standard', fill: '#646464' });
 
    90     currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
 
    92     currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2;
 
    91     currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
 
    93     currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2;
 
    92     this.container.addChild(currentTimeText);
 
    94     this.container.addChild(currentTimeText);
 
    93 
    95 
    94     var timeLineDay3 = new PIXI.Graphics();
 
    96     var timeLineDay3 = new PIXI.Graphics();
 
    95     timeLineDay3.lineStyle(1, 0x646464)
 
    97     timeLineDay3.lineStyle(1, 0x646464)
 
    96     	.drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
 
    98         .drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3)
 
    97     	.endFill()
 
    99         .endFill();
 
    98     this.container.addChild(timeLineDay3);
 
   100     this.container.addChild(timeLineDay3);
 
    99     
   101 
   100 	var doubleRollH = new DoubleRoll.DoubleRoll({
 
   102     /*jshint -W098 */
 
       
   103     var doubleRollH = new DoubleRoll.DoubleRoll({
 
   101         stageView : stageView,
 
   104         stageView : stageView,
 
   102     	logger: logger,
 
   105         logger: logger,
 
   103         ws: wsPianoroll,
 
   106         ws: wsPianoroll,
 
   104         yInit: (this.height - 200),
 
   107         yInit: (this.height - 200),
 
   105         sceneHeight: 200,
 
   108         sceneHeight: 200,
 
   106         pianorolls : [
 
   109         pianorolls : [
 
   107             {
 
   110             {
 
   111                 noteHeight: 10
 
   114                 noteHeight: 10
 
   112             },
 
   115             },
 
   113         ]
 
   116         ]
 
   114     });
 
   117     });
 
   115 
   118 
   116 	var doubleRollV = new DoubleRoll.DoubleRoll({
 
   119     var doubleRollV = new DoubleRoll.DoubleRoll({
 
   117         stageView : stageView,
 
   120         stageView : stageView,
 
   118     	logger: logger,
 
   121         logger: logger,
 
   119         ws: wsPianoroll,
 
   122         ws: wsPianoroll,
 
   120         orientation: 'vertical',
 
   123         orientation: 'vertical',
 
   121         sceneHeight: 768-200,
 
   124         sceneHeight: 768-200,
 
   122         pianorolls : [
 
   125         pianorolls : [
 
   123             {
 
   126             {
 
   127                 noteHeight: 5,
 
   130                 noteHeight: 5,
 
   128             },
 
   131             },
 
   129         ]
 
   132         ]
 
   130     });
 
   133     });
 
   131 
   134 
   132 	var annotsRoll = new AnnotsRoll.AnnotsRoll({
 
   135     var annotsRoll = new AnnotsRoll.AnnotsRoll({
 
   133     	stageView : stageView,
 
   136         stageView : stageView,
 
   134         logger: logger,
 
   137         logger: logger,
 
   135         ws: wsAnnot,
 
   138         ws: wsAnnot,
 
   136         parentContainer: doubleRollV.stage,
 
   139         parentContainer: doubleRollV.stage,
 
   137         xInit: 1024 - 200 - 200,
 
   140         xInit: 1024 - 200 - 200,
 
   138         yInit: 768-200,
 
   141         yInit: 768-200,
 
   142         framerate: doubleRollV.framerate,
 
   145         framerate: doubleRollV.framerate,
 
   143         pixelsPerSecond: Math.floor(1024 / 60),
 
   146         pixelsPerSecond: Math.floor(1024 / 60),
 
   144         annotColors: this.annotCategories
 
   147         annotColors: this.annotCategories
 
   145     });
 
   148     });
 
   146 
   149 
   147 	var limiters = new PIXI.Graphics()
 
   150     var limiters = new PIXI.Graphics()
 
   148 		.lineStyle(1, 0x646464)
 
   151         .lineStyle(1, 0x646464)
 
   149 		.moveTo(annotsRoll.container.x, annotsRoll.container.y)
 
   152         .moveTo(annotsRoll.container.x, annotsRoll.container.y)
 
   150 		.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
 
   153         .lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height)
 
   151 		.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
 
   154         .moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y)
 
   152 		.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
 
   155         .lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height)
 
   153 		.moveTo(0, this.height - 200)
 
   156         .moveTo(0, this.height - 200)
 
   154 		.lineTo(this.width, this.height - 200)
 
   157         .lineTo(this.width, this.height - 200)
 
   155 		.drawRect(0, 0, this.width -1, this.height -1)
 
   158         .drawRect(0, 0, this.width -1, this.height -1)
 
   156 		.beginFill(0xECECEC)
 
   159         .beginFill(0xECECEC)
 
   157 		.drawRect(1024 - 200, 0, 200, 768-200)
 
   160         .drawRect(1024 - 200, 0, 200, 768-200)
 
   158 		.endFill();
 
   161         .endFill();
 
   159 	this.container.addChild(limiters);
 
   162     this.container.addChild(limiters);
 
   160 
   163 
   161 	this.init = function(){
 
   164     this.init = function(){
 
   162 	};
 
   165     };
 
   163 
   166 
   164 	this.updateTime = function(){
 
   167     this.updateTime = function(){
 
   165         currentTimeText.setText(Utils.formatTime(Date.now()));
 
   168         currentTimeText.setText(Utils.formatTime(Date.now()));
 
   166     };
 
   169     };
 
   167 
   170 
   168     var refreshTimeInterval;
 
   171     var refreshTimeInterval;
 
   169     
   172 
   170 	this.start = function() {
 
   173     this.start = function() {
 
   171 		refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
 
   174         refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000);
 
   172     };
 
   175     };
 
   173 
   176 
   174     this.refresh = function() {
 
   177     this.refresh = function() {
 
   175     };
 
   178     };
 
   176 
   179 
   180     return this;
 
   183     return this;
 
   181 
   184 
   182 }
 
   185 }
 
   183 
   186 
   184 module.exports = {
 
   187 module.exports = {
 
   185 	AnnotsVizView: AnnotsVizView
 
   188     AnnotsVizView: AnnotsVizView
 
   186 };
 
   189 };
mons