Changeset 188 for js/viewer-f0/js/NeuronDrawer.js

Timestamp:

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

Author:

mmichalski

Message:

Examples how to open creatues by viewer

File:

• js/viewer-f0/js/NeuronDrawer.js (modified) (7 diffs)

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);
 }