Changeset 208 for js


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

New NeuronDrawer? without U-shape in connections

Location:
js/viewer-f0
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • js/viewer-f0/css/styles.css

    r193 r208  
    1919    width: 1300px;
    2020}
     21
     22#NewCanvas{
     23    overflow: hidden;
     24}

  • js/viewer-f0/index.html

    r190 r208  
    1010<script src="js/library/three.min.js"></script>
    1111<script src="js/library/TrackballControls.js"></script>
     12<script src="js/library/kinetic-5.1.0.min.js"></script>
    1213<script src="js/Structures/Model.js"></script>
    1314<script src="js/Structures/Part.js"></script>
    … …  
    2021<script src="js/Structures/NeuroClass.js"></script>
    2122<script src="js/Viewer.js"></script>
    22 
     23<!--
    2324<div class="window">
    2425    <div class="cont" id="container"></div>
    … …  
    3031        <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div>
    3132        <div id="test">
    32             <!-- Wywołanie openEmbeddedCreature z Viewer.js-->
    3333            <button onclick="openTextAreaCreature()">Render</button>
    3434        </div>
    … …  
    6464</div>
    6565
    66 
    67 
     66-->
    6867<div class="window">
    6968    <div class="cont" id="container3"></div>

  • 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 

  • js/viewer-f0/js/SmartLayout.js

    r193 r208  
    7979    if (first) // at this stage we have a single block containing all neurons
    8080    {
    81         console.log(" - - setting coordinates - -\n");
     81        //console.log(" - - setting coordinates - -\n");
    8282        var i;
    8383        first.createMap();
    … …  
    8585        {
    8686            el = first.elements[i];
    87             console.log(el, einfos[el].x * 70, -1 * einfos[el].y * 70);
     87            //console.log(el, einfos[el].x * 70, -1 * einfos[el].y * 70);
    8888        }
    8989        delete first;

  • js/viewer-f0/js/Viewer.js

    r193 r208  
    1212    this._neuronsContext = undefined;
    1313    this._context = undefined;
    14     this._urlToXML = "http://www.framsticks.com/files/apps/config/f0def.xml";
     14    this._urlToXML = 'f0def.xml';//"http://www.framsticks.com/files/apps/config/f0def.xml";
    1515    this._xml = undefined;
    1616    this._model = new Model();
    … …  
    2929    this.downloadXML();
    3030    this.parseGeneXml();
    31 }
    32 
    33 Viewer.prototype.showVisualization = function(value, context){
    34     this._showVisualization = value;
    35     this._visualizationContext = context;
    36 }
    37 
    38 Viewer.prototype.showNeuron = function(value, context)
    39 {
    40      this._showNeurons = true;
    41      this._neuronsContext = context;
     31    this.VisualizationSettings = {
     32        context: undefined,
     33        width: undefined,
     34        height: undefined
     35    };
     36    this.NetworkSettings = {
     37        context: undefined,
     38        width: undefined,
     39        height: undefined
     40    };
    4241}
    4342
    … …  
    165164};
    166165
    167 
    168166Viewer.prototype._getCreatureFromLink = function (link) {
    169167    var lines = undefined;
    … …  
    239237};
    240238
    241 Viewer.prototype.mainLoop = function () {
    242     this._graphicsEngine.initializeScene();
    243     this.renderCreature();
    244     this._graphicsEngine.debugTest();
    245     this._graphicsEngine.renderScene();
    246 
    247     this._neuronDrawer.initializeScene();
    248     new SmartLayout(this._neurons, this._neuroConns);
    249     this._neuronDrawer.drawNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
    250     this._neuronDrawer.renderScene();
    251 
    252 };
    253 
    254239Viewer.prototype.run = function (mode, content) {
    255240    this.parseCreature(mode, content);
    256241
    257     if (this._showVisualization) {
    258         this._graphicsEngine = new GraphicsEngine(this._visualizationContext)
     242    if (this.VisualizationSettings.context) {
     243        this._graphicsEngine = new GraphicsEngine(this.VisualizationSettings.context, this.VisualizationSettings.width, this.VisualizationSettings.height);
    259244        this._graphicsEngine.initializeScene();
    260245        this.renderCreature();
    … …  
    262247        this._graphicsEngine.renderScene();
    263248    }
    264     if (this._showNeurons) {
    265         this._neuronDrawer = new NeuronDrawer(this._neuronsContext);
     249    if (this.NetworkSettings.context) {
     250        this._neuronDrawer = new NeuronDrawer(this.NetworkSettings.context, this.NetworkSettings.width, this.NetworkSettings.height );
     251        this._neuronDrawer.initializeNewCanvas();
     252        new SmartLayout(this._neurons, this._neuroConns);
     253        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
     254        this._neuronDrawer.finalize();
     255
     256        /*this._neuronDrawer = new NeuronDrawer(this._neuronsContext);
    266257        this._neuronDrawer.initializeScene();
    267258        new SmartLayout(this._neurons, this._neuroConns);
    268         this._neuronDrawer.drawNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
    269         this._neuronDrawer.renderScene();
     259        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
     260        this._neuronDrawer.renderScene();*/
    270261    }
    271262}
    … …  
    274265    var viewer = new Viewer();
    275266
    276     viewer.showVisualization(true, $("#container"));
    277     viewer.showNeuron(true, $("#containerNeuron"));
     267    viewer.VisualizationSettings.context = $("#container");
     268    viewer.VisualizationSettings.width = 400;
     269    viewer.VisualizationSettings.height = 400;
     270
     271    viewer.NetworkSettings.context =  "containerNeuron";
     272    viewer.NetworkSettings.width = 400;
     273    viewer.NetworkSettings.height = 400;
    278274    viewer.run(viewer.Mode.TEXTAREA, $("#geno"));
    279275}
    … …  
    281277function openEmbeddedCreature() {
    282278    var viewer = new Viewer();
    283     viewer.showVisualization(true, $("#container1"));
    284     viewer.showNeuron(true, $("#containerNeuron1"));
     279    viewer.VisualizationSettings.context = $("#container1");
     280    viewer.VisualizationSettings.width = 400;
     281    viewer.VisualizationSettings.height = 400;
     282
     283    viewer.NetworkSettings.context =  "containerNeuron1";
     284    viewer.NetworkSettings.width = 400;
     285    viewer.NetworkSettings.height = 400;
    285286    viewer.run(viewer.Mode.EMBEDDED, "http://ec.framsticks.com/www/index.php?PAGE=view_genotype&ID=55");
    286287}
    … …  
    288289function openCodeCreature() {
    289290    var viewer = new Viewer();
    290 
    291     viewer.showVisualization(true, $("#container2"));
    292     viewer.showNeuron(true, $("#containerNeuron2"));
     291    viewer.VisualizationSettings.context = $("#container2");
     292    viewer.VisualizationSettings.width = 400;
     293    viewer.VisualizationSettings.height = 400;
     294    viewer.NetworkSettings.context =  "containerNeuron2";
     295    viewer.NetworkSettings.width = 400;
     296    viewer.NetworkSettings.height = 400;
    293297    viewer.run(viewer.Mode.CODE, "//0\np:\np: x=1");
    294298}
    … …  
    296300function openFileCreature() {
    297301    var viewer = new Viewer();
    298 
    299     var debugCreatureName = "example4";
    300     viewer.showVisualization(true, $("#container3"));
    301     viewer.showNeuron(true, $("#containerNeuron3"));
     302    //var debugCreatureName = "example4";
     303    //var debugCreatureName = "caterpillar";
     304    var debugCreatureName = "Quadro";
     305    //viewer.VisualizationSettings.context = $("#container3");
     306    //viewer.VisualizationSettings.width = 400;
     307    //viewer.VisualizationSettings.height = 400;
     308    viewer.NetworkSettings.context =  "containerNeuron3";
     309    viewer.NetworkSettings.width = 400;
     310    viewer.NetworkSettings.height = 400;
    302311    viewer.run(viewer.Mode.LINK, "http://localhost:63343/FramestickFavi/creatures/" + debugCreatureName + ".txt");
    303312}

  • js/viewer-f0/js/graphicsEngine.js

    r193 r208  
    1 function GraphicsEngine(context) {
     1function GraphicsEngine(context, width, height) {
    22    this._scene = undefined;
    33    this._camera = undefined;
    44    this._renderer = undefined;
    5     this._canvasWidth = 400;
    6     this._canvasHeight = 400;
    7     this._containerContext = context;
     5    this._canvasWidth = width;
     6    this._canvasHeight = height;
     7    this._containerContextName = context;
    88    this._BALL_RADIUS = 0.25;
    99    this._controls = undefined;
    … …  
    1111    this._debug1 = 0
    1212    this._showAxis = false;
     13    this._render = true;
    1314}
    1415
    … …  
    2122    this._renderer.setClearColor(0x000000, 1);
    2223    this._renderer.setSize(this._canvasWidth, this._canvasHeight);
    23     //this._containerContext = $("#container");
    24     this._containerContext.append(this._renderer.domElement);
     24    this._containerContextName.append(this._renderer.domElement);
     25
     26    var self = this;
     27    this._renderer.domElement.addEventListener('mousemove', function(evt){
     28        self._render = true;
     29    });
    2530}
    2631
    … …  
    138143
    139144GraphicsEngine.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())
     145    //console.log(part.getX(),part.getY(),part.getZ(), "|", part.getXshape(),part.getYshape(),part.getZshape(),"|",part.getXrot(),part.getYrot(),part.getZrot())
    141146    switch (part.getType()) {
    142147        case 0:
    … …  
    257262            self.renderScene();
    258263        });
     264
     265    if(!this._render)
     266    {
     267        return;
     268    }
     269
    259270    this._renderer.render(this._scene, this._camera);
    260271    this._controls.update();
    261 
     272    this._render = false;
    262273}
    263274
    264275GraphicsEngine.prototype._debug = function()
    265276{
    266 
    267     this._scene.add( new THREE.AxisHelper( 20 ) );
     277    this._scene.add(new THREE.AxisHelper( 20 ));
    268278}
    269279
Note: See TracChangeset for help on using the changeset viewer.