source: js/viewer-f0/js/NeuronDrawer.js @ 208

Last change on this file since 208 was 208, checked in by mmichalski, 10 years ago

New NeuronDrawer? without U-shape in connections

  • Property svn:eol-style set to native
File size: 7.8 KB
Line 
1function NeuronDrawer(contextName, width, height) {
2    this._canvasWidth = width;
3    this._canvasHeight = height;
4    this._containerContextName = contextName;
5    this._unknown_symbol=[1,4, 25,25, 75,25, 75,75, 25,75, 25,25];
6    this._neuron_symbol=[1,4, 75,50, 25,0, 25,99, 75,50, 100,50];
7    this._inputonly_symbol=[1,5, 25,40, 35,40, 45,50, 35,60, 25,60, 25,40];
8    this._outputonly_symbol=[1,7, 75,50, 75,60, 55,60, 65,50, 55,40, 75,40, 75,50, 100,50];
9    this._neurons = undefined;
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(){
33    var self = this;
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);
81}
82
83NeuronDrawer.prototype.drawNeuron = function (x, y, scheme) {
84    var points = [];
85
86    var position = 0;
87    var noOfBlocks = scheme[position++];//number of "blocks" to draw
88    var noOfLines = 0;//number of line to draw
89    for (var i = 0; i < noOfBlocks; i++) {
90        noOfLines = scheme[position++];
91
92        for (var j = 0; j < noOfLines; j++) {
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);
187}
188
189NeuronDrawer.prototype._getNumberOfInputs = function(number, connections){
190
191    var counter = 0;
192
193    for(var i = 0; i < connections.length; i++){
194        if(connections[i].getDestination() == number)
195            counter++;
196    }
197
198    return counter;
199}
200
201NeuronDrawer.prototype._getNumberOfOutputs = function(number, connections){
202    var counter = 0;
203
204    for(var i = 0; i < connections.length; i++){
205        if(connections[i].getSource() == number)
206            counter++;
207    }
208
209    return counter;
210}
211
212
213
214NeuronDrawer.prototype._chooseSchema = function(number, neurons, connections, classes)
215{
216    var schema = this._unknown_symbol;
217    var type = neurons[number].getSchemeID();
218
219    if(type != undefined)
220    {
221        if(classes[type].getScheme().length != 0)
222        {
223            if(this._getNumberOfInputs(number, connections) == 0)
224                schema = this._outputonly_symbol;
225            else if (this._getNumberOfOutputs(number, connections) == 0)
226                schema = this._inputonly_symbol;
227            else
228                schema = this._neuron_symbol;
229        }
230    }
231
232    return schema;
233}
234
235NeuronDrawer.prototype._getSize = function(scheme)
236{
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
246    var position = 0;
247    var noOfBlocks = scheme[position++];//number of "blocks" to draw
248    var noOfLines = 0;//number of line to draw
249
250    for (var i = 0; i < noOfBlocks; i++) {
251        noOfLines = scheme[position++];
252
253        for (var j = 0; j < noOfLines; j++) {
254
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];
279            position++;
280
281            position = position - 2;
282        }
283        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;
288    }
289    return neuron;
290}
Note: See TracBrowser for help on using the repository browser.