Changeset 188
- Timestamp:
- 03/23/14 12:52:58 (11 years ago)
- Location:
- js/viewer-f0
- Files:
-
- 1 added
- 1 deleted
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
js/viewer-f0/css/styles.css
r143 r188 1 #menu{ 2 display: inline; 3 position: fixed; 4 left: 1050px; 1 .menu{ 2 float: right; 5 3 } 6 4 … … 16 14 width: 400px; 17 15 } 16 17 .window{ 18 height: 600px; 19 width: 1300px; 20 } -
js/viewer-f0/f0def.xml
r134 r188 3 3 4 4 <CLASS ID="m" NAME="Model"> 5 6 7 8 9 </CLASS>5 <GROUP NAME="Properties" /> 6 <GROUP NAME="Visual" /> 7 <PROP ID="se" NAME="startenergy" GROUP="0" FLAGS="1024" TYPE="f" /> 8 <PROP ID="Vstyle" NAME="vis_style" GROUP="1" FLAGS="0" TYPE="s" MIN="0" MAX="-1" /> 9 </CLASS> 10 10 11 11 <CLASS ID="p" NAME="Part"> -
js/viewer-f0/index.html
r173 r188 19 19 <script src="js/SmartLayout.js"></script> 20 20 <script src="js/Structures/NeuroClass.js"></script> 21 <script src="js/main.js"></script> 21 <script src="js/Viewer.js"></script> 22 23 <div class="window"> 24 <div class="cont" id="container"></div> 25 <div class="cont" id="containerNeuron"></div> 26 27 <div class="menu"> 28 <textarea id="geno">//0 p:</textarea> 29 30 <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div> 31 <div id="test"> 32 <!-- Wywołanie openEmbeddedCreature z Viewer.js--> 33 <button onclick="openTextAreaCreature()">Render</button> 34 </div> 35 </div> 36 </div> 37 38 <div class="window"> 39 <div class="cont" id="container1"></div> 40 <div class="cont" id="containerNeuron1"></div> 41 42 <div class="menu"> 43 <div><input type="checkbox" id="axisBox1"> Show axis for parts </input></div> 44 <div id="test1"> 45 46 <button onclick="openEmbeddedCreature()">Render</button> 47 </div> 48 </div> 49 </div> 22 50 23 51 24 <div class="cont" id="container"></div> 25 <div class="cont" id="containerNeuron"></div> 52 </body> 26 53 27 <div id="menu"> 28 <textarea id="geno">//0 p:</textarea> 29 <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div> 30 <div id="test"> 31 <!-- Wywołanie openWindow z main.js--> 32 <button onclick="openWindow()">Render</button> 54 <div class="window"> 55 <div class="cont" id="container2"></div> 56 <div class="cont" id="containerNeuron2"></div> 57 58 <div class="menu"> 59 <div><input type="checkbox" id="axisBox2"> Show axis for parts </input></div> 60 <div id="test2"> 61 62 <button onclick="openCodeCreature()">Render</button> 63 </div> 33 64 </div> 65 </div> 34 66 67 68 </body> 69 70 <div class="window"> 71 <div class="cont" id="container3"></div> 72 <div class="cont" id="containerNeuron3"></div> 73 74 <div class="menu"> 75 <div><input type="checkbox" id="axisBox3"> Show axis for parts </input></div> 76 <div id="test3"> 77 78 <button onclick="openFileCreature()">Render</button> 79 </div> 80 </div> 35 81 </div> 36 82 -
js/viewer-f0/js/NeuronDrawer.js
r161 r188 1 function NeuronDrawer( ) {1 function NeuronDrawer(context) { 2 2 this._scene = undefined; 3 3 this._camera = undefined; 4 4 this._renderer = undefined; 5 this._canvasWidth = 500;6 this._canvasHeight = 500;7 this._containerContext = undefined;5 this._canvasWidth = 400; 6 this._canvasHeight = 400; 7 this._containerContext = context; 8 8 this._controls = undefined; 9 9 this._showAxis = false; … … 12 12 this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40]; 13 13 this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50]; 14 15 } 14 this._canvas = undefined; 15 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 16 74 17 75 NeuronDrawer.prototype.showPartAxis = function () { … … 23 81 this._renderer.setClearColor(0xffffff, 1); 24 82 this._renderer.setSize(this._canvasWidth, this._canvasHeight); 25 this._containerContext = $("#containerNeuron");83 //this._containerContext = $("#containerNeuron"); 26 84 this._containerContext.append(this._renderer.domElement); 27 85 } … … 126 184 } 127 185 128 NeuronDrawer.prototype.drawConnection = function (id, connections, einfos) { 129 130 var destination = connections[id].getDestination(); 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(); 131 200 var numberOfConnToDest = 0; 132 201 var numberOfDrawenCon = 0; … … 253 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)); 254 323 } 255 256 } 257 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 } 258 346 259 347 NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes) … … 278 366 } 279 367 368 NeuronDrawer.prototype._getSize = function(scheme) 369 { 370 var neuron = {sizeX: 0, sizeY: 0}; 371 var position = 0; 372 var noOfBlocks = 0;//number of "blocks" to draw 373 var noOfLines = 0;//number of line to draw 374 noOfBlocks = scheme[position++]; 375 for (var i = 0; i < noOfBlocks; i++) { 376 noOfLines = scheme[position++]; 377 378 for (var j = 0; j < noOfLines; j++) { 379 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]; 392 position++; 393 394 position = position - 2; 395 } 396 position = position + 2;//move to value which define number of lines to draw 397 } 398 return neuron; 399 } 400 280 401 NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) { 402 403 this._neurons = []; 281 404 282 405 for (var i = 0; i < layouts.length; i++) { … … 284 407 285 408 scheme = this._chooseSchema(i,neurons, connections, classes) 286 409 var neuronData = this._getSize(scheme); 410 neuronData.scheme = scheme; 411 this._neurons.push(neuronData); 287 412 this.drawNeuron(layouts[i].x * 100 , -layouts[i].y * 100 , scheme); 288 413 } 289 414 290 415 //for (var i = 0; i < connections.length; i++) 291 // this.drawConnection(i, connections, einfos);416 // this.drawConnection(i, neurons, connections, einfos); 292 417 } 293 418 -
js/viewer-f0/js/SmartLayout.js
r142 r188 151 151 } 152 152 153 154 155 156 153 function canMerge(block, block2, dx, dy){ 157 154 var x1, y1, x2, y2; -
js/viewer-f0/js/graphicsEngine.js
r143 r188 1 function GraphicsEngine( ) {1 function GraphicsEngine(context) { 2 2 this._scene = undefined; 3 3 this._camera = undefined; 4 4 this._renderer = undefined; 5 this._canvasWidth = 500;6 this._canvasHeight = 500;7 this._containerContext = undefined;5 this._canvasWidth = 400; 6 this._canvasHeight = 400; 7 this._containerContext = context; 8 8 this._BALL_RADIUS = 0.25; 9 9 this._controls = undefined; … … 21 21 this._renderer.setClearColor(0x000000, 1); 22 22 this._renderer.setSize(this._canvasWidth, this._canvasHeight); 23 this._containerContext = $("#container");23 //this._containerContext = $("#container"); 24 24 this._containerContext.append(this._renderer.domElement); 25 25 } … … 43 43 GraphicsEngine.prototype._rotateObject = function (object, part) { 44 44 object.rotateX(part.getXrot()); 45 object.rotateY( part.getYrot());45 object.rotateY(-part.getYrot()); 46 46 object.rotateZ(part.getZrot()); 47 47 } … … 74 74 } 75 75 76 GraphicsEngine.prototype._debugShow = function(object) 77 { 78 var pos = object.position; 79 var scale = object.scale; 80 var rot = object.rotation 81 //console.log(pos.x, pos.y, pos.z , "|", rot.x, rot.y, rot.z,"|", scale.x, scale.y, scale.z); 82 } 83 76 84 GraphicsEngine.prototype._addEllipsoid = function (part) { 77 85 var geometry = new THREE.SphereGeometry(1, 20, 20); 78 geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));79 80 86 var ellipsoidMaterial = new THREE.MeshPhongMaterial({color: 0xffffff}); 81 87 ellipsoidMaterial.color.setRGB(part.getR(), part.getG(), part.getB()) 82 88 83 89 var ellipsoid = new THREE.Mesh(geometry, ellipsoidMaterial); 90 ellipsoid.scale.set(part.getXshape(), part.getYshape(), part.getZshape()) 84 91 ellipsoid.position.set(part.getX(), part.getY(), part.getZ()); 85 92 this._rotateObject(ellipsoid, part); … … 88 95 if(this._showAxis) 89 96 ellipsoid.add(new THREE.AxisHelper(1)); 97 90 98 this._scene.add(ellipsoid); 91 99 } … … 93 101 GraphicsEngine.prototype._addCylinder = function (part) { 94 102 var geometry = new THREE.CylinderGeometry(1, 1, 1, 10, 10, false); 95 geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getZshape(), part.getXshape(), part.getYshape()));96 103 97 104 var material = new THREE.MeshLambertMaterial({color: 0xffffff}); … … 99 106 100 107 var cylinder = new THREE.Mesh(geometry, material); 108 109 cylinder.scale.set(part.getXshape(), part.getYshape(), part.getZshape()) 101 110 cylinder.position.set(part.getX(), part.getY(), part.getZ()); 102 cylinder.overdraw = true;103 111 this._rotateObject(cylinder, part); 104 112 105 113 this._parts.push(cylinder); 106 114 if(this._showAxis) 107 cylinder.add(new THREE.AxisHelper(1)); 115 cylinder.add(new THREE.AxisHelper(5)); 116 108 117 this._scene.add(cylinder); 118 109 119 } 110 120 111 121 GraphicsEngine.prototype._addCuboid = function (part) { 112 122 var geometry = new THREE.CubeGeometry(2, 2, 2, 10, 10, 10); 113 geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));123 //TODO: poprawić getXshape na getXscale 114 124 115 125 var material = new THREE.MeshLambertMaterial({color: 0xffffff}); … … 117 127 118 128 var cube = new THREE.Mesh(geometry, material); 129 cube.scale.set(part.getXshape(), part.getYshape(), part.getZshape()) 119 130 cube.position.set(part.getX(), part.getY(), part.getZ()); 120 131 this._rotateObject(cube, part); … … 127 138 128 139 GraphicsEngine.prototype.addPart = function (part) { 140 console.log(part.getX(),part.getY(),part.getZ(), "|", part.getXshape(),part.getYshape(),part.getZshape(),"|",part.getXrot(),part.getYrot(),part.getZrot()) 129 141 switch (part.getType()) { 130 142 case 0: … … 196 208 197 209 copy.rotateX(joint.getXrot()); 198 copy.rotateY( joint.getYrot());210 copy.rotateY(-joint.getYrot()); 199 211 copy.rotateZ(joint.getZrot()); 200 212 … … 233 245 this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement) 234 246 this._debug(); 247 248 249 235 250 } 236 251 … … 255 270 GraphicsEngine.prototype.debugTest = function() 256 271 { 257 258 } 259 272 for(var i = 0; i < this._parts.length; i++) 273 this._debugShow(this._parts[i]); 274 } 275
Note: See TracChangeset
for help on using the changeset viewer.