35 this.width = opts.width; |
38 this.width = opts.width; |
36 this.height = opts.height; |
39 this.height = opts.height; |
37 this.intervalHeight = opts.intervalHeight; |
40 this.intervalHeight = opts.intervalHeight; |
38 this.intervalWidth = opts.intervalWidth; |
41 this.intervalWidth = opts.intervalWidth; |
39 this.maxCellHeight = opts.maxCellHeight; |
42 this.maxCellHeight = opts.maxCellHeight; |
40 this.intervalDuration = (this.intervalWidth * this.duration / this.width); |
|
41 this.annotCategories = opts.annotCategories; |
43 this.annotCategories = opts.annotCategories; |
42 |
44 |
|
45 this.circleX = opts.circleX; |
|
46 this.circleY = opts.circleY; |
|
47 this.radius = opts.radius; |
|
48 this.perimeter = 2*Math.PI* this.radius; |
|
49 this.intervalDuration = (this.intervalWidth * this.duration / this.perimeter); |
|
50 |
|
51 var totalIndex = Math.floor(this.perimeter/this.intervalWidth); |
|
52 |
43 this.cells = [] |
53 this.cells = [] |
44 for (var i=0; i<(this.width/this.intervalWidth) ; i++){ |
54 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
45 this.cells[i] = []; |
55 this.cells[i] = []; |
46 this.cells[i].x = i * this.intervalWidth; |
|
47 this.cells[i].totalAnnots = 0; |
56 this.cells[i].totalAnnots = 0; |
48 this.cells[i].graphics = new PIXI.Graphics(); |
57 this.cells[i].graphics = new PIXI.Graphics(); |
|
58 this.cells[i].graphics.position.x = this.circleX + this.radius * Math.sin(i*(360/totalIndex)*(Math.PI/180)); |
|
59 this.cells[i].graphics.position.y = this.circleY - this.radius * Math.cos(i*(360/totalIndex)*(Math.PI/180)); |
|
60 this.cells[i].graphics.rotation = (i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
49 this.container.addChild(this.cells[i].graphics); |
61 this.container.addChild(this.cells[i].graphics); |
50 this.cells[i].categories = {}; |
62 this.cells[i].categories = {}; |
51 |
63 |
52 for (var category in this.annotCategories[0].colors){ |
64 for (var category in this.annotCategories[0].colors){ |
53 this.cells[i].categories[category] = { |
65 this.cells[i].categories[category] = { |
54 "count": 0, |
66 "count": 1, |
55 "color": this.annotCategories[0].colors[category] |
67 "color": this.annotCategories[0].colors[category] |
56 }; |
68 }; |
57 } |
69 } |
58 } |
70 } |
59 |
71 |
60 var ws = opts.ws; |
72 var ws = opts.ws; |
61 var stageView = opts.stageView; |
73 var stageView = opts.stageView; |
62 // draw temp line to locate the middle of the container |
74 |
63 var graphics = new PIXI.Graphics(); |
75 var graphics = new PIXI.Graphics(); |
64 graphics.beginFill(0x000000) |
76 graphics.lineStyle(1, 0x000000) |
65 .lineStyle(1, 0x000000) |
77 .drawCircle(this.circleX, this.circleY, this.radius) |
66 .moveTo(this.container.x, (this.height/2)) |
78 .moveTo(this.circleX, this.circleY) |
67 .lineTo(this.width, (this.height/2)) |
79 .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 30) |
68 .endFill(); |
80 .endFill() |
69 this.container.addChild(graphics); |
81 this.container.addChild(graphics); |
70 |
82 |
71 stageView.registerComponent(this); |
83 stageView.registerComponent(this); |
72 |
84 |
73 //Add Annotation to the TimeLine |
85 //Add Annotation to the TimeLine |
81 |
93 |
82 if (this.timeEnd > Date.parse(data.ts)){ |
94 if (this.timeEnd > Date.parse(data.ts)){ |
83 var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration)); |
95 var i = Math.floor((Date.parse(data.ts)-this.timeBegin)/(1000*this.intervalDuration)); |
84 this.cells[i].categories[annotCode].count += 1; |
96 this.cells[i].categories[annotCode].count += 1; |
85 this.cells[i].totalAnnots +=1; |
97 this.cells[i].totalAnnots +=1; |
86 this.redrawCell(this.cells[i]); |
98 this.redrawCell(this.cells[i], i); |
87 } |
99 } |
88 }; |
100 }; |
89 |
101 |
90 //Draw the cellule |
102 //Draw the cellule |
91 this.redrawCell = function(cell){ |
103 this.redrawCell = function(cell){ |
92 var x = cell.x; |
104 var x = 0; |
93 var y = this.height/2; |
105 var y = 0; |
94 cell.graphics.clear(); |
106 cell.graphics.clear(); |
95 |
107 |
96 //Check if total height is higher than Max Cell Height |
108 //Check if total height is higher than Max Cell Height |
97 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
109 if ((cell.totalAnnots*this.intervalHeight) > this.maxCellHeight){ |
98 var heightStep = this.maxCellHeight/cell.totalAnnots; |
110 var heightStep = this.maxCellHeight/cell.totalAnnots; |
101 } |
113 } |
102 //Draw the rect depending on the height step calculated |
114 //Draw the rect depending on the height step calculated |
103 for (var i=0; i< this.annotCategories[0].order.length; i++){ |
115 for (var i=0; i< this.annotCategories[0].order.length; i++){ |
104 var currentCode = this.annotCategories[0].order[i]; |
116 var currentCode = this.annotCategories[0].order[i]; |
105 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
117 cell.graphics.beginFill(cell.categories[currentCode].color.replace("#", "0x")) |
106 .drawRect(x, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep) |
118 .drawRect(0, y, this.intervalWidth, -cell.categories[currentCode].count * heightStep) |
107 .endFill(); |
119 .endFill(); |
108 y -= cell.categories[currentCode].count*heightStep; |
120 y -= cell.categories[currentCode].count*heightStep; |
109 } |
121 } |
110 } |
122 } |
111 |
123 |