Changeset 911

Timestamp:

04/18/20 20:18:36 (5 years ago)

Author:

Maciej Komosinski

Message:

Added the actual functionality of the app in place of previous draft

Location:

js/human_3d_alignment

Files:

• package.json (modified) (2 diffs)
• src/index.jsx (modified) (9 diffs)
• src/utils/genotypes.js (added)
• src/viewskeleton/widgetscontainer.jsx (modified) (3 diffs)
• src/visualization/camera.js (modified) (1 diff)
• src/visualization/framstick.js (added)
• src/visualization/jointmeshfactory.js (modified) (4 diffs)
• src/visualization/partmeshfactory.js (modified) (6 diffs)
• src/visualization/sviewer.js (modified) (8 diffs)
• src/visualization/transformations.js (modified) (2 diffs)
• src/widgets/endviewer.jsx (added)
• src/widgets/fitviewer.jsx (added)
• src/widgets/parmviewer.jsx (added)
• src/widgets/similviewer.jsx (modified) (11 diffs)
• src/widgets/sliderviewer.jsx (added)
• src/widgets/textviewer.jsx (added)

js/human_3d_alignment/package.json

@@ -25 +25 @@
   "contributors": [
     "Maciej Komosinski <maciej.komosinski@cs.put.poznan.pl>",
-    "Grzegorz Latosiński",
     "Agnieszka Mensfelt <agnieszka.mensfelt@cs.put.poznan.pl>",
+    "Artur Olejnik",
     "Szymon Ulatowski"
   ],
@@ -48 +48 @@
     "react-grid-layout": "^0.16.6",
     "react-icons": "^2.2.7",
+    "react-input-slider": "^5.1.4",
+    "react-select": "^3.0.8",
     "react-treebeard": "^2.1.0",
     "strip-comment": "^1.1.3",
     "three": "^0.88.0",
-    "three-orbit-controls": "^82.1.0"
+    "three-css3drenderer": "^1.0.1",
+    "three-orbit-controls": "^82.1.0",
+    "three-trackballcontrols": "0.0.8",
+    "three-transform-controls": "^1.0.4",
+    "tween": "^0.9.0"
   },
   "devDependencies": {

js/human_3d_alignment/src/index.jsx

@@ -1 +1 @@
 /*global Module*/
 "use strict";
+import http from 'http';
 import React from 'react';
+import Genotypes from './utils/genotypes';
 import TitlePanel from './viewskeleton/titlepanel';
 import WidgetsContainer from './viewskeleton/widgetscontainer';
+import TextViewer from './widgets/textviewer';
+import ParmViewer from './widgets/parmviewer';
 import SimilViewer from './widgets/similviewer';
+import FitViewer from './widgets/fitviewer';
+import SliderViewer from './widgets/sliderviewer';
+import EndViewer from './widgets/endviewer';
+
+const ROUNDS = 15;
 
 const styles = {
@@ -28 +37 @@
 };
 
-//const mql = window.matchMedia('(min-width: 800px)');
 
 /**
@@ -44 +52 @@
         window.genetics = new Module.PreconfiguredGenetics();
         this.layout = [
-            {name:'0,similviewer', x: 0, y: 0, w: 12, h: 4}
+            {name:'0,textviewer', x: 0, y: 0, w: 9, h: 1},
+            {name:'2,similviewer', x: 0, y: 1, w: 6, h: 4},
+            {name:'3,fitviewer', x: 6, y: 1, w: 6, h: 2},
+            {name:'4,sliderviewer', x: 6, y: 3, w: 6, h: 2},
+            {name:'1,parmviewer', x: 9, y: 0, w: 3, h: 1}
         ];
 
@@ -50 +62 @@
 
         this.state = {
-            parametersmodal: false
+            genotypes: 0,
+            round: 0,
+            genotype1: '',
+            genotype2: '',
+            pairs: [],
+            id1: 0,
+            id2: 0,
+            parts1: 0,
+            parts2: 0,
+            selected1: [],
+            selected2: [],
+            position1: [0, 0, 0],
+            position2: [0, 0, 0],
+            rotation1: [0, 0, 0],
+            rotation2: [0, 0, 0],
+            userId: 0,
+            userIp: 'localhost',
+            timeStart: 0,
+            selectedGender: {value: "empty", label: " "},
+            selectedYear: {value: "empty", label: " "},
+            percent: 0,
+            sliderUpdated: true,
+            isDisable: true,
+            isFinished: false,
+            fitHeight: 2,
+            fitWidth: 6,
+            controlMode: 'translate',
+            blockView: true,
+            result: ''
         };
+
+        this.start = this.start.bind(this);
+        this.getIp = this.getIp.bind(this);
+        this.nextRound = this.nextRound.bind(this);
+        this.saveRound = this.saveRound.bind(this);
+        this.saveFit = this.saveFit.bind(this);
+        this.refresh = this.refresh.bind(this);
+        this.sendToServer = this.sendToServer.bind(this);
+        this.finishApp = this.finishApp.bind(this);
+        this.isReady = this.isReady.bind(this);
+        this.isFitted = this.isFitted.bind(this);
+        this.browserData = this.browserData.bind(this);
+        this.loadNewGenotypes = this.loadNewGenotypes.bind(this);
+        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
+        this.handleChangeId = this.handleChangeId.bind(this);
+        this.handleChangeIp = this.handleChangeIp.bind(this);
+        this.handleChangeGender =  this.handleChangeGender.bind(this);
+        this.handleChangeYear = this.handleChangeYear.bind(this);
+        this.handleChangePercent = this.handleChangePercent.bind(this);
+        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
+        this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
+        this.handleChangeFitWidth = this.handleChangeFitWidth.bind(this);
+        this.handleChangeControlMode = this.handleChangeControlMode.bind(this);
+        this.handleChangePosition1 = this.handleChangePosition1.bind(this);
+        this.handleChangePosition2 = this.handleChangePosition2.bind(this);
+        this.handleChangeRotation1 = this.handleChangeRotation1.bind(this);
+        this.handleChangeRotation2 = this.handleChangeRotation2.bind(this);
+        this.handleChangeBlockView = this.handleChangeBlockView.bind(this);
+        this.onClickNext = this.onClickNext.bind(this);
+        this.onClickFinish = this.onClickFinish.bind(this);
     }
 
@@ -58 +128 @@
     */
     componentDidMount() {
-        this.useLayout(this.layout);
+        window.addEventListener( 'keydown', ( event ) => {
+            switch ( event.keyCode ) {
+                case 84: // T
+                    this.handleChangeControlMode( "translate" );
+                    break;
+                case 82: // R
+                    this.handleChangeControlMode( "rotate" );
+                    break;
+            }
+        } );
+        let timeStart = new Date();
+        this.handleChangeStartTime(timeStart); //set time start
+        this.handleChangeId(  Math.round(timeStart.getTime() / 1000).toString() +  (Math.floor(Math.random() * (9999999 - 1000000 + 1) ) + 1000000).toString() + this.browserData().toString() ); //set user id = time + random + browserData_hash
+        this.getIp();   //set user ip
+        this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
+        let head = "'User ID'|'User IP'|'Gender'|'Year of born'|'Start time'|'Stop time'|'Position of 1st'|'Position of 2nd'|'Rotation of 1st'|'Rotation of 2nd'|'ID 1st'|'ID 2nd'|'Fit'|'Result'\n"
+        this.handleChangeResult(head);
     }
 
@@ -65 +151 @@
     */
     componentDidUpdate() {
-        window.dispatchEvent(new Event('resize'));
+        //window.dispatchEvent(new Event('resize'));
+        if (this.state.genotype1 != '' && this.state.genotype2 != '') {
+            this.useLayout(this.layout);
+        }
+    }
+
+
+    /**
+     * Start questionnaire if genotypes are loaded
+     */
+    start() {
+        this.setState({ genotypes: this.genotypes.id.length }, function() {
+            console.log(`Genotypes: `, this.state.genotypes);
+        });
+
+        this.loadNewGenotypes();
+        this.handleChangeBlockView(false);
+        this.useLayout(this.layout);
+    }
+
+    getIp() {
+        http.get({'host': 'api.ipify.org', 'port': 80, 'path': '/'}, (resp) => {
+            resp.on('data', ip => {
+                this.handleChangeIp(ip)
+            });
+        });
+    }
+
+    /**
+     * Save data about this round
+     */
+    saveRound() {
+        this.setState({ sliderUpdated: false }, function() {
+            console.log('Slider Updated: ' + this.state.sliderUpdated);
+        });
+        this.isReady();
+    }
+
+    /**
+     * Preset result as:
+     * user ID - IP - gender - year of born - start : end - position of 1. : position of 2.
+     * - rotation of 1. : rotation of 2. - id of 1. : id of second - pairs (1. mesh : 2. mesh) - fit result (0 - 100) ;
+     */
+    saveFit() {
+        let min = Math.min(this.state.parts1, this.state.parts2);
+        let timeStop = new Date();
+        let start = this.state.timeStart;
+        let stop = timeStop;
+        start = ("0" + start.getDate()).slice(-2) + '.' + ("0" + (start.getMonth() + 1)).slice(-2) + '.' + start.getFullYear() + ' ' + String(start.getHours()).padStart(2, '0') + ':' + String(start.getMinutes()).padStart(2, '0') + ':' + String(start.getSeconds()).padStart(2, '0');
+        stop = ("0" + stop.getDate()).slice(-2) + '.' + ("0" + (stop.getMonth() + 1)).slice(-2) + '.' + stop.getFullYear() + ' ' + String(stop.getHours()).padStart(2, '0') + ':' + String(stop.getMinutes()).padStart(2, '0') + ':' + String(stop.getSeconds()).padStart(2, '0');
+
+        let fit =   this.state.userId + '|' +
+                    this.state.userIp + '|' +
+                    this.state.selectedGender.value + '|' +
+                    this.state.selectedYear.value + '|' +
+                    start + '|' +
+                    stop + '|' +
+                    '(' + this.state.position1[0] + ',' + this.state.position1[1] + ',' + this.state.position1[2] + ')|' +  
+                    '(' + this.state.position2[0] + ',' + this.state.position2[1] + ',' + this.state.position2[2] + ')|' +  
+                    '(' + this.state.rotation1[0] + ',' + this.state.rotation1[1] + ',' + this.state.rotation1[2] + ')|' +  
+                    '(' + this.state.rotation2[0] + ',' + this.state.rotation2[1] + ',' + this.state.rotation2[2] + ')|';  
+                    
+        
+        let pair = this.state.pairs[this.state.pairs.length - 1];
+        fit = fit + this.genotypes.id[pair[0]] + '|' + this.genotypes.id[pair[1]] + '|';
+
+        for (let i = 0; i < min; i++) {
+            fit = fit + this.state.selected1[i] + ':' + (this.state.selected2[i].charCodeAt(0) - 65 + 1);
+            if (i < min - 1) {
+                fit = fit + ';';
+            }
+        }
+        fit = fit + '|' + this.state.percent + '\n';
+
+        this.sendToServer(fit);
+
+        this.handleChangeResult(this.state.result + fit);
+        this.handleChangeStartTime(timeStop);
+    }
+
+
+
+    sendToServer(fit) {
+        let rawFile = new XMLHttpRequest();
+        rawFile.addEventListener('load', () => {
+            console.log(rawFile.responseText);
+        });
+        rawFile.addEventListener('error', () => {
+            console.log('Błąd wysyłania na serwer');
+        });
+        
+        rawFile.open("POST", 'https://ptsv2.com/t/b7nhq-1578108725/post');
+        rawFile.setRequestHeader("Content-type", 'text/plain');
+        rawFile.send(fit);
+    }
+
+    /**
+     * Load next pair of genotypes
+     */
+    nextRound() {
+        this.loadNewGenotypes();
+        this.handleChangeBlockView(false);
+    }
+
+    /**
+     * Refresh used default layout
+     */
+    refresh() {
+        this.useLayout(this.layout);
+    }
+
+    /**
+     * Load new genotypes to simulator viewer 
+     */
+    loadNewGenotypes() {
+        //Firstly it chooses pair of genotypes that user doesnt used before
+        let rand1, rand2, amount1, amount2, gen1, gen2;
+
+        do {
+            rand1 = 0, rand2 = 0;
+            do  {
+                while (rand1 == rand2) {
+                    rand1 = Math.floor(Math.random() * this.state.genotypes);
+                    rand2 = Math.floor(Math.random() * this.state.genotypes);
+                }
+            } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
+
+            //This part load genotypes to the state
+            gen1 = this.genotypes.genotype[rand1];
+            gen2 = this.genotypes.genotype[rand2];
+            amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
+            amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
+            if (amount1 > 0) {
+                amount1++;
+            }
+            if (amount2 > 0) {
+                amount2++
+            }
+        } while (amount1 > 52 || amount2 > 52);
+
+        let newpairs = this.state.pairs;
+        if (amount1 <= amount2) {
+            newpairs.push([rand1, rand2]);
+            this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
+                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
+            });
+            this.setState({parts1: amount1, parts2: amount2}, function() {
+                console.log(this.state.parts1 + ' ' + this.state.parts2);
+            });
+        } else {
+            newpairs.push([rand2, rand1]);
+            this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
+                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
+            });
+            this.setState({parts1: amount2, parts2: amount1}, function() {
+                console.log(this.state.parts1 + ' ' + this.state.parts2);
+            });
+        }
+        this.setState({ pairs: newpairs }, function() {
+            console.log(`Pairs: `, this.state.pairs);
+        });
+
+        //Load tables of selected parts in fitviewer
+        let min = Math.min(amount1, amount2);
+        let s1 = [];
+        let s2 = [];
+        for (let i = 0; i < min; i++) {
+            s1.push((i+1).toString());
+            s2.push(' ');
+        }
+
+        //Start new round and load to state tables of selected and round
+        let r = this.state.round + 1;
+        this.setState({ round: r, selected1: s1, selected2: s2}, function() {
+            console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
+        });
+    }
+
+    /**
+     * Check is user ready to go to the next question by checking choosed gender, birth year and percent of similarity
+     */
+    isReady() {
+        if (this.state.selectedGender.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
+            this.setState({isDisable: false}, function() {
+                console.log(this.state.isDisable);
+            });
+        } else {
+            if (!this.state.isDisable) {
+                this.setState({isDisable: true}, function() {
+                    console.log(this.state.isDisable);
+                });
+            }
+        }
+    }
+
+    /**
+     * Check is user matched all needed sticks
+     */
+    isFitted() {
+        let index1 = this.state.selected1.indexOf(' ');
+        let index2 = this.state.selected2.indexOf(' ');
+
+        if (index1 < 0 && index2 < 0 && this.state.sliderUpdated) {
+            this.setState({sliderUpdated: false}, function() {
+                console.log(this.state.sliderUpdated);
+                this.isReady();
+            });
+        }
+    }
+
+    /**
+     * Return hash data of browser
+     */
+    browserData() {
+        let data = navigator.userAgent;
+        let hash = 0;
+        for (let i = 0; i < data.length; i++) {
+            let character = data.charCodeAt(i);
+            hash = ((hash<<5)-hash)+character;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return hash;
+    }
+
+    /**
+     * Performed at the end of the survey
+     */
+    finishApp() {
+        this.layout = [
+            {name:'5,endviewer', x: 0, y: 0, w: 12, h: 4}
+        ];
+        this.useLayout(this.layout);
+    }
+
+    /**
+     * Allow to change gender in state
+     * @param {string} gen choosed gender by user in listbox 
+     */
+    handleChangeGender(gen) {
+        this.setState({ selectedGender: gen }, function() {
+            console.log(`Gender selected:`, this.state.selectedGender);
+            console.log(this.genotypes.id.length)
+            this.isReady();
+        });
+    };
+    
+    /**
+     * Allow to change IP
+     * @param {number} ip user IP
+     */
+    handleChangeIp(ip) {
+        this.setState({ userIp: ip }, function() {
+            console.log(`IP:`, this.state.userIp);
+        });
+    }
+    
+    /**
+     * Allow to change user ID
+     * @param {number} id user ID
+     */
+    handleChangeId(id) {
+        this.setState({ userId: id }, function() {
+            console.log(`ID:`, this.state.userId);
+        });
+    }
+    
+    /**
+     * Allow to change start time
+     * @param {number} time time of begging fitting framsticks
+     */
+    handleChangeStartTime(time) {
+        this.setState({ timeStart: time }, function() {
+            console.log(`Start time:`, this.state.timeStart);
+        });
+    }
+
+    /**
+     * Allow to change birth year in state
+     * @param {number} year choosed birth year by user in listbox
+     */
+    handleChangeYear(year) {
+        this.setState({ selectedYear: year }, function() {
+            console.log(`Birth year selected:`, this.state.selectedYear);
+            this.isReady();
+        });
+    }
+
+    /**
+     * Allow to change percent in state and mark this in state.sliderUpdated
+     * @param {Integer} per choosed similarity of framsticks by user in percentage
+     */
+    handleChangePercent(per) {
+        this.setState({ percent: per, sliderUpdated: true }, function() {
+            console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
+            this.isReady();
+        });
+    }
+
+    /**
+     * 
+     * @param {number} nr framstick id
+     * @param {number} pos position on the match map
+     * @param {*} val id of choosed stick
+     */
+    handleChangeSelected(nr, pos, val) {
+        if (nr == 1) {
+            this.setState(state => {
+                const selected1 = state.selected1.map((item, i) => {
+                    if (pos === i) {
+                        return val;
+                    } else {
+                        return item;
+                    }
+                });
+
+                return {
+                    selected1,
+                };
+            },  function() {
+                console.log(this.state.selected1);
+                this.isFitted();
+            });
+        } else {
+            this.setState(state => {
+                const selected2 = state.selected2.map((item, i) => {
+                    if (pos === i) {
+                        let v = val.charCodeAt(0);
+                        if (v > 90) {
+                            v = v - 6;
+                        }
+                        let res = String.fromCharCode(v);
+                        return res;
+                    } else {
+                        return item;
+                    }
+                });
+
+                return {
+                    selected2,
+                };
+            }, function() {
+                console.log(this.state.selected2);
+                this.isFitted();
+            });
+        }
+    }
+    
+    /**
+     * Function to inform fitviewer about change of height to update scrollbar (for firefox)
+     * @param {number} h height
+     */
+    handleChangeFitHeight(h) {
+        this.setState({ fitHeight: h }, function() {
+            console.log(`Fit Height:`, this.state.fitHeight);
+        });
+    }
+    
+    /**
+     * Function to inform fitviewer about change of width to update scrollbar (for firefox)
+     * @param {number} w width
+     */
+    handleChangeFitWidth(w) {
+        this.setState({ fitWidth: w }, function() {
+            console.log(`Fit Width:`, this.state.fitWidth);
+        });
+    }
+
+    /**
+     * Allow to change transform controler mode
+     * @param {number} mode translate or rotation
+     */
+    handleChangeControlMode(mode) {
+        this.setState({ controlMode: mode }, function() {
+            console.log(`Control mode:`, this.state.controlMode);
+        });
+    }
+
+    /**
+     * Allow to save actural position of first genotype
+     * @param {Array} pos position [x, y, z] of first genotype
+     */
+    handleChangePosition1(pos) {
+        this.setState({ position1: pos}, function() {
+            console.log('Position1: ', this.state.position1);
+        });
+    }
+
+    /**
+     * Allow to save actural position of second genotype
+     * @param {Array} pos position [x, y, z] of second genotype
+     */
+    handleChangePosition2(pos) {
+        this.setState({ position2: pos}, function() {
+            console.log('Position2: ', this.state.position2);
+        });
+    }
+
+    /**
+     * Allow to save actural rotation of first genotype
+     * @param {Array} rot rotation [x, y, z] of first genotype
+     */
+    handleChangeRotation1(rot) {
+        this.setState({ rotation1: rot}, function() {
+            console.log('Rotation1: ', this.state.rotation1);
+        });
+    }
+
+    /**
+     * Allow to save actural rotation of second genotype
+     * @param {Array} rot rotation [x, y, z] of second genotype
+     */
+    handleChangeRotation2(rot) {
+        this.setState({ rotation2: rot}, function() {
+            console.log('Rotation2: ', this.state.rotation2);
+        });
+    }
+
+    /**
+     * Allow to block view in simviewer
+     * @param {Array} rot rotation [x, y, z] of second genotype
+     */
+    handleChangeBlockView(bool) {
+        this.setState({ blockView: bool}, function() {
+            console.log('Block View: ', this.state.blockView);
+        });
+    }
+
+    /**
+     * Allow to change finish result that will be save in the file at the end
+     * @param {string} res text to be save in file
+     */
+    handleChangeResult(res) {
+        this.setState({ result: res }, function() {
+            console.log('Result: ', this.state.result);
+        });
+    }
+
+    /**
+     * Next button function
+     */
+    onClickNext() {
+        this.handleChangeBlockView(true);
+        this.saveFit();
+        if (this.state.round == ROUNDS) {
+            this.setState({ isFinished: true }, function() {
+                console.log('Finish state: ' + this.state.isFinished);
+    
+                if (this.state.isFinished) {
+                    this.finishApp();
+                }
+            });
+        } else {
+            this.nextRound();
+        }
+    }
+
+    /**
+     * Close button function
+     */
+    onClickFinish() {
+        this.setState({ isFinished: true }, function() {
+            console.log('Finish state: ' + this.state.isFinished);
+
+            if (this.state.isFinished) {
+                this.finishApp();
+            }
+        });
     }
 
@@ -76 +628 @@
         for (let i = 0; i < layout.length; i++) {
             newlayout.push({name: layout[i].i, x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+            if (newlayout[i].name == '2fitviewer') {
+                this.handleChangeFitHeight(newlayout[i].h);
+                this.handleChangeFitWidth(newlayout[i].w);
+            }
         }
     }
@@ -87 +643 @@
             let name = layout[i].name.split(',')[1];
             switch (name) {
+                case 'textviewer':
+                    items.push({content: <TextViewer/>, i: "" + i + 'textviewer',
+                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+                    break;
                 case 'similviewer':
-                    items.push({content: <SimilViewer/>, i: "" + i + 'similviewer',
+                    items.push({content: <SimilViewer
+                            genotype1 = {this.state.genotype1}
+                            genotype2 = {this.state.genotype2}
+                            selected1 = {this.state.selected1}
+                            selected2 = {this.state.selected2}
+                            blockView = {this.state.blockView}
+                            handleChangePosition1 = {(pos) => this.handleChangePosition1(pos)}
+                            handleChangePosition2 = {(pos) => this.handleChangePosition2(pos)}
+                            handleChangeRotation1 = {(rot) => this.handleChangeRotation1(rot)}
+                            handleChangeRotation2 = {(rot) => this.handleChangeRotation2(rot)}
+                            controlMode = {this.state.controlMode}
+                            round = {this.state.round}/>, 
+                        i: "" + i + 'similviewer',
+                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+                    break;
+                case 'parmviewer':
+                    items.push({content: <ParmViewer 
+                            handleChangeYear = {(year) => {this.handleChangeYear(year)}} 
+                            handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
+                        />, 
+                        i: "" + i + 'parmviewer',
+                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+                    break;
+                case 'fitviewer':
+                    items.push({content: <FitViewer 
+                            selected1 = {this.state.selected1} 
+                            selected2 = {this.state.selected2} 
+                            parts1 = {this.state.parts1} 
+                            parts2 = {this.state.parts2}
+                            fitHeight = {this.state.fitHeight}
+                            fitWidth = {this.state.fitWidth}
+                            handleChangeSelected = {(nr, pos, val) => {this.handleChangeSelected(nr, pos, val)}}/>,
+                        i: "" + i + 'fitviewer',
+                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+                    break;
+                case 'sliderviewer':
+                    items.push({content: <SliderViewer 
+                            isDisable = {this.state.isDisable}
+                            parts1 = {this.state.parts1}
+                            parts2 = {this.state.parts2}
+                            selected1 = {this.state.selected1}
+                            selected2 = {this.state.selected2}
+                            onClickNext = {() => {this.onClickNext()}}
+                            onClickFinish = {() => {this.onClickFinish()}}
+                            handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
+                        i: "" + i + 'sliderviewer',
+                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
+                    break;
+                case 'endviewer':
+                    items.push({content: <EndViewer 
+                            userId = {this.state.userId}
+                            result = {this.state.result}/>,
+                        i: "" + i + 'endviewer',
                         x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
                     break;
@@ -104 +716 @@
         const contentHeader = (
             <span>   
-                <span style={{marginLeft: '20px'}}>Matching in 3D</span> 
+                <span style={{marginLeft: '20px', fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"}}>
+                    Ankieta
+                </span> 
             </span>
         );
-        
+
         return (
-                <TitlePanel title={contentHeader}>
-                    <div style={styles.content}>
-                        {this.container}
-                    </div>
-                </TitlePanel>
+            <TitlePanel 
+                title={contentHeader}
+            >
+                <div style={styles.content}>
+                    {this.container}
+                </div>
+            </TitlePanel>
         );
     }

js/human_3d_alignment/src/viewskeleton/widgetscontainer.jsx

@@ -52 +52 @@
      */
     createElement(el) {
-        const removeStyle = {
+        const headerStyle = {
             right: "2px",
             marginRight: "10px",
@@ -70 +70 @@
                 <div style={{display: 'table-row', textAlign: 'right'}}>
                 <span
-                    className="remove"
-                    style={removeStyle}
-                    onClick={this.onRemoveItem.bind(this,el.i)}
-                >&#10006;</span>
+                    className="header"
+                    style={headerStyle}
+                > </span>
                 </div>
                 <div style={{display: 'table-row', height: '100%'}}>
@@ -164 +163 @@
                     onBreakpointChange={this.onBreakpointChange}
                     cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+                    rowHeight={150}
                     className="layout"
                     {...this.props}

js/human_3d_alignment/src/visualization/camera.js

@@ -87 +87 @@
         let modelSphere = modelBox.getBoundingSphere();
 
+        this.targetPosition = modelSphere.center.clone();
+        this.cameraPosition = modelSphere.center.clone().addScalar(modelSphere.radius);
+
         return {
             target: {

js/human_3d_alignment/src/visualization/jointmeshfactory.js

@@ -33 +33 @@
      * @returns {Mesh}  Mesh for a given joint
      */
-    getNewJointMesh(joint, shapeConfig) {
+    getNewJointMesh(joint, color, shapeConfig) {
         let firstPartPosVec = new THREE.Vector3(
             joint.get_part1().get_p().get_x(), 
@@ -42 +42 @@
             joint.get_part2().get_p().get_y(), 
             joint.get_part2().get_p().get_z());
-        //let line = new THREE.LineCurve3(firstPartPosVec, secondPartPosVec);
-        //let geometry = new THREE.TubeGeometry(line, numsegmentstube, shapeConfig.radius, 
-        //    shapeConfig.radiusSegments, false);
 
         let direction = new THREE.Vector3().subVectors(secondPartPosVec, firstPartPosVec);
-        let orientation = new THREE.Matrix4();
-
-        let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length(), shapeConfig.radiusSegments);
-        
-
-        let material = this.transformations.getNewMaterial(
-            joint.get_vcolor().get_x(), 
-            joint.get_vcolor().get_y(), 
-            joint.get_vcolor().get_z());
-        material.transparent = shapeConfig.isTransparent;
-        material.opacity = shapeConfig.opacity;
-        //let mesh = new THREE.Mesh(geometry, material);
-        
+        let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length() - 2 * 0.18, shapeConfig.radiusSegments);     
+        let material = this.transformations.getNewMaterial(color);   
         let mesh = new THREE.Mesh( geometry, material ); //new Physijs.CylinderMesh( geometry, Physijs.createMaterial(material) ); //new THREE.Mesh( geometry, material );
 
+        let orientation = new THREE.Matrix4();
         orientation.lookAt(firstPartPosVec, secondPartPosVec, new THREE.Object3D().up);
         orientation.multiply(new THREE.Matrix4().set(
@@ -82 +69 @@
             mesh: mesh, 
             connectedParts: [], 
-            showTransparent: shapeConfig.isTransparent 
+            showTransparent: true 
         };
         return mesh;
@@ -115 +102 @@
      * @returns {JointMesh} new joint mesh, for properties of Object look at addConnectionInfo jointMesh param documentation
      */
-    create(joint, partMeshes) {
+    create(joint, color, partMeshes) {
         let result;
         let shape = joint.get_shape();
 
         if (this.jointShapes['SHAPE_FIXED'].value == shape) {
-            result = this.getNewJointMesh(joint, this.config.linkShape);
+            result = this.getNewJointMesh(joint, color, this.config.linkShape);
         } else {
-            result = this.getNewJointMesh(joint, this.config.cylinderShape);
+            result = this.getNewJointMesh(joint, color, this.config.cylinderShape);
         }
 

js/human_3d_alignment/src/visualization/partmeshfactory.js

@@ -36 +36 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewSphereMesh(part, sphereRadius, segments, applyScale) {
+    getNewSphereMesh(part, color, sphereRadius, segments, applyScale) {
         let geometry = new THREE.SphereGeometry(sphereRadius, segments, segments);
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
         let mesh = null;
         if (applyScale) {
@@ -94 +91 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewBoxMesh(part) {
+    getNewBoxMesh(part, color) {
         let geometry = new THREE.BoxGeometry(2, 2, 2);
         geometry.scale(
@@ -101 +98 @@
             part.get_scale().get_z());
 
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
         let mesh = new THREE.Mesh(geometry, material);
         mesh.position.set(
@@ -133 +127 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewCylinderMesh(part) {
+    getNewCylinderMesh(part, color) {
         let geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
 
         geometry.scale(
@@ -181 +172 @@
      * @returns {PartMesh} info about part mesh
      */
-    create(part) {
+    create(part, color) {
 
         let shape = part.get_shape();
@@ -187 +178 @@
             return this.getNewSphereMesh(
                 part, 
+                color,
                 this.config.ellipsoidShape.radius, 
                 this.config.ellipsoidShape.segments, true);
         }
         else if (this.partShapes['SHAPE_CUBOID'].value == shape) {
-            return this.getNewBoxMesh(part);
+            return this.getNewBoxMesh(part, color);
         }
         else if (this.partShapes['SHAPE_CYLINDER'].value == shape) {
-            return this.getNewCylinderMesh(part);
+            return this.getNewCylinderMesh(part, color);
         }
         return this.getNewSphereMesh(
             part, 
+            color,
             this.config.defaultShape.radius, 
             this.config.defaultShape.segments, 

js/human_3d_alignment/src/visualization/sviewer.js

@@ -3 +3 @@
 
 import * as THREE from 'three';
-import TrackballControls from 'three-trackballcontrols';
-import PartMeshFactory from './partmeshfactory';
-import JointMeshFactory from './jointmeshfactory';
+import Framstick from './framstick';
 import Scene from './scene';
 import Camera from './camera';
-import { geometry } from './transformations';
+const TransformControls = require('three-transform-controls')(THREE);
 
 /** Camera class configuration for Viewer */
@@ -66 +64 @@
      */
     constructor(width, height, canvasdom) {
+        this.container = document.getElementById("simcontainer");
+
+        this.meshes = [];
         this.parts = [];
-        this.joints = [];
-        this.meshes = [];
-        this.parts2 = [];
-        this.joints2 = [];
-        this.meshes2 = [];
-        this.creature1 = new THREE.Group();
-        this.creature2 = new THREE.Group();
-        this.partfactory = new PartMeshFactory(geometry.part);
-        this.jointfactory = new JointMeshFactory(geometry.joint);
+        this.lines = [];
+        this.framstick1 = null;
+        this.framstick2 = null;
+        this.selected1 = [];
+        this.selected2 = [];
+
         this.renderer = new THREE.WebGLRenderer({
             antialias: true,
@@ -85 +83 @@
         this.scene = new Scene();
         this.camera = new Camera(cameraconfig, this.renderer.domElement, false);
-        //console.log(this.camera);
+        this.control = new TransformControls(this.camera.getPerspectiveCamera(), this.renderer.domElement);
+        this.control.addEventListener( 'change', (e) => {
+            this.addLines(this.selected1, this.selected2);
+            this.addText();
+        });
+        this.control.addEventListener( 'dragging-changed', function(e) {
+            this.camera.getCameraControl().enable = ! e.value;
+        });
+        this.scene.add(this.control);
+        this.control.setMode( "translate" );
+
         let ambientLight = new THREE.AmbientLight(lightconfig.ambient.color);
         this.scene.add(ambientLight);
@@ -100 +108 @@
         bottomDirectionalLight.position.set(0, 0, lightconfig.directional.bottom.positionZ);
         this.scene.add(bottomDirectionalLight);
+
         this.renderer.setClearColor('gray');
-        this.rezoom = true;
+        this.rezoom = false;
+        this.autorotate = false;
         this.renderScene = this.renderScene.bind(this);
         this.selectedelements = [];
 
         this.mouse = new THREE.Vector2();
-        this.offset = new THREE.Vector3();
-        this.INTERSECTED = null;
         this.SELECTED = null;
-
-        this.plane = new THREE.Mesh( new THREE.PlaneGeometry(500, 500, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
-        this.plane.visible = true;
-        this.scene.add( this.plane ); 
-
-        this.controls = new TrackballControls( this.camera.getPerspectiveCamera() );
-        this.projector = new THREE.Projector();
-        this.controls.target = new THREE.Vector3(0, 0, 0);
-        this.controls.maxDistance = 150;
-        this.controls2 = null;
-    }
-
-    addMesh(meshes, parts, joints, model, creature)
-    {
-        let partsforjoints = [];
-        meshes = [];
-        parts = [];
-        joints = [];
-        for (let i = 0; i < model.getPartCount(); i++) {
-            let mesh = this.partfactory.create(model.getPart(i));
-            partsforjoints.push(mesh.userData);
-            meshes.push(mesh);
-            parts.push(mesh);
-            creature.add(mesh);
-        }
-
-        for (let i = 0; i < model.getJointCount(); i++) {
-            let mesh = this.jointfactory.create(model.getJoint(i), partsforjoints);
-            meshes.push(mesh);
-            joints.push(mesh);
-            creature.add(mesh);
-        }
+        this.CLICKED = false;
+
+
+        this.lineMaterial = new THREE.LineBasicMaterial({
+            color: 0xffff00,
+            transparent: true,
+            opacity: 0.5
+        });
+
+        this.textLabels = [];
+        this.container = document.getElementById("simcontainer");
+    }
+
+    /**
+     * Allow to clear view and add new pair of genotypes
+     * @param {string} genotype1 Genotype of first framstick
+     * @param {string} genotype2 Genotype of second framstick
+     */
+    add2Genotypes(genotype1, genotype2) {
+        this.clearView();
+
+        this.framstick1 = new Framstick(genotype1, this);
+        this.framstick2 = new Framstick(genotype2, this);
+
+        this.meshes = [];
+        this.parts = [];
+
+        for (let i = 0; i < this.framstick1.mesh.children.length; i++) {
+            this.meshes.push(this.framstick1.mesh.children[i]);
+        }
+
+        for (let i = 0; i < this.framstick2.mesh.children.length; i++) {
+            this.meshes.push(this.framstick2.mesh.children[i]);
+        }
+
+        for (let i = 0; i < this.framstick1.parts.length; i++) {
+            this.parts.push(this.framstick1.parts[i]);
+        }
+
+        for (let i = 0; i < this.framstick2.parts.length; i++) {
+            this.parts.push(this.framstick2.parts[i]);
+        }
+
+        this.framstick1.mesh.position.set( 0, -2, 0 );
+        this.framstick2.mesh.position.set( 0, 2, 0 );
+
+        this.framstick1.setPositions();
+        this.framstick2.setPositions();
+
+        this.framstick1.setColor('red');
+        this.framstick2.setColor('blue');
+
+        this.camera.zoomAll(this.meshes);
+        this.addText();
+    }
+
+    /**
+     * Draw lines between selected parts of both framsticks
+     * @param {Array} selected1 array of values that user selected in fitview for first genotype
+     * @param {Array} selected2 array of values that user selected in fitview for second genotype
+     */
+    addLines(selected1, selected2) {
+        for (let i = 0; i < this.lines.length; i++) {
+            this.scene.remove(this.lines[i]);
+        }
+
+        this.lines = [];
+
+        let pairs = (selected1.length + selected2.length) / 2;
+
+        for (let i = 0; i < pairs; i++) {
+            if (selected1[i] != ' ' && selected2[i] != ' ') {
+                let index1 = parseInt(selected1[i]) - 1;
+                let index2 = selected2[i].charCodeAt(0) - 65;
+
+                let tempV1 = new THREE.Vector3().copy(this.framstick1.positions[index1]).applyEuler(this.framstick1.mesh.rotation).add(this.framstick1.mesh.position);
+                let tempV2 = new THREE.Vector3().copy(this.framstick2.positions[index2]).applyEuler(this.framstick2.mesh.rotation).add(this.framstick2.mesh.position);
+
+                let geometry = new THREE.Geometry();
+                geometry.vertices.push( tempV1 );
+                geometry.vertices.push( tempV2 );
+
+                let line = new THREE.Line( geometry, this.lineMaterial );
+                this.lines.push(line);
+            }
+        }
+
+        for (let i = 0; i < this.lines.length; i++) {
+            this.scene.add(this.lines[i]);
+        }
+    }
+
+    addText() {
+
+        while (this.container.children.length > 3){
+            this.container.removeChild(this.container.lastChild)
+        }
+
+        this.textLabels = [];
+
+        if (this.framstick1 != null && this.framstick2 != null) {
+            this.framstick1.addText(1);
+            this.framstick2.addText(2);
+        }
+
+    }
+
+    /**
+     * Allow to change mode of TransformControls
+     * @param {string} mode Selected mode of transformcontrols
+     */
+    setMode(mode) {
+        this.control.setMode(mode);
     }
 
@@ -150 +239 @@
      */
     handleMouseDown(position) {
-      this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );  
-      let intersectsC1 = this.raycaster.intersectObjects( this.creature1.children );
-            let intersectsC2 = this.raycaster.intersectObjects( this.creature2.children );
-
-                                if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
-                    
-                                        this.controls.enabled = false;
-                    let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
-                                        this.SELECTED = obj;
-                                        let intersects = this.raycaster.intersectObject( this.plane );
-                                        this.offset.copy( intersects[ 0 ].point ).sub( this.plane.position );
-                                }
+        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );  
+        let intersectsC1 = this.raycaster.intersectObjects( this.framstick1.mesh.children );
+        let intersectsC2 = this.raycaster.intersectObjects( this.framstick2.mesh.children );
+
+        if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
+            
+            let obj = intersectsC1.length > 0 ? this.framstick1 : this.framstick2;
+
+            if ( this.SELECTED ) {
+                if (this.SELECTED == obj) {
+                    if (this.SELECTED == this.framstick1) {
+                        obj.setColor('red');
+                    } else {
+                        obj.setColor('blue');
+                    }
+                    this.control.detach();
+                    this.SELECTED = null;
+                } else {
+                    if (this.SELECTED == this.framstick1) {
+                        this.SELECTED.setColor('red');
+                    } else {
+                        this.SELECTED.setColor('blue');
+                    }
+                    this.control.detach();
+                    obj.setColor('white');   
+                    this.SELECTED = obj;      
+                    this.control.attach( obj.mesh );     
+                }
+            } else {
+                this.control.detach();
+                obj.setColor('white');
+                this.SELECTED = obj;  
+                this.control.attach( obj.mesh );
+            }
+        } else {
+            if (this.SELECTED) {
+                if (this.SELECTED == this.framstick1) {
+                    this.SELECTED.setColor('red');
+                } else {
+                    this.SELECTED.setColor('blue');
+                }
+                this.control.detach();
+                this.SELECTED = null;
+            }
+        }
     }
 
     handleMouseUp() {
-        this.controls.enabled = true;
-        this.SELECTED = null;
-
-        if (this.INTERSECTED)
-        {
-            this.plane.position.copy(this.INTERSECTED.position);
-            this.SELECTED = null;
-        }
     }
 
     handleMouseMove(position) {
-        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );
-        if ( this.SELECTED ) {
-            let intersects = this.raycaster.intersectObject( this.plane );
-            if (intersects[ 0 ])
-                {this.SELECTED.position.copy( intersects[ 0 ].point.sub( this.offset ) );}
-            return;
-        }
-
-            let intersectsC1 = this.raycaster.intersectObjects(this.creature1.children);
-            let intersectsC2 = this.raycaster.intersectObjects(this.creature2.children);
-            if (intersectsC1.length > 0 || intersectsC2.length > 0)
-            {
-                let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
-                this.INTERSECTED = obj;
-                this.plane.position.copy( obj.position );
-                this.plane.lookAt( this.camera.getPerspectiveCamera().position );
-            }
-            else
-            {
-                this.INTERSECTED = null;
-            }
-        
-    }
-
-    /**
-     * Method uses ready Model to create and add meshes to the scene. If model is 
-     * undefined, an empty scene will be rendered.
-     * @param {Module.Model} model input model 1
-     * @param {Module.Model} model input model 2
-     */
-    loadMeshesFromModel(model, model2) {
-        this.clearView();
-        if (typeof model !== 'undefined') {
-
-            this.addMesh(this.meshes, this.parts, this.joints, model, this.creature1);
-            this.addMesh(this.meshes2, this.parts2, this.joints2, model2, this.creature2);
-            this.creature2.position.set( 0, 0, 0 );
-            this.creature2.position.set( 0, -1, 0 );
-            this.scene.add(this.creature1);
-            this.scene.add(this.creature2);
-            if (this.rezoom) {
-                this.camera.zoomAll(this.meshes);
-            }
-        }
     }
 
@@ -251 +321 @@
         this.camera.getPerspectiveCamera().updateProjectionMatrix();
         this.renderer.setSize(width, height);
-        //console.log(this.renderer.getSize());
         this.renderer.setPixelRatio(window.devicePixelRatio || 1);
     }
@@ -262 +331 @@
     setRezoom(rezoom) {
         this.rezoom = rezoom;
-        this.camera.zoomAll(this.meshes);
+        if (this.rezoom) {
+            this.camera.zoomAll(this.meshes);
+        }
     }
 
@@ -277 +348 @@
      */
     clearView() {
-        this.scene.clear();
+        if (this.framstick1 != null && this.framstick2 != null) {
+            this.scene.remove(this.framstick1.mesh);
+            this.scene.remove(this.framstick2.mesh);
+        }
+        this.control.detach();
+        while (this.container.children.length > 3) {
+            this.container.removeChild(this.container.lastChild)
+        }
+
+        this.SELECTED = null;
     }
 

js/human_3d_alignment/src/visualization/transformations.js

@@ -45 +45 @@
         cylinderShape: {
             radius: 0.1,
-            radiusSegments: 10,
-            isTransparent: false,
-            opacity: 1
+            radiusSegments: 10
         },
         linkShape: {
             radius: 0.04,
-            radiusSegments: 10,
-            isTransparent: true,
-            opacity: 0.2
+            radiusSegments: 10
         }
     }
@@ -186 +182 @@
      * @returns {MeshPhongMaterial} new material for Mesh
      */
-    getNewMaterial(r, g, b) {
-        let color = new THREE.Color(
-            this.calcColorComponent(r), 
-            this.calcColorComponent(g), 
-            this.calcColorComponent(b));
-        return new THREE.MeshPhongMaterial({ color: color });
+    getNewMaterial(color) {
+        return new THREE.MeshPhongMaterial({
+            color: color,
+            transparent: true,
+            opacity: 0.6,
+            reflectivity: 0.2,
+            shininess: 600
+        });
     }
 

js/human_3d_alignment/src/widgets/similviewer.jsx

@@ -3 +3 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import * as THREE from 'three';
 import Sviewer from '../visualization/sviewer';
 import { Md3dRotation, MdYoutubeSearchedFor } from 'react-icons/lib/md';
-import GenotypeParser from '../utils/genotypeparser';
-import _ from 'lodash';
-import * as THREE from 'three';
 
 /**
@@ -24 +22 @@
             rezoom: true,
             valid: true,
-            clicked: false
+            clicked: false,
+            controlMode: 'translate',
+            round: 0
         };
         this.start = this.start.bind(this);
@@ -38 +38 @@
         let temp2 = ReactDOM.findDOMNode(this.mount).parentNode;
         this.viewer = new Sviewer(temp2.clientWidth, temp2.clientHeight, temp);
-        if (this.model) {
-            //Module.destroy(this.model);
-        }
-        this.model = GenotypeParser.getModelFromGenotype("X(X,X)");
-        this.model2 = GenotypeParser.getModelFromGenotype("XX");
-        this.viewer.loadMeshesFromModel(this.model, this.model2);
         this.viewer.setAutoRotate(this.state.autorotate);
         this.viewer.setRezoom(this.state.rezoom);
-        //this.elementspicker = new ElementsPicker(this.viewer.scene, this.viewer.camera.getPerspectiveCamera());
+
         this.renderScene = this.viewer.renderScene.bind(this.viewer);
         this.lastw = temp2.clientWidth;
@@ -94 +88 @@
             this.viewer.renderer, 
             this.viewer.camera.getPerspectiveCamera());
+            
+        if (!this.props.blockView) {
+
+            if (this.props.round != this.state.round) {
+                this.setState({ round: this.props.round }, function() {
+                    console.log(`Round in sim: `, this.state.round);
+                });
+                this.viewer.add2Genotypes(this.props.genotype1, this.props.genotype2);
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            }
+            if (this.props.controlMode != this.state.controlMode) {
+                this.setState({ controlMode: this.props.controlMode }, function() {
+                    console.log('Control mode: ', this.state.controlMode);
+                    this.viewer.setMode(this.state.controlMode);
+                })
+            }
+            if (this.viewer.selected1 != this.props.selected1) {
+                this.viewer.selected1 = [];
+                this.viewer.selected1 = this.props.selected1;
+            }
+            if (this.viewer.selected2 != this.props.selected2) {
+                this.viewer.selected2 = [];
+                this.viewer.selected2 = this.props.selected2;
+            }
+            if (this.props.round == this.state.round) {
+                this.viewer.addText();
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            } else {
+                this.viewer.clearView();
+            }
+        }
     }
 
@@ -107 +132 @@
      */
     switchRezoom() {
-        this.setState({rezoom: !this.state.rezoom});
-        this.viewer.setRezoom(!this.state.rezoom);
+        this.setState({rezoom: !this.state.rezoom}, function() {
+            this.viewer.setRezoom(this.state.rezoom);
+        });
     }
 
@@ -115 +141 @@
      */
     switchAutorotate() {
-        this.setState({autorotate: !this.state.autorotate});
-        this.viewer.setAutoRotate(!this.state.autorotate);
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+        this.setState({autorotate: !this.state.autorotate}, function() {
+            console.log(this.state.autorotate);
+            this.viewer.setAutoRotate(this.state.autorotate);
+        });
     }
 
@@ -127 +158 @@
         mousePosition.x = ((evt.clientX - bound.left) / bound.width) * 2 - 1;
         mousePosition.y = -((evt.clientY - bound.top) / bound.height) * 2 + 1;
-        //let vector = new THREE.Vector3(mousePosition.x, mousePosition.y, 0.5);
         let vector = new THREE.Vector2(mousePosition.x, mousePosition.y);
         return vector;
@@ -137 +167 @@
      */
     handleMouseDown(evt) {
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+
+        if (this.state.autorotate) {
+            this.switchAutorotate();
+        }
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -147 +185 @@
      */
     handleMouseUp(evt) {
+
+        let position1 = [];
+        let position2 = [];
+        let rotation1 = [];
+        let rotation2 = [];
+        this.viewer.framstick1.mesh.position.toArray(position1);
+        this.viewer.framstick2.mesh.position.toArray(position2);
+        this.viewer.framstick1.mesh.rotation.toArray(rotation1);
+        this.viewer.framstick2.mesh.rotation.toArray(rotation2);
+
+        this.props.handleChangePosition1(position1);
+        this.props.handleChangePosition2(position2);
+        this.props.handleChangeRotation1(rotation1);
+        this.props.handleChangeRotation2(rotation2);
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -160 +213 @@
         let mousePosition = this.getMousePosition(evt);
         this.viewer.handleMouseMove(mousePosition);
-    }
-
-    
+    }    
      
     render() {
@@ -170 +221 @@
                     <tr onMouseDown={ev => {if (ev) ev.stopPropagation();}}>
                         <td rowSpan={2} style={{position:'relative', verticalAlign: 'top', alignContent: 'left'}}>
-                            <div style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
+                            <div id="simcontainer" style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
                                 <canvas ref={(mount) => {this.mount = mount;}} onMouseDown={(evt) => this.handleMouseDown(evt)} onMouseUp={(evt) => this.handleMouseUp(evt)} onMouseMove={(evt) => this.handleMouseMove(evt)} style={{position: 'absolute', zIndex: 1}}></canvas>
                                 <Md3dRotation onClick={() => this.switchAutorotate()}  style={{zIndex: 2, position: 'absolute', left: '5%', bottom: 0, width: '20%', height: '20%', maxWidth: '40px', maxHeight: '40px', minWidth: '15px', minHeight: '15px', color: this.state.autorotate ? 'green' : 'black'}} />