author | rougeronj |
Sat, 18 Apr 2015 09:37:57 +0200 | |
changeset 167 | 2b99fed0285e |
parent 162 | 44320144951a |
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 |
|
144 | 6 |
* |
98 | 7 |
*/ |
144 | 8 |
/*jshint unused: false */ |
103 | 9 |
'use strict'; |
10 |
||
11 |
var PIXI = require('pixi'); |
|
12 |
var _ = require('lodash'); |
|
13 |
var DoubleRoll = require('./doubleroll.js'); |
|
14 |
var AnnotsTimeLine = require('./annotstimeline.js'); |
|
15 |
var AnnotsRoll = require('./annotsroll.js'); |
|
121
df6b39f962bc
Add getAnnotCategories to utils and propagate the modification to annotsvizview and annotstimeline
rougeronj
parents:
113
diff
changeset
|
16 |
var Utils = require('./utils.js'); |
103 | 17 |
|
108 | 18 |
var defaultOptions = { |
103 | 19 |
xInit: 0, |
20 |
yInit: 0, |
|
104 | 21 |
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
|
22 |
height: 768 |
103 | 23 |
}; |
24 |
||
25 |
function AnnotsVizView(options){ |
|
139 | 26 |
var _this = this; |
103 | 27 |
var opts = _(options).defaults(defaultOptions).value(); |
108 | 28 |
|
103 | 29 |
this.container = new PIXI.DisplayObjectContainer(); |
30 |
this.container.x = opts.xInit; |
|
31 |
this.container.y = opts.yInit; |
|
139 | 32 |
this.width = opts.width; |
33 |
this.height= opts.height; |
|
113 | 34 |
this.timeBegin = opts.timeBegin; |
35 |
this.timeEnd = opts.timeEnd; |
|
141 | 36 |
|
128
9f2334598088
add archive variable to desactivate the socket listening for the static timeLines
rougeronj
parents:
126
diff
changeset
|
37 |
this.annotCategories = []; |
141 | 38 |
this.annotCategoriesDay2 = []; |
136 | 39 |
this.annotCategoriesDay1 = []; |
139 | 40 |
|
41 |
var wsPianoroll = opts.wsPianoroll; |
|
42 |
var wsAnnot = opts.wsAnnot; |
|
43 |
var stageView = opts.stageView; |
|
128
9f2334598088
add archive variable to desactivate the socket listening for the static timeLines
rougeronj
parents:
126
diff
changeset
|
44 |
var channel = opts.channel; |
133 | 45 |
var serverUrl = opts.serverUrl; |
144 | 46 |
|
141 | 47 |
var eventCode = opts.eventCode; |
48 |
var eventCodeSessionDay2 = opts.eventCodeSessionDay2; |
|
162 | 49 |
var eventCodeSessionDay1 = opts.eventCodeSessionDay1; |
144 | 50 |
var logger = opts.logger; |
139 | 51 |
|
162 | 52 |
Utils.getAnnotCategories(opts.urlCategories + eventCode, this.annotCategories); |
141 | 53 |
Utils.getAnnotCategories(opts.urlCategories + eventCodeSessionDay2, this.annotCategoriesDay2); |
136 | 54 |
Utils.getAnnotCategories(opts.urlCategories + eventCodeSessionDay1, this.annotCategoriesDay1); |
131 | 55 |
|
139 | 56 |
stageView.registerComponent(this); |
108 | 57 |
|
141 | 58 |
var currentDay = new AnnotsTimeLine.AnnotsTimeLine({ |
162 | 59 |
stageView : stageView, |
103 | 60 |
logger: logger, |
131 | 61 |
ws: wsAnnot, |
103 | 62 |
xInit: 0, |
63 |
yInit: 0, |
|
104 | 64 |
width: 1024 - 200 - 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
65 |
height: 768-200, |
113 | 66 |
timeBegin: this.timeBegin, |
67 |
timeEnd: this.timeEnd, |
|
103 | 68 |
intervalWidth: 6, |
69 |
intervalHeight: 10, |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
70 |
maxCellHeight: 70, |
104 | 71 |
radius: 200, |
128
9f2334598088
add archive variable to desactivate the socket listening for the static timeLines
rougeronj
parents:
126
diff
changeset
|
72 |
eventCode: eventCode, |
9f2334598088
add archive variable to desactivate the socket listening for the static timeLines
rougeronj
parents:
126
diff
changeset
|
73 |
channel: channel, |
133 | 74 |
serverUrl: serverUrl, |
108 | 75 |
annotCategories: this.annotCategories |
103 | 76 |
}); |
144 | 77 |
|
162 | 78 |
//Archive day 2 |
141 | 79 |
var timeLineDay2 = new AnnotsTimeLine.AnnotsTimeLine({ |
162 | 80 |
stageView : stageView, |
141 | 81 |
xInit: 0, |
82 |
yInit: 0, |
|
83 |
width: 1024 - 200 - 200, |
|
84 |
height: 768-200, |
|
167 | 85 |
timeBegin: Date.parse('2015-04-17T14:00:00+02:00'), |
86 |
timeEnd: Date.parse('2015-04-17T21:00:00+02:00'), |
|
141 | 87 |
circleX: currentDay.circleX, |
88 |
circleY: currentDay.circleY, |
|
89 |
intervalWidth: (currentDay.radius*2/3)* currentDay.intervalWidth / currentDay.radius, |
|
90 |
intervalHeight: (currentDay.intervalHeight * (currentDay.radius - currentDay.radius*2/3))/ currentDay.maxCellHeight, |
|
91 |
maxCellHeight: (currentDay.radius - currentDay.radius*2/3)/2, |
|
92 |
radius: currentDay.radius*2/3, |
|
93 |
annotCategories: this.annotCategoriesDay2, |
|
94 |
eventCode: eventCodeSessionDay2, |
|
95 |
channel: channel, |
|
96 |
serverUrl: serverUrl, |
|
97 |
showClockGraphics:false, |
|
98 |
archive: true |
|
99 |
}); |
|
144 | 100 |
|
162 | 101 |
//Archive day 1 |
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
|
102 |
var timeLineDay1 = new AnnotsTimeLine.AnnotsTimeLine({ |
162 | 103 |
stageView : 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
|
104 |
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
|
105 |
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
|
106 |
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
|
107 |
height: 768-200, |
161 | 108 |
timeBegin: Date.parse('2015-04-16T14:00:00+02:00'), |
109 |
timeEnd: Date.parse('2015-04-16T21:00:00+02:00'), |
|
141 | 110 |
circleX: currentDay.circleX, |
111 |
circleY: currentDay.circleY, |
|
112 |
intervalWidth: (currentDay.radius*2/3)* currentDay.intervalWidth / currentDay.radius, |
|
113 |
intervalHeight: (currentDay.intervalHeight * (currentDay.radius - currentDay.radius/3))/ currentDay.maxCellHeight, |
|
114 |
maxCellHeight: (currentDay.radius*2/3 - currentDay.radius/3)/4, |
|
115 |
radius: currentDay.radius/3, |
|
136 | 116 |
annotCategories: this.annotCategoriesDay1, |
133 | 117 |
eventCode: eventCodeSessionDay1, |
128
9f2334598088
add archive variable to desactivate the socket listening for the static timeLines
rougeronj
parents:
126
diff
changeset
|
118 |
channel: channel, |
133 | 119 |
serverUrl: serverUrl, |
141 | 120 |
showClockGraphics:false, |
121 |
archive: true, |
|
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
|
122 |
}); |
139 | 123 |
|
144 | 124 |
var currentTimeText = new PIXI.Text('-- : -- : --', { font: '18pt Gothic Standard', fill: '#646464' }); |
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
|
125 |
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
|
126 |
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
|
127 |
this.container.addChild(currentTimeText); |
108 | 128 |
|
144 | 129 |
|
139 | 130 |
var doubleRollH = new DoubleRoll.DoubleRoll({ |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
131 |
stageView : stageView, |
139 | 132 |
logger: logger, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
133 |
ws: wsPianoroll, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
134 |
yInit: (this.height - 200), |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
135 |
sceneHeight: 200, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
136 |
pianorolls : [ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
137 |
{ |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
138 |
height: 200, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
139 |
timeWidth: 10, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
140 |
lineInterval: 5000, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
141 |
noteHeight: 10 |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
142 |
}, |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
143 |
] |
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
144 |
}); |
108 | 145 |
|
139 | 146 |
var doubleRollV = new DoubleRoll.DoubleRoll({ |
103 | 147 |
stageView : stageView, |
139 | 148 |
logger: logger, |
103 | 149 |
ws: wsPianoroll, |
150 |
orientation: 'vertical', |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
151 |
sceneHeight: 768-200, |
103 | 152 |
pianorolls : [ |
153 |
{ |
|
104 | 154 |
height: 200, |
103 | 155 |
timeWidth: 60, |
156 |
lineInterval: 5000, |
|
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
157 |
noteHeight: 5, |
103 | 158 |
}, |
159 |
] |
|
160 |
}); |
|
139 | 161 |
|
162 |
var annotsRoll = new AnnotsRoll.AnnotsRoll({ |
|
163 |
stageView : stageView, |
|
103 | 164 |
logger: logger, |
165 |
ws: wsAnnot, |
|
166 |
parentContainer: doubleRollV.stage, |
|
104 | 167 |
xInit: 1024 - 200 - 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
168 |
yInit: 768-200, |
104 | 169 |
width: 200 + 200, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
170 |
height: 768-200, |
104 | 171 |
widthRoll: 200, |
103 | 172 |
framerate: doubleRollV.framerate, |
105
25ac8802c189
Improve interface + Add horizontal pianoroll to annotsvizview
rougeronj
parents:
104
diff
changeset
|
173 |
pixelsPerSecond: Math.floor(1024 / 60), |
108 | 174 |
annotColors: this.annotCategories |
103 | 175 |
}); |
108 | 176 |
|
139 | 177 |
var limiters = new PIXI.Graphics() |
178 |
.lineStyle(1, 0x646464) |
|
179 |
.moveTo(annotsRoll.container.x, annotsRoll.container.y) |
|
180 |
.lineTo(annotsRoll.container.x, annotsRoll.container.y - annotsRoll.height) |
|
181 |
.moveTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y) |
|
182 |
.lineTo(annotsRoll.container.x + annotsRoll.widthRoll, annotsRoll.container.y - annotsRoll.height) |
|
183 |
.moveTo(0, this.height - 200) |
|
184 |
.lineTo(this.width, this.height - 200) |
|
185 |
.drawRect(0, 0, this.width -1, this.height -1) |
|
186 |
.beginFill(0xECECEC) |
|
187 |
.drawRect(1024 - 200, 0, 200, 768-200) |
|
188 |
.endFill(); |
|
189 |
this.container.addChild(limiters); |
|
108 | 190 |
|
139 | 191 |
this.init = function(){ |
192 |
}; |
|
108 | 193 |
|
139 | 194 |
this.updateTime = function(){ |
129
7181e1f28eb0
Merge with f9dd7bfed9976461c79bf521ed01bf4caaf4fbcf
rougeronj
parents:
128
diff
changeset
|
195 |
currentTimeText.setText(Utils.formatTime(Date.now())); |
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
|
196 |
}; |
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
|
197 |
|
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
|
198 |
var refreshTimeInterval; |
139 | 199 |
|
200 |
this.start = function() { |
|
201 |
refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); |
|
103 | 202 |
}; |
108 | 203 |
|
103 | 204 |
this.refresh = function() { |
205 |
}; |
|
108 | 206 |
|
103 | 207 |
this.stop = function(){ |
208 |
}; |
|
108 | 209 |
|
103 | 210 |
return this; |
108 | 211 |
|
103 | 212 |
} |
213 |
||
214 |
module.exports = { |
|
139 | 215 |
AnnotsVizView: AnnotsVizView |
108 | 216 |
}; |