Ignore:
Timestamp:
04/03/14 17:07:28 (10 years ago)
Author:
mmichalski
Message:

New NeuronDrawer? without U-shape in connections

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;
     1function NeuronDrawer(contextName, width, height) {
     2    this._canvasWidth = width;
     3    this._canvasHeight = height;
     4    this._containerContextName = contextName;
    105    this._unknown_symbol=[1,4, 25,25, 75,25, 75,75, 25,75, 25,25];
    116    this._neuron_symbol=[1,4, 75,50, 25,0, 25,99, 75,50, 100,50];
    127    this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40];
    138    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;
    159    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
     18NeuronDrawer.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
     32NeuronDrawer.prototype._addZoom = function(){
    11533    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
     57NeuronDrawer.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);
    12781}
    12882
    12983NeuronDrawer.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
    13786    var position = 0;
    138     var noOfBlocks = 0;//number of "blocks" to draw
     87    var noOfBlocks = scheme[position++];//number of "blocks" to draw
    13988    var noOfLines = 0;//number of line to draw
    140     noOfBlocks = scheme[position++];
    14189    for (var i = 0; i < noOfBlocks; i++) {
    14290        noOfLines = scheme[position++];
    14391
    14492        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
     120NeuronDrawer.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
     135NeuronDrawer.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
     180NeuronDrawer.prototype._inputY = function(number, connections, id){
     181    return ((1 + number)* this._neurons[id].sizeY) / ((this._getNumberOfInputs(id, connections)) + 1);
     182}
     183
     184NeuronDrawer.prototype.finalize = function()
     185{
     186    this._stage.add(this._layer);
    161187}
    162188
    … …  
    184210}
    185211
    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
    346213
    347214NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
    … …  
    368235NeuronDrawer.prototype._getSize = function(scheme)
    369236{
    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
    371246    var position = 0;
    372     var noOfBlocks = 0;//number of "blocks" to draw
     247    var noOfBlocks = scheme[position++];//number of "blocks" to draw
    373248    var noOfLines = 0;//number of line to draw
    374     noOfBlocks = scheme[position++];
     249
    375250    for (var i = 0; i < noOfBlocks; i++) {
    376251        noOfLines = scheme[position++];
    … …  
    378253        for (var j = 0; j < noOfLines; j++) {
    379254
    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];
    392279            position++;
    393280
    … …  
    395282        }
    396283        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;
    397288    }
    398289    return neuron;
    399290}
    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.