author | rougeronj |
Fri, 23 Jan 2015 00:10:09 +0100 | |
changeset 127 | 0386fb9efe27 |
parent 126 | 13d9a532a0a7 |
child 128 | 9f2334598088 |
permissions | -rw-r--r-- |
98 | 1 |
/** |
2 |
* js/annotsvizview.js |
|
3 |
* |
|
4 |
* This is the starting point for your application. |
|
5 |
* Take a look at http://browserify.org/ for more info |
|
6 |
*/ |
|
103 | 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'); |
|
121
df6b39f962bc
Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents:
113
diff
changeset
|
15 |
var Utils = require('./utils.js'); |
103 | 16 |
|
108 | 17 |
var defaultOptions = { |
103 | 18 |
xInit: 0, |
19 |
yInit: 0, |
|
104 | 20 |
width: 1024, |
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
21 |
height: 768 |
103 | 22 |
}; |
23 |
||
24 |
function AnnotsVizView(options){ |
|
25 |
var _this = this; |
|
26 |
var opts = _(options).defaults(defaultOptions).value(); |
|
108 | 27 |
|
103 | 28 |
this.container = new PIXI.DisplayObjectContainer(); |
29 |
this.container.x = opts.xInit; |
|
30 |
this.container.y = opts.yInit; |
|
31 |
this.width = opts.width; |
|
32 |
this.height= opts.height; |
|
113 | 33 |
this.timeBegin = opts.timeBegin; |
34 |
this.timeEnd = opts.timeEnd; |
|
121
df6b39f962bc
Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents:
113
diff
changeset
|
35 |
|
df6b39f962bc
Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents:
113
diff
changeset
|
36 |
Utils.getAnnotCategories(opts.urlCategories, this.annotCategories); |
df6b39f962bc
Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents:
113
diff
changeset
|
37 |
|
103 | 38 |
var wsPianoroll = opts.wsPianoroll; |
39 |
var wsAnnot = opts.wsAnnot; |
|
40 |
var stageView = opts.stageView; |
|
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
41 |
var currentTime = Date.now() + 3600*1000; |
108 | 42 |
|
103 | 43 |
stageView.registerComponent(this); |
108 | 44 |
|
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
45 |
var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({ |
103 | 46 |
stageView : stageView, |
47 |
logger: logger, |
|
48 |
ws: new annotviz.WsWrapper(wsUriAnnotation, logger), |
|
49 |
xInit: 0, |
|
50 |
yInit: 0, |
|
104 | 51 |
width: 1024 - 200 - 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
52 |
height: 768-200, |
113 | 53 |
timeBegin: this.timeBegin, |
54 |
timeEnd: this.timeEnd, |
|
103 | 55 |
intervalWidth: 6, |
56 |
intervalHeight: 10, |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
57 |
maxCellHeight: 70, |
104 | 58 |
radius: 200, |
108 | 59 |
annotCategories: this.annotCategories |
103 | 60 |
}); |
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
61 |
|
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
62 |
|
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
63 |
var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({ |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
64 |
stageView : stageView, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
65 |
logger: logger, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
66 |
ws: new annotviz.WsWrapper(wsUriAnnotation, logger), |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
67 |
xInit: 0, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
68 |
yInit: 0, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
69 |
width: 1024 - 200 - 200, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
70 |
height: 768-200, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
71 |
timeBegin: this.timeBegin, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
72 |
timeEnd: this.timeEnd, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
73 |
circleX: timeLineDay2.circleX, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
74 |
circleY: timeLineDay2.circleY, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
75 |
intervalWidth: (timeLineDay2.radius*2/3)* timeLineDay2.intervalWidth / timeLineDay2.radius, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
76 |
intervalHeight: (timeLineDay2.intervalHeight * (timeLineDay2.radius - timeLineDay2.radius*2/3))/ timeLineDay2.maxCellHeight, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
77 |
maxCellHeight: (timeLineDay2.radius - timeLineDay2.radius*2/3)/4, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
78 |
radius: timeLineDay2.radius*2/3, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
79 |
annotCategories: this.annotCategories, |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
80 |
showClockGraphics:false |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
81 |
}); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
82 |
|
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
83 |
var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' }); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
84 |
currentTimeText.x = timeLineDay2.circleX - currentTimeText.width/2; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
85 |
currentTimeText.y = timeLineDay2.circleY - currentTimeText.height/2; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
86 |
this.container.addChild(currentTimeText); |
108 | 87 |
|
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
88 |
var timeLineDay3 = new PIXI.Graphics(); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
89 |
timeLineDay3.lineStyle(1, 0x646464) |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
90 |
.drawCircle(timeLineDay2.circleX, timeLineDay2.circleY, timeLineDay2.radius/3) |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
91 |
.endFill() |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
92 |
this.container.addChild(timeLineDay3); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
93 |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
94 |
var doubleRollH = new DoubleRoll.DoubleRoll({ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
95 |
stageView : stageView, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
96 |
logger: logger, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
97 |
ws: wsPianoroll, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
98 |
yInit: (this.height - 200), |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
99 |
sceneHeight: 200, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
100 |
pianorolls : [ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
101 |
{ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
102 |
height: 200, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
103 |
timeWidth: 10, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
104 |
lineInterval: 5000, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
105 |
noteHeight: 10 |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
106 |
}, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
107 |
] |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
108 |
}); |
108 | 109 |
|
103 | 110 |
var doubleRollV = new DoubleRoll.DoubleRoll({ |
111 |
stageView : stageView, |
|
112 |
logger: logger, |
|
113 |
ws: wsPianoroll, |
|
114 |
orientation: 'vertical', |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
115 |
sceneHeight: 768-200, |
103 | 116 |
pianorolls : [ |
117 |
{ |
|
104 | 118 |
height: 200, |
103 | 119 |
timeWidth: 60, |
120 |
lineInterval: 5000, |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
121 |
noteHeight: 5, |
103 | 122 |
}, |
123 |
] |
|
124 |
}); |
|
108 | 125 |
|
103 | 126 |
var annotsRoll = new AnnotsRoll.AnnotsRoll({ |
127 |
stageView : stageView, |
|
128 |
logger: logger, |
|
129 |
ws: wsAnnot, |
|
130 |
parentContainer: doubleRollV.stage, |
|
104 | 131 |
xInit: 1024 - 200 - 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
132 |
yInit: 768-200, |
104 | 133 |
width: 200 + 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
134 |
height: 768-200, |
104 | 135 |
widthRoll: 200, |
103 | 136 |
framerate: doubleRollV.framerate, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
137 |
pixelsPerSecond: Math.floor(1024 / 60), |
108 | 138 |
annotColors: this.annotCategories |
103 | 139 |
}); |
108 | 140 |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
141 |
var limiters = new PIXI.Graphics() |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
142 |
.lineStyle(1, 0x646464) |
103 | 143 |
.moveTo(annotsRoll.container.x, annotsRoll.container.y) |
144 |
.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height) |
|
145 |
.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y) |
|
146 |
.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height) |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
147 |
.moveTo(0, this.height - 200) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
148 |
.lineTo(this.width, this.height - 200) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
149 |
.drawRect(0, 0, this.width -1, this.height -1) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
150 |
.beginFill(0xECECEC) |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
151 |
.drawRect(1024 - 200, 0, 200, 768-200) |
103 | 152 |
.endFill(); |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
153 |
this.container.addChild(limiters); |
108 | 154 |
|
103 | 155 |
// var doubleRollV = new DoubleRoll.DoubleRoll({}); |
108 | 156 |
|
103 | 157 |
this.init = function(){ |
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
158 |
}; |
108 | 159 |
|
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
160 |
this.updateTime = function(){ |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
161 |
currentTime = Date.now() + 3600*1000; |
108 | 162 |
|
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
163 |
var nbSec = currentTime / 1000; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
164 |
var hours = Math.floor( nbSec / 3600 ) % 24; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
165 |
var minutes = Math.floor( nbSec / 60 ) % 60; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
166 |
var seconds = Math.floor(nbSec % 60); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
167 |
var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
168 |
|
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
169 |
currentTimeText.setText(timeStr); |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
170 |
}; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
171 |
|
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
172 |
var refreshTimeInterval; |
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
173 |
|
103 | 174 |
this.start = function() { |
126
13d9a532a0a7
Add timeline of the 2nd day - take out from the clock annotstimeline and put it in annotsvizview - make the clocks graphics optional through showClockGraphics
rougeronj
parents:
121
diff
changeset
|
175 |
refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); |
103 | 176 |
}; |
108 | 177 |
|
103 | 178 |
this.refresh = function() { |
179 |
}; |
|
108 | 180 |
|
103 | 181 |
this.stop = function(){ |
182 |
}; |
|
108 | 183 |
|
103 | 184 |
return this; |
108 | 185 |
|
103 | 186 |
} |
187 |
||
188 |
module.exports = { |
|
189 |
AnnotsVizView: AnnotsVizView |
|
108 | 190 |
}; |