Changeset 911


Ignore:
Timestamp:
04/18/20 20:18:36 (7 weeks ago)
Author:
Maciej Komosinski
Message:

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

Location:
js/human_3d_alignment
Files:
7 added
9 edited

Legend:

Unmodified
Added
Removed
  • js/human_3d_alignment/package.json

    r881 r911  
    2525  "contributors": [
    2626    "Maciej Komosinski <maciej.komosinski@cs.put.poznan.pl>",
    27     "Grzegorz Latosiński",
    2827    "Agnieszka Mensfelt <agnieszka.mensfelt@cs.put.poznan.pl>",
     28    "Artur Olejnik",
    2929    "Szymon Ulatowski"
    3030  ],
     
    4848    "react-grid-layout": "^0.16.6",
    4949    "react-icons": "^2.2.7",
     50    "react-input-slider": "^5.1.4",
     51    "react-select": "^3.0.8",
    5052    "react-treebeard": "^2.1.0",
    5153    "strip-comment": "^1.1.3",
    5254    "three": "^0.88.0",
    53     "three-orbit-controls": "^82.1.0"
     55    "three-css3drenderer": "^1.0.1",
     56    "three-orbit-controls": "^82.1.0",
     57    "three-trackballcontrols": "0.0.8",
     58    "three-transform-controls": "^1.0.4",
     59    "tween": "^0.9.0"
    5460  },
    5561  "devDependencies": {
  • js/human_3d_alignment/src/index.jsx

    r881 r911  
    11/*global Module*/
    22"use strict";
     3import http from 'http';
    34import React from 'react';
     5import Genotypes from './utils/genotypes';
    46import TitlePanel from './viewskeleton/titlepanel';
    57import WidgetsContainer from './viewskeleton/widgetscontainer';
     8import TextViewer from './widgets/textviewer';
     9import ParmViewer from './widgets/parmviewer';
    610import SimilViewer from './widgets/similviewer';
     11import FitViewer from './widgets/fitviewer';
     12import SliderViewer from './widgets/sliderviewer';
     13import EndViewer from './widgets/endviewer';
     14
     15const ROUNDS = 15;
    716
    817const styles = {
     
    2837};
    2938
    30 //const mql = window.matchMedia('(min-width: 800px)');
    3139
    3240/**
     
    4452        window.genetics = new Module.PreconfiguredGenetics();
    4553        this.layout = [
    46             {name:'0,similviewer', x: 0, y: 0, w: 12, h: 4}
     54            {name:'0,textviewer', x: 0, y: 0, w: 9, h: 1},
     55            {name:'2,similviewer', x: 0, y: 1, w: 6, h: 4},
     56            {name:'3,fitviewer', x: 6, y: 1, w: 6, h: 2},
     57            {name:'4,sliderviewer', x: 6, y: 3, w: 6, h: 2},
     58            {name:'1,parmviewer', x: 9, y: 0, w: 3, h: 1}
    4759        ];
    4860
     
    5062
    5163        this.state = {
    52             parametersmodal: false
     64            genotypes: 0,
     65            round: 0,
     66            genotype1: '',
     67            genotype2: '',
     68            pairs: [],
     69            id1: 0,
     70            id2: 0,
     71            parts1: 0,
     72            parts2: 0,
     73            selected1: [],
     74            selected2: [],
     75            position1: [0, 0, 0],
     76            position2: [0, 0, 0],
     77            rotation1: [0, 0, 0],
     78            rotation2: [0, 0, 0],
     79            userId: 0,
     80            userIp: 'localhost',
     81            timeStart: 0,
     82            selectedGender: {value: "empty", label: " "},
     83            selectedYear: {value: "empty", label: " "},
     84            percent: 0,
     85            sliderUpdated: true,
     86            isDisable: true,
     87            isFinished: false,
     88            fitHeight: 2,
     89            fitWidth: 6,
     90            controlMode: 'translate',
     91            blockView: true,
     92            result: ''
    5393        };
     94
     95        this.start = this.start.bind(this);
     96        this.getIp = this.getIp.bind(this);
     97        this.nextRound = this.nextRound.bind(this);
     98        this.saveRound = this.saveRound.bind(this);
     99        this.saveFit = this.saveFit.bind(this);
     100        this.refresh = this.refresh.bind(this);
     101        this.sendToServer = this.sendToServer.bind(this);
     102        this.finishApp = this.finishApp.bind(this);
     103        this.isReady = this.isReady.bind(this);
     104        this.isFitted = this.isFitted.bind(this);
     105        this.browserData = this.browserData.bind(this);
     106        this.loadNewGenotypes = this.loadNewGenotypes.bind(this);
     107        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
     108        this.handleChangeId = this.handleChangeId.bind(this);
     109        this.handleChangeIp = this.handleChangeIp.bind(this);
     110        this.handleChangeGender =  this.handleChangeGender.bind(this);
     111        this.handleChangeYear = this.handleChangeYear.bind(this);
     112        this.handleChangePercent = this.handleChangePercent.bind(this);
     113        this.handleChangeStartTime = this.handleChangeStartTime.bind(this);
     114        this.handleChangeFitHeight = this.handleChangeFitHeight.bind(this);
     115        this.handleChangeFitWidth = this.handleChangeFitWidth.bind(this);
     116        this.handleChangeControlMode = this.handleChangeControlMode.bind(this);
     117        this.handleChangePosition1 = this.handleChangePosition1.bind(this);
     118        this.handleChangePosition2 = this.handleChangePosition2.bind(this);
     119        this.handleChangeRotation1 = this.handleChangeRotation1.bind(this);
     120        this.handleChangeRotation2 = this.handleChangeRotation2.bind(this);
     121        this.handleChangeBlockView = this.handleChangeBlockView.bind(this);
     122        this.onClickNext = this.onClickNext.bind(this);
     123        this.onClickFinish = this.onClickFinish.bind(this);
    54124    }
    55125
     
    58128    */
    59129    componentDidMount() {
    60         this.useLayout(this.layout);
     130        window.addEventListener( 'keydown', ( event ) => {
     131            switch ( event.keyCode ) {
     132                case 84: // T
     133                    this.handleChangeControlMode( "translate" );
     134                    break;
     135                case 82: // R
     136                    this.handleChangeControlMode( "rotate" );
     137                    break;
     138            }
     139        } );
     140        let timeStart = new Date();
     141        this.handleChangeStartTime(timeStart); //set time start
     142        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
     143        this.getIp();   //set user ip
     144        this.genotypes = new Genotypes(this, "https://raw.githubusercontent.com/arturolejnik95/human_3d_alignment/master/walking.gen");   //load text from file to this.genotypes
     145        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"
     146        this.handleChangeResult(head);
    61147    }
    62148
     
    65151    */
    66152    componentDidUpdate() {
    67         window.dispatchEvent(new Event('resize'));
     153        //window.dispatchEvent(new Event('resize'));
     154        if (this.state.genotype1 != '' && this.state.genotype2 != '') {
     155            this.useLayout(this.layout);
     156        }
     157    }
     158
     159
     160    /**
     161     * Start questionnaire if genotypes are loaded
     162     */
     163    start() {
     164        this.setState({ genotypes: this.genotypes.id.length }, function() {
     165            console.log(`Genotypes: `, this.state.genotypes);
     166        });
     167
     168        this.loadNewGenotypes();
     169        this.handleChangeBlockView(false);
     170        this.useLayout(this.layout);
     171    }
     172
     173    getIp() {
     174        http.get({'host': 'api.ipify.org', 'port': 80, 'path': '/'}, (resp) => {
     175            resp.on('data', ip => {
     176                this.handleChangeIp(ip)
     177            });
     178        });
     179    }
     180
     181    /**
     182     * Save data about this round
     183     */
     184    saveRound() {
     185        this.setState({ sliderUpdated: false }, function() {
     186            console.log('Slider Updated: ' + this.state.sliderUpdated);
     187        });
     188        this.isReady();
     189    }
     190
     191    /**
     192     * Preset result as:
     193     * user ID - IP - gender - year of born - start : end - position of 1. : position of 2.
     194     * - rotation of 1. : rotation of 2. - id of 1. : id of second - pairs (1. mesh : 2. mesh) - fit result (0 - 100) ;
     195     */
     196    saveFit() {
     197        let min = Math.min(this.state.parts1, this.state.parts2);
     198        let timeStop = new Date();
     199        let start = this.state.timeStart;
     200        let stop = timeStop;
     201        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');
     202        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');
     203
     204        let fit =   this.state.userId + '|' +
     205                    this.state.userIp + '|' +
     206                    this.state.selectedGender.value + '|' +
     207                    this.state.selectedYear.value + '|' +
     208                    start + '|' +
     209                    stop + '|' +
     210                    '(' + this.state.position1[0] + ',' + this.state.position1[1] + ',' + this.state.position1[2] + ')|' + 
     211                    '(' + this.state.position2[0] + ',' + this.state.position2[1] + ',' + this.state.position2[2] + ')|' + 
     212                    '(' + this.state.rotation1[0] + ',' + this.state.rotation1[1] + ',' + this.state.rotation1[2] + ')|' + 
     213                    '(' + this.state.rotation2[0] + ',' + this.state.rotation2[1] + ',' + this.state.rotation2[2] + ')|'; 
     214                   
     215       
     216        let pair = this.state.pairs[this.state.pairs.length - 1];
     217        fit = fit + this.genotypes.id[pair[0]] + '|' + this.genotypes.id[pair[1]] + '|';
     218
     219        for (let i = 0; i < min; i++) {
     220            fit = fit + this.state.selected1[i] + ':' + (this.state.selected2[i].charCodeAt(0) - 65 + 1);
     221            if (i < min - 1) {
     222                fit = fit + ';';
     223            }
     224        }
     225        fit = fit + '|' + this.state.percent + '\n';
     226
     227        this.sendToServer(fit);
     228
     229        this.handleChangeResult(this.state.result + fit);
     230        this.handleChangeStartTime(timeStop);
     231    }
     232
     233
     234
     235    sendToServer(fit) {
     236        let rawFile = new XMLHttpRequest();
     237        rawFile.addEventListener('load', () => {
     238            console.log(rawFile.responseText);
     239        });
     240        rawFile.addEventListener('error', () => {
     241            console.log('Błąd wysyłania na serwer');
     242        });
     243       
     244        rawFile.open("POST", 'https://ptsv2.com/t/b7nhq-1578108725/post');
     245        rawFile.setRequestHeader("Content-type", 'text/plain');
     246        rawFile.send(fit);
     247    }
     248
     249    /**
     250     * Load next pair of genotypes
     251     */
     252    nextRound() {
     253        this.loadNewGenotypes();
     254        this.handleChangeBlockView(false);
     255    }
     256
     257    /**
     258     * Refresh used default layout
     259     */
     260    refresh() {
     261        this.useLayout(this.layout);
     262    }
     263
     264    /**
     265     * Load new genotypes to simulator viewer
     266     */
     267    loadNewGenotypes() {
     268        //Firstly it chooses pair of genotypes that user doesnt used before
     269        let rand1, rand2, amount1, amount2, gen1, gen2;
     270
     271        do {
     272            rand1 = 0, rand2 = 0;
     273            do  {
     274                while (rand1 == rand2) {
     275                    rand1 = Math.floor(Math.random() * this.state.genotypes);
     276                    rand2 = Math.floor(Math.random() * this.state.genotypes);
     277                }
     278            } while (this.state.pairs.includes([rand1, rand2]) || this.state.pairs.includes([rand2, rand1]));
     279
     280            //This part load genotypes to the state
     281            gen1 = this.genotypes.genotype[rand1];
     282            gen2 = this.genotypes.genotype[rand2];
     283            amount1 = gen1.split('').filter(function(sign){return sign === 'X'}).length;
     284            amount2 = gen2.split('').filter(function(sign){return sign === 'X'}).length;
     285            if (amount1 > 0) {
     286                amount1++;
     287            }
     288            if (amount2 > 0) {
     289                amount2++
     290            }
     291        } while (amount1 > 52 || amount2 > 52);
     292
     293        let newpairs = this.state.pairs;
     294        if (amount1 <= amount2) {
     295            newpairs.push([rand1, rand2]);
     296            this.setState({ genotype1: gen1, genotype2: gen2 }, function() {
     297                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     298            });
     299            this.setState({parts1: amount1, parts2: amount2}, function() {
     300                console.log(this.state.parts1 + ' ' + this.state.parts2);
     301            });
     302        } else {
     303            newpairs.push([rand2, rand1]);
     304            this.setState({ genotype1: gen2, genotype2: gen1 }, function() {
     305                console.log(`Genotypes: `, this.state.genotype1, this.state.genotype2);
     306            });
     307            this.setState({parts1: amount2, parts2: amount1}, function() {
     308                console.log(this.state.parts1 + ' ' + this.state.parts2);
     309            });
     310        }
     311        this.setState({ pairs: newpairs }, function() {
     312            console.log(`Pairs: `, this.state.pairs);
     313        });
     314
     315        //Load tables of selected parts in fitviewer
     316        let min = Math.min(amount1, amount2);
     317        let s1 = [];
     318        let s2 = [];
     319        for (let i = 0; i < min; i++) {
     320            s1.push((i+1).toString());
     321            s2.push(' ');
     322        }
     323
     324        //Start new round and load to state tables of selected and round
     325        let r = this.state.round + 1;
     326        this.setState({ round: r, selected1: s1, selected2: s2}, function() {
     327            console.log(`Round and state `, this.state.round + '. ' + this.state.selected1 + ' ' + this.state.selected2);
     328        });
     329    }
     330
     331    /**
     332     * Check is user ready to go to the next question by checking choosed gender, birth year and percent of similarity
     333     */
     334    isReady() {
     335        if (this.state.selectedGender.value != 'empty' && this.state.selectedYear.value != 'empty' && this.state.sliderUpdated) {
     336            this.setState({isDisable: false}, function() {
     337                console.log(this.state.isDisable);
     338            });
     339        } else {
     340            if (!this.state.isDisable) {
     341                this.setState({isDisable: true}, function() {
     342                    console.log(this.state.isDisable);
     343                });
     344            }
     345        }
     346    }
     347
     348    /**
     349     * Check is user matched all needed sticks
     350     */
     351    isFitted() {
     352        let index1 = this.state.selected1.indexOf(' ');
     353        let index2 = this.state.selected2.indexOf(' ');
     354
     355        if (index1 < 0 && index2 < 0 && this.state.sliderUpdated) {
     356            this.setState({sliderUpdated: false}, function() {
     357                console.log(this.state.sliderUpdated);
     358                this.isReady();
     359            });
     360        }
     361    }
     362
     363    /**
     364     * Return hash data of browser
     365     */
     366    browserData() {
     367        let data = navigator.userAgent;
     368        let hash = 0;
     369        for (let i = 0; i < data.length; i++) {
     370            let character = data.charCodeAt(i);
     371            hash = ((hash<<5)-hash)+character;
     372            hash = hash & hash; // Convert to 32bit integer
     373        }
     374        return hash;
     375    }
     376
     377    /**
     378     * Performed at the end of the survey
     379     */
     380    finishApp() {
     381        this.layout = [
     382            {name:'5,endviewer', x: 0, y: 0, w: 12, h: 4}
     383        ];
     384        this.useLayout(this.layout);
     385    }
     386
     387    /**
     388     * Allow to change gender in state
     389     * @param {string} gen choosed gender by user in listbox
     390     */
     391    handleChangeGender(gen) {
     392        this.setState({ selectedGender: gen }, function() {
     393            console.log(`Gender selected:`, this.state.selectedGender);
     394            console.log(this.genotypes.id.length)
     395            this.isReady();
     396        });
     397    };
     398   
     399    /**
     400     * Allow to change IP
     401     * @param {number} ip user IP
     402     */
     403    handleChangeIp(ip) {
     404        this.setState({ userIp: ip }, function() {
     405            console.log(`IP:`, this.state.userIp);
     406        });
     407    }
     408   
     409    /**
     410     * Allow to change user ID
     411     * @param {number} id user ID
     412     */
     413    handleChangeId(id) {
     414        this.setState({ userId: id }, function() {
     415            console.log(`ID:`, this.state.userId);
     416        });
     417    }
     418   
     419    /**
     420     * Allow to change start time
     421     * @param {number} time time of begging fitting framsticks
     422     */
     423    handleChangeStartTime(time) {
     424        this.setState({ timeStart: time }, function() {
     425            console.log(`Start time:`, this.state.timeStart);
     426        });
     427    }
     428
     429    /**
     430     * Allow to change birth year in state
     431     * @param {number} year choosed birth year by user in listbox
     432     */
     433    handleChangeYear(year) {
     434        this.setState({ selectedYear: year }, function() {
     435            console.log(`Birth year selected:`, this.state.selectedYear);
     436            this.isReady();
     437        });
     438    }
     439
     440    /**
     441     * Allow to change percent in state and mark this in state.sliderUpdated
     442     * @param {Integer} per choosed similarity of framsticks by user in percentage
     443     */
     444    handleChangePercent(per) {
     445        this.setState({ percent: per, sliderUpdated: true }, function() {
     446            console.log('Percent selected: ' + this.state.percent + ' ' + this.state.sliderUpdated);
     447            this.isReady();
     448        });
     449    }
     450
     451    /**
     452     *
     453     * @param {number} nr framstick id
     454     * @param {number} pos position on the match map
     455     * @param {*} val id of choosed stick
     456     */
     457    handleChangeSelected(nr, pos, val) {
     458        if (nr == 1) {
     459            this.setState(state => {
     460                const selected1 = state.selected1.map((item, i) => {
     461                    if (pos === i) {
     462                        return val;
     463                    } else {
     464                        return item;
     465                    }
     466                });
     467
     468                return {
     469                    selected1,
     470                };
     471            },  function() {
     472                console.log(this.state.selected1);
     473                this.isFitted();
     474            });
     475        } else {
     476            this.setState(state => {
     477                const selected2 = state.selected2.map((item, i) => {
     478                    if (pos === i) {
     479                        let v = val.charCodeAt(0);
     480                        if (v > 90) {
     481                            v = v - 6;
     482                        }
     483                        let res = String.fromCharCode(v);
     484                        return res;
     485                    } else {
     486                        return item;
     487                    }
     488                });
     489
     490                return {
     491                    selected2,
     492                };
     493            }, function() {
     494                console.log(this.state.selected2);
     495                this.isFitted();
     496            });
     497        }
     498    }
     499   
     500    /**
     501     * Function to inform fitviewer about change of height to update scrollbar (for firefox)
     502     * @param {number} h height
     503     */
     504    handleChangeFitHeight(h) {
     505        this.setState({ fitHeight: h }, function() {
     506            console.log(`Fit Height:`, this.state.fitHeight);
     507        });
     508    }
     509   
     510    /**
     511     * Function to inform fitviewer about change of width to update scrollbar (for firefox)
     512     * @param {number} w width
     513     */
     514    handleChangeFitWidth(w) {
     515        this.setState({ fitWidth: w }, function() {
     516            console.log(`Fit Width:`, this.state.fitWidth);
     517        });
     518    }
     519
     520    /**
     521     * Allow to change transform controler mode
     522     * @param {number} mode translate or rotation
     523     */
     524    handleChangeControlMode(mode) {
     525        this.setState({ controlMode: mode }, function() {
     526            console.log(`Control mode:`, this.state.controlMode);
     527        });
     528    }
     529
     530    /**
     531     * Allow to save actural position of first genotype
     532     * @param {Array} pos position [x, y, z] of first genotype
     533     */
     534    handleChangePosition1(pos) {
     535        this.setState({ position1: pos}, function() {
     536            console.log('Position1: ', this.state.position1);
     537        });
     538    }
     539
     540    /**
     541     * Allow to save actural position of second genotype
     542     * @param {Array} pos position [x, y, z] of second genotype
     543     */
     544    handleChangePosition2(pos) {
     545        this.setState({ position2: pos}, function() {
     546            console.log('Position2: ', this.state.position2);
     547        });
     548    }
     549
     550    /**
     551     * Allow to save actural rotation of first genotype
     552     * @param {Array} rot rotation [x, y, z] of first genotype
     553     */
     554    handleChangeRotation1(rot) {
     555        this.setState({ rotation1: rot}, function() {
     556            console.log('Rotation1: ', this.state.rotation1);
     557        });
     558    }
     559
     560    /**
     561     * Allow to save actural rotation of second genotype
     562     * @param {Array} rot rotation [x, y, z] of second genotype
     563     */
     564    handleChangeRotation2(rot) {
     565        this.setState({ rotation2: rot}, function() {
     566            console.log('Rotation2: ', this.state.rotation2);
     567        });
     568    }
     569
     570    /**
     571     * Allow to block view in simviewer
     572     * @param {Array} rot rotation [x, y, z] of second genotype
     573     */
     574    handleChangeBlockView(bool) {
     575        this.setState({ blockView: bool}, function() {
     576            console.log('Block View: ', this.state.blockView);
     577        });
     578    }
     579
     580    /**
     581     * Allow to change finish result that will be save in the file at the end
     582     * @param {string} res text to be save in file
     583     */
     584    handleChangeResult(res) {
     585        this.setState({ result: res }, function() {
     586            console.log('Result: ', this.state.result);
     587        });
     588    }
     589
     590    /**
     591     * Next button function
     592     */
     593    onClickNext() {
     594        this.handleChangeBlockView(true);
     595        this.saveFit();
     596        if (this.state.round == ROUNDS) {
     597            this.setState({ isFinished: true }, function() {
     598                console.log('Finish state: ' + this.state.isFinished);
     599   
     600                if (this.state.isFinished) {
     601                    this.finishApp();
     602                }
     603            });
     604        } else {
     605            this.nextRound();
     606        }
     607    }
     608
     609    /**
     610     * Close button function
     611     */
     612    onClickFinish() {
     613        this.setState({ isFinished: true }, function() {
     614            console.log('Finish state: ' + this.state.isFinished);
     615
     616            if (this.state.isFinished) {
     617                this.finishApp();
     618            }
     619        });
    68620    }
    69621
     
    76628        for (let i = 0; i < layout.length; i++) {
    77629            newlayout.push({name: layout[i].i, x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     630            if (newlayout[i].name == '2fitviewer') {
     631                this.handleChangeFitHeight(newlayout[i].h);
     632                this.handleChangeFitWidth(newlayout[i].w);
     633            }
    78634        }
    79635    }
     
    87643            let name = layout[i].name.split(',')[1];
    88644            switch (name) {
     645                case 'textviewer':
     646                    items.push({content: <TextViewer/>, i: "" + i + 'textviewer',
     647                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     648                    break;
    89649                case 'similviewer':
    90                     items.push({content: <SimilViewer/>, i: "" + i + 'similviewer',
     650                    items.push({content: <SimilViewer
     651                            genotype1 = {this.state.genotype1}
     652                            genotype2 = {this.state.genotype2}
     653                            selected1 = {this.state.selected1}
     654                            selected2 = {this.state.selected2}
     655                            blockView = {this.state.blockView}
     656                            handleChangePosition1 = {(pos) => this.handleChangePosition1(pos)}
     657                            handleChangePosition2 = {(pos) => this.handleChangePosition2(pos)}
     658                            handleChangeRotation1 = {(rot) => this.handleChangeRotation1(rot)}
     659                            handleChangeRotation2 = {(rot) => this.handleChangeRotation2(rot)}
     660                            controlMode = {this.state.controlMode}
     661                            round = {this.state.round}/>,
     662                        i: "" + i + 'similviewer',
     663                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     664                    break;
     665                case 'parmviewer':
     666                    items.push({content: <ParmViewer
     667                            handleChangeYear = {(year) => {this.handleChangeYear(year)}}
     668                            handleChangeGender = {(gen) => {this.handleChangeGender(gen)}}
     669                        />,
     670                        i: "" + i + 'parmviewer',
     671                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     672                    break;
     673                case 'fitviewer':
     674                    items.push({content: <FitViewer
     675                            selected1 = {this.state.selected1}
     676                            selected2 = {this.state.selected2}
     677                            parts1 = {this.state.parts1}
     678                            parts2 = {this.state.parts2}
     679                            fitHeight = {this.state.fitHeight}
     680                            fitWidth = {this.state.fitWidth}
     681                            handleChangeSelected = {(nr, pos, val) => {this.handleChangeSelected(nr, pos, val)}}/>,
     682                        i: "" + i + 'fitviewer',
     683                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     684                    break;
     685                case 'sliderviewer':
     686                    items.push({content: <SliderViewer
     687                            isDisable = {this.state.isDisable}
     688                            parts1 = {this.state.parts1}
     689                            parts2 = {this.state.parts2}
     690                            selected1 = {this.state.selected1}
     691                            selected2 = {this.state.selected2}
     692                            onClickNext = {() => {this.onClickNext()}}
     693                            onClickFinish = {() => {this.onClickFinish()}}
     694                            handleChangePercent = {(per) => {this.handleChangePercent(per)}}/>,
     695                        i: "" + i + 'sliderviewer',
     696                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
     697                    break;
     698                case 'endviewer':
     699                    items.push({content: <EndViewer
     700                            userId = {this.state.userId}
     701                            result = {this.state.result}/>,
     702                        i: "" + i + 'endviewer',
    91703                        x: layout[i].x, y: layout[i].y, w: layout[i].w, h: layout[i].h});
    92704                    break;
     
    104716        const contentHeader = (
    105717            <span>   
    106                 <span style={{marginLeft: '20px'}}>Matching in 3D</span>
     718                <span style={{marginLeft: '20px', fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"}}>
     719                    Ankieta
     720                </span>
    107721            </span>
    108722        );
    109        
     723
    110724        return (
    111                 <TitlePanel title={contentHeader}>
    112                     <div style={styles.content}>
    113                         {this.container}
    114                     </div>
    115                 </TitlePanel>
     725            <TitlePanel
     726                title={contentHeader}
     727            >
     728                <div style={styles.content}>
     729                    {this.container}
     730                </div>
     731            </TitlePanel>
    116732        );
    117733    }
  • js/human_3d_alignment/src/viewskeleton/widgetscontainer.jsx

    r881 r911  
    5252     */
    5353    createElement(el) {
    54         const removeStyle = {
     54        const headerStyle = {
    5555            right: "2px",
    5656            marginRight: "10px",
     
    7070                <div style={{display: 'table-row', textAlign: 'right'}}>
    7171                <span
    72                     className="remove"
    73                     style={removeStyle}
    74                     onClick={this.onRemoveItem.bind(this,el.i)}
    75                 >&#10006;</span>
     72                    className="header"
     73                    style={headerStyle}
     74                > </span>
    7675                </div>
    7776                <div style={{display: 'table-row', height: '100%'}}>
     
    164163                    onBreakpointChange={this.onBreakpointChange}
    165164                    cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
     165                    rowHeight={150}
    166166                    className="layout"
    167167                    {...this.props}
  • js/human_3d_alignment/src/visualization/camera.js

    r881 r911  
    8787        let modelSphere = modelBox.getBoundingSphere();
    8888
     89        this.targetPosition = modelSphere.center.clone();
     90        this.cameraPosition = modelSphere.center.clone().addScalar(modelSphere.radius);
     91
    8992        return {
    9093            target: {
  • js/human_3d_alignment/src/visualization/jointmeshfactory.js

    r881 r911  
    3333     * @returns {Mesh}  Mesh for a given joint
    3434     */
    35     getNewJointMesh(joint, shapeConfig) {
     35    getNewJointMesh(joint, color, shapeConfig) {
    3636        let firstPartPosVec = new THREE.Vector3(
    3737            joint.get_part1().get_p().get_x(),
     
    4242            joint.get_part2().get_p().get_y(),
    4343            joint.get_part2().get_p().get_z());
    44         //let line = new THREE.LineCurve3(firstPartPosVec, secondPartPosVec);
    45         //let geometry = new THREE.TubeGeometry(line, numsegmentstube, shapeConfig.radius,
    46         //    shapeConfig.radiusSegments, false);
    4744
    4845        let direction = new THREE.Vector3().subVectors(secondPartPosVec, firstPartPosVec);
    49         let orientation = new THREE.Matrix4();
    50 
    51         let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length(), shapeConfig.radiusSegments);
    52        
    53 
    54         let material = this.transformations.getNewMaterial(
    55             joint.get_vcolor().get_x(),
    56             joint.get_vcolor().get_y(),
    57             joint.get_vcolor().get_z());
    58         material.transparent = shapeConfig.isTransparent;
    59         material.opacity = shapeConfig.opacity;
    60         //let mesh = new THREE.Mesh(geometry, material);
    61        
     46        let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length() - 2 * 0.18, shapeConfig.radiusSegments);     
     47        let material = this.transformations.getNewMaterial(color);   
    6248        let mesh = new THREE.Mesh( geometry, material ); //new Physijs.CylinderMesh( geometry, Physijs.createMaterial(material) ); //new THREE.Mesh( geometry, material );
    6349
     50        let orientation = new THREE.Matrix4();
    6451        orientation.lookAt(firstPartPosVec, secondPartPosVec, new THREE.Object3D().up);
    6552        orientation.multiply(new THREE.Matrix4().set(
     
    8269            mesh: mesh,
    8370            connectedParts: [],
    84             showTransparent: shapeConfig.isTransparent
     71            showTransparent: true
    8572        };
    8673        return mesh;
     
    115102     * @returns {JointMesh} new joint mesh, for properties of Object look at addConnectionInfo jointMesh param documentation
    116103     */
    117     create(joint, partMeshes) {
     104    create(joint, color, partMeshes) {
    118105        let result;
    119106        let shape = joint.get_shape();
    120107
    121108        if (this.jointShapes['SHAPE_FIXED'].value == shape) {
    122             result = this.getNewJointMesh(joint, this.config.linkShape);
     109            result = this.getNewJointMesh(joint, color, this.config.linkShape);
    123110        } else {
    124             result = this.getNewJointMesh(joint, this.config.cylinderShape);
     111            result = this.getNewJointMesh(joint, color, this.config.cylinderShape);
    125112        }
    126113
  • js/human_3d_alignment/src/visualization/partmeshfactory.js

    r881 r911  
    3636     * @returns {PartMesh} info about part mesh
    3737     */
    38     getNewSphereMesh(part, sphereRadius, segments, applyScale) {
     38    getNewSphereMesh(part, color, sphereRadius, segments, applyScale) {
    3939        let geometry = new THREE.SphereGeometry(sphereRadius, segments, segments);
    40         let material = this.transformations.getNewMaterial(
    41             part.get_vcolor().get_x(),
    42             part.get_vcolor().get_y(),
    43             part.get_vcolor().get_z());
     40        let material = this.transformations.getNewMaterial(color);
    4441        let mesh = null;
    4542        if (applyScale) {
     
    9491     * @returns {PartMesh} info about part mesh
    9592     */
    96     getNewBoxMesh(part) {
     93    getNewBoxMesh(part, color) {
    9794        let geometry = new THREE.BoxGeometry(2, 2, 2);
    9895        geometry.scale(
     
    10198            part.get_scale().get_z());
    10299
    103         let material = this.transformations.getNewMaterial(
    104             part.get_vcolor().get_x(),
    105             part.get_vcolor().get_y(),
    106             part.get_vcolor().get_z());
     100        let material = this.transformations.getNewMaterial(color);
    107101        let mesh = new THREE.Mesh(geometry, material);
    108102        mesh.position.set(
     
    133127     * @returns {PartMesh} info about part mesh
    134128     */
    135     getNewCylinderMesh(part) {
     129    getNewCylinderMesh(part, color) {
    136130        let geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
    137         let material = this.transformations.getNewMaterial(
    138             part.get_vcolor().get_x(),
    139             part.get_vcolor().get_y(),
    140             part.get_vcolor().get_z());
     131        let material = this.transformations.getNewMaterial(color);
    141132
    142133        geometry.scale(
     
    181172     * @returns {PartMesh} info about part mesh
    182173     */
    183     create(part) {
     174    create(part, color) {
    184175
    185176        let shape = part.get_shape();
     
    187178            return this.getNewSphereMesh(
    188179                part,
     180                color,
    189181                this.config.ellipsoidShape.radius,
    190182                this.config.ellipsoidShape.segments, true);
    191183        }
    192184        else if (this.partShapes['SHAPE_CUBOID'].value == shape) {
    193             return this.getNewBoxMesh(part);
     185            return this.getNewBoxMesh(part, color);
    194186        }
    195187        else if (this.partShapes['SHAPE_CYLINDER'].value == shape) {
    196             return this.getNewCylinderMesh(part);
     188            return this.getNewCylinderMesh(part, color);
    197189        }
    198190        return this.getNewSphereMesh(
    199191            part,
     192            color,
    200193            this.config.defaultShape.radius,
    201194            this.config.defaultShape.segments,
  • js/human_3d_alignment/src/visualization/sviewer.js

    r881 r911  
    33
    44import * as THREE from 'three';
    5 import TrackballControls from 'three-trackballcontrols';
    6 import PartMeshFactory from './partmeshfactory';
    7 import JointMeshFactory from './jointmeshfactory';
     5import Framstick from './framstick';
    86import Scene from './scene';
    97import Camera from './camera';
    10 import { geometry } from './transformations';
     8const TransformControls = require('three-transform-controls')(THREE);
    119
    1210/** Camera class configuration for Viewer */
     
    6664     */
    6765    constructor(width, height, canvasdom) {
     66        this.container = document.getElementById("simcontainer");
     67
     68        this.meshes = [];
    6869        this.parts = [];
    69         this.joints = [];
    70         this.meshes = [];
    71         this.parts2 = [];
    72         this.joints2 = [];
    73         this.meshes2 = [];
    74         this.creature1 = new THREE.Group();
    75         this.creature2 = new THREE.Group();
    76         this.partfactory = new PartMeshFactory(geometry.part);
    77         this.jointfactory = new JointMeshFactory(geometry.joint);
     70        this.lines = [];
     71        this.framstick1 = null;
     72        this.framstick2 = null;
     73        this.selected1 = [];
     74        this.selected2 = [];
     75
    7876        this.renderer = new THREE.WebGLRenderer({
    7977            antialias: true,
     
    8583        this.scene = new Scene();
    8684        this.camera = new Camera(cameraconfig, this.renderer.domElement, false);
    87         //console.log(this.camera);
     85        this.control = new TransformControls(this.camera.getPerspectiveCamera(), this.renderer.domElement);
     86        this.control.addEventListener( 'change', (e) => {
     87            this.addLines(this.selected1, this.selected2);
     88            this.addText();
     89        });
     90        this.control.addEventListener( 'dragging-changed', function(e) {
     91            this.camera.getCameraControl().enable = ! e.value;
     92        });
     93        this.scene.add(this.control);
     94        this.control.setMode( "translate" );
     95
    8896        let ambientLight = new THREE.AmbientLight(lightconfig.ambient.color);
    8997        this.scene.add(ambientLight);
     
    100108        bottomDirectionalLight.position.set(0, 0, lightconfig.directional.bottom.positionZ);
    101109        this.scene.add(bottomDirectionalLight);
     110
    102111        this.renderer.setClearColor('gray');
    103         this.rezoom = true;
     112        this.rezoom = false;
     113        this.autorotate = false;
    104114        this.renderScene = this.renderScene.bind(this);
    105115        this.selectedelements = [];
    106116
    107117        this.mouse = new THREE.Vector2();
    108         this.offset = new THREE.Vector3();
    109         this.INTERSECTED = null;
    110118        this.SELECTED = null;
    111 
    112         this.plane = new THREE.Mesh( new THREE.PlaneGeometry(500, 500, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
    113         this.plane.visible = true;
    114         this.scene.add( this.plane );
    115 
    116         this.controls = new TrackballControls( this.camera.getPerspectiveCamera() );
    117         this.projector = new THREE.Projector();
    118         this.controls.target = new THREE.Vector3(0, 0, 0);
    119         this.controls.maxDistance = 150;
    120         this.controls2 = null;
    121     }
    122 
    123     addMesh(meshes, parts, joints, model, creature)
    124     {
    125         let partsforjoints = [];
    126         meshes = [];
    127         parts = [];
    128         joints = [];
    129         for (let i = 0; i < model.getPartCount(); i++) {
    130             let mesh = this.partfactory.create(model.getPart(i));
    131             partsforjoints.push(mesh.userData);
    132             meshes.push(mesh);
    133             parts.push(mesh);
    134             creature.add(mesh);
    135         }
    136 
    137         for (let i = 0; i < model.getJointCount(); i++) {
    138             let mesh = this.jointfactory.create(model.getJoint(i), partsforjoints);
    139             meshes.push(mesh);
    140             joints.push(mesh);
    141             creature.add(mesh);
    142         }
     119        this.CLICKED = false;
     120
     121
     122        this.lineMaterial = new THREE.LineBasicMaterial({
     123            color: 0xffff00,
     124            transparent: true,
     125            opacity: 0.5
     126        });
     127
     128        this.textLabels = [];
     129        this.container = document.getElementById("simcontainer");
     130    }
     131
     132    /**
     133     * Allow to clear view and add new pair of genotypes
     134     * @param {string} genotype1 Genotype of first framstick
     135     * @param {string} genotype2 Genotype of second framstick
     136     */
     137    add2Genotypes(genotype1, genotype2) {
     138        this.clearView();
     139
     140        this.framstick1 = new Framstick(genotype1, this);
     141        this.framstick2 = new Framstick(genotype2, this);
     142
     143        this.meshes = [];
     144        this.parts = [];
     145
     146        for (let i = 0; i < this.framstick1.mesh.children.length; i++) {
     147            this.meshes.push(this.framstick1.mesh.children[i]);
     148        }
     149
     150        for (let i = 0; i < this.framstick2.mesh.children.length; i++) {
     151            this.meshes.push(this.framstick2.mesh.children[i]);
     152        }
     153
     154        for (let i = 0; i < this.framstick1.parts.length; i++) {
     155            this.parts.push(this.framstick1.parts[i]);
     156        }
     157
     158        for (let i = 0; i < this.framstick2.parts.length; i++) {
     159            this.parts.push(this.framstick2.parts[i]);
     160        }
     161
     162        this.framstick1.mesh.position.set( 0, -2, 0 );
     163        this.framstick2.mesh.position.set( 0, 2, 0 );
     164
     165        this.framstick1.setPositions();
     166        this.framstick2.setPositions();
     167
     168        this.framstick1.setColor('red');
     169        this.framstick2.setColor('blue');
     170
     171        this.camera.zoomAll(this.meshes);
     172        this.addText();
     173    }
     174
     175    /**
     176     * Draw lines between selected parts of both framsticks
     177     * @param {Array} selected1 array of values that user selected in fitview for first genotype
     178     * @param {Array} selected2 array of values that user selected in fitview for second genotype
     179     */
     180    addLines(selected1, selected2) {
     181        for (let i = 0; i < this.lines.length; i++) {
     182            this.scene.remove(this.lines[i]);
     183        }
     184
     185        this.lines = [];
     186
     187        let pairs = (selected1.length + selected2.length) / 2;
     188
     189        for (let i = 0; i < pairs; i++) {
     190            if (selected1[i] != ' ' && selected2[i] != ' ') {
     191                let index1 = parseInt(selected1[i]) - 1;
     192                let index2 = selected2[i].charCodeAt(0) - 65;
     193
     194                let tempV1 = new THREE.Vector3().copy(this.framstick1.positions[index1]).applyEuler(this.framstick1.mesh.rotation).add(this.framstick1.mesh.position);
     195                let tempV2 = new THREE.Vector3().copy(this.framstick2.positions[index2]).applyEuler(this.framstick2.mesh.rotation).add(this.framstick2.mesh.position);
     196
     197                let geometry = new THREE.Geometry();
     198                geometry.vertices.push( tempV1 );
     199                geometry.vertices.push( tempV2 );
     200
     201                let line = new THREE.Line( geometry, this.lineMaterial );
     202                this.lines.push(line);
     203            }
     204        }
     205
     206        for (let i = 0; i < this.lines.length; i++) {
     207            this.scene.add(this.lines[i]);
     208        }
     209    }
     210
     211    addText() {
     212
     213        while (this.container.children.length > 3){
     214            this.container.removeChild(this.container.lastChild)
     215        }
     216
     217        this.textLabels = [];
     218
     219        if (this.framstick1 != null && this.framstick2 != null) {
     220            this.framstick1.addText(1);
     221            this.framstick2.addText(2);
     222        }
     223
     224    }
     225
     226    /**
     227     * Allow to change mode of TransformControls
     228     * @param {string} mode Selected mode of transformcontrols
     229     */
     230    setMode(mode) {
     231        this.control.setMode(mode);
    143232    }
    144233
     
    150239     */
    151240    handleMouseDown(position) {
    152       this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() ); 
    153       let intersectsC1 = this.raycaster.intersectObjects( this.creature1.children );
    154             let intersectsC2 = this.raycaster.intersectObjects( this.creature2.children );
    155 
    156                                 if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
    157                    
    158                                         this.controls.enabled = false;
    159                     let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
    160                                         this.SELECTED = obj;
    161                                         let intersects = this.raycaster.intersectObject( this.plane );
    162                                         this.offset.copy( intersects[ 0 ].point ).sub( this.plane.position );
    163                                 }
     241        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() ); 
     242        let intersectsC1 = this.raycaster.intersectObjects( this.framstick1.mesh.children );
     243        let intersectsC2 = this.raycaster.intersectObjects( this.framstick2.mesh.children );
     244
     245        if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
     246           
     247            let obj = intersectsC1.length > 0 ? this.framstick1 : this.framstick2;
     248
     249            if ( this.SELECTED ) {
     250                if (this.SELECTED == obj) {
     251                    if (this.SELECTED == this.framstick1) {
     252                        obj.setColor('red');
     253                    } else {
     254                        obj.setColor('blue');
     255                    }
     256                    this.control.detach();
     257                    this.SELECTED = null;
     258                } else {
     259                    if (this.SELECTED == this.framstick1) {
     260                        this.SELECTED.setColor('red');
     261                    } else {
     262                        this.SELECTED.setColor('blue');
     263                    }
     264                    this.control.detach();
     265                    obj.setColor('white');   
     266                    this.SELECTED = obj;     
     267                    this.control.attach( obj.mesh );     
     268                }
     269            } else {
     270                this.control.detach();
     271                obj.setColor('white');
     272                this.SELECTED = obj; 
     273                this.control.attach( obj.mesh );
     274            }
     275        } else {
     276            if (this.SELECTED) {
     277                if (this.SELECTED == this.framstick1) {
     278                    this.SELECTED.setColor('red');
     279                } else {
     280                    this.SELECTED.setColor('blue');
     281                }
     282                this.control.detach();
     283                this.SELECTED = null;
     284            }
     285        }
    164286    }
    165287
    166288    handleMouseUp() {
    167         this.controls.enabled = true;
    168         this.SELECTED = null;
    169 
    170         if (this.INTERSECTED)
    171         {
    172             this.plane.position.copy(this.INTERSECTED.position);
    173             this.SELECTED = null;
    174         }
    175289    }
    176290
    177291    handleMouseMove(position) {
    178         this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );
    179         if ( this.SELECTED ) {
    180             let intersects = this.raycaster.intersectObject( this.plane );
    181             if (intersects[ 0 ])
    182                 {this.SELECTED.position.copy( intersects[ 0 ].point.sub( this.offset ) );}
    183             return;
    184         }
    185 
    186             let intersectsC1 = this.raycaster.intersectObjects(this.creature1.children);
    187             let intersectsC2 = this.raycaster.intersectObjects(this.creature2.children);
    188             if (intersectsC1.length > 0 || intersectsC2.length > 0)
    189             {
    190                 let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
    191                 this.INTERSECTED = obj;
    192                 this.plane.position.copy( obj.position );
    193                 this.plane.lookAt( this.camera.getPerspectiveCamera().position );
    194             }
    195             else
    196             {
    197                 this.INTERSECTED = null;
    198             }
    199        
    200     }
    201 
    202     /**
    203      * Method uses ready Model to create and add meshes to the scene. If model is
    204      * undefined, an empty scene will be rendered.
    205      * @param {Module.Model} model input model 1
    206      * @param {Module.Model} model input model 2
    207      */
    208     loadMeshesFromModel(model, model2) {
    209         this.clearView();
    210         if (typeof model !== 'undefined') {
    211 
    212             this.addMesh(this.meshes, this.parts, this.joints, model, this.creature1);
    213             this.addMesh(this.meshes2, this.parts2, this.joints2, model2, this.creature2);
    214             this.creature2.position.set( 0, 0, 0 );
    215             this.creature2.position.set( 0, -1, 0 );
    216             this.scene.add(this.creature1);
    217             this.scene.add(this.creature2);
    218             if (this.rezoom) {
    219                 this.camera.zoomAll(this.meshes);
    220             }
    221         }
    222292    }
    223293
     
    251321        this.camera.getPerspectiveCamera().updateProjectionMatrix();
    252322        this.renderer.setSize(width, height);
    253         //console.log(this.renderer.getSize());
    254323        this.renderer.setPixelRatio(window.devicePixelRatio || 1);
    255324    }
     
    262331    setRezoom(rezoom) {
    263332        this.rezoom = rezoom;
    264         this.camera.zoomAll(this.meshes);
     333        if (this.rezoom) {
     334            this.camera.zoomAll(this.meshes);
     335        }
    265336    }
    266337
     
    277348     */
    278349    clearView() {
    279         this.scene.clear();
     350        if (this.framstick1 != null && this.framstick2 != null) {
     351            this.scene.remove(this.framstick1.mesh);
     352            this.scene.remove(this.framstick2.mesh);
     353        }
     354        this.control.detach();
     355        while (this.container.children.length > 3) {
     356            this.container.removeChild(this.container.lastChild)
     357        }
     358
     359        this.SELECTED = null;
    280360    }
    281361
  • js/human_3d_alignment/src/visualization/transformations.js

    r881 r911  
    4545        cylinderShape: {
    4646            radius: 0.1,
    47             radiusSegments: 10,
    48             isTransparent: false,
    49             opacity: 1
     47            radiusSegments: 10
    5048        },
    5149        linkShape: {
    5250            radius: 0.04,
    53             radiusSegments: 10,
    54             isTransparent: true,
    55             opacity: 0.2
     51            radiusSegments: 10
    5652        }
    5753    }
     
    186182     * @returns {MeshPhongMaterial} new material for Mesh
    187183     */
    188     getNewMaterial(r, g, b) {
    189         let color = new THREE.Color(
    190             this.calcColorComponent(r),
    191             this.calcColorComponent(g),
    192             this.calcColorComponent(b));
    193         return new THREE.MeshPhongMaterial({ color: color });
     184    getNewMaterial(color) {
     185        return new THREE.MeshPhongMaterial({
     186            color: color,
     187            transparent: true,
     188            opacity: 0.6,
     189            reflectivity: 0.2,
     190            shininess: 600
     191        });
    194192    }
    195193
  • js/human_3d_alignment/src/widgets/similviewer.jsx

    r881 r911  
    33import React from 'react';
    44import ReactDOM from 'react-dom';
     5import * as THREE from 'three';
    56import Sviewer from '../visualization/sviewer';
    67import { Md3dRotation, MdYoutubeSearchedFor } from 'react-icons/lib/md';
    7 import GenotypeParser from '../utils/genotypeparser';
    8 import _ from 'lodash';
    9 import * as THREE from 'three';
    108
    119/**
     
    2422            rezoom: true,
    2523            valid: true,
    26             clicked: false
     24            clicked: false,
     25            controlMode: 'translate',
     26            round: 0
    2727        };
    2828        this.start = this.start.bind(this);
     
    3838        let temp2 = ReactDOM.findDOMNode(this.mount).parentNode;
    3939        this.viewer = new Sviewer(temp2.clientWidth, temp2.clientHeight, temp);
    40         if (this.model) {
    41             //Module.destroy(this.model);
    42         }
    43         this.model = GenotypeParser.getModelFromGenotype("X(X,X)");
    44         this.model2 = GenotypeParser.getModelFromGenotype("XX");
    45         this.viewer.loadMeshesFromModel(this.model, this.model2);
    4640        this.viewer.setAutoRotate(this.state.autorotate);
    4741        this.viewer.setRezoom(this.state.rezoom);
    48         //this.elementspicker = new ElementsPicker(this.viewer.scene, this.viewer.camera.getPerspectiveCamera());
     42
    4943        this.renderScene = this.viewer.renderScene.bind(this.viewer);
    5044        this.lastw = temp2.clientWidth;
     
    9488            this.viewer.renderer,
    9589            this.viewer.camera.getPerspectiveCamera());
     90           
     91        if (!this.props.blockView) {
     92
     93            if (this.props.round != this.state.round) {
     94                this.setState({ round: this.props.round }, function() {
     95                    console.log(`Round in sim: `, this.state.round);
     96                });
     97                this.viewer.add2Genotypes(this.props.genotype1, this.props.genotype2);
     98                this.viewer.addLines(this.props.selected1, this.props.selected2);
     99            }
     100            if (this.props.controlMode != this.state.controlMode) {
     101                this.setState({ controlMode: this.props.controlMode }, function() {
     102                    console.log('Control mode: ', this.state.controlMode);
     103                    this.viewer.setMode(this.state.controlMode);
     104                })
     105            }
     106            if (this.viewer.selected1 != this.props.selected1) {
     107                this.viewer.selected1 = [];
     108                this.viewer.selected1 = this.props.selected1;
     109            }
     110            if (this.viewer.selected2 != this.props.selected2) {
     111                this.viewer.selected2 = [];
     112                this.viewer.selected2 = this.props.selected2;
     113            }
     114            if (this.props.round == this.state.round) {
     115                this.viewer.addText();
     116                this.viewer.addLines(this.props.selected1, this.props.selected2);
     117            } else {
     118                this.viewer.clearView();
     119            }
     120        }
    96121    }
    97122
     
    107132     */
    108133    switchRezoom() {
    109         this.setState({rezoom: !this.state.rezoom});
    110         this.viewer.setRezoom(!this.state.rezoom);
     134        this.setState({rezoom: !this.state.rezoom}, function() {
     135            this.viewer.setRezoom(this.state.rezoom);
     136        });
    111137    }
    112138
     
    115141     */
    116142    switchAutorotate() {
    117         this.setState({autorotate: !this.state.autorotate});
    118         this.viewer.setAutoRotate(!this.state.autorotate);
     143        if (this.state.rezoom) {
     144            this.switchRezoom();
     145        }
     146        this.setState({autorotate: !this.state.autorotate}, function() {
     147            console.log(this.state.autorotate);
     148            this.viewer.setAutoRotate(this.state.autorotate);
     149        });
    119150    }
    120151
     
    127158        mousePosition.x = ((evt.clientX - bound.left) / bound.width) * 2 - 1;
    128159        mousePosition.y = -((evt.clientY - bound.top) / bound.height) * 2 + 1;
    129         //let vector = new THREE.Vector3(mousePosition.x, mousePosition.y, 0.5);
    130160        let vector = new THREE.Vector2(mousePosition.x, mousePosition.y);
    131161        return vector;
     
    137167     */
    138168    handleMouseDown(evt) {
     169        if (this.state.rezoom) {
     170            this.switchRezoom();
     171        }
     172
     173        if (this.state.autorotate) {
     174            this.switchAutorotate();
     175        }
     176
    139177        evt.preventDefault();
    140178        let mousePosition = this.getMousePosition(evt);
     
    147185     */
    148186    handleMouseUp(evt) {
     187
     188        let position1 = [];
     189        let position2 = [];
     190        let rotation1 = [];
     191        let rotation2 = [];
     192        this.viewer.framstick1.mesh.position.toArray(position1);
     193        this.viewer.framstick2.mesh.position.toArray(position2);
     194        this.viewer.framstick1.mesh.rotation.toArray(rotation1);
     195        this.viewer.framstick2.mesh.rotation.toArray(rotation2);
     196
     197        this.props.handleChangePosition1(position1);
     198        this.props.handleChangePosition2(position2);
     199        this.props.handleChangeRotation1(rotation1);
     200        this.props.handleChangeRotation2(rotation2);
     201
    149202        evt.preventDefault();
    150203        let mousePosition = this.getMousePosition(evt);
     
    160213        let mousePosition = this.getMousePosition(evt);
    161214        this.viewer.handleMouseMove(mousePosition);
    162     }
    163 
    164    
     215    }   
    165216     
    166217    render() {
     
    170221                    <tr onMouseDown={ev => {if (ev) ev.stopPropagation();}}>
    171222                        <td rowSpan={2} style={{position:'relative', verticalAlign: 'top', alignContent: 'left'}}>
    172                             <div style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
     223                            <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();}}>
    173224                                <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>
    174225                                <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'}} />
Note: See TracChangeset for help on using the changeset viewer.