Changeset 188 for js/viewer-f0

Timestamp:

03/23/14 12:52:58 (11 years ago)

Author:

mmichalski

Message:

Examples how to open creatues by viewer

Location:

js/viewer-f0

Files:

• css/styles.css (modified) (2 diffs)
• f0def.xml (modified) (1 diff)
• index.html (modified) (1 diff)
• js/NeuronDrawer.js (modified) (7 diffs)
• js/SmartLayout.js (modified) (1 diff)
• js/Viewer.js (added)
• js/graphicsEngine.js (modified) (12 diffs)
• js/main.js (deleted)

js/viewer-f0/css/styles.css

@@ -1 @@
-#menu{
-    display: inline;
-    position: fixed;
-    left: 1050px;
+.menu{
+    float: right;
 }
 
@@ -16 +14 @@
     width: 400px;
 }
+
+.window{
+    height: 600px;
+    width: 1300px;
+}

js/viewer-f0/f0def.xml

@@ -3 +3 @@
 
  <CLASS ID="m" NAME="Model">
-    <GROUP NAME="Properties" />
-    <GROUP NAME="Visual" />
-    <PROP ID="se" NAME="startenergy" GROUP="0" FLAGS="1024" TYPE="f" />
-    <PROP ID="Vstyle" NAME="vis_style" GROUP="1" FLAGS="0" TYPE="s" MIN="0" MAX="-1" />
-</CLASS>
+  <GROUP NAME="Properties" />
+  <GROUP NAME="Visual" />
+  <PROP ID="se" NAME="startenergy" GROUP="0" FLAGS="1024" TYPE="f" />
+  <PROP ID="Vstyle" NAME="vis_style" GROUP="1" FLAGS="0" TYPE="s" MIN="0" MAX="-1" />
+ </CLASS>
 
  <CLASS ID="p" NAME="Part">

js/viewer-f0/index.html

@@ -19 +19 @@
 <script src="js/SmartLayout.js"></script>
 <script src="js/Structures/NeuroClass.js"></script>
-<script src="js/main.js"></script>
+<script src="js/Viewer.js"></script>
+
+<div class="window">
+    <div class="cont" id="container"></div>
+    <div class="cont" id="containerNeuron"></div>
+
+    <div class="menu">
+        <textarea id="geno">//0&#13;&#10;p:</textarea>
+
+        <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div>
+        <div id="test">
+            <!-- Wywołanie openEmbeddedCreature z Viewer.js-->
+            <button onclick="openTextAreaCreature()">Render</button>
+        </div>
+    </div>
+</div>
+
+<div class="window">
+    <div class="cont" id="container1"></div>
+    <div class="cont" id="containerNeuron1"></div>
+
+    <div class="menu">
+        <div><input type="checkbox" id="axisBox1"> Show axis for parts </input></div>
+        <div id="test1">
+
+            <button onclick="openEmbeddedCreature()">Render</button>
+        </div>
+    </div>
+</div>
 
 
-<div class="cont" id="container"></div>
-<div class="cont" id="containerNeuron"></div>
+</body>
 
-<div id="menu">
-    <textarea id="geno">//0&#13;&#10;p:</textarea>
-    <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div>
-    <div id="test">
-        <!-- Wywołanie openWindow z main.js-->
-        <button onclick="openWindow()">Render</button>
+<div class="window">
+    <div class="cont" id="container2"></div>
+    <div class="cont" id="containerNeuron2"></div>
+
+    <div class="menu">
+        <div><input type="checkbox" id="axisBox2"> Show axis for parts </input></div>
+        <div id="test2">
+
+            <button onclick="openCodeCreature()">Render</button>
+        </div>
     </div>
+</div>
 
+
+</body>
+
+<div class="window">
+    <div class="cont" id="container3"></div>
+    <div class="cont" id="containerNeuron3"></div>
+
+    <div class="menu">
+        <div><input type="checkbox" id="axisBox3"> Show axis for parts </input></div>
+        <div id="test3">
+
+            <button onclick="openFileCreature()">Render</button>
+        </div>
+    </div>
 </div>
 

js/viewer-f0/js/NeuronDrawer.js

@@ -1 @@
-function NeuronDrawer() {
+function NeuronDrawer(context) {
     this._scene = undefined;
     this._camera = undefined;
     this._renderer = undefined;
-    this._canvasWidth = 500;
-    this._canvasHeight = 500;
-    this._containerContext = undefined;
+    this._canvasWidth = 400;
+    this._canvasHeight = 400;
+    this._containerContext = context;
     this._controls = undefined;
     this._showAxis = false;
@@ -12 +12 @@
     this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40];
     this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50];
-
-}
+    this._canvas = undefined;
+    this._neurons = undefined;
+}
+
+NeuronDrawer.prototype.initialize = function () {
+
+
+    //this._canvas = document.getElementById("containerNeuron");
+    /*
+    if (this._canvas.getContext){
+
+        // use getContext to use the canvas for drawing
+        var ctx = this._canvas.getContext('2d');
+
+        var lastX=this._canvas.width/2, lastY=this._canvas.height/2;
+        var dragStart,dragged;
+        this._canvas.addEventListener('mousedown',function(evt){
+            document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
+            lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
+            lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
+            dragStart = ctx.transformedPoint(lastX,lastY);
+            dragged = false;
+        },false);
+
+        this._canvas.addEventListener('mousemove',function(evt){
+            lastX = evt.offsetX || (evt.pageX - this._canvas.offsetLeft);
+            lastY = evt.offsetY || (evt.pageY - this._canvas.offsetTop);
+            dragged = true;
+            if (dragStart){
+                var pt = ctx.transformedPoint(lastX,lastY);
+                ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
+                redraw();
+            }
+        },false);
+        this._canvas.addEventListener('mouseup',function(evt){
+            dragStart = null;
+            if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
+        },false);
+
+        // Filled triangle
+        ctx.beginPath();
+        ctx.moveTo(25,25);
+        ctx.lineTo(105,25);
+        ctx.lineTo(25,105);
+        ctx.fill();
+
+        // Stroked triangle
+        ctx.beginPath();
+        ctx.moveTo(125,125);
+        ctx.lineTo(125,45);
+        ctx.lineTo(45,125);
+        ctx.closePath();
+        ctx.stroke();
+
+    }
+    else
+        alert("dupa");
+    //this._debug();*/
+}
+
 
 NeuronDrawer.prototype.showPartAxis = function () {
@@ -23 +81 @@
     this._renderer.setClearColor(0xffffff, 1);
     this._renderer.setSize(this._canvasWidth, this._canvasHeight);
-    this._containerContext = $("#containerNeuron");
+    //this._containerContext = $("#containerNeuron");
     this._containerContext.append(this._renderer.domElement);
 }
@@ -126 +184 @@
 }
 
-NeuronDrawer.prototype.drawConnection = function (id, connections, einfos) {
-
-    var destination = connections[id].getDestination();
+NeuronDrawer.prototype.drawConnection = function (id, neurons, connections, einfos) {
+
+    var n2;
+
+    for(var iw = 0; iw < this._getNumberOfInputs(id,connections); iw++)
+    {
+        n2 = neurons[iw];
+
+        var yw = this._inputY(iw);
+        var xw = yw / 4;
+        this._drawLine()
+    }
+    
+    /*var destination = connections[id].getDestination();
     var numberOfConnToDest = 0;
     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));
     }
-
-}
-
+*/
+}
+
+NeuronDrawer.prototype._inputY = function(number, connections){
+    return (1 + number)*this._neurons[number].sizeY / ((this._getNumberOfInputs(number, connections)) + 1);
+}
+
+NeuronDrawer.prototype._drawLine = function(x1, y1, x2, y2){
+    var geometry = new THREE.Geometry();
+    geometry.vertices.push(new THREE.Vector3(x1, y1, 0));
+    geometry.vertices.push(new THREE.Vector3(x2, y2, 0));
+
+    var material = new THREE.LineBasicMaterial({
+        color: 0x0000ff
+    });
+
+    var SCALE = 1;
+
+    var line = new THREE.Line(geometry, material);
+    line.scale.set(SCALE, SCALE, SCALE);
+    this._scene.add(line);
+}
 
 NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
@@ -278 +366 @@
 }
 
+NeuronDrawer.prototype._getSize = function(scheme)
+{
+    var neuron = {sizeX: 0, sizeY: 0};
+    var position = 0;
+    var noOfBlocks = 0;//number of "blocks" to draw
+    var noOfLines = 0;//number of line to draw
+    noOfBlocks = scheme[position++];
+    for (var i = 0; i < noOfBlocks; i++) {
+        noOfLines = scheme[position++];
+
+        for (var j = 0; j < noOfLines; j++) {
+
+            if(scheme[position] > neuron.sizeX)
+                neuron.sizeX = scheme[position];
+            position++;
+            if(scheme[position] > neuron.sizeY)
+                neuron.sizeY = scheme[position];
+            position++;
+
+            if(scheme[position] > neuron.sizeX)
+                neuron.sizeX = scheme[position];
+            position++;
+            if(scheme[position] > neuron.sizeY)
+                neuron.sizeY = scheme[position];
+            position++;
+
+            position = position - 2;
+        }
+        position = position + 2;//move to value which define number of lines to draw
+    }
+    return neuron;
+}
+
 NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) {
+
+    this._neurons = [];
 
     for (var i = 0; i < layouts.length; i++) {
@@ -284 +407 @@
 
         scheme = this._chooseSchema(i,neurons, connections, classes)
-
+        var neuronData = this._getSize(scheme);
+        neuronData.scheme = scheme;
+        this._neurons.push(neuronData);
         this.drawNeuron(layouts[i].x * 100  , -layouts[i].y * 100 , scheme);
     }
 
     //for (var i = 0; i < connections.length; i++)
-    //    this.drawConnection(i, connections, einfos);
+    //    this.drawConnection(i, neurons, connections, einfos);
 }
 

js/viewer-f0/js/SmartLayout.js

@@ -151 +151 @@
 }
 
-
-
-
 function canMerge(block, block2, dx, dy){
     var x1, y1, x2, y2;

js/viewer-f0/js/graphicsEngine.js

@@ -1 @@
-function GraphicsEngine() {
+function GraphicsEngine(context) {
     this._scene = undefined;
     this._camera = undefined;
     this._renderer = undefined;
-    this._canvasWidth = 500;
-    this._canvasHeight = 500;
-    this._containerContext = undefined;
+    this._canvasWidth = 400;
+    this._canvasHeight = 400;
+    this._containerContext = context;
     this._BALL_RADIUS = 0.25;
     this._controls = undefined;
@@ -21 +21 @@
     this._renderer.setClearColor(0x000000, 1);
     this._renderer.setSize(this._canvasWidth, this._canvasHeight);
-    this._containerContext = $("#container");
+    //this._containerContext = $("#container");
     this._containerContext.append(this._renderer.domElement);
 }
@@ -43 +43 @@
 GraphicsEngine.prototype._rotateObject = function (object, part) {
     object.rotateX(part.getXrot());
-    object.rotateY(part.getYrot());
+    object.rotateY(-part.getYrot());
     object.rotateZ(part.getZrot());
 }
@@ -74 +74 @@
 }
 
+GraphicsEngine.prototype._debugShow = function(object)
+{
+    var pos = object.position;
+    var scale = object.scale;
+    var rot = object.rotation
+    //console.log(pos.x, pos.y, pos.z , "|", rot.x, rot.y, rot.z,"|", scale.x, scale.y, scale.z);
+}
+
 GraphicsEngine.prototype._addEllipsoid = function (part) {
     var geometry = new THREE.SphereGeometry(1, 20, 20);
-    geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));
-
     var ellipsoidMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
     ellipsoidMaterial.color.setRGB(part.getR(), part.getG(), part.getB())
 
     var ellipsoid = new THREE.Mesh(geometry, ellipsoidMaterial);
+    ellipsoid.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
     ellipsoid.position.set(part.getX(), part.getY(), part.getZ());
     this._rotateObject(ellipsoid, part);
@@ -88 +95 @@
     if(this._showAxis)
         ellipsoid.add(new THREE.AxisHelper(1));
+
     this._scene.add(ellipsoid);
 }
@@ -93 +101 @@
 GraphicsEngine.prototype._addCylinder = function (part) {
     var geometry = new THREE.CylinderGeometry(1, 1, 1, 10, 10, false);
-    geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getZshape(), part.getXshape(), part.getYshape()));
 
     var material = new THREE.MeshLambertMaterial({color: 0xffffff});
@@ -99 +106 @@
 
     var cylinder = new THREE.Mesh(geometry, material);
+
+    cylinder.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
     cylinder.position.set(part.getX(), part.getY(), part.getZ());
-    cylinder.overdraw = true;
     this._rotateObject(cylinder, part);
 
     this._parts.push(cylinder);
     if(this._showAxis)
-        cylinder.add(new THREE.AxisHelper(1));
+        cylinder.add(new THREE.AxisHelper(5));
+
     this._scene.add(cylinder);
+
 }
 
 GraphicsEngine.prototype._addCuboid = function (part) {
     var geometry = new THREE.CubeGeometry(2, 2, 2, 10, 10, 10);
-    geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));
+    //TODO: poprawić getXshape na getXscale
 
     var material = new THREE.MeshLambertMaterial({color: 0xffffff});
@@ -117 +127 @@
 
     var cube = new THREE.Mesh(geometry, material);
+    cube.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
     cube.position.set(part.getX(), part.getY(), part.getZ());
     this._rotateObject(cube, part);
@@ -127 +138 @@
 
 GraphicsEngine.prototype.addPart = function (part) {
+    console.log(part.getX(),part.getY(),part.getZ(), "|", part.getXshape(),part.getYshape(),part.getZshape(),"|",part.getXrot(),part.getYrot(),part.getZrot())
     switch (part.getType()) {
         case 0:
@@ -196 +208 @@
 
         copy.rotateX(joint.getXrot());
-        copy.rotateY(joint.getYrot());
+        copy.rotateY(-joint.getYrot());
         copy.rotateZ(joint.getZrot());
 
@@ -233 +245 @@
     this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement)
     this._debug();
+
+
+
 }
 
@@ -255 +270 @@
 GraphicsEngine.prototype.debugTest = function()
 {
-
-}
-
+    for(var i = 0; i < this._parts.length; i++)
+        this._debugShow(this._parts[i]);
+}
+