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 |
|
8 'use strict'; |
|
9 |
|
10 var PIXI = require('pixi'); |
|
11 var _ = require('lodash'); |
|
12 var DoubleRoll = require('./doubleroll.js'); |
|
13 var AnnotsTimeLine = require('./annotstimeline.js'); |
|
14 var AnnotsRoll = require('./annotsroll.js'); |
|
15 |
|
16 var defaultOptions = { |
|
17 xInit: 0, |
|
18 yInit: 0, |
|
19 width: 1080, |
|
20 height: 1920, |
|
21 }; |
|
22 |
|
23 function AnnotsVizView(options){ |
|
24 var _this = this; |
|
25 var opts = _(options).defaults(defaultOptions).value(); |
|
26 |
|
27 this.container = new PIXI.DisplayObjectContainer(); |
|
28 this.container.x = opts.xInit; |
|
29 this.container.y = opts.yInit; |
|
30 this.width = opts.width; |
|
31 this.height= opts.height; |
|
32 |
|
33 var wsPianoroll = opts.wsPianoroll; |
|
34 var wsAnnot = opts.wsAnnot; |
|
35 var stageView = opts.stageView; |
|
36 |
|
37 stageView.registerComponent(this); |
|
38 |
|
39 var timeLine = new AnnotsTimeLine.AnnotsTimeLine({ |
|
40 stageView : stageView, |
|
41 logger: logger, |
|
42 ws: new annotviz.WsWrapper(wsUriAnnotation, logger), |
|
43 xInit: 0, |
|
44 yInit: 0, |
|
45 width: 1920 - 435 - 300, |
|
46 height: 1080, |
|
47 timeBegin: Date.now(), |
|
48 timeEnd: Date.now() + 300000, |
|
49 intervalWidth: 6, |
|
50 intervalHeight: 10, |
|
51 maxCellHeight: 100, |
|
52 radius: 400, |
|
53 circleX:500, |
|
54 circleY:500, |
|
55 annotCategories: [{ |
|
56 ts: 0, |
|
57 colors: { |
|
58 'ntm': '#CDC83F', |
|
59 'iam': '#CDC83F', |
|
60 'hip': '#CDC83F', |
|
61 'hop': '#CDC83F', |
|
62 'rock': '#DE8B53', |
|
63 'rap': '#DE8B53', |
|
64 'classic': '#DE8B53', |
|
65 'drums': '#C5A3CA', |
|
66 'guitar': '#C5A3CA', |
|
67 'bass': '#79BB92', |
|
68 'default': '#808080' |
|
69 }, |
|
70 order: ['ntm', 'iam', 'hip', 'hop', 'rock', 'rap', 'classic', 'drums', 'guitar', 'bass', 'default'] |
|
71 }] |
|
72 }); |
|
73 |
|
74 |
|
75 |
|
76 var doubleRollV = new DoubleRoll.DoubleRoll({ |
|
77 stageView : stageView, |
|
78 logger: logger, |
|
79 ws: wsPianoroll, |
|
80 orientation: 'vertical', |
|
81 sceneHeight: 1080, |
|
82 pianorolls : [ |
|
83 { |
|
84 height: 300, |
|
85 timeWidth: 60, |
|
86 lineInterval: 5000, |
|
87 noteHeight: undefined |
|
88 }, |
|
89 ] |
|
90 }); |
|
91 |
|
92 var annotsRoll = new AnnotsRoll.AnnotsRoll({ |
|
93 stageView : stageView, |
|
94 logger: logger, |
|
95 ws: wsAnnot, |
|
96 parentContainer: doubleRollV.stage, |
|
97 xInit: 1920 - 300 - 300, |
|
98 yInit: 1080, |
|
99 width: 300 + 300, |
|
100 height: 1080, |
|
101 widthRoll: 300, |
|
102 framerate: doubleRollV.framerate, |
|
103 pixelsPerSecond: Math.floor(1920 / 60), |
|
104 annotColors: [{ |
|
105 ts: 0, |
|
106 colors: { |
|
107 'ntm': '#CDC83F', |
|
108 'iam': '#CDC83F', |
|
109 'hip': '#CDC83F', |
|
110 'hop': '#CDC83F', |
|
111 'rock': '#DE8B53', |
|
112 'rap': '#DE8B53', |
|
113 'classic': '#DE8B53', |
|
114 'drums': '#C5A3CA', |
|
115 'guitar': '#C5A3CA', |
|
116 'bass': '#79BB92', |
|
117 'default': '#808080' |
|
118 } |
|
119 }] |
|
120 }); |
|
121 |
|
122 var limiter1 = new PIXI.Graphics() |
|
123 .lineStyle(1, 0x000000) |
|
124 .moveTo(annotsRoll.container.x, annotsRoll.container.y) |
|
125 .lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height) |
|
126 .endFill(); |
|
127 this.container.addChild(limiter1); |
|
128 |
|
129 var limiter2 = new PIXI.Graphics() |
|
130 .lineStyle(1, 0x000000) |
|
131 .moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y) |
|
132 .lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height) |
|
133 .endFill(); |
|
134 this.container.addChild(limiter2); |
|
135 |
|
136 |
|
137 // var doubleRollV = new DoubleRoll.DoubleRoll({}); |
|
138 |
|
139 this.init = function(){ |
|
140 |
|
141 } |
|
142 |
|
143 this.start = function() { |
|
144 }; |
|
145 |
|
146 this.refresh = function() { |
|
147 }; |
|
148 |
|
149 this.stop = function(){ |
|
150 }; |
|
151 |
|
152 return this; |
|
153 |
|
154 } |
|
155 |
|
156 module.exports = { |
|
157 AnnotsVizView: AnnotsVizView |
|
158 }; |