Changeset 188


Ignore:
Timestamp:
03/23/14 12:52:58 (10 years ago)
Author:
mmichalski
Message:

Examples how to open creatues by viewer

Location:
js/viewer-f0
Files:
1 added
1 deleted
6 edited

Legend:

Unmodified
Added
Removed
  • js/viewer-f0/css/styles.css

    r143 r188  
    1 #menu{
    2     display: inline;
    3     position: fixed;
    4     left: 1050px;
     1.menu{
     2    float: right;
    53}
    64
     
    1614    width: 400px;
    1715}
     16
     17.window{
     18    height: 600px;
     19    width: 1300px;
     20}
  • js/viewer-f0/f0def.xml

    r134 r188  
    33
    44 <CLASS ID="m" NAME="Model">
    5     <GROUP NAME="Properties" />
    6     <GROUP NAME="Visual" />
    7     <PROP ID="se" NAME="startenergy" GROUP="0" FLAGS="1024" TYPE="f" />
    8     <PROP ID="Vstyle" NAME="vis_style" GROUP="1" FLAGS="0" TYPE="s" MIN="0" MAX="-1" />
    9 </CLASS>
     5  <GROUP NAME="Properties" />
     6  <GROUP NAME="Visual" />
     7  <PROP ID="se" NAME="startenergy" GROUP="0" FLAGS="1024" TYPE="f" />
     8  <PROP ID="Vstyle" NAME="vis_style" GROUP="1" FLAGS="0" TYPE="s" MIN="0" MAX="-1" />
     9 </CLASS>
    1010
    1111 <CLASS ID="p" NAME="Part">
  • js/viewer-f0/index.html

    r173 r188  
    1919<script src="js/SmartLayout.js"></script>
    2020<script src="js/Structures/NeuroClass.js"></script>
    21 <script src="js/main.js"></script>
     21<script src="js/Viewer.js"></script>
     22
     23<div class="window">
     24    <div class="cont" id="container"></div>
     25    <div class="cont" id="containerNeuron"></div>
     26
     27    <div class="menu">
     28        <textarea id="geno">//0&#13;&#10;p:</textarea>
     29
     30        <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div>
     31        <div id="test">
     32            <!-- Wywołanie openEmbeddedCreature z Viewer.js-->
     33            <button onclick="openTextAreaCreature()">Render</button>
     34        </div>
     35    </div>
     36</div>
     37
     38<div class="window">
     39    <div class="cont" id="container1"></div>
     40    <div class="cont" id="containerNeuron1"></div>
     41
     42    <div class="menu">
     43        <div><input type="checkbox" id="axisBox1"> Show axis for parts </input></div>
     44        <div id="test1">
     45
     46            <button onclick="openEmbeddedCreature()">Render</button>
     47        </div>
     48    </div>
     49</div>
    2250
    2351
    24 <div class="cont" id="container"></div>
    25 <div class="cont" id="containerNeuron"></div>
     52</body>
    2653
    27 <div id="menu">
    28     <textarea id="geno">//0&#13;&#10;p:</textarea>
    29     <div><input type="checkbox" id="axisBox"> Show axis for parts </input></div>
    30     <div id="test">
    31         <!-- Wywołanie openWindow z main.js-->
    32         <button onclick="openWindow()">Render</button>
     54<div class="window">
     55    <div class="cont" id="container2"></div>
     56    <div class="cont" id="containerNeuron2"></div>
     57
     58    <div class="menu">
     59        <div><input type="checkbox" id="axisBox2"> Show axis for parts </input></div>
     60        <div id="test2">
     61
     62            <button onclick="openCodeCreature()">Render</button>
     63        </div>
    3364    </div>
     65</div>
    3466
     67
     68</body>
     69
     70<div class="window">
     71    <div class="cont" id="container3"></div>
     72    <div class="cont" id="containerNeuron3"></div>
     73
     74    <div class="menu">
     75        <div><input type="checkbox" id="axisBox3"> Show axis for parts </input></div>
     76        <div id="test3">
     77
     78            <button onclick="openFileCreature()">Render</button>
     79        </div>
     80    </div>
    3581</div>
    3682
  • js/viewer-f0/js/NeuronDrawer.js

    r161 r188  
    1 function NeuronDrawer() {
     1function NeuronDrawer(context) {
    22    this._scene = undefined;
    33    this._camera = undefined;
    44    this._renderer = undefined;
    5     this._canvasWidth = 500;
    6     this._canvasHeight = 500;
    7     this._containerContext = undefined;
     5    this._canvasWidth = 400;
     6    this._canvasHeight = 400;
     7    this._containerContext = context;
    88    this._controls = undefined;
    99    this._showAxis = false;
     
    1212    this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40];
    1313    this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50];
    14 
    15 }
     14    this._canvas = undefined;
     15    this._neurons = undefined;
     16}
     17
     18NeuronDrawer.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
    1674
    1775NeuronDrawer.prototype.showPartAxis = function () {
     
    2381    this._renderer.setClearColor(0xffffff, 1);
    2482    this._renderer.setSize(this._canvasWidth, this._canvasHeight);
    25     this._containerContext = $("#containerNeuron");
     83    //this._containerContext = $("#containerNeuron");
    2684    this._containerContext.append(this._renderer.domElement);
    2785}
     
    126184}
    127185
    128 NeuronDrawer.prototype.drawConnection = function (id, connections, einfos) {
    129 
    130     var destination = connections[id].getDestination();
     186NeuronDrawer.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();
    131200    var numberOfConnToDest = 0;
    132201    var numberOfDrawenCon = 0;
     
    253322        //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));
    254323    }
    255 
    256 }
    257 
     324*/
     325}
     326
     327NeuronDrawer.prototype._inputY = function(number, connections){
     328    return (1 + number)*this._neurons[number].sizeY / ((this._getNumberOfInputs(number, connections)) + 1);
     329}
     330
     331NeuronDrawer.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}
    258346
    259347NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
     
    278366}
    279367
     368NeuronDrawer.prototype._getSize = function(scheme)
     369{
     370    var neuron = {sizeX: 0, sizeY: 0};
     371    var position = 0;
     372    var noOfBlocks = 0;//number of "blocks" to draw
     373    var noOfLines = 0;//number of line to draw
     374    noOfBlocks = scheme[position++];
     375    for (var i = 0; i < noOfBlocks; i++) {
     376        noOfLines = scheme[position++];
     377
     378        for (var j = 0; j < noOfLines; j++) {
     379
     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];
     392            position++;
     393
     394            position = position - 2;
     395        }
     396        position = position + 2;//move to value which define number of lines to draw
     397    }
     398    return neuron;
     399}
     400
    280401NeuronDrawer.prototype.drawNetwork = function (neurons, connections, layouts, classes) {
     402
     403    this._neurons = [];
    281404
    282405    for (var i = 0; i < layouts.length; i++) {
     
    284407
    285408        scheme = this._chooseSchema(i,neurons, connections, classes)
    286 
     409        var neuronData = this._getSize(scheme);
     410        neuronData.scheme = scheme;
     411        this._neurons.push(neuronData);
    287412        this.drawNeuron(layouts[i].x * 100  , -layouts[i].y * 100 , scheme);
    288413    }
    289414
    290415    //for (var i = 0; i < connections.length; i++)
    291     //    this.drawConnection(i, connections, einfos);
     416    //    this.drawConnection(i, neurons, connections, einfos);
    292417}
    293418
  • js/viewer-f0/js/SmartLayout.js

    r142 r188  
    151151}
    152152
    153 
    154 
    155 
    156153function canMerge(block, block2, dx, dy){
    157154    var x1, y1, x2, y2;
  • js/viewer-f0/js/graphicsEngine.js

    r143 r188  
    1 function GraphicsEngine() {
     1function GraphicsEngine(context) {
    22    this._scene = undefined;
    33    this._camera = undefined;
    44    this._renderer = undefined;
    5     this._canvasWidth = 500;
    6     this._canvasHeight = 500;
    7     this._containerContext = undefined;
     5    this._canvasWidth = 400;
     6    this._canvasHeight = 400;
     7    this._containerContext = context;
    88    this._BALL_RADIUS = 0.25;
    99    this._controls = undefined;
     
    2121    this._renderer.setClearColor(0x000000, 1);
    2222    this._renderer.setSize(this._canvasWidth, this._canvasHeight);
    23     this._containerContext = $("#container");
     23    //this._containerContext = $("#container");
    2424    this._containerContext.append(this._renderer.domElement);
    2525}
     
    4343GraphicsEngine.prototype._rotateObject = function (object, part) {
    4444    object.rotateX(part.getXrot());
    45     object.rotateY(part.getYrot());
     45    object.rotateY(-part.getYrot());
    4646    object.rotateZ(part.getZrot());
    4747}
     
    7474}
    7575
     76GraphicsEngine.prototype._debugShow = function(object)
     77{
     78    var pos = object.position;
     79    var scale = object.scale;
     80    var rot = object.rotation
     81    //console.log(pos.x, pos.y, pos.z , "|", rot.x, rot.y, rot.z,"|", scale.x, scale.y, scale.z);
     82}
     83
    7684GraphicsEngine.prototype._addEllipsoid = function (part) {
    7785    var geometry = new THREE.SphereGeometry(1, 20, 20);
    78     geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));
    79 
    8086    var ellipsoidMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
    8187    ellipsoidMaterial.color.setRGB(part.getR(), part.getG(), part.getB())
    8288
    8389    var ellipsoid = new THREE.Mesh(geometry, ellipsoidMaterial);
     90    ellipsoid.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
    8491    ellipsoid.position.set(part.getX(), part.getY(), part.getZ());
    8592    this._rotateObject(ellipsoid, part);
     
    8895    if(this._showAxis)
    8996        ellipsoid.add(new THREE.AxisHelper(1));
     97
    9098    this._scene.add(ellipsoid);
    9199}
     
    93101GraphicsEngine.prototype._addCylinder = function (part) {
    94102    var geometry = new THREE.CylinderGeometry(1, 1, 1, 10, 10, false);
    95     geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getZshape(), part.getXshape(), part.getYshape()));
    96103
    97104    var material = new THREE.MeshLambertMaterial({color: 0xffffff});
     
    99106
    100107    var cylinder = new THREE.Mesh(geometry, material);
     108
     109    cylinder.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
    101110    cylinder.position.set(part.getX(), part.getY(), part.getZ());
    102     cylinder.overdraw = true;
    103111    this._rotateObject(cylinder, part);
    104112
    105113    this._parts.push(cylinder);
    106114    if(this._showAxis)
    107         cylinder.add(new THREE.AxisHelper(1));
     115        cylinder.add(new THREE.AxisHelper(5));
     116
    108117    this._scene.add(cylinder);
     118
    109119}
    110120
    111121GraphicsEngine.prototype._addCuboid = function (part) {
    112122    var geometry = new THREE.CubeGeometry(2, 2, 2, 10, 10, 10);
    113     geometry.applyMatrix(new THREE.Matrix4().makeScale(part.getXshape(), part.getYshape(), part.getZshape()));
     123    //TODO: poprawić getXshape na getXscale
    114124
    115125    var material = new THREE.MeshLambertMaterial({color: 0xffffff});
     
    117127
    118128    var cube = new THREE.Mesh(geometry, material);
     129    cube.scale.set(part.getXshape(), part.getYshape(), part.getZshape())
    119130    cube.position.set(part.getX(), part.getY(), part.getZ());
    120131    this._rotateObject(cube, part);
     
    127138
    128139GraphicsEngine.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())
    129141    switch (part.getType()) {
    130142        case 0:
     
    196208
    197209        copy.rotateX(joint.getXrot());
    198         copy.rotateY(joint.getYrot());
     210        copy.rotateY(-joint.getYrot());
    199211        copy.rotateZ(joint.getZrot());
    200212
     
    233245    this._controls = new THREE.TrackballControls(this._camera, this._renderer.domElement)
    234246    this._debug();
     247
     248
     249
    235250}
    236251
     
    255270GraphicsEngine.prototype.debugTest = function()
    256271{
    257 
    258 }
    259 
     272    for(var i = 0; i < this._parts.length; i++)
     273        this._debugShow(this._parts[i]);
     274}
     275
Note: See TracChangeset for help on using the changeset viewer.