Changeset 208 for js/viewer-f0/js/NeuronDrawer.js
- Timestamp:
- 04/03/14 17:07:28 (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
js/viewer-f0/js/NeuronDrawer.js
r193 r208 1 function NeuronDrawer(context) { 2 this._scene = undefined; 3 this._camera = undefined; 4 this._renderer = undefined; 5 this._canvasWidth = 400; 6 this._canvasHeight = 400; 7 this._containerContext = context; 8 this._controls = undefined; 9 this._showAxis = false; 1 function NeuronDrawer(contextName, width, height) { 2 this._canvasWidth = width; 3 this._canvasHeight = height; 4 this._containerContextName = contextName; 10 5 this._unknown_symbol=[1,4, 25,25, 75,25, 75,75, 25,75, 25,25]; 11 6 this._neuron_symbol=[1,4, 75,50, 25,0, 25,99, 75,50, 100,50]; 12 7 this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40]; 13 8 this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50]; 14 this._canvas = undefined;15 9 this._neurons = undefined; 16 } 17 18 NeuronDrawer.prototype.initialize = function () { 19 20 21 //this._canvas = document.getElementById("containerNeuron"); 22 /* 23 if (this._canvas.getContext){ 24 25 // use getContext to use the canvas for drawing 26 var ctx = this._canvas.getContext('2d'); 27 28 var lastX=this._canvas.width/2, lastY=this._canvas.height/2; 29 var dragStart,dragged; 30 this._canvas.addEventListener('mousedown',function(evt){ 31 document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none'; 32 lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft); 33 lastY = evt.offsetY || (evt.pageY - canvas.offsetTop); 34 dragStart = ctx.transformedPoint(lastX,lastY); 35 dragged = false; 36 },false); 37 38 this._canvas.addEventListener('mousemove',function(evt){ 39 lastX = evt.offsetX || (evt.pageX - this._canvas.offsetLeft); 40 lastY = evt.offsetY || (evt.pageY - this._canvas.offsetTop); 41 dragged = true; 42 if (dragStart){ 43 var pt = ctx.transformedPoint(lastX,lastY); 44 ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y); 45 redraw(); 46 } 47 },false); 48 this._canvas.addEventListener('mouseup',function(evt){ 49 dragStart = null; 50 if (!dragged) zoom(evt.shiftKey ? -1 : 1 ); 51 },false); 52 53 // Filled triangle 54 ctx.beginPath(); 55 ctx.moveTo(25,25); 56 ctx.lineTo(105,25); 57 ctx.lineTo(25,105); 58 ctx.fill(); 59 60 // Stroked triangle 61 ctx.beginPath(); 62 ctx.moveTo(125,125); 63 ctx.lineTo(125,45); 64 ctx.lineTo(45,125); 65 ctx.closePath(); 66 ctx.stroke(); 67 68 } 69 else 70 alert("dupa"); 71 //this._debug();*/ 72 } 73 74 75 NeuronDrawer.prototype.showPartAxis = function () { 76 this._showAxis = true; 77 } 78 79 NeuronDrawer.prototype._createRenderer = function () { 80 this._renderer = new THREE.CanvasRenderer();//WebGLRenderer({antialias: true}); 81 this._renderer.setClearColor(0xffffff, 1); 82 this._renderer.setSize(this._canvasWidth, this._canvasHeight); 83 //this._containerContext = $("#containerNeuron"); 84 this._containerContext.append(this._renderer.domElement); 85 } 86 87 NeuronDrawer.prototype._prepareCamera = function () { 88 this._camera = new THREE.PerspectiveCamera(45, this._canvasWidth / this._canvasHeight, 1, 10000); 89 this._camera.position.set(0, 0, 10); 90 this._camera.lookAt(this._scene.position); 91 this._scene.add(this._camera); 92 } 93 94 NeuronDrawer.prototype._addLight = function () { 95 var directionalLight = new THREE.DirectionalLight(0xffffff); 96 97 directionalLight.position = this._camera.position; 98 directionalLight.intensity = 1; 99 100 this._scene.add(directionalLight); 101 } 102 103 NeuronDrawer.prototype.initializeScene = function () { 104 105 this._createRenderer(); 106 this._scene = new THREE.Scene(); 107 this._prepareCamera(); 108 this._addLight(); 109 this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement) 110 this._debug(); 111 } 112 113 NeuronDrawer.prototype.renderScene = function () { 114 10 this._SCALE = 150; 11 this._scale = 1; 12 this._min_scale = 0.1; 13 //Kinetic.js 14 this._stage = undefined; 15 this._layer = undefined; 16 } 17 18 NeuronDrawer.prototype.initializeNewCanvas = function () { 19 20 this._stage = new Kinetic.Stage({ 21 container: this._containerContextName, 22 width: this._canvasWidth, 23 height: this._canvasHeight, 24 draggable: true 25 }); 26 27 this._layer = new Kinetic.Layer(); 28 29 this._addZoom(); 30 } 31 32 NeuronDrawer.prototype._addZoom = function(){ 115 33 var self = this; 116 requestAnimationFrame( 117 function () { 118 self.renderScene(); 119 }); 120 this._renderer.render(this._scene, this._camera); 121 this._controls.update(); 122 123 } 124 125 NeuronDrawer.prototype._debug = function () { 126 this._scene.add(new THREE.AxisHelper(20)); 34 35 var isFirefox = (/Firefox/i.test(navigator.userAgent)) ? true : false; 36 37 var mousewheelevt= isFirefox ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 38 39 document.getElementById(this._containerContextName).addEventListener(mousewheelevt,function(e){ 40 e.preventDefault(); 41 42 var zoomAmount = 0; 43 if(!isFirefox) 44 zoomAmount = e.wheelDelta * 0.001; 45 else 46 zoomAmount = e.detail * -0.12; 47 48 var newScale = self._stage.scale(); 49 newScale.x += zoomAmount; 50 newScale.y += zoomAmount; 51 52 self._stage.scale(newScale) 53 self._stage.draw(); 54 }); 55 } 56 57 NeuronDrawer.prototype.drawNeuralNetwork = function (neurons, connections, layouts, classes) { 58 59 this._neurons = []; 60 var offsetFactor = 0; 61 62 for (var i = 0; i < layouts.length; i++) { 63 var scheme = undefined; 64 scheme = this._chooseSchema(i,neurons, connections, classes); 65 66 var neuronData = this._getSize(scheme); 67 neuronData.scheme = scheme; 68 neuronData.x += layouts[i].x * this._SCALE; 69 neuronData.y += -layouts[i].y * this._SCALE; 70 71 this._neurons.push(neuronData); 72 this.drawNeuron(layouts[i].x * this._SCALE, -layouts[i].y * this._SCALE, scheme); 73 74 offsetFactor = Math.min(offsetFactor, layouts[i].x); 75 } 76 77 this._layer.offsetX(offsetFactor * this._SCALE); 78 79 for (var i = 0; i < connections.length; i++) 80 this.drawConnection(i, neurons, connections, einfos); 127 81 } 128 82 129 83 NeuronDrawer.prototype.drawNeuron = function (x, y, scheme) { 130 131 132 var obj = new THREE.Object3D(); 133 134 var material = new THREE.LineBasicMaterial({ 135 color: 0x0000ff 136 }); 84 var points = []; 85 137 86 var position = 0; 138 var noOfBlocks = 0;//number of "blocks" to draw87 var noOfBlocks = scheme[position++];//number of "blocks" to draw 139 88 var noOfLines = 0;//number of line to draw 140 noOfBlocks = scheme[position++];141 89 for (var i = 0; i < noOfBlocks; i++) { 142 90 noOfLines = scheme[position++]; 143 91 144 92 for (var j = 0; j < noOfLines; j++) { 145 var geometry = new THREE.Geometry(); 146 geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0)); 147 geometry.vertices.push(new THREE.Vector3(scheme[position++] + x, scheme[position++] + y, 0)); 148 position = position - 2; //get to last point in list 149 var line = new THREE.Line(geometry, material); 150 obj.add(line); 151 } 152 position = position + 2;//move to value which define number of lines to draw 153 } 154 155 var SCALE = 0.05; 156 157 obj.scale.set(SCALE, SCALE, SCALE); 158 obj.rotateX(Math.PI);//rotate 180 degree 159 //obj.translateY(-5.5); 160 this._scene.add(obj) 93 points.push(scheme[position++]+x); 94 points.push(scheme[position++]+y); 95 } 96 97 points.push(scheme[position++]+x); 98 points.push(scheme[position++]+y); 99 100 var symbol = new Kinetic.Line({ 101 points: points, 102 stroke: 'black', 103 strokeWidth: 1 104 }); 105 106 symbol.move({x:0, y: 0}); 107 var self = this; 108 symbol.on('mousemove', function(){ 109 var mousePos = self._stage.getPointerPosition(); 110 var x = mousePos.x; 111 var y = mousePos.y; 112 console.log(x,y); 113 }); 114 115 this._layer.add(symbol); 116 points = []; 117 } 118 } 119 120 NeuronDrawer.prototype._getConnection = function(connections, id, number){ 121 122 var counter = 0; 123 for(var i = 0; i < connections.length; i++) 124 { 125 if(connections[i].getDestination() == id) 126 { 127 if(counter == number) 128 return connections[i].getSource(); 129 else 130 counter++; 131 } 132 } 133 } 134 135 NeuronDrawer.prototype.drawConnection = function (id, neurons, connections, einfos) { 136 137 var n2; 138 neuroId = connections[id].getDestination(); 139 //this is hack trick to change order of inputs 140 var maxVal = this._inputY(this._getNumberOfInputs(neuroId,connections), connections, neuroId); 141 142 for(var input = 0; input < this._getNumberOfInputs(neuroId,connections); input++) 143 { 144 n2 = this._neurons[this._getConnection(connections, neuroId, input)]; 145 var points = []; 146 147 var yw = this._inputY(input, connections, neuroId); 148 var xw = (maxVal-yw) / 4; 149 150 yw += this._neurons[neuroId].y;//add position of object to y 151 152 points.push(this._neurons[neuroId].x);//x 153 points.push(yw);//y 154 155 points.push(this._neurons[neuroId].x - xw);//x 156 points.push(yw);//y 157 158 points.push(n2.x+n2.sizeX); 159 points.push(n2.y + n2.sizeY/2); 160 161 /*if(diagram?) 162 { 163 //straight forward 164 } 165 else 166 { 167 //U-shape 168 }*/ 169 170 var line = new Kinetic.Line({ 171 points: points, 172 stroke: 'black', 173 strokeWidth: 1 174 }); 175 this._layer.add(line); 176 } 177 178 } 179 180 NeuronDrawer.prototype._inputY = function(number, connections, id){ 181 return ((1 + number)* this._neurons[id].sizeY) / ((this._getNumberOfInputs(id, connections)) + 1); 182 } 183 184 NeuronDrawer.prototype.finalize = function() 185 { 186 this._stage.add(this._layer); 161 187 } 162 188 … … 184 210 } 185 211 186 NeuronDrawer.prototype.drawConnection = function (id, neurons, connections, einfos) { 187 188 var n2; 189 190 for(var iw = 0; iw < this._getNumberOfInputs(id,connections); iw++) 191 { 192 n2 = neurons[iw]; 193 194 var yw = this._inputY(iw); 195 var xw = yw / 4; 196 this._drawLine() 197 } 198 199 /*var destination = connections[id].getDestination(); 200 var numberOfConnToDest = 0; 201 var numberOfDrawenCon = 0; 202 203 //check how many conenctions have the same destination 204 for (var i = 0; i < connections.length; i++) { 205 if (connections[i].getDestination() == destination) 206 numberOfConnToDest++; 207 } 208 209 //check how many connections had been drawen 210 for (var i = 0; i < id; i++) { 211 if (connections[i].getDestination() == destination) 212 numberOfDrawenCon++; 213 } 214 215 var positionY = (numberOfDrawenCon + 1) * 100 / (numberOfConnToDest + 1); 216 var positionX = (numberOfDrawenCon + 1) * 10 / (numberOfConnToDest + 1); 217 218 var x1 = einfos[connections[id].getDestination()].x; 219 var y1 = einfos[connections[id].getDestination()].y; 220 221 var x2 = einfos[connections[id].getSource()].x; 222 var y2 = einfos[connections[id].getSource()].y; 223 224 var material = new THREE.LineBasicMaterial({ 225 color: 0x0000ff 226 }); 227 228 var SCALE = 0.05; 229 230 var geometry = new THREE.Geometry(); 231 geometry.vertices.push(new THREE.Vector3(100 + x2 * 100, 10 + 50 + y2 * 100, 0)); 232 geometry.vertices.push(new THREE.Vector3(10 + 100 + x2 * 100, 10 + 50 + y2 * 100, 0)); 233 var line = new THREE.Line(geometry, material); 234 line.scale.set(SCALE, SCALE, SCALE); 235 this._scene.add(line); 236 237 238 var geometry1 = new THREE.Geometry(); 239 geometry1.vertices.push(new THREE.Vector3(10 + positionX + x1 * 100, 10 + positionY + y1 * 100, 0)); 240 geometry1.vertices.push(new THREE.Vector3(10 + 25 + x1 * 100, 10 + positionY + y1 * 100, 0)); 241 var line1 = new THREE.Line(geometry1, material); 242 243 line1.scale.set(SCALE, SCALE, SCALE); 244 this._scene.add(line1); 245 246 //bezposredni poprzednik - to koniec :) 247 if (x1 == x2 + 1)//kazdy polozony w kolumnie po lewej ma jedna ukosna linie 248 { 249 var geometry = new THREE.Geometry(); 250 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0)); 251 geometry.vertices.push(new THREE.Vector3(110 + x2 * 100, 10 + 50 + y2 * 100, 0)); 252 var line = new THREE.Line(geometry, material); 253 line.scale.set(SCALE, SCALE, SCALE); 254 this._scene.add(line); 255 return; 256 } 257 258 //pierwszy pionowy 259 if (y1 >= y2) { 260 var geometry = new THREE.Geometry(); 261 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0)); 262 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0)); 263 var line = new THREE.Line(geometry, material); 264 line.scale.set(SCALE, SCALE, SCALE); 265 this._scene.add(line); 266 return; 267 } 268 269 else { 270 var geometry = new THREE.Geometry(); 271 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 60 + y2 * 100, 0)); 272 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0)); 273 var line = new THREE.Line(geometry, material); 274 line.scale.set(SCALE, SCALE, SCALE); 275 this._scene.add(line); 276 return; 277 } 278 279 280 //poziomy 281 if (y1 >= y2) { 282 var geometry = new THREE.Geometry(); 283 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 105 + y2 * 100, 0)); 284 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0)); 285 var line = new THREE.Line(geometry, material); 286 line.scale.set(SCALE, SCALE, SCALE); 287 this._scene.add(line); 288 return; 289 //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom)); 290 } 291 else { 292 var geometry = new THREE.Geometry(); 293 geometry.vertices.push(new THREE.Vector3(110 + (x2 * 100), 15 + y2 * 100, 0)); 294 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0)); 295 var line = new THREE.Line(geometry, material); 296 line.scale.set(SCALE, SCALE, SCALE); 297 this._scene.add(line); 298 return; 299 //g.drawLine((int) ((110 + (x2 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom)); 300 } 301 302 303 //drugi pionowy 304 if (y1 >= y2) { 305 var geometry = new THREE.Geometry(); 306 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0)); 307 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 105 + y2 * 100, 0)); 308 var line = new THREE.Line(geometry, material); 309 line.scale.set(SCALE, SCALE, SCALE); 310 this._scene.add(line); 311 return; 312 //g.drawLine((int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((10 + polozenieY + y1 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((105 + y2 * 100) * zoom)); 313 } 314 else { 315 var geometry = new THREE.Geometry(); 316 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 10 + positionY + y1 * 100, 0)); 317 geometry.vertices.push(new THREE.Vector3(10 + positionX + (x1 * 100), 15 + y2 * 100, 0)); 318 var line = new THREE.Line(geometry, material); 319 line.scale.set(SCALE, SCALE, SCALE); 320 this._scene.add(line); 321 return; 322 //g.drawLine((int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((10 + polozenieY + y1 * 100) * zoom), (int) ((10 + polozenieX + (x1 * 100)) * zoom), (int) ((15 + y2 * 100) * zoom)); 323 } 324 */ 325 } 326 327 NeuronDrawer.prototype._inputY = function(number, connections){ 328 return (1 + number)*this._neurons[number].sizeY / ((this._getNumberOfInputs(number, connections)) + 1); 329 } 330 331 NeuronDrawer.prototype._drawLine = function(x1, y1, x2, y2){ 332 var geometry = new THREE.Geometry(); 333 geometry.vertices.push(new THREE.Vector3(x1, y1, 0)); 334 geometry.vertices.push(new THREE.Vector3(x2, y2, 0)); 335 336 var material = new THREE.LineBasicMaterial({ 337 color: 0x0000ff 338 }); 339 340 var SCALE = 1; 341 342 var line = new THREE.Line(geometry, material); 343 line.scale.set(SCALE, SCALE, SCALE); 344 this._scene.add(line); 345 } 212 346 213 347 214 NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes) … … 368 235 NeuronDrawer.prototype._getSize = function(scheme) 369 236 { 370 var neuron = {sizeX: 0, sizeY: 0}; 237 var neuron = {sizeX: 0, sizeY: 0, x: 0, y: 0}; 238 239 240 var minX = Number.MAX_VALUE; 241 var maxX = -1; 242 243 var minY = Number.MAX_VALUE; 244 var maxY = -1; 245 371 246 var position = 0; 372 var noOfBlocks = 0;//number of "blocks" to draw247 var noOfBlocks = scheme[position++];//number of "blocks" to draw 373 248 var noOfLines = 0;//number of line to draw 374 noOfBlocks = scheme[position++]; 249 375 250 for (var i = 0; i < noOfBlocks; i++) { 376 251 noOfLines = scheme[position++]; … … 378 253 for (var j = 0; j < noOfLines; j++) { 379 254 380 if(scheme[position] > neuron.sizeX) 381 neuron.sizeX = scheme[position]; 382 position++; 383 if(scheme[position] > neuron.sizeY) 384 neuron.sizeY = scheme[position]; 385 position++; 386 387 if(scheme[position] > neuron.sizeX) 388 neuron.sizeX = scheme[position]; 389 position++; 390 if(scheme[position] > neuron.sizeY) 391 neuron.sizeY = scheme[position]; 255 256 if(scheme[position] > maxX) 257 maxX = scheme[position]; 258 if(scheme[position] < minX) 259 minX = scheme[position]; 260 position++; 261 262 if(scheme[position] > maxY) 263 maxX = scheme[position]; 264 if(scheme[position] < minY) 265 minY = scheme[position]; 266 position++; 267 268 269 if(scheme[position] > maxX) 270 maxX = scheme[position]; 271 if(scheme[position] < minX) 272 minX = scheme[position]; 273 position++; 274 275 if(scheme[position] > maxY) 276 maxY = scheme[position]; 277 if(scheme[position] < minY) 278 minY = scheme[position]; 392 279 position++; 393 280 … … 395 282 } 396 283 position = position + 2;//move to value which define number of lines to draw 284 neuron.sizeX = maxX - minX; 285 neuron.sizeY = maxY - minY; 286 neuron.x = minX; 287 neuron.y = minY; 397 288 } 398 289 return neuron; 399 290 } 400 401 NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) {402 403 this._neurons = [];404 405 for (var i = 0; i < layouts.length; i++) {406 var scheme = undefined;407 408 scheme = this._chooseSchema(i,neurons, connections, classes)409 var neuronData = this._getSize(scheme);410 neuronData.scheme = scheme;411 this._neurons.push(neuronData);412 this.drawNeuron(layouts[i].x * 100 , -layouts[i].y * 100 , scheme);413 }414 415 //for (var i = 0; i < connections.length; i++)416 // this.drawConnection(i, neurons, connections, einfos);417 }418 419 420 NeuronDrawer.prototype.debugTest = function () {421 422 }423
Note: See TracChangeset
for help on using the changeset viewer.