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