Changeset 216 for js/viewer-f0


Ignore:
Timestamp:
04/06/14 14:43:29 (11 years ago)
Author:
mmichalski
Message:

Fix bug with many SmartLayouts? on the same page

Location:
js/viewer-f0
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r214 r216  
    55
    66.cont{
    7     height: 500px;
    8     width: 500px;
     7    height: 400px;
     8    width: 400px;
    99    display: inline-block;
    1010    border-style: solid;
    … …  
    2424    overflow: hidden;
    2525}
     26
     27.header{
     28    text-align: center;
     29}

  • js/viewer-f0/index.html

    r208 r216  
    2121<script src="js/Structures/NeuroClass.js"></script>
    2222<script src="js/Viewer.js"></script>
    23 <!--
     23
     24<h2 class="header">From TextArea</h2>
     25
    2426<div class="window">
    2527    <div class="cont" id="container"></div>
    … …  
    3638</div>
    3739
     40<h2 class="header">From Framestick Site</h2>
     41
    3842<div class="window">
    3943    <div class="cont" id="container1"></div>
    … …  
    4953</div>
    5054
    51 
     55<h2 class="header">From Code</h2>
    5256
    5357<div class="window">
    … …  
    6468</div>
    6569
    66 -->
     70<h2 class="header">From file</h2>
     71
    6772<div class="window">
    6873    <div class="cont" id="container3"></div>

  • js/viewer-f0/js/NeuronDrawer.js

    r214 r216  
    8686
    8787    for (var i = 0; i < connections.length; i++)
    88         this.drawConnection(i, neurons, connections, einfos);
     88        this.drawConnection(i, neurons, connections, layouts);
    8989}
    9090

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

    r208 r216  
    1 var neuroSL = null;
    2 var neuroConnSL = null;
    3 
    4 var einfos = [];
    5 var blocks = [];
    6 
    7 var N = null;
    8 
    9 function SmartLayout(neu, con)
    10 {
    11     neuroSL = neu;
    12     neuroConnSL = con;
    13     N = neuroSL.length;
    14 
    15     /////////////////////////
    16     //////Faza pierwsza//////
    17     /////////////////////////
    18     blocks = new Array(N);
    19     for(var i = 0; i < N; i++){
    20         einfos.push(new einfo())
    21     }
    22 
    23     for(var i = 0; i < N; i++)
    24         setElement(i);
    25 
    26     /////////////////////////
    27     //////Faza druga/////////
     1function SmartLayout(neu, con) {
     2    this.neuroSL = neu;
     3    this.neuroConnSL = con;
     4    this.N = this.neuroSL.length;
     5    this.blocks = [];
     6    this.einfos = [];
     7    var parent = this;
     8
     9    einfo = function () {
     10        this.block = null;
     11        this.x = null;
     12        this.y = null;
     13    }
     14
     15    this.Block = function (number) {
     16        this.id = number;
     17        this.elements = [];
     18        this.w = 1;
     19        this.h = 1;
     20        this.minx = 0;
     21        this.miny = 0;
     22        this.maxx = 0;
     23        this.maxy = 0;
     24        this.addElement(number, 0, 0);
     25        blocks[this.id] = this;
     26        this.map = [];
     27    }
     28
     29    this.Block.prototype.destroy = function () {
     30        blocks[this.id] = 0;
     31        this.freeMap();
     32    }
     33
     34    this.Block.prototype.freeMap = function () {
     35        if (this.map)
     36            this.map = [];
     37    }
     38
     39    this.Block.prototype.needMap = function () {
     40        if (this.map)
     41            return;
     42        this.createMap();
     43    }
     44
     45    this.Block.prototype.createMap = function () {
     46        this.freeMap();
     47        this.w = this.maxx - this.minx + 1;
     48        this.h = this.maxy - this.miny + 1;
     49        for (var i = 0; i < this.w * this.h; i++)
     50            this.map.push(0);
     51
     52        for (var i = 0; i < this.elements.length; i++) {
     53            var e = this.elements[i];
     54            this.map[this.w * (parent.einfos[e].y - this.miny) + (parent.einfos[e].x - this.minx)] = 1;
     55        }
     56    }
     57
     58    this.Block.prototype.addElement = function (number, x, y) {
     59        this.elements.push(number);
     60        parent.einfos[number].x = x;
     61        parent.einfos[number].y = y;
     62        parent.einfos[number].block = this;
     63    }
     64}
     65
     66SmartLayout.prototype.create = function () {
     67    /////////////////////////
     68    //////Phase one//////////
     69    /////////////////////////
     70    blocks = new Array(this.N);
     71    for (var i = 0; i < this.N; i++) {
     72        this.einfos.push(new einfo())
     73    }
     74
     75    for (var i = 0; i < this.N; i++)
     76        this.setElement(i);
     77
     78    /////////////////////////
     79    //////Phase two//////////
    2880    /////////////////////////
    2981
    3082    var first = null;
    3183    var el;
    32     for(el = 0; el < N; el++){
    33         if(blocks[el]){
     84    for (el = 0; el < this.N; el++) {
     85        if (blocks[el]) {
    3486            first = blocks[el];
    3587            el++;
    … …  
    3890    }
    3991
    40     while(el < N){
    41         if((first.maxx - first.minx) > (first.maxy - first.miny)){
     92    while (el < this.N) {
     93        if ((first.maxx - first.minx) > (first.maxy - first.miny)) {
    4294            var y = first.maxy + 2;
    4395            var x = first.minx;
    4496            var ex = first.maxx;
    45             while (el<N)
    46             {
    47                 if (blocks[el])
    48                 {
     97            while (el < this.N) {
     98                if (blocks[el]) {
    4999                    var dx = blocks[el].maxx - blocks[el].minx + 2;
    50                     merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
     100                    this.merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
    51101                    x += dx;
    52102                    if (x > ex)
    … …  
    56106            }
    57107        }
    58         else
    59         {
     108        else {
    60109            var x = first.maxx + 2;
    61110            var y = first.miny;
    62111            var ey = first.maxy;
    63             while (el<N)
    64             {
    65                 if (blocks[el])
    66                 {
     112            while (el < this.N) {
     113                if (blocks[el]) {
    67114                    var dy = blocks[el].maxy - blocks[el].miny + 2;
    68                     merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
     115                    this.merge(first, blocks[el], x - blocks[el].minx, y - blocks[el].miny);
    69116                    y += dy;
    70117                    if (y > ey)
    … …  
    74121            }
    75122        }
    76         }
     123    }
    77124
    78125    //Pokazanie wartości
    79126    if (first) // at this stage we have a single block containing all neurons
    80127    {
    81         //console.log(" - - setting coordinates - -\n");
    82128        var i;
    83129        first.createMap();
    84         for (i = 0; i < first.elements.length; i++)
    85         {
     130        for (i = 0; i < first.elements.length; i++) {
    86131            el = first.elements[i];
    87             //console.log(el, einfos[el].x * 70, -1 * einfos[el].y * 70);
    88132        }
    89133        delete first;
    90134    }
    91 
    92 }
    93 
    94 function einfo(){
    95     this.block = null;
    96     this.x = null;
    97     this.y = null;
    98 }
    99 
    100 function Block(number){
    101     this.id = number;
    102     this.elements = [];
    103     this.w = 1;
    104     this.h = 1;
    105     this.minx = 0;
    106     this.miny = 0;
    107     this.maxx = 0;
    108     this.maxy = 0;
    109     this.addElement(number,0, 0);
    110     blocks[this.id] = this;
    111     this.map = [];
    112 }
    113 
    114 Block.prototype.destroy = function()
    115 {
    116     blocks[this.id] = 0;
    117     this.freeMap();
    118 }
    119 
    120 Block.prototype.freeMap = function(){
    121     if(this.map)
    122         this.map = [];
    123 }
    124 
    125 Block.prototype.needMap = function(){
    126     if(this.map)
    127         return;
    128     this.createMap();
    129 
    130 }
    131 
    132 Block.prototype.createMap = function(){
    133     this.freeMap();
    134     this.w = this.maxx - this.minx + 1;
    135     this.h = this.maxy - this.miny + 1;
    136     for(var i = 0; i < this.w * this.h; i++)
    137         this.map.push(0);
    138 
    139     for (var i = 0; i < this.elements.length; i++)
    140     {
    141         var e = this.elements[i];
    142         this.map[this.w*(einfos[e].y - this.miny) + (einfos[e].x - this.minx)] = 1;
    143     }
    144 }
    145 
    146 Block.prototype.addElement = function(number, x, y){
    147     this.elements.push(number);
    148     einfos[number].x = x;
    149     einfos[number].y = y;
    150     einfos[number].block = this;
    151 }
    152 
    153 function canMerge(block, block2, dx, dy){
     135}
     136
     137
     138SmartLayout.prototype.canMerge = function (block, block2, dx, dy) {
    154139    var x1, y1, x2, y2;
    155140
    … …  
    173158    block2.createMap();
    174159
    175     for (y = y1; y <= y2; y++)
    176     {
     160    for (y = y1; y <= y2; y++) {
    177161        for (x = x1; x <= x2; x++)
    178162            if (block.map[block.w * y + x] && block2.map[block2.w * (y - dy) + (x - dx)])
    … …  
    183167}
    184168
    185 function merge(block, block2, dx, dy){
    186 
    187     if(!canMerge(block, block2, dx, dy))
     169SmartLayout.prototype.merge = function (block, block2, dx, dy) {
     170
     171    if (!this.canMerge(block, block2, dx, dy))
    188172        return 0;
    189173
    … …  
    191175
    192176
    193     for (var i = 0; i < block2.elements.length; i++)
    194     {
     177    for (var i = 0; i < block2.elements.length; i++) {
    195178        var e = block2.elements[i];
    196         block.addElement(e, einfos[e].x + dx, einfos[e].y + dy);
     179        block.addElement(e, this.einfos[e].x + dx, this.einfos[e].y + dy);
    197180    }
    198181
    … …  
    206189    delete block2;
    207190    return 1;
    208 
    209 }
    210 
    211 function connectAsInput(e, e2){
     191}
     192
     193SmartLayout.prototype.connectAsInput = function (e, e2) {
    212194    var b, b2;
    213195
    214     b = einfos[e].block;
    215 
    216 
    217     if (!einfos[e2].block)
     196    b = this.einfos[e].block;
     197
     198
     199    if (!this.einfos[e2].block)
    218200        new Block(e2);
    219201
    220     b2 = einfos[e2].block;
    221 
    222     if (b == b2)
    223     {
     202    b2 = this.einfos[e2].block;
     203
     204    if (b == b2) {
    224205        return;
    225206    }
    226207    var dx, dy;
    227     dx = einfos[e].x - einfos[e2].x;
    228     dy = einfos[e].y - einfos[e2].y;
    229 
    230     if (merge(b, b2, dx - 1, dy))
     208    dx = this.einfos[e].x - this.einfos[e2].x;
     209    dy = this.einfos[e].y - this.einfos[e2].y;
     210
     211    if (this.merge(b, b2, dx - 1, dy))
    231212        return;
    232213
    233     for (var proba = 1;; proba++)
    234     {
    235         if (merge(b, b2, dx - 1, dy - proba))
     214    for (var proba = 1; ; proba++) {
     215        if (this.merge(b, b2, dx - 1, dy - proba))
    236216            return;
    237         if (merge(b, b2, dx - 1, dy + proba))
     217        if (this.merge(b, b2, dx - 1, dy + proba))
    238218            return;
    239219    }
    240220}
    241221
    242 function setElement(e){
    243     if (einfos[e].block != null)
    244     {
     222SmartLayout.prototype.setElement = function (e) {
     223    if (this.einfos[e].block != null) {
    245224        return;
    246225    }
    247226
    248     new Block(e);
    249     //trzeba pobrać elementy
    250     var n = getNumOfInCon(e);
    251     for (var we = 0; we < n; we++)
    252     {
    253         var e2 = getLink(e, we);
     227    new this.Block(e);
     228
     229    var n = this.getNumOfInCon(e);
     230    for (var we = 0; we < n; we++) {
     231        var e2 = this.getLink(e, we);
    254232        if (e2 < 0)
    255233            continue;
    256234        if (e == e2)
    257235            continue;
    258         setElement(e2);
    259         connectAsInput(e, e2);
    260     }
    261 }
    262 
    263 function getNumOfInCon(nr){
     236        this.setElement(e2);
     237        this.connectAsInput(e, e2);
     238    }
     239}
     240
     241SmartLayout.prototype.getNumOfInCon = function (nr) {
    264242    var number = 0;
    265     for(var i = 0;  i < neuroConnSL.length; i++){
    266         if(neuroConnSL[i].getDestination() == nr)
     243    for (var i = 0; i < this.neuroConnSL.length; i++) {
     244        if (this.neuroConnSL[i].getDestination() == nr)
    267245            number++;
    268246    }
    … …  
    270248}
    271249
    272 function getLink(destination, number){
     250SmartLayout.prototype.getLink = function (destination, number) {
    273251    var temp = 0;
    274     for(var i = 0; i < neuroConnSL.length; i++){
    275         if(neuroConnSL[i].getDestination() == destination){
    276 
    277             if(temp == number)
    278                 return neuroConnSL[i].getSource();
     252    for (var i = 0; i < this.neuroConnSL.length; i++) {
     253        if (this.neuroConnSL[i].getDestination() == destination) {
     254
     255            if (temp == number)
     256                return this.neuroConnSL[i].getSource();
    279257            else
    280258                temp++;

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

    r214 r216  
    245245        this._neuronDrawer = new NeuronDrawer(this.NetworkSettings.context, this.NetworkSettings.width, this.NetworkSettings.height );
    246246        this._neuronDrawer.initializeNewCanvas();
    247         new SmartLayout(this._neurons, this._neuroConns);
    248         this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
     247        var layout = new SmartLayout(this._neurons, this._neuroConns);
     248        layout.create();
     249        this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, layout.einfos, this._neuroClasses);
    249250        this._neuronDrawer.finalize();
    250 
    251         /*this._neuronDrawer = new NeuronDrawer(this._neuronsContext);
    252         this._neuronDrawer.initializeScene();
    253         new SmartLayout(this._neurons, this._neuroConns);
    254         this._neuronDrawer.drawNeuralNetwork(this._neurons, this._neuroConns, einfos, this._neuroClasses);
    255         this._neuronDrawer.renderScene();*/
    256251    }
    257252}
    … …  
    265260
    266261    viewer.NetworkSettings.context =  "containerNeuron";
    267     viewer.NetworkSettings.width = 400;
    268     viewer.NetworkSettings.height = 400;
    269262    viewer.run(viewer.Mode.TEXTAREA, $("#geno"));
    270263}
    … …  
    275268    viewer.VisualizationSettings.width = 400;
    276269    viewer.VisualizationSettings.height = 400;
    277 
    278270    viewer.NetworkSettings.context =  "containerNeuron1";
    279271    viewer.NetworkSettings.width = 400;
    … …  
    299291    //var debugCreatureName = "Quadro";
    300292    var debugCreatureName = "spider";
    301     //viewer.VisualizationSettings.context = $("#container3");
    302     //viewer.VisualizationSettings.width = 400;
    303     //viewer.VisualizationSettings.height = 400;
     293    viewer.VisualizationSettings.context = $("#container3");
     294    viewer.VisualizationSettings.width = 400;
     295    viewer.VisualizationSettings.height = 400;
    304296    viewer.NetworkSettings.context =  "containerNeuron3";
    305     //viewer.NetworkSettings.width = 400;
    306     //viewer.NetworkSettings.height = 400;
     297    viewer.NetworkSettings.width = 400;
     298    viewer.NetworkSettings.height = 400;
    307299    viewer.run(viewer.Mode.LINK, "http://localhost:63343/FramestickFavi/creatures/" + debugCreatureName + ".txt");
    308300}

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

    r208 r216  
    263263        });
    264264
    265     if(!this._render)
     265    /*if(!this._render)
    266266    {
    267267        return;
    268     }
     268    }*/
    269269
    270270    this._renderer.render(this._scene, this._camera);
Note: See TracChangeset for help on using the changeset viewer.