83 stageView.registerComponent(this); |
83 stageView.registerComponent(this); |
84 |
84 |
85 //Add Annotation to the TimeLine |
85 //Add Annotation to the TimeLine |
86 this.addAnnot = function(data){ |
86 this.addAnnot = function(data){ |
87 |
87 |
|
88 var ts = Date.parse(data.ts); |
|
89 var colorsDef; |
|
90 _(this.annotCategories).eachRight(function(cdef) { |
|
91 if(cdef.ts < ts) { |
|
92 colorsDef = cdef; |
|
93 return false; |
|
94 } |
|
95 }); |
|
96 |
88 if (this.timeEnd > Date.parse(data.ts)){ |
97 if (this.timeEnd > Date.parse(data.ts)){ |
89 var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration)); |
98 var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration)); |
90 |
99 |
91 if (typeof(this.cells[i].graphics) === 'undefined'){ |
100 if (typeof(this.cells[i].graphics) === 'undefined'){ |
92 this.initCell(this.cells[i]); |
101 this.initCell(this.cells[i], colorsDef); |
93 } |
102 } |
94 |
103 |
95 if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){ |
104 if (typeof(colorsDef.colors[data.content.category.code]) !== 'undefined'){ |
96 var annotCode = data.content.category.code; |
105 var annotCode = data.content.category.code; |
97 } else { |
106 } else { |
98 var annotCode = 'default'; |
107 var annotCode = 'default'; |
99 } |
108 } |
100 |
109 |
101 this.cells[i].categories[annotCode].count += 1; |
110 this.cells[i].categories[annotCode].count += 1; |
102 this.cells[i].totalAnnots +=1; |
111 this.cells[i].totalAnnots +=1; |
103 this.redrawCell(this.cells[i], i); |
112 this.redrawCell(this.cells[i], colorsDef); |
104 } |
113 } |
105 }; |
114 }; |
106 |
115 |
107 this.initTimeTexts = function() { |
116 this.initTimeTexts = function() { |
108 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
117 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
132 t45.rotation = -Math.PI/2; |
141 t45.rotation = -Math.PI/2; |
133 this.container.addChild(t45); |
142 this.container.addChild(t45); |
134 } |
143 } |
135 |
144 |
136 //Draw the cellule |
145 //Draw the cellule |
137 this.redrawCell = function(cell){ |
146 this.redrawCell = function(cell, colorsDef){ |
138 |
147 |
139 var y = 0; |
148 var y = 0; |
140 |
149 |
141 //Check if total height is higher than Max Cell Height |
150 //Check if total height is higher than Max Cell Height |
142 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
151 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
144 } else { |
153 } else { |
145 var heightStep = this.intervalHeight; |
154 var heightStep = this.intervalHeight; |
146 } |
155 } |
147 |
156 |
148 //Draw the rect depending on the height step calculated |
157 //Draw the rect depending on the height step calculated |
149 for (var i=0; i< this.annotCategories[0].order.length; i++){ |
158 for (var i=0; i< colorsDef.order.length; i++){ |
150 var currentCode = this.annotCategories[0].order[i]; |
159 var currentCode = colorsDef.order[i]; |
151 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
160 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
152 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
161 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
153 .endFill(); |
162 .endFill(); |
154 y -= cell.categories[currentCode].count*heightStep; |
163 y -= cell.categories[currentCode].count*heightStep; |
155 } |
164 } |
156 } |
165 } |
157 |
166 |
158 this.initCell = function(cell){ |
167 this.initCell = function(cell, colorsDef){ |
159 cell.graphics = new PIXI.Graphics(); |
168 cell.graphics = new PIXI.Graphics(); |
160 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
169 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
161 cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
170 cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
162 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
171 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
163 this.container.addChild(cell.graphics); |
172 this.container.addChild(cell.graphics); |
164 |
173 |
165 for (var category in this.annotCategories[0].colors){ |
174 for (var category in colorsDef.colors){ |
166 cell.categories[category] = { |
175 cell.categories[category] = { |
167 "count": 0, |
176 "count": 0, |
168 "color": this.annotCategories[0].colors[category] |
177 "color": colorsDef.colors[category] |
169 }; |
178 }; |
170 } |
179 } |
171 cell.categories['default'] = { |
180 cell.categories['default'] = { |
172 "count": 0, |
181 "count": 0, |
173 "color": this.annotCategories[0].defaultColor |
182 "color": colorsDef.defaultColor |
174 } |
183 } |
175 } |
184 } |
176 |
185 |
177 this.init = function() { |
186 this.init = function() { |
178 ws.message(function(data) { |
187 ws.message(function(data) { |