37 this.height = opts.height; |
37 this.height = opts.height; |
38 this.intervalHeight = opts.intervalHeight; |
38 this.intervalHeight = opts.intervalHeight; |
39 this.intervalWidth = opts.intervalWidth; |
39 this.intervalWidth = opts.intervalWidth; |
40 this.maxCellHeight = opts.maxCellHeight; |
40 this.maxCellHeight = opts.maxCellHeight; |
41 this.annotCategories = opts.annotCategories; |
41 this.annotCategories = opts.annotCategories; |
42 |
42 |
43 this.circleX = opts.circleX || (this.width/2); |
43 this.circleX = opts.circleX || (this.width/2); |
44 this.circleY = opts.circleY || (this.height/2); |
44 this.circleY = opts.circleY || (this.height/2); |
45 this.radius = opts.radius; |
45 this.radius = opts.radius; |
46 this.perimeter = 2*Math.PI* this.radius; |
46 this.perimeter = 2*Math.PI* this.radius; |
47 this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); |
47 this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); |
53 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
53 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
54 this.cells[i] = []; |
54 this.cells[i] = []; |
55 this.cells[i].i = i; |
55 this.cells[i].i = i; |
56 this.cells[i].totalAnnots = 0; |
56 this.cells[i].totalAnnots = 0; |
57 this.cells[i].categories = {}; |
57 this.cells[i].categories = {}; |
58 |
|
59 for (var category in this.annotCategories[0].colors){ |
|
60 this.cells[i].categories[category] = { |
|
61 "count": 0, |
|
62 "color": this.annotCategories[0].colors[category] |
|
63 }; |
|
64 } |
|
65 } |
58 } |
66 |
59 |
67 var ws = opts.ws; |
60 var ws = opts.ws; |
68 var stageView = opts.stageView; |
61 var stageView = opts.stageView; |
69 |
62 |
89 |
82 |
90 stageView.registerComponent(this); |
83 stageView.registerComponent(this); |
91 |
84 |
92 //Add Annotation to the TimeLine |
85 //Add Annotation to the TimeLine |
93 this.addAnnot = function(data){ |
86 this.addAnnot = function(data){ |
94 if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){ |
87 |
95 var annotCode = data.content.category.code; |
|
96 } else { |
|
97 var annotCode = this.annotCategories[0].order[this.annotCategories[0].order.length -1]; |
|
98 } |
|
99 var annotTime = Date.parse(data.ts); |
|
100 |
|
101 if (this.timeEnd > Date.parse(data.ts)){ |
88 if (this.timeEnd > Date.parse(data.ts)){ |
102 console.log(this.timeBegin); |
|
103 console.log(data.ts); |
|
104 console.log(Date.parse(data.ts)); |
|
105 console.log(Date.now()); |
|
106 var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration)); |
89 var i = Math.floor(((Date.parse(data.ts) + 3600*1000) - this.timeBegin)/(1000*this.intervalDuration)); |
107 console.log(i); |
90 |
|
91 if (typeof(this.cells[i].graphics) === 'undefined'){ |
|
92 this.initCell(this.cells[i]); |
|
93 } |
|
94 |
|
95 if (typeof(this.annotCategories[0].colors[data.content.category.code]) !== 'undefined'){ |
|
96 var annotCode = data.content.category.code; |
|
97 } else { |
|
98 var annotCode = 'default'; |
|
99 } |
|
100 |
108 this.cells[i].categories[annotCode].count += 1; |
101 this.cells[i].categories[annotCode].count += 1; |
109 this.cells[i].totalAnnots +=1; |
102 this.cells[i].totalAnnots +=1; |
110 this.redrawCell(this.cells[i], i); |
103 this.redrawCell(this.cells[i], i); |
111 } |
104 } |
112 }; |
105 }; |
113 |
|
114 this.initCell = function(cell){ |
|
115 cell.graphics = new PIXI.Graphics(); |
|
116 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
|
117 cell.graphics.position.y = this.circleY - this.radius * Math.cos(cell.i*(360/totalIndex)*(Math.PI/180)); |
|
118 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
|
119 this.container.addChild(cell.graphics); |
|
120 } |
|
121 |
106 |
122 this.initTimeTexts = function() { |
107 this.initTimeTexts = function() { |
123 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
108 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
124 tBeg.x = this.circleX + 15; |
109 tBeg.x = this.circleX + 15; |
125 tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
110 tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
148 this.container.addChild(t45); |
133 this.container.addChild(t45); |
149 } |
134 } |
150 |
135 |
151 //Draw the cellule |
136 //Draw the cellule |
152 this.redrawCell = function(cell){ |
137 this.redrawCell = function(cell){ |
153 |
138 |
154 if (typeof(cell.graphics) === 'undefined'){ |
|
155 this.initCell(cell); |
|
156 } else { |
|
157 cell.graphics.clear(); |
|
158 } |
|
159 |
|
160 var y = 0; |
139 var y = 0; |
161 |
140 |
162 //Check if total height is higher than Max Cell Height |
141 //Check if total height is higher than Max Cell Height |
163 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
142 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
164 var heightStep = this.maxCellHeight/cell.totalAnnots; |
143 var heightStep = this.maxCellHeight/cell.totalAnnots; |
173 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
152 .drawRect(0, y, this.intervalWidth-1, -cell.categories[currentCode].count * heightStep) |
174 .endFill(); |
153 .endFill(); |
175 y -= cell.categories[currentCode].count*heightStep; |
154 y -= cell.categories[currentCode].count*heightStep; |
176 } |
155 } |
177 } |
156 } |
|
157 |
|
158 this.initCell = function(cell){ |
|
159 cell.graphics = new PIXI.Graphics(); |
|
160 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)); |
|
162 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
|
163 this.container.addChild(cell.graphics); |
|
164 |
|
165 for (var category in this.annotCategories[0].colors){ |
|
166 cell.categories[category] = { |
|
167 "count": 0, |
|
168 "color": this.annotCategories[0].colors[category] |
|
169 }; |
|
170 } |
|
171 cell.categories['default'] = { |
|
172 "count": 0, |
|
173 "color": this.annotCategories[0].defaultColor |
|
174 } |
|
175 } |
178 |
176 |
179 this.init = function() { |
177 this.init = function() { |
180 ws.message(function(data) { |
178 ws.message(function(data) { |
181 _this.addAnnot(data); |
179 _this.addAnnot(data); |
182 }); |
180 }); |