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); |
48 |
48 |
|
49 var currentTime = this.timeBegin; |
49 var totalIndex = Math.floor(this.perimeter/this.intervalWidth); |
50 var totalIndex = Math.floor(this.perimeter/this.intervalWidth); |
50 |
51 |
51 this.cells = [] |
52 this.cells = [] |
52 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
53 for (var i=0; i<(this.perimeter/this.intervalWidth) ; i++){ |
53 this.cells[i] = []; |
54 this.cells[i] = []; |
66 var ws = opts.ws; |
67 var ws = opts.ws; |
67 var stageView = opts.stageView; |
68 var stageView = opts.stageView; |
68 |
69 |
69 //draw the base - circle and line to locate the scene |
70 //draw the base - circle and line to locate the scene |
70 var graphics = new PIXI.Graphics(); |
71 var graphics = new PIXI.Graphics(); |
71 graphics.lineStyle(1, 0x000000) |
72 graphics.lineStyle(2, 0x646464) |
72 .drawCircle(this.circleX, this.circleY, this.radius - 3) |
73 .drawCircle(this.circleX, this.circleY, this.radius - 3) |
|
74 .lineStyle(1, 0xD7D7D7) |
73 .drawCircle(this.circleX, this.circleY, this.radius*2/3) |
75 .drawCircle(this.circleX, this.circleY, this.radius*2/3) |
74 .drawCircle(this.circleX, this.circleY, this.radius/3) |
76 .drawCircle(this.circleX, this.circleY, this.radius/3) |
75 .moveTo(this.circleX, this.circleY) |
77 .lineStyle(1, 0x646464) |
76 .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 30) |
78 .moveTo(this.circleX, this.circleY - (this.radius/3)/2) |
|
79 .lineTo(this.circleX, this.circleY - this.radius - this.maxCellHeight - 10) |
77 .endFill() |
80 .endFill() |
78 this.container.addChild(graphics); |
81 this.container.addChild(graphics); |
|
82 |
|
83 //set time text |
|
84 var currentTimeText = new PIXI.Text("-- : -- : --", { font: '18pt Gothic Standard', fill: '#646464' }); |
|
85 currentTimeText.x = this.circleX - currentTimeText.width/2; |
|
86 currentTimeText.y = this.circleY - currentTimeText.height/2; |
|
87 this.container.addChild(currentTimeText); |
79 |
88 |
80 stageView.registerComponent(this); |
89 stageView.registerComponent(this); |
81 |
90 |
82 //Add Annotation to the TimeLine |
91 //Add Annotation to the TimeLine |
83 this.addAnnot = function(data){ |
92 this.addAnnot = function(data){ |
101 cell.graphics = new PIXI.Graphics(); |
110 cell.graphics = new PIXI.Graphics(); |
102 cell.graphics.position.x = this.circleX + this.radius * Math.sin(cell.i*(360/totalIndex)*(Math.PI/180)); |
111 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)); |
112 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); |
113 cell.graphics.rotation = (cell.i)*(360/totalIndex)*(Math.PI/180) + (360/(totalIndex*2))*(Math.PI/180); |
105 this.container.addChild(cell.graphics); |
114 this.container.addChild(cell.graphics); |
|
115 } |
|
116 |
|
117 this.initTimeTexts = function() { |
|
118 var tBeg = new PIXI.Text(Utils.formatTime(this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
|
119 tBeg.x = this.circleX + 15; |
|
120 tBeg.y = this.circleY - this.radius - this.maxCellHeight - 10; |
|
121 this.container.addChild(tBeg); |
|
122 |
|
123 var tEnd = new PIXI.Text(Utils.formatTime(this.timeEnd), { font: '12pt Gothic Standard', fill: '#646464' }); |
|
124 tEnd.x = this.circleX - 15 - tEnd.width; |
|
125 tEnd.y = this.circleY - this.radius - this.maxCellHeight - 10; |
|
126 this.container.addChild(tEnd); |
|
127 |
|
128 var t15 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
|
129 t15.x = this.circleX + this.radius + this.maxCellHeight + 10 ; |
|
130 t15.y = this.circleY - t15.height; |
|
131 t15.rotation = Math.PI /2; |
|
132 this.container.addChild(t15); |
|
133 |
|
134 var t30 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)/2) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
|
135 t30.x = this.circleX - t30.width/2; |
|
136 t30.y = this.circleY + this.radius + this.maxCellHeight - 2; |
|
137 this.container.addChild(t30); |
|
138 |
|
139 var t45 = new PIXI.Text(Utils.formatTime(((this.timeEnd - this.timeBegin)*3/4) + this.timeBegin), { font: '12pt Gothic Standard', fill: '#646464' }); |
|
140 t45.x = this.circleX - this.radius - this.maxCellHeight - 10 ; |
|
141 t45.y = this.circleY + t15.height; |
|
142 t45.rotation = -Math.PI/2; |
|
143 this.container.addChild(t45); |
106 } |
144 } |
107 |
145 |
108 //Draw the cellule |
146 //Draw the cellule |
109 this.redrawCell = function(cell){ |
147 this.redrawCell = function(cell){ |
110 |
148 |
132 y -= cell.categories[currentCode].count*heightStep; |
170 y -= cell.categories[currentCode].count*heightStep; |
133 } |
171 } |
134 } |
172 } |
135 |
173 |
136 this.init = function() { |
174 this.init = function() { |
137 |
|
138 ws.message(function(data) { |
175 ws.message(function(data) { |
139 _this.addAnnot(data); |
176 _this.addAnnot(data); |
140 }); |
177 }); |
141 |
178 |
142 }; |
179 this.initTimeTexts(); |
|
180 }; |
|
181 |
|
182 this.updateTime = function(){ |
|
183 currentTime += 1000; |
|
184 |
|
185 var nbSec = currentTime / 1000; |
|
186 var hours = Math.floor( nbSec / 3600 ) % 24; |
|
187 var minutes = Math.floor( nbSec / 60 ) % 60; |
|
188 var seconds = Math.floor(nbSec % 60); |
|
189 var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
|
190 |
|
191 currentTimeText.setText(timeStr); |
|
192 }; |
|
193 |
|
194 var refreshTimeInterval; |
143 |
195 |
144 this.start = function() { |
196 this.start = function() { |
|
197 refreshTimeInterval = setInterval(function() {_this.updateTime();}, 1000); |
145 }; |
198 }; |
146 |
199 |
147 this.refresh = function() { |
200 this.refresh = function() { |
|
201 |
148 }; |
202 }; |
149 |
203 |
150 this.stop = function(){ |
204 this.stop = function(){ |
151 console.log(this.cells); |
205 console.log(this.cells); |
152 }; |
206 }; |