123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661 |
- IPE.app = {};
- IPE.helper = {};
- IPE.interceptors = {};
- String.prototype.endsWith = function(suffix) {
- return this.indexOf(suffix, this.length - suffix.length) !== -1;
- };
- Array.prototype.last = function() {
- return this[this.length-1];
- }
- IPE.app = {
- init : function(config) {
- var headerHeight = $('header').height();
- if($(window).height() < 500) {
- $("body").animate({ scrollTop: headerHeight }, "slow");
- }
- $.each(IPE.interceptors, function(index, interceptor) {
- interceptor.init();
- });
- Globals.init();
- IPE.app.initializeHelper();
- IPE.app.bindEvents();
- IPE.app.initData();
- tempRenderer = new THREE.WebGLRenderer();
- maximumTextureSize = tempRenderer.context.getParameter(tempRenderer.context.MAX_TEXTURE_SIZE);
- // we have to take an power of 2 less
- maximumTextureSize /= 2;
- if(config.defaultSize > maximumTextureSize) {
- config.defaultSize = maximumTextureSize;
- }
- // Getting info file
- $.ajax({
- url: infoUrl + config.defaultSize,
- success: function (data) {
- textureInfo = data;
- originalSizeArray[0] = textureInfo.originalSize.sizex;
- originalSizeArray[1] = textureInfo.originalSize.sizey;
- originalSizeArray[2] = textureInfo.originalSize.sizez;
- imgInfo = data.info;
- currentVolumeDimension.xmin = 0;
- currentVolumeDimension.xmax = textureInfo.originalSize.sizex;
- currentVolumeDimension.ymin = 0;
- currentVolumeDimension.ymax = textureInfo.originalSize.sizey;
- currentVolumeDimension.zmin = imgInfo.imgMin;
- currentVolumeDimension.zmax = imgInfo.imgMax;
- // downloading first image and starting
- helper.downloadImage(spriteUrl + textureInfo.sprites[0][0].$oid, 0, 0, true);
- $(document).trigger('basicsReady');
- },
- dataType: 'json'
- });
- container = document.getElementById( 'container' );
- $container = $(container);
- containerHeader = document.getElementById( 'container-header' );
- $containerHeader = $(containerHeader);
- containerOverview = document.getElementById('container-overview');
- $containerOverview = $(containerOverview);
- statsHelper = new StatsHelper($containerHeader.children('#container-stats'));
- // until now, it has to be initialized here, needs a new internal structure
- zoomHelper = new ZoomHelper();
- $(window).on('scroll', function(e) {
- if($(this).scrollTop() >= headerHeight) {
- $container.css('position', 'relative');
- $container.css('top', $(this).scrollTop() - headerHeight);
- } else {
- $container.css('top', 0);
- }
- });
- },
- initializeHelper: function() {
- helper = new Helper();
- geometryHelper = new GeometryHelper();
- stepHelper = new StepHelper();
- overviewHelper = new OverviewHelper();
- transferHelper = new TransferHelper();
- opacityPlotter = new OpacityPlotter();
- },
- initData: function() {
- volumeId = $('#volumeId').val();
- $resSpan = $('span#currentRes');
- volumeUrl = IPE.util.buildUrl('volumes/' + volumeId + '/');
- infoUrl = volumeUrl + 'texture-info/';
- spriteUrl = volumeUrl + 'sprite/';
- waitDiv = $('div#wait');
- helper.initializeShaders(IPE.util.buildUrl('static/shaders/three-shader.vert'), function(script) {
- vertexShader = script
- });
- helper.initializeShaders(IPE.util.buildUrl('static/shaders/three-shader-simple.frag'), function(script) {
- fragmentSimleShader = script
- });
- helper.initializeShaders(IPE.util.buildUrl('static/shaders/three-shader.frag'), function(script) {
- fragmentShader = script
- });
- },
- bindEvents : function() {
- $(document).on('firstImageOnLoad',function (e, firstImageParams){
- initTextures(imgInfo, firstImageParams, true);
- initFrameControls();
- stepHelper.initStepControls();
- initSliders();
- });
- $(document).on('imageOnLoad', function(e, imageParams) {
- initTextures(imgInfo, imageParams, false);
- if(useDownloadedTextureImmediately) {
- updateTexture();
- useDownloadedTextureImmediately = false;
- updateFrameControls();
- }
- });
- $(document).on('firstFrameSpritesCompleted', function() {
- init();
- addResolutionLinks();
- overviewHelper.initOverview(containerOverview);
- animate();
- });
- showPopup = false;
- $('#save-canvas').click(function(e, params) {
- if(params != undefined && params.source != undefined && params.source == 'animate-function') {
- window.open(params.imageUrl);
- return false;
- } else {
- saveImage = true;
- return false;
- }
- });
- $(window).on('resize', function() {
- var rendererSizeHolder = calculateWidthHeight();
- width = rendererSizeHolder.width.px;
- height = rendererSizeHolder.height.px;
- cameraRTT.aspect = width / height;
- cameraRTT.updateProjectionMatrix();
- camera.aspect = width / height;
- camera.updateProjectionMatrix();
- renderer.setSize( width, height );
- renderer.domElement.style.width = rendererSizeHolder.width.percent + '%';
- renderer.domElement.style.height = rendererSizeHolder.height.percent + '%';
- });
- $resolutionLinks.on('click', 'a', function(e) {
- e.preventDefault();
- e.stopPropagation();
- var $this = $(this);
- if($this.attr('href') == undefined) {
- return false;
- }
- requestedSize = $this.attr('data');
- $('.res-link').each(function(index, value) {
- var $value = $(value);
- $value.attr('href', '#');
- });
- $this.removeAttr('href');
- $.ajax({
- // todo test after remove of sync flag
- url: infoUrl + requestedSize,
- success: function (data) {
- framesDownloaded = 0;
- textures = {};
- currentTexture = 0;
- textureInfo = data;
- imgInfo = data.info;
- imgMin = imgInfo.imgMin;
- imgMax = imgInfo.imgMax;
- useDownloadedTextureImmediately = true;
- helper.downloadImage(spriteUrl + textureInfo.sprites[0][0].$oid, 0, 0, false);
- $resSpan.text(requestedSize);
- if($('input#hide-content-small-devices').is(':visible')) {
- $('input#hide-content-small-devices').trigger('click');
- }
- },
- dataType: 'json'
- });
- return false;
- });
- $('div.controls').on('click', function() {
- var $this = $(this),
- bottomControlsContainer = $('div#bottom-controls-container'),
- bottomControls = $('div#bottom-controls'),
- filledById = '',
- thisControlHolder = null;
- filledById = hideBottomControlsContainer();
- if(filledById === $this.attr('id')) {
- return;
- }
- thisControlHolder = $this.children('.control-holder')[0];
- thisControlHolder = $(thisControlHolder);
- bottomControls.append(thisControlHolder.children());
- bottomControls.attr('filledBy', $this.attr('id'));
- bottomControlsContainer.removeClass('hidden');
- // inform, that it is showed
- $this.trigger('controlsShowed');
- });
- $('input#hide-bottom-controls-container').on('click', function() {
- hideBottomControlsContainer();
- });
- $('div#menu-buttons-small-devices input').on('click', function() {
- var $this = $(this),
- target = $this.attr('data'),
- $target = $('#' + target),
- $overlay = $('div#overlay-small-devices'),
- $content = $('div#content-small-devices');
- $overlay.attr('source', target);
- $content.append($target.children());
- $overlay.show();
- });
- $('input#hide-content-small-devices').on('click', function() {
- var $overlay = $('div#overlay-small-devices'),
- $content = $('div#content-small-devices'),
- source = $overlay.attr('source'),
- $source = $('#' + source);
- $overlay.hide();
- $overlay.attr('source', '');
- $source.append($content.children());
- });
- var buttonAdvCons = $('input#show-adv-con');
- buttonAdvCons.on('click', function() {
- var advCons = $('div#advanced-controls');
- if(advCons.hasClass('hidden')) {
- advCons.removeClass('hidden');
- buttonAdvCons.val('hide adv cons');
- } else {
- advCons.addClass('hidden');
- buttonAdvCons.val('show adv cons');
- }
- });
- }
- }
- function initTextures(imgInfo, imageParams, whileInit) {
- // set initial array to index
- if(textures[imageParams.textureIndex] == undefined
- || textures[imageParams.textureIndex] == null) {
- textures[imageParams.textureIndex] = [];
- }
- // using texture
- texture = initTexture(imageParams.texture);
- textures[imageParams.textureIndex].push(texture);
- // fetch new sprites of same time frame
- if(imageParams.spriteIndex < imgInfo.numberOfSprites - 1) {
- nextSpriteIndex = imageParams.spriteIndex + 1;
- nextSpriteId = textureInfo.sprites[imageParams.textureIndex][nextSpriteIndex].$oid
- helper.downloadImage(spriteUrl + nextSpriteId, imageParams.textureIndex, nextSpriteIndex, whileInit);
- return;
- }
- // inform the rest, that the first frame is loaded completely
- if(whileInit && imageParams.textureIndex == 0) {
- $(document).trigger('firstFrameSpritesCompleted');
- }
- // todo some logic
- if(!imgInfo.multipleFrames) {
- currentTexture = 0;
- return;
- } else {
- var numberOfFrames = Object.keys(textureInfo.sprites).length,
- nextIndex = null,
- nextFrameName = null,
- nextFramePath = null;
- framesDownloaded++;
- if(framesDownloaded == 1) {
- currentTexture = 0;
- }
- currentMaxFrame = imgInfo.frameFrom + framesDownloaded - 1;
- if(framesDownloaded > 1) {
- // updating frame control maximums
- updateFrameControlsMaxFrame();
- }
- if(numberOfFrames == framesDownloaded) {
- return;
- } else {
- nextIndex = framesDownloaded;
- nextFrameName = textureInfo.sprites[nextIndex][0].$oid;
- var framePath = spriteUrl + nextFrameName;
- helper.downloadImage(framePath, nextIndex, false);
- }
- }
- }
- function initTexture(texture) {
- texture.magFilter = THREE.LinearFilter;
- texture.minFilter = THREE.LinearFilter;
- texture.needsUpdate = true;
- return texture;
- }
- function getCurrentTexture() {
- return textures[currentTexture];
- }
- function useFrameControls() {
- return (imgInfo.multipleFrames && (imgInfo.frameTo - imgInfo.frameFrom) != 0);
- }
- function initFrameControls() {
- if(!useFrameControls()) {
- return;
- }
- $('#frame-controls').removeClass('hidden');
- var $frameSlider = $('#frame-slider'),
- $playButton = $('#frame-play'),
- $pauseButton = $('#frame-pause'),
- $currentFrameInput = $('#currentFrame'),
- playId = $playButton.attr('id'),
- pauseId = $pauseButton.attr('id'),
- minFrame = imgInfo.frameFrom;
- $currentFrameInput.val(minFrame);
- var play = function() {
- if(Object.keys(textures).length == 1) {
- console.warn('only one texture loaded, can not play yet');
- return;
- }
- $playButton.addClass('hidden');
- $pauseButton.removeClass('hidden');
- playFrames = true;
- $frameSlider.slider({disabled: true});
- $currentFrameInput.prop('disabled', true);
- }
- var pause = function() {
- $playButton.removeClass('hidden');
- $pauseButton.addClass('hidden');
- playFrames = false;
- $frameSlider.slider({disabled: false});
- $currentFrameInput.prop('disabled', false);
- }
- $('.frame-button').click(function() {
- var $this = $(this),
- thisId = $this.attr('id');
- if(thisId == playId) {
- play();
- } else if(thisId == pauseId) {
- pause();
- }
- });
- $(document).on('zoomActionFinished', function(e, params) {
- zoomedIn = params.zoomAction == 'zoomIn';
- if(zoomedIn) {
- pause();
- currentTexture = minFrame + params.textureNumber;
- updateFrameControls();
- $frameSlider.slider({disabled: true});
- $currentFrameInput.prop('disabled', true);
- $playButton.prop('disabled', true);
- $pauseButton.prop('disabled', true);
- } else {
- $frameSlider.slider({disabled: false});
- $currentFrameInput.prop('disabled', false);
- $playButton.prop('disabled', false);
- $pauseButton.prop('disabled', false);
- }
- });
- $frameSlider.slider(
- {
- min: minFrame,
- max: currentMaxFrame,
- slide: function( event, ui ) {
- currentTexture = ui.value - minFrame;
- updateTexture();
- $currentFrameInput.val(ui.value);
- }
- }
- );
- $currentFrameInput.change(function() {
- var value = parseInt($(this).val());
- if(value >= imgInfo.frameFrom && currentMaxFrame >= value) {
- currentTexture = value - minFrame;
- updateTexture();
- $frameSlider.slider('value', value);
- } else {
- $(this).val($frameSlider.slider('value'));
- }
- });
- }
- function updateFrameControlsMaxFrame() {
- if(!useFrameControls()) {
- return;
- }
- var $frameSlider = $('#frame-slider');
- $frameSlider.slider('option', 'max', currentMaxFrame);
- }
- function updateFrameControls() {
- if(!useFrameControls()) {
- return;
- }
- var $frameSlider = $('#frame-slider'),
- $currentFrameInput = $('#currentFrame'),
- minFrame = imgInfo.frameFrom,
- value = currentTexture + minFrame;
- $frameSlider.slider('value', value);
- $currentFrameInput.val(value);
- }
- function init() {
- rendererSizeHolder = calculateWidthHeight();
- width = rendererSizeHolder.width.px;
- height = rendererSizeHolder.height.px;
- //width = window.innerWidth;
- //height = window.innerHeight;
- camera = new THREE.PerspectiveCamera( 45, width / height, .1, 1000 );
- camera.position.z = 2;
- cameraRTT = new THREE.PerspectiveCamera( 45, width / height, .1, 1000 );
- cameraRTT.position.z = 2;
- scene = new THREE.Scene();
- sceneRTT = new THREE.Scene();
- rtTexture = new THREE.WebGLRenderTarget( width, height, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat } );
- var geometry = geometryHelper.createBoxGeometry(originalDimension, currentVolumeDimension);
- var attributes = {
- frontColor: {type: 'c', value: [] }
- }
- material = new THREE.ShaderMaterial({
- attributes: attributes,
- vertexShader: vertexShader,
- fragmentShader: fragmentSimleShader,
- side: THREE.FrontSide
- });
- var spriteMaps = getCurrentTexture();
- var transferImageData = transferHelper.getCurrentTransferFunction();
- var transferTexture = new THREE.Texture(transferImageData);
- transferTexture.needsUpdate = true;
- var uniforms = {
- tBackground: {type: 't', value: rtTexture},
- tvSlices: {type: 'tv', value: spriteMaps},
- tTransfer: { type: 't', value: transferTexture},
- steps: {type: 'f', value: 100},
- numberOfSlices: {type: 'f', value: imgInfo.numberOfSlices },
- numberOfSprites: {type: 'f', value: imgInfo.numberOfSprites },
- slicesPerSprite: {type: 'f', value: imgInfo.slicesPerSprite },
- slicesOverX: {type: 'f', value: imgInfo.slicesOverX },
- slicesOverY: {type: 'f', value: imgInfo.slicesOverY },
- };
- materialScreen = new THREE.ShaderMaterial({
- attributes: attributes,
- uniforms: uniforms,
- vertexShader: vertexShader,
- fragmentShader: fragmentShader,
- side: THREE.BackSide,
- transparent: true
- });
- backgroundBox = new THREE.Mesh(geometry, material);
- sceneRTT.add(backgroundBox);
- frontBox = new THREE.Mesh(geometry, materialScreen);//
- scene.add(frontBox);
- objectsToIntersect.push(frontBox);
- translateBoxes(-0.5, -0.5, -0.5);
- rotateBoxesX(Math.PI / -2);
- //rotateBoxesY(Math.PI);
- //rotateBoxesZ(Math.PI);
- renderer = new THREE.WebGLRenderer();
- renderer.setSize(width, height);
- renderer.domElement.style.width = rendererSizeHolder.width.percent + '%';
- renderer.domElement.style.height = rendererSizeHolder.height.percent + '%';
- renderer.setClearColor(0xffffff, 1);
- container.appendChild(renderer.domElement);
- $canvas = $('canvas', $container);
- controls1 = new THREE.OrbitControls( camera, renderer.domElement );
- controls1.damping = 0.2;
- controls2 = new THREE.OrbitControls( cameraRTT, renderer.domElement );
- controls2.damping = 0.2;
- rendererContext = renderer.context;
- raycaster = new THREE.Raycaster();
- }
- function rotateBoxesX(radian) {
- rotationMatrix = new THREE.Matrix4().makeRotationX(radian);
- rotateBoxes(rotationMatrix);
- }
- function rotateBoxesY(radian) {
- rotationMatrix = new THREE.Matrix4().makeRotationY(radian);
- rotateBoxes(rotationMatrix);
- }
- function rotateBoxesZ(radian) {
- rotationMatrix = new THREE.Matrix4().makeRotationZ(radian);
- rotateBoxes(rotationMatrix);
- }
- function rotateBoxes(matrix) {
- backgroundBox.applyMatrix(rotationMatrix);
- frontBox.applyMatrix(rotationMatrix);
- }
- function translateBoxes(x, y, z) {
- translationMatrix = new THREE.Matrix4().makeTranslation(x, y, z);
- backgroundBox.applyMatrix(translationMatrix);
- frontBox.applyMatrix(translationMatrix);
- }
- function initSliders() {
- initLayerSliders();
- // init gray value slider
- GenericSlider.initSlider(
- slider = $( "#gray-slider" ),
- sliderInputs = $('input.gray'),
- minGray,
- maxGray,
- function(values) {
- $(document).trigger(
- 'opacityBordersChanged',
- {
- minGray: values[0],
- maxGray : values[1]
- }
- );
- }
- );
- $('#gray-slider-container').on('controlsShowed', function() {
- var values = $("#gray-slider").slider('values');
- $(document).trigger('opacityBordersChanged', { minGray: values[0], maxGray: values[1] });
- });
- GenericSlider.initSimpleSlider(
- slider = $('#background-slider'),
- sliderInput = $('#background-input'),
- startVal = 255,
- 0,
- 255,
- function(value) {
- var colorFloat = calculateGrayFloat(value);
- renderer.setClearColor(
- new THREE.Color(colorFloat, colorFloat, colorFloat),
- 1
- );
- }
- );
- }
- function initLayerSliders() {
- // init xlayer slider
- GenericSlider.initSlider(
- $( "#xlayer-slider" ),
- sliderInputs = $('input.xlayer'),
- currentVolumeDimension.xmin,
- currentVolumeDimension.xmax,
- function(values) {
- dimMin = currentVolumeDimension.xmin;
- dimMax = currentVolumeDimension.xmax;
- currentDimension.xmin = calculateLayerFloat(values[0], dimMin, dimMax);
- currentDimension.xmax = calculateLayerFloat(values[1], dimMin, dimMax);
- updateCubeLayers(currentDimension);
- },
- function() {
- values = Array(2);
- values[0] = calculateLayerInt(currentDimension.xmin, currentVolumeDimension.xmin, currentVolumeDimension.xmax );
- values[1] = calculateLayerInt(currentDimension.xmax, currentVolumeDimension.xmin, currentVolumeDimension.xmax );
- return values;
- }
- );
- // init ylayer slider
- GenericSlider.initSlider(
- $( "#ylayer-slider" ),
- sliderInputs = $('input.ylayer'),
- currentVolumeDimension.ymin,
- currentVolumeDimension.ymax,
- function(values) {
- dimMin = currentVolumeDimension.ymin;
- dimMax = currentVolumeDimension.ymax;
- currentDimension.ymin = calculateLayerFloat(values[0], dimMin, dimMax);
- currentDimension.ymax = calculateLayerFloat(values[1], dimMin, dimMax);
- updateCubeLayers(currentDimension);
- },
- function() {
- values = Array(2);
- values[0] = calculateLayerInt(currentDimension.ymin, currentVolumeDimension.ymin, currentVolumeDimension.ymax );
- values[1] = calculateLayerInt(currentDimension.ymax, currentVolumeDimension.ymin, currentVolumeDimension.ymax );
- return values;
- }
- );
- // init zlayer slider
- GenericSlider.initSlider(
- $( "#zlayer-slider" ),
- sliderInputs = $('input.zlayer'),
- currentVolumeDimension.zmin,
- currentVolumeDimension.zmax,
- function(values) {
- dimMin = currentVolumeDimension.zmin;
- dimMax = currentVolumeDimension.zmax;
- currentDimension.zmin = calculateLayerFloat(values[0], dimMin, dimMax),
- currentDimension.zmax = calculateLayerFloat(values[1], dimMin, dimMax);
- updateCubeLayers(currentDimension);
- },
- function() {
- values = Array(2);
- values[0] = calculateLayerInt(currentDimension.zmin, currentVolumeDimension.zmin, currentVolumeDimension.zmax );
- values[1] = calculateLayerInt(currentDimension.zmax, currentVolumeDimension.zmin, currentVolumeDimension.zmax );
- return values;
- }
- );
- }
- function repositionLayerSliders() {
- initLayerSliders();
- $.each($('.slider.layer'), function(index, value) {
- $(value).trigger('reposition');
- });
- updateCubeLayers(currentDimension);
- }
- var prevTime = Date.now();
- var fps = 0;
- var frames = 0;
- function animate() {
- requestAnimationFrame( animate );
- $container.trigger('animation');
- var numberOfTextures = Object.keys(textures).length;
- var now = Date.now();
- frames++;
- if(now > prevTime + 1000) {
- fps = (frames * 1000) / (now - prevTime);
- if(adjustSteps) {
- if(fps < 10) {
- stepHelper.decreaseSteps();
- } else if(fps > 15) {
- stepHelper.increaseSteps();
- }
- }
- prevTime = now;
- frames = 0;
- }
- if(playFrames && numberOfTextures > 1) {
- var timeStamp = (new Date()).getTime();
- if(timeStamp - textureTimestamp > 400) {
- currentTexture++;
- if(currentTexture >= numberOfTextures) {
- currentTexture = 0;
- }
- updateTexture();
- textureTimestamp = timeStamp;
- updateFrameControls();
- }
- }
- if(nextCubeDeletionTimeStamp == null && intersectCubesTimeStamps.length != 0) {
- nextCubeDeletionTimeStamp = intersectCubesTimeStamps.shift();
- }
- if((Date.now() - nextCubeDeletionTimeStamp) > 1500) {
- cubeToDelete = intersectCubes.shift();
- scene.remove(cubeToDelete);
- nextCubeDeletionTimeStamp = null;
- }
- if(transferHelper.transferFunctionChanged()) {
- var transfer = new THREE.Texture(transferHelper.getCurrentTransferFunction());
- transfer.needsUpdate = true;
- materialScreen.uniforms.tTransfer.value = transfer;
- }
- cameraPoint = camera.position.clone();
- overviewHelper.updateCameraPosition(cameraPoint);
- statsHelper.update();
- controls1.update();
- controls2.update();
- render();
- if(saveImage) {
- $('#save-canvas').trigger('click', { source: 'animate-function', imageUrl: renderer.domElement.toDataURL() });
- saveImage = false;
- }
- }
- function updateTexture(textures) {
- if(textures == undefined || textures == null) {
- textures = getCurrentTexture();
- }
- $.each(textures, function(index, texture) {
- value.needsUpdate = true;
- });
- materialScreen.uniforms.tvSlices.value = textures;
- }
- function render() {
- renderer.clear();
- renderer.context.clearDepth(-50.0);
- renderer.context.depthFunc(renderer.context.GEQUAL);
- renderer.render(sceneRTT, cameraRTT, rtTexture, true);
- renderer.context.clearDepth(50.0);
- renderer.context.depthFunc(renderer.context.LEQUAL);
- renderer.render(scene, camera);
- overviewHelper.render();
- }
- function updateCubeLayers(geometryDimension) {
- var geometry = geometryHelper.createBoxGeometry(geometryDimension, currentVolumeDimension);
- var colorArray = geometry.attributes.frontColor.array,
- positionArray = geometry.attributes.position.array;
- frontBox.geometry.attributes.frontColor.array = colorArray;
- frontBox.geometry.attributes.frontColor.needsUpdate = true;
- frontBox.geometry.attributes.position.array = positionArray;
- frontBox.geometry.attributes.position.needsUpdate = true;
- }
- // invert function of calculateLayerFloat
- function calculateLayerInt(position, dimMin, dimMax) {
- if(position <= 0.005) {
- return dimMin;
- }
- if(position >= 0.995) {
- return dimMax;
- }
- value = Math.round(position * (dimMax - dimMin) + dimMin);
- return value;
- }
- // calculate the float value for a layer input integer
- // 150 of [0, 299] will be 0.5
- function calculateLayerFloat(value, dimMin, dimMax) {
- var floatVal = (value - dimMin) / (dimMax - dimMin);
- if (floatVal == 0) {
- return 0.005;
- }
- if (floatVal == 1) {
- return 0.995;
- }
- return floatVal;
- }
- function calculateGrayFloat(value) {
- return value / 255.0;
- }
- function distance (v1, v2) {
- dx = v1.x - v2.x;
- dy = v1.y - v2.y;
- dz = v1.z - v2.z;
- return Math.sqrt(dx*dx+dy*dy+dz*dz);
- }
- function calculateWidthHeight() {
- downScaleFactor = 0.66;
- valueholder = {
- height: {},
- width: {}
- }
- containerHeight = $container.height();
- volumeInfoHeight = $('#volume-information').height();
- headerHeight = $('header').height();
- valueholder.height.px = (containerHeight - volumeInfoHeight) * downScaleFactor;
- volumeInfoHeightPercent = Math.floor(volumeInfoHeight / containerHeight * 100);
- valueholder.height.percent = 100 - volumeInfoHeightPercent;
- valueholder.width.px = $container.width() * downScaleFactor;
- valueholder.width.percent = 100;
- return valueholder;
- }
- function hideBottomControlsContainer() {
- var bottomControlsContainer = $('div#bottom-controls-container'),
- bottomControls = $('div#bottom-controls'),
- filledById = bottomControls.attr('filledBy'),
- filledBy = $('#' + filledById);
- // writing data back to original, because append MOVES the children
- if(filledBy.length == 1) {
- filledBy = $(filledBy[0]);
- filledByControlHolder = filledBy.children('.control-holder')[0];
- $(filledByControlHolder).append(bottomControls.children());
- }
- bottomControls.attr('filledBy', '');
- bottomControlsContainer.addClass('hidden');
- return filledById;
- }
- function addResolutionLinks() {
- $resSpan.text(config.defaultSize);
- textureSizes = config.textureSizes;
- textureSizes.forEach(function(size) {
- if(size > maximumTextureSize) {
- return;
- }
- href = size == config.defaultSize ? '' : 'href="#"';
- $resolutionLinks.append('<a '+href+' class="res-link" data="'+size+'">'+size+'</a> ');
- });
- }
- ;var volumeId;
- var stats, container, $container, containerHeader, $containerHeader, $canvas, cameraRTT, camera, sceneRTT, scene, renderer, controls, controls2;
- var maximumTextureSize;
- var containerOverview, $containerOverview;
- var $resSpan;
- var $resolutionLinks;
- var raycaster;
- var width, height;
- var steps, adjustSteps;
- var rtTexture, material;
- var backgroundBox, frontBox;
- var objectsToIntersect = [];
- var minGray = 5, maxGray = 255;
- var originalDimension,
- zoomedDimension,
- currentDimension,
- originalVolumeDimension,
- zoomedVolumeDimension,
- currentVolumeDimension,
- volumeUrl,
- infoUrl,
- spriteUrl,
- imgInfo = null,
- textureInfo = null,
- originalSizeArray = Array(3),
- zoomedInfo,
- rotationMatrix;
- var textures = {},
- currentTexture = 0,
- useDownloadedTextureImmediately = false,
- textureTimestamp = (new Date()).getTime(),
- playFrames = false,
- currentMaxFrame = 0;
- var framesDownloaded = 0,
- cachedImages = {};
- var vertexShader = null,
- fragmentSimleShader = null,
- fragmentShader = null;
- var intersectCubes = [],
- intersectCubesTimeStamps = []
- nextCubeDeletionTimeStamp = null,
- zoomedIn = false;
- var helper,
- geometryHelper,
- stepHelper,
- overviewHelper,
- transferHelper,
- zoomHelper,
- opacityPlotter,
- statsHelper;
- var waitDiv;
- var saveImage = false;
- // prefetch first image to cache it
- var progressContainer,
- imageProgress,
- progressSpan;
- var Globals = (function() {
- return {
- init: function() {
- originalDimension = new GeometryDimension();
- zoomedDimension = new GeometryDimension();
- currentDimension = originalDimension;
- originalVolumeDimension = new VolumeDimension();
- zoomedVolumeDimension = new VolumeDimension();
- currentVolumeDimension = originalVolumeDimension;
- $resolutionLinks = $('#resolution-links');
- }
- }
- }());
- ;var GeometryHelper = function() {
- return {
- createBoxGeometry: function(dimension, volumeDimension) {
- var vertexPos = [
- //front face first
- [dimension.xmin, dimension.ymin, dimension.zmax],
- [dimension.xmax, dimension.ymin, dimension.zmax],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- //front face second
- [dimension.xmin, dimension.ymin, dimension.zmax],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- [dimension.xmin, dimension.ymax, dimension.zmax],
- // back face first
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmin, dimension.ymax, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmin],
- // back face second
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmin],
- [dimension.xmax, dimension.ymin, dimension.zmin],
- // top face first
- [dimension.xmin, dimension.ymax, dimension.zmin],
- [dimension.xmin, dimension.ymax, dimension.zmax],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- // top face second
- [dimension.xmin, dimension.ymax, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- [dimension.xmax, dimension.ymax, dimension.zmin],
- // bottom face first
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymin, dimension.zmax],
- // bottom face second
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymin, dimension.zmax],
- [dimension.xmin, dimension.ymin, dimension.zmax],
- // right face first
- [dimension.xmax, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- // right face second
- [dimension.xmax, dimension.ymin, dimension.zmin],
- [dimension.xmax, dimension.ymax, dimension.zmax],
- [dimension.xmax, dimension.ymin, dimension.zmax],
- // left face first
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmin, dimension.ymin, dimension.zmax],
- [dimension.xmin, dimension.ymax, dimension.zmax],
- // left face second
- [dimension.xmin, dimension.ymin, dimension.zmin],
- [dimension.xmin, dimension.ymax, dimension.zmax],
- [dimension.xmin, dimension.ymax, dimension.zmin]
- ];
- var positions = [];
- var colors = [];
- for(var i = 0; i < vertexPos.length; i++) {
- var backCounter = vertexPos.length - 1 - i,
- x = vertexPos[backCounter][0],
- y = vertexPos[backCounter][1],
- z = vertexPos[backCounter][2];
- positions.push(x);
- positions.push(y);
- positions.push(z * volumeDimension.getZStretchFactor());
- colors.push(x);
- colors.push(y);
- colors.push(z);
- colors.push(1.0);
- }
- var geometry = new THREE.BufferGeometry();
- var bufferPositions = new Float32Array(positions);
- geometry.addAttribute( 'position', new THREE.BufferAttribute( bufferPositions, 3 ) );
- geometry.addAttribute( 'frontColor', new THREE.BufferAttribute(new Float32Array(colors), 4));
- geometry.computeBoundingSphere();
- return geometry;
- }
- }
- }
- var GeometryDimension = function() {
- this.xmin = 0.005;
- this.xmax = 0.995;
- this.ymin = 0.005;
- this.ymax = 0.995;
- this.zmin = 0.005;
- this.zmax = 0.995;
- }
- var VolumeDimension = function() {
- this.xmin;
- this.xmax;
- this.ymin;
- this.ymax;
- this.zmin;
- this.zmax;
- return {
- getZStretchFactor: function() {
- return (this.zmax - this.zmin + 1) / (this.xmax - this.xmin);
- }
- }
- }
- ;var Helper = function() {
- var messagePopup = $('#popup'),
- popupVisible = messagePopup.hasClass('hidden'),
- progressContainer = $('#progress-container'),
- imageProgress = $('#image-progress'),
- progressSpan = $('#texturePath');
- return {
- initializeShaders: function(url, callback) {
- $.ajax({
- url: url,
- error: function() {
- console.error('failed to load shader file from: ' + url);
- },
- success: callback
- });
- },
- downloadImage: function (texturePath, textureIndex, spriteIndex, whileInit) {
- me = this;
- onProgressHolder = me.showProgress(texturePath);
- if(!texturePath.endsWith('/')) {
- texturePath += '/';
- }
- var xmlHttp = new XMLHttpRequest();
- xmlHttp.open('GET', texturePath, true);
- xmlHttp.onprogress = onProgressHolder.onProgressFunction;
- xmlHttp.onload = function(e) {
- var blob = new Blob([xmlHttp.response], {
- type: this.getResponseHeader('content-type')
- });
- var blobSrc = window.URL.createObjectURL(blob);
- var image = new Image();
- var texture = new THREE.Texture(image);
- image.onload = function() {
- me.hideProgress();
- texture.needsUpdate = true;
- var params = {
- textureIndex: textureIndex,
- spriteIndex: spriteIndex,
- texture: texture
- };
- if(textureIndex == 0 && whileInit) {
- $(document).trigger('firstImageOnLoad', params);
- } else {
- $(document).trigger('imageOnLoad', params);
- }
- }
- image.src = blobSrc;
- };
- xmlHttp.responseType = 'blob';
- xmlHttp.send();
- },
- showProgress: function(texturePath) {
- progressContainer.removeClass('hidden');
- progressSpan.text(texturePath);
- return {
- onProgressFunction: function(e) {
- if (e.lengthComputable) {
- value = Math.floor(e.loaded / e.total * 100);
- imageProgress.val(value);
- }
- }
- }
- },
- hideProgress: function() {
- imageProgress.val(0);
- progressSpan.text('');
- progressContainer.addClass('hidden');
- },
- displayMessage: function(message, fadeOutAutomatically, callback, timeout) {
- var me = this;
- messagePopup.html(message);
- messagePopup.show();
- if(fadeOutAutomatically) {
- this.fadeoutMessage(callback, timeout);
- }
- },
- fadeoutMessage: function(callback, timeout) {
- if(timeout == undefined) {
- timeout = 0;
- }
- setTimeout(function() {
- messagePopup.fadeOut(400, function() {
- $(this).html('');
- if(callback) {
- callback();
- }
- });
- }, timeout);
- }
- };
- }
- ;var OpacityPlotter = function() {
- // we have 255 colors
- var coordinateLength = 255;
- // set with respect on plotter height
- var height = 40;
- // array for holding the x coordinates
- var coordinates = Array(coordinateLength);
- // array for holding the y coordinates values elementOf [0, height]
- var linePosition = Array(coordinateLength);
- // array holding the resulting opacities, that will be generated
- // of line position, values elementof [0, 255]
- var opacities = Array(coordinateLength);
- for(counter = 0; counter < coordinateLength; counter++) {
- coordinates[counter] = counter;
- linePosition[counter] = 0;
- opacities[counter] = 255;
- }
- var stage = new Kinetic.Stage({
- container : 'opacity-plot',
- width : coordinateLength,
- height: height
- });
- var layer = new Kinetic.Layer();
- var rect = new Kinetic.Rect({
- x: 0,
- y: 0,
- width: stage.getWidth(),
- height: stage.getHeight(),
- fill: '#cccccc'
- });
- layer.add(rect);
- var spline = new Kinetic.Line({
- points: getResultingPoints(),
- stroke: 'red',
- strokeWidth: 3,
- lineCap: 'round'
- });
- layer.add(spline);
- stage.add(layer);
- stage.on("mousedown", function() {
- processEvent();
- });
- stage.on("mousemove", function(e) {
- if(e.evt.which == 1) {
- processEvent();
- }
- });
- $('#transfer-function-definition').on('controlsShowed', function() {
- populateOpacities();
- });
- $('input#opacity-visible').on('click', function() {
- setToFixedValue(255);
- });
- $('input#opacity-invisible').on('click', function() {
- setToFixedValue(0);
- });
- function setToFixedValue(value) {
- var opacityValue = value;
- var yValue = height - ((value / 255) * height)
- for(counter = 0; counter < opacities.length; counter++) {
- opacities[counter] = opacityValue ;
- linePosition[counter] = yValue;
- }
- populateOpacities();
- spline.setPoints(getResultingPoints());
- layer.draw();
- }
- function populateOpacities() {
- $(document).trigger('opacityChanged', { opacities: opacities.slice() });
- }
- function processEvent() {
- var mousePosition = stage.getPointerPosition();
- calculateOpacities(mousePosition);
- spline.setPoints(getResultingPoints());
- layer.draw();
- }
- function calculateOpacities(mousePosition) {
- // Set area of click to this value
- var xMin = (mousePosition.x - 2 >= 0) ? mousePosition.x - 2 : 0;
- var xMax = (mousePosition.x + 2 <= 255) ? mousePosition.x + 2 : 255;
- var opacityValue = (height - mousePosition.y) / height;
- opacityValue *= 255;
- for(counter = xMin; counter <= xMax; counter++) {
- linePosition[counter] = mousePosition.y;
- opacities[counter] = opacityValue;
- }
- populateOpacities();
- }
- function getResultingPoints() {
- return combineArrays(coordinates, linePosition);
- }
- function combineArrays(array1, array2) {
- return $.map(array1, function(v, i) { return [v, array2[i]]; });
- }
- }
- ;var StatsHelper = function(parentElement) {
- if(IPE.environment != 'dev') {
- // fill parentElement with emptyness
- parentElement.append(' ');
- // we don't want to do display anything
- // in production
- return {
- update: function() {}
- };
- }
- var stats = new Stats();
- var parentElement = parentElement;
- parentElement.append(stats.domElement);
- return {
- update: function() {
- stats.update();
- }
- }
- };
- ;var StepHelper = function() {
- // default is the step 100
- currentStepIndex = 2;
- // steps just defined
- availableSteps = [10, 20, 50, 80, 100, 150, 200];
- return {
- decreaseSteps: function() {
- var currentStepIndex = this.determineCurrentStepIndex();
- if(currentStepIndex > 0) {
- this.updateStepValue(availableSteps[currentStepIndex - 1], true);
- }
- },
- increaseSteps: function() {
- var currentStepIndex = this.determineCurrentStepIndex();
- if(currentStepIndex > -1 && currentStepIndex < availableSteps.length - 1) {
- this.updateStepValue(availableSteps[currentStepIndex + 1], true);
- }
- },
- determineCurrentStepIndex: function() {
- var minDeviation = null,
- minDeviationIndex;
- // first we have to find an appropiate predefined stepValue for input stepvalue
- for(var index = 0; index < availableSteps.length; index++) {
- deviation = Math.abs(steps - availableSteps[index]);
- if(minDeviation == null || deviation < minDeviation) {
- minDeviation = deviation;
- minDeviationIndex = index;
- }
- }
- if(minDeviation !== null) {
- return minDeviationIndex;
- } else {
- return -1;
- }
- },
- updateStepValue: function(stepValue, updateInputField) {
- steps = stepValue;
- materialScreen.uniforms.steps.value = steps;
- if(updateInputField) {
- $('#steps').val(stepValue);
- }
- },
- initStepControls: function() {
- var me = this,
- stepsInput = $('#steps'),
- stepsAdjustInput = $('#steps-adjust');
- steps = stepsInput.val();
- stepsInput.change(function() {
- steps = stepsInput.val();
- me.updateStepValue(steps, false);
- });
- adjustSteps = stepsAdjustInput.is(':checked');
- stepsAdjustInput.change(function() {
- adjustSteps = $(this).is(':checked');
- if(adjustSteps) {
- stepsInput.prop('disabled', true);
- } else {
- stepsInput.prop('disabled', false);
- }
- });
- }
- };
- };
- ;var TransferHelper = function() {
- var me = this,
- changed = false,
- canvas = document.getElementById('transfer-function'),
- $canvas = $(canvas),
- context = canvas.getContext('2d'),
- hiddenCanvas = document.getElementById('hidden-transfer'),
- hiddenContext = hiddenCanvas.getContext('2d'),
- transferSpanHolder = $('#transfer-span-holder'),
- transfer = $('#transfer'),
- disabled = true,
- handles = $('span.transfer'),
- $standardTf = $('img#standard-tf').get(0),
- offsetLeft = {
- blue: 0,
- turquois: 0.25,
- green: 0.5,
- orange: 0.75,
- red: 1
- },
- colorCodes = {
- blue: '#0000FF',
- turquois: '#00FFFF',
- green: '#00FF00',
- orange: '#FFFF00',
- red: '#FF0000'
- },
- opacities = Array(255);
- //black values are disabled defaultly
- opacities[0] = 0;
- for(counter = 0; counter < opacities.length; counter++) {
- opacities[counter] = 255;
- if (counter <= minGray) {
- opacities[counter] = 0;
- }
- }
- $('input#toggle-transfer').on('click', function() {
- if(disabled) {
- enableTransferFunction();
- } else {
- disableTransferFunction();
- }
- });
- var getOffsetLeft = function() {
- return transfer.offset().left - transfer.parent().offset().left;
- }
- var removePxOffString = function(str) {
- return parseInt(str.replace('px', ''));
- }
- var updateGradient = function() {
- // Create gradient
- var grd = context.createLinearGradient(0,0,255,0);
- $.each(handles, function(index, value) {
- var $value = $(value),
- colorName = $value.attr('color'),
- colorOffsetLeft = offsetLeft[colorName],
- colorCode = colorCodes[colorName];
- grd.addColorStop(colorOffsetLeft, colorCode);
- });
- // Fill with gradient
- context.fillStyle = grd;
- context.fillRect(0,0,255, 10);
- applyOpacities();
- changed = true;
- };
- var applyOpacities = function() {
- var imageData = context.getImageData(0, 0, 255, 1),
- data = imageData.data;
- for(counter = 0; counter < opacities.length; counter++) {
- data[(counter * 4) + 3] = opacities[counter];
- }
- hiddenContext.putImageData(imageData, 0, 0, 0, 0, 255, 1);
- }
- var updateHandlePosition = function(element) {
- var colorLeft = removePxOffString($(element).css('left')) - getOffsetLeft(),
- colorOffsetLeft = colorLeft / $canvas.width(),
- colorName = $(element).attr('color');
- if(colorOffsetLeft > 1.0) {
- colorOffsetLeft = 1.0;
- }
- if(colorOffsetLeft < 0.0) {
- colorOffsetLeft = 0.0;
- }
- offsetLeft[colorName] = colorOffsetLeft;
- updateGradient();
- };
- var enableTransferFunction = function() {
- $.each(handles, function(index, value) {
- var $value = $(value),
- colorName = $value.attr('color'),
- colorOffsetLeft = offsetLeft[colorName],
- colorLeft = getOffsetLeft() + ($canvas.width() * colorOffsetLeft),
- colorCode = colorCodes[colorName];
- $value.css({left: colorLeft, 'background-color': colorCode });
- $(value).draggable({
- containment: '#transfer-span-holder',
- scroll: false,
- axis: 'x',
- cursor: "crosshair",
- stop: function() {
- updateHandlePosition(this);
- },
- drag: function() {
- updateHandlePosition(this);
- }
- });
- });
- showHandles();
- updateGradient();
- disabled = false;
- };
- var disableTransferFunction = function() {
- context.drawImage($standardTf, 0, 0, 255, 10);
- applyOpacities();
- hideHandles();
- disabled = true;
- changed = true;
- };
- var showHandles = function() {
- $.each(handles, function(index, value) {
- $(value).removeClass('hidden');
- });
- };
- var hideHandles = function() {
- $.each(handles, function(index, value) {
- $(value).addClass('hidden');
- });
- };
- //canvas.setAttribute('width', $canvas.width());
- //canvas.setAttribute('height', $canvas.height());
- disableTransferFunction();
- $(document).on('opacityChanged', function(e, params) {
- if(params != undefined && params.opacities != undefined) {
- opacities = params.opacities;
- applyOpacities();
- changed = true;
- }
- });
- $(document).on('opacityBordersChanged', function(e, params) {
- var minGray = 0,
- maxGray = 255;
- if(params != undefined && params.minGray != undefined && params.maxGray != undefined) {
- minGray = params.minGray;
- maxGray = params.maxGray;
- for(counter = 0; counter < 255; counter++) {
- var opacity = 255;
- if(counter < minGray || counter > maxGray) {
- opacity = 1;
- }
- opacities[counter] = opacity;
- }
- applyOpacities();
- changed = true;
- }
- });
- return {
- transferFunctionChanged : function() {
- return changed;
- },
- getCurrentTransferFunction : function() {
- changed = false;
- return hiddenContext.getImageData(0, 0, 255, 1);
- }
- };
- }
- ;var OverviewHelper = function() {
- var sceneOveriew, rendererOverview, cameraOverview, innerCubeOverview;
- //private method
- var addInnerCubeOverView = function(x, y, z) {
- var innerCubeGeometry = new THREE.BoxGeometry( x, y, z );
- var innerCubeMaterial = new THREE.MeshBasicMaterial( {color: 0xaaaaaa} );
- innerCubeOverview = new THREE.Mesh( innerCubeGeometry, innerCubeMaterial );
- sceneOverview.add( innerCubeOverview );
- }
- var initiateEventListener = function(containerOverviewElement) {
- // change overview box
- $(document).on('zoomActionFinished', function(e, params) {
- zoomedIn = params.zoomAction == 'zoomIn' || zoomedInfo != null;
- sceneOverview.remove(innerCubeOverview);
- if(zoomedIn) {
- xWidth = zoomedInfo.dimension.xywidth / textureInfo.originalSize.sizex;
- yWidth = zoomedInfo.dimension.xywidth / textureInfo.originalSize.sizey;
- zWidth = zoomedInfo.numberOfSlices / textureInfo.originalSize.sizez;
- xOffset = zoomedInfo.dimension.xmin / textureInfo.originalSize.sizex;
- yOffset = zoomedInfo.dimension.ymin / textureInfo.originalSize.sizey;
- zOffset = zoomedInfo.dimension.zmin / textureInfo.originalSize.sizez;
- addInnerCubeOverView(xWidth, yWidth, zWidth);
- // main cube was rotated around x axis, so have to swap y and z coordinates
- // for the overview
- innerCubeOverview.position.x = -0.5 + xOffset + xWidth / 2;
- innerCubeOverview.position.y = (-0.5 + zOffset + zWidth / 2);
- innerCubeOverview.position.z = (-0.5 + yOffset + yWidth / 2) * -1;
- //innerCubeOverview.applyMatrix((new THREE.Matrix4()).makeRotationX(Math.PI / -2))
- } else {
- addInnerCubeOverView(1,1,1);
- }
- });
- var headerHeight = $('header').height();
- $(window).on('scroll', function(e) {
- $containerOverviewElement = $(containerOverviewElement)
- if($(this).scrollTop() >= headerHeight) {
- $containerOverviewElement.css('position', 'relative');
- $containerOverviewElement.css('top', $(this).scrollTop() - headerHeight);
- } else {
- $containerOverviewElement.css('top', 0);
- }
- });
- }
- var addTextsToScene = function() {
- var shapeParameters = {font: 'helvetiker', size: 0.2, height: 0.05},
- shape = new THREE.TextGeometry("0", shapeParameters),
- wrapper = new THREE.MeshBasicMaterial({color: 0x000000}),
- words = new THREE.Mesh(shape, wrapper);
- words.position.x = -0.6;
- words.position.y = -0.6;
- words.position.z = 0.52;
- sceneOverview.add(words);
- }
- var addCubeEdges = function() {
- // fix for cube
- var numberOfEdges = 12;
- var xColorEdge = new THREE.Color(1,0,0);
- var yColorEdge = new THREE.Color(0,1,0);
- var zColorEdge = new THREE.Color(0,0,1);
- var geometry = new THREE.BufferGeometry();
- var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
- var colors = new Float32Array( numberOfEdges * 2 * 3 );
- var positions = new Float32Array([
- // edges in x direction
- // front face
- -0.5, -0.5, -0.5, 0.5, -0.5, -0.5,
- -0.5, 0.5, -0.5, 0.5, 0.5, -0.5,
- // back face
- -0.5, -0.5, 0.5, 0.5, -0.5, 0.5,
- -0.5, 0.5, 0.5, 0.5, 0.5, 0.5,
- // edges in y direction
- // front face
- -0.5, -0.5, -0.5, -0.5, 0.5, -0.5,
- 0.5, -0.5, -0.5, 0.5, 0.5, -0.5,
- // back face
- -0.5, -0.5, 0.5, -0.5, 0.5, 0.5,
- 0.5, -0.5, 0.5, 0.5, 0.5, 0.5,
- // edges in z direction
- // left side
- -0.5, -0.5, -0.5, -0.5, -0.5, 0.5,
- -0.5, 0.5, -0.5, -0.5, 0.5, 0.5,
- // right side
- 0.5, -0.5, -0.5, 0.5, -0.5, 0.5,
- 0.5, 0.5, -0.5, 0.5, 0.5, 0.5
- ]);
- for(edgeCounter = 0; edgeCounter < 12 * 2; edgeCounter++) {
- var colorToUse = null
- if(edgeCounter <= 7) {
- colorToUse = xColorEdge;
- } else if(edgeCounter <= 15) {
- colorToUse = zColorEdge;
- } else {
- colorToUse = yColorEdge;
- }
- colors[edgeCounter * 3 + 0] = colorToUse.r;
- colors[edgeCounter * 3 + 1] = colorToUse.g;
- colors[edgeCounter * 3 + 2] = colorToUse.b;
- }
- geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
- geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
- var lines = new THREE.Line( geometry, material, THREE.LinePieces );
- sceneOverview.add( lines );
- }
- return {
- initOverview: function(containerOverviewElement) {
- sceneOverview = new THREE.Scene();
- cameraOverview = new THREE.PerspectiveCamera( 45, 150 / 150, .1, 1000 );
- cameraOverview.position.z = 2;
- var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
- var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0x000000} );
- var cubeOverview = new THREE.Mesh( cubeGeometry, cubeMaterial );
- var edgesHelper = new THREE.EdgesHelper(cubeOverview, 0x000000);
- edgesHelper.material.linewidth = 2;
- //sceneOverview.add( edgesHelper );
- addInnerCubeOverView(1,1,1);
- addCubeEdges();
- addTextsToScene();
- rendererOverview = new THREE.WebGLRenderer();
- rendererOverview.setSize(200, 200);
- rendererOverview.setClearColor(0xffffff, 1);
- containerOverviewElement.appendChild(rendererOverview.domElement);
- initiateEventListener(containerOverviewElement);
- },
- updateCameraPosition: function(position) {
- cameraPoint.normalize().multiplyScalar(4);
- cameraPoint = sceneOverview.position.clone().add(cameraPoint);
- cameraOverview.position.x = cameraPoint.x;
- cameraOverview.position.y = cameraPoint.y;
- cameraOverview.position.z = cameraPoint.z;
- cameraOverview.lookAt(sceneOverview.position);
- },
- render: function() {
- rendererOverview.render(sceneOverview, cameraOverview);
- }
- }
- }
- ;var VolumeFace = function(orientation, direction) {
- this.orientation = orientation;
- this.direction = direction;
- }
- VolumeFace.prototype = {
- constructor: VolumeFace,
- orientation: 0,
- direction: 0,
- getAxisOfNaviation: function() {
- var axis = {
- plane: {
- ver: null,
- hor: null
- },
- slider: null
- };
- if(this.orientation == VolumeFaceOrientation.XY) {
- axis.plane.ver = new Orientation(Axis.Y);
- axis.plane.hor = new Orientation(Axis.X);
- axis.slider = new Orientation(Axis.Z);
- } else if(this.orientation == VolumeFaceOrientation.YZ) {
- axis.plane.ver = new Orientation(Axis.Z);
- axis.plane.hor = new Orientation(Axis.Y);
- axis.slider = new Orientation(Axis.X);
- } else if(this.orientation == VolumeFaceOrientation.XZ) {
- axis.plane.ver = new Orientation(Axis.Z);
- axis.plane.hor = new Orientation(Axis.X);
- axis.slider = new Orientation(Axis.Y);
- }
- return axis;
- },
- getIdentifier: function() {
- return this.orientation + '-' + this.direction;
- }
- };
- var VolumeFaceOrientation = {
- XY: 0,
- XZ: 1,
- YZ: 2
- }
- var VolumeFaceDirection = {
- FRONT: 0,
- BACK: 1
- }
- function determineVolumeFace(cubeFaceNormal) {
- var orientation, direction;
- if(cubeFaceNormal.x != 0) {
- orientation = VolumeFaceOrientation.YZ;
- direction = determineFaceOrientation(cubeFaceNormal.x);
- } else if(cubeFaceNormal.y != 0) {
- orientation = VolumeFaceOrientation.XZ;
- direction = determineFaceOrientation(cubeFaceNormal.y);
- } else if(cubeFaceNormal.z != 0) {
- orientation = VolumeFaceOrientation.XY;
- direction = determineFaceOrientation(cubeFaceNormal.z);
- }
- return new VolumeFace(orientation, direction);
- }
- function determineFaceOrientation(normalComp) {
- return normalComp > 0 ? VolumeFaceDirection.FRONT : VolumeFaceDirection.BACK;
- }
- function isFrontFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.XY
- && direction == VolumeFaceDirection.FRONT;
- }
- function isBackFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.XY
- && direction == VolumeFaceDirection.BACK;
- }
- function isLeftFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.YZ
- && direction == VolumeFaceDirection.FRONT;
- }
- function isRightFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.YZ
- && direction == VolumeFaceDirection.BACK;
- }
- function isTopFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.XZ
- && direction == VolumeFaceDirection.FRONT;
- }
- function isBottomFace(orientation, direction) {
- return orientation == VolumeFaceOrientation.XZ
- && direction == VolumeFaceDirection.BACK;
- }
- ;var ZoomHelper = function() {
- var navigationPlaneHorLabel = $('#navigation-plane-hor-label'),
- navigationPlaneVerLabel = $('#navigation-plane-ver-label'),
- navigationSliderLabel = $('#navigation-slider-label'),
- zoomStatus = $('#zoom-status'),
- zoomInButton = $('input#zoomin'),
- zoomOutButton = $('input#zoomout'),
- navigationPlane = $('div#navigation-plane'),
- navigationPlaneParent = navigationPlane.parent(),
- navigationSlider = $('div#navigation-slider'),
- navigationSliderParent = navigationSlider.parent(),
- displayTimestamp = null,
- planeOrientation = {
- ver: new Orientation(Axis.Y, OffsetTo.LEFT),
- hor: new Orientation(Axis.X, OffsetTo.TOP),
- direction: VolumeFaceDirection.BACK,
- orientation: VolumeFaceOrientation.XY
- },
- sliderOrientation = {axis: new Orientation(Axis.Z, OffsetTo.TOP) },
- zoomedIn,
- zoomedInfoArray = {
- dimension: Array(3),
- offset: Array(3)
- },
- oldZoomedInfos = [];
- var lastExecutionTime = Date.now();
- // adjust navigation related navigations
- $container.on('animation', function() {
- determineAxisLabels();
- determinePlanePosition();
- determineSliderPosition();
- });
- // one has to press ctrl AND alt while clicking
- $container.on('click', 'canvas', function(event){
- event.stopPropagation();
- event.preventDefault();
- // keyboard shortcut activated or button zoom in pressed before?
- if((event.ctrlKey == false || event.altKey == false)
- && !zoomInActivated) {
- return;
- }
- var mouseX = ( (event.clientX - $canvas.offset().left) / ($canvas.width()) ) * 2 - 1,
- mouseY = - ( (event.clientY - $canvas.offset().top) / ($canvas.height()) ) * 2 + 1;
- var vector = new THREE.Vector3( mouseX, mouseY, camera.near);
- vector = vector.unproject( camera );
- var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
- var intersects = raycaster.intersectObjects( [frontBox] );
- if(intersects.length > 0) {
- if(!handleZoomStatus(true)) {
- return false;
- }
- var intersect = intersects[0],
- point = intersect.point;
- var geometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
- var material = new THREE.MeshBasicMaterial( {
- color: new THREE.Color( 0xaaaaaa ),
- opacity: 0.3
- });
- mesh = new THREE.Mesh( geometry, material );
- mesh.position.x = point.x;
- mesh.position.y = point.y;
- mesh.position.z = point.z;
- scene.add(mesh);
- intersectCubes[intersectCubes.length] = mesh;
- intersectCubesTimeStamps[intersectCubesTimeStamps.length] = Date.now();
- var realPoint = point.clone();
- getSubvolume(point, false, 'zoomIn', false);
- }
- });
- function getSubvolume(realPoint, alreadyTranslated, zoomAction, sameDepth, fromDraggable) {
- if(alreadyTranslated == undefined || !alreadyTranslated) {
- realPoint = realPoint.applyMatrix4((new THREE.Matrix4).makeRotationX(Math.PI / -2));
- // retranslate the point into original position beginning from 0,0,0
- realPoint.add(new THREE.Vector3(0.5, 0.5, 0.5));
- }
- volumePointArray = realPoint.toArray();
- var processingUrl = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sub/');
- $.each(volumePointArray, function(index, value) {
- dimWidth = null;
- // have to decide, whether we in zoomed in or zoomed out status
- if(zoomedInfo == undefined || zoomedInfo == null || fromDraggable) {
- if(index == 0) {
- dimWidth = textureInfo.originalSize.sizex;
- } else if(index == 1) {
- dimWidth = textureInfo.originalSize.sizey;
- } else {
- dimWidth = textureInfo.originalSize.sizez;
- }
- } else {
- if(index < 2) {
- dimWidth = zoomedInfo.dimension.xywidth;
- } else {
- dimWidth = zoomedInfo.numberOfSlices;
- }
- }
- value *= dimWidth;
- // due to interpolation algorithm, we had to rotate the whole cube, that it matches
- // the display of imagej
- // so we have to map the current pointer values to the real volume values
- // but only for the y and z direction --> the x direction is all right
- if(index > 0) {
- value = dimWidth - value;
- }
- if(!fromDraggable && zoomedInfo) {
- if(index == 0) {
- value = value + zoomedInfo.dimension.xmin;
- } else if(index == 1) {
- value = value + zoomedInfo.dimension.ymin;
- } else {
- value = value + zoomedInfo.dimension.zmin;
- }
- }
- value = Math.floor(value);
- volumePointArray[index] = value;
- processingUrl += value + '/';
- });
- frameNumber = imgInfo.frameFrom + currentTexture;
- processingUrl += frameNumber + '/';
- depth = 1;
- if(zoomAction == 'zoomIn') {
- if(zoomedInfo != null){
- if(sameDepth) {
- depth = zoomedInfo.depth;
- } else {
- depth = zoomedInfo.depth + 1;
- }
- }
- } else if(zoomAction == 'zoomOut') {
- if(zoomedInfo.depth > 1) {
- depth = zoomedInfo.depth - 1;
- }
- }
- while(oldZoomedInfos.length > 0
- && oldZoomedInfos.last().zoomedInfo.depth >= depth)
- {
- oldZoomedInfos.pop();
- }
- processingUrl += depth + '/';
- $.ajax({
- url: processingUrl,
- success: function(data) {
- var available = false;
- var availableTestCounter = 0;
- zoomedInfo = data;
- oldZoomedInfos.push({
- point: realPoint,
- translated: true,
- zoomedInfo: zoomedInfo
- });
- // this function is called recursive by the settimeout statement
- availableTest = function() {
- $.ajax({
- url: IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/available/'),
- success: function(data) {
- available = data.available;
- },
- dataType: 'json',
- async: false
- });
- if(available) {
- // subvolume available: fetch it
- fetchSubVolume(zoomAction);
- } else if(availableTestCounter < 80) {
- // abort condition not reached --> try again
- setTimeout(availableTest, 500);
- availableTestCounter++;
- } else {
- oldZoomedInfos.pop();
- // abort condition reached --> error handling
- $(document).trigger('zoomActionFinished', { zoomAction: zoomAction, error: true });
- }
- };
- setTimeout(availableTest, 500);
- },
- dataType: 'json',
- async: true,
- error: function(data) {
- helper.displayMessage('Sorry, an error occured during processing zoom', true, null, 2500);
- }
- });
- };
- var fetchSubVolume = function(zoomAction) {
- imageSrc = IPE.util.buildUrl('volumes/' + volumeId + '/processing/sprite/' + zoomedInfo.spriteId + '/show/');
- var image = new Image();
- var texture = initTexture(new THREE.Texture(image));
- image.onload = function() {
- materialScreen.uniforms.numberOfSlices.value = zoomedInfo.numberOfSlices;
- materialScreen.uniforms.numberOfSlices.needsupdate = true;
- materialScreen.uniforms.slicesOverX.value = zoomedInfo.slicesOverX;
- materialScreen.uniforms.slicesOverX.needsUpdate = true;
- materialScreen.uniforms.slicesOverY.value = zoomedInfo.slicesOverY;
- materialScreen.uniforms.slicesOverY.needsUpdate = true;
- materialScreen.uniforms.numberOfSprites.value = 1;
- materialScreen.uniforms.numberOfSprites.needsUpdate = true;
- materialScreen.uniforms.slicesPerSprite.value = zoomedInfo.numberOfSlices;
- materialScreen.uniforms.slicesPerSprite.needsUpdate = true;
- updateTexture([texture]);
- zoomedVolumeDimension.xmin = zoomedInfo.dimension.xmin;
- zoomedVolumeDimension.xmax = zoomedInfo.dimension.xmin + zoomedInfo.dimension.xywidth - 1;
- zoomedVolumeDimension.ymin = zoomedInfo.dimension.ymin;
- zoomedVolumeDimension.ymax = zoomedInfo.dimension.ymin + zoomedInfo.dimension.xywidth - 1;
- zoomedVolumeDimension.zmin = zoomedInfo.dimension.zmin;
- zoomedVolumeDimension.zmax = zoomedInfo.dimension.zmin + zoomedInfo.numberOfSlices - 1;
- originalVolumeDimension = currentVolumeDimension;
- originalDimension = currentDimension;
- currentVolumeDimension = zoomedVolumeDimension;
- repositionLayerSliders();
- $(document).trigger('zoomActionFinished', {
- zoomAction: zoomAction, textureNumber: frameNumber
- });
- }
- image.src = imageSrc;
- };
- $container.on('contextmenu', function(event){
- if(event.ctrlKey == false) {
- return;
- }
- if(event.altKey == false) {
- return;
- }
- if(!handleZoomStatus(false)) {
- return false;
- }
- return zoomOut();
- });
- function zoomOut() {
- currentZoomPoint = oldZoomedInfos.pop().point;
- if(oldZoomedInfos.length > 0) {
- // using the current point to get a new subvolume
- getSubvolume(currentZoomPoint, true, 'zoomOut', true);
- return false;
- }
- else
- {
- zoomedInfo = null;
- materialScreen.uniforms.numberOfSlices.value = textureInfo.info.numberOfSlices;
- materialScreen.uniforms.numberOfSlices.needsupdate = true;
- materialScreen.uniforms.slicesOverX.value = textureInfo.info.slicesOverX;
- materialScreen.uniforms.slicesOverX.needsUpdate = true;
- materialScreen.uniforms.slicesOverY.value = textureInfo.info.slicesOverY;
- materialScreen.uniforms.slicesOverY.needsUpdate = true;
- materialScreen.uniforms.numberOfSprites.value = imgInfo.numberOfSprites;
- materialScreen.uniforms.numberOfSprites.needsUpdate = true;
- materialScreen.uniforms.slicesPerSprite.value = imgInfo.slicesPerSprite;
- materialScreen.uniforms.slicesPerSprite.needsUpdate = true;
- updateTexture();
- currentVolumeDimension = originalVolumeDimension;
- currentDimension = originalDimension;
- repositionLayerSliders();
- }
- $(document).trigger('zoomActionFinished', {
- zoomAction: 'zoomOut'
- });
- return false;
- }
- function zoomInAllowed() {
- return !zoomedIn || zoomedInfo.dimension.xywidth > 300;
- }
- /**
- * return: procceed or not
- */
- function handleZoomStatus(zoomIn) {
- zoomInButton.removeClass('red');
- zoomInActivated = false;
- if(zoomIn && !zoomInAllowed()) {
- return false;
- } else if(!zoomIn && !zoomedIn) {
- return false;
- }
- waitDiv.removeClass('hidden');
- displayMessage = zoomIn ? 'Generating zoomed subvolume, please wait a moment' : 'Zooming out';
- helper.displayMessage(displayMessage);
- displayTimestamp = Date.now();
- return true;
- }
- // general function to disable stuff like messages etc.
- $(document).on('zoomActionFinished', function(e, params) {
- zoomedIn = zoomedInfo != null;
- timeout = 2000 - (Date.now() - displayTimestamp);
- if(timeout < 0) {
- timeout = 0;
- }
- helper.fadeoutMessage(null, timeout);
- zoomedStatusText = '';
- if(zoomedIn) {
- zoomStatus.addClass('green-background');
- zoomedStatusText = 'zoomed in';
- $.each($('.res-link'), function(index, value) {
- $(value).addClass('disabled');
- });
- if(zoomedInfo.dimension.xywidth <= 300) {
- zoomInButton.prop('disabled', true);
- }
- } else {
- zoomStatus.removeClass('green-background');
- zoomedStatusText = 'zoomed out';
- if(params.error) {
- errorMessage = 'Error during subvolume generation - zoomed out again';
- helper.displayMessage(errorMessage, true, null, 5000);
- }
- $.each($('.res-link'), function(index, value) {
- $(value).removeClass('disabled');
- });
- zoomInButton.prop('disabled', false);
- }
- zoomStatus.html(zoomedStatusText);
- waitDiv.addClass('hidden');
- });
- // draggable related stuff
- // TODO for multilevel zooming
- $(document).on('zoomActionFinished', function(e, params) {
- zoomedIn = zoomedInfo != null;
- if(zoomedIn) {
- zoomedInfoArray.offset[Axis.X] = zoomedVolumeDimension.xmin;
- zoomedInfoArray.offset[Axis.Y] = zoomedVolumeDimension.ymin;
- zoomedInfoArray.offset[Axis.Z] = zoomedVolumeDimension.zmin;
- zoomedInfoArray.dimension[Axis.X] = zoomedInfo.dimension.xywidth;
- zoomedInfoArray.dimension[Axis.Y] = zoomedInfo.dimension.xywidth;
- zoomedInfoArray.dimension[Axis.Z] = zoomedInfo.numberOfSlices;
- } else {
- navigationPlane.hide();
- navigationPlaneParent.removeClass('white');
- navigationSlider.hide();
- navigationSliderParent.removeClass('white');
- }
- navigationPlane.removeClass('no-pos-set');
- navigationSlider.removeClass('no-pos-set');
- });
- navigationPlane.draggable({
- containment: '#navigation-plane-container',
- scroll: false,
- stop: function() {
- zoomedDraggableChanged();
- }
- });
- navigationSlider.draggable({
- containment: '#navigation-slider-container',
- scroll: false,
- stop: function() {
- zoomedDraggableChanged();
- }
- });
- function zoomedDraggableChanged() {
- waitDiv.removeClass('hidden');
- var planeWidthHalf = navigationPlane.width() / 2,
- planeHeightHalf = navigationPlane.height() / 2,
- planeOffsetLeft = navigationPlane.offset().left - navigationPlaneParent.offset().left - 1,
- planeOffsetTop = navigationPlane.offset().top - navigationPlaneParent.offset().top - 1,
- sliderHeightHalf = navigationSlider.height() / 2,
- sliderOffsetTop = navigationSlider.offset().top - navigationSliderParent.offset().top - 1,
- orientation = planeOrientation.orientation,
- direction = planeOrientation.direction;
- // set correct border values due to messure errors
- if(planeOffsetLeft < 0) {
- planeOffsetLeft = 0;
- } else if(planeOffsetLeft > navigationPlaneParent.width() - navigationPlane.width()) {
- planeOffsetLeft = navigationPlaneParent.width() - navigationPlane.width();
- }
- if(planeOffsetTop < 0) {
- planeOffsetTop = 0;
- } else if(planeOffsetTop > navigationPlaneParent.height() - navigationPlane.height()) {
- planeOffsetTop = navigationPlaneParent.height() - navigationPlane.height();
- }
- if(sliderOffsetTop < 0) {
- sliderOffsetTop = 0;
- } else if(sliderOffsetTop > navigationSliderParent.height() - navigationSlider.height()) {
- sliderOffsetTop = navigationSliderParent.height() - navigationSlider.height();
- }
- planeOffsetLeft = planeOffsetLeft + planeWidthHalf;
- planeOffsetTop = planeOffsetTop + planeHeightHalf;
- sliderOffsetTop = sliderOffsetTop + sliderHeightHalf;
- horAxis = planeOrientation.hor.axis;
- verAxis = planeOrientation.ver.axis;
- pointAsArray = Array(3);
- pointAsArray[horAxis] = planeOffsetLeft / navigationPlaneParent.width();
- pointAsArray[verAxis] = planeOffsetTop / navigationPlaneParent.height();
- /*if(planeOrientation.direction == VolumeFaceDirection.BACK) {
- pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
- } else if(planeOrientation.orientation == VolumeFaceOrientation.XZ) {
- pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
- }*/
- if((planeOrientation.orientation == VolumeFaceOrientation.XY
- && planeOrientation.direction == VolumeFaceDirection.BACK)
- || (planeOrientation.orientation == VolumeFaceOrientation.YZ
- && planeOrientation.direction == VolumeFaceDirection.BACK)
- || (planeOrientation.orientation == VolumeFaceOrientation.XZ
- && planeOrientation.direction == VolumeFaceDirection.BACK)) {
- pointAsArray[horAxis] = 1.0 - pointAsArray[horAxis];
- }
- pointAsArray[sliderOrientation.axis] = sliderOffsetTop / navigationSliderParent.height();
- /*if((sliderOrientation.axis == Axis.Z
- && planeOrientation.direction == VolumeFaceDirection.FRONT)
- || (sliderOrientation.axis == Axis.Y
- && planeOrientation.direction == VolumeFaceDirection.FRONT)
- || (sliderOrientation.axis == Axis.X
- && planeOrientation.direction == VolumeFaceDirection.BACK)) {
- pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
- }*/
- if((sliderOrientation.axis == Axis.X
- && planeOrientation.direction == VolumeFaceDirection.FRONT)
- || (sliderOrientation.axis == Axis.Y
- && planeOrientation.direction == VolumeFaceDirection.BACK)
- || (sliderOrientation.axis == Axis.Z
- && planeOrientation.direction == VolumeFaceDirection.BACK)) {
- pointAsArray[sliderOrientation.axis] = 1.0 - pointAsArray[sliderOrientation.axis];
- }
- point = new THREE.Vector3(pointAsArray[0], pointAsArray[1], pointAsArray[2]);
- getSubvolume(point, true, 'zoomIn', true, true);
- };
- var zoomInActivated = false;
- zoomInButton.on('click', function() {
- zoomInActivated = !zoomInActivated;
- if(zoomInActivated) {
- $(this).addClass('red');
- } else {
- $(this).removeClass('red');
- }
- });
- zoomOutButton.on('click', function() {
- zoomInButton.removeClass('red');
- if(!handleZoomStatus(false)) {
- return false;
- }
- return zoomOut();
- });
- function determineAxisLabels() {
- if(Date.now() - lastExecutionTime > 100) {
- var lookAtVector = new THREE.Vector3(0,0, -1);
- lookAtVector.applyQuaternion(camera.quaternion);
- xIterator = -0.4;
- yIterator = -0.4;
- facesIntersect = {};
- interSectStartingPoint = new THREE.Vector3(xIterator, yIterator, camera.near);
- for(xIterator = -0.4; xIterator <= 0.4; xIterator += 0.2) {
- for(yIterator = -0.4; yIterator <= 0.4; yIterator += 0.2) {
- interSectStartingPoint.x = xIterator;
- interSectStartingPoint.y = yIterator;
- vector = interSectStartingPoint.unproject( camera );
- var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
- var intersects = raycaster.intersectObjects( [frontBox] );
- if(intersects.length > 0) {
- var intersect = intersects[0],
- point = intersect.point,
- face = intersect.face,
- faceObject = determineVolumeFace(face.normal),
- faceIdent = faceObject.getIdentifier();
- alreadyAdded = Object.keys(facesIntersect).indexOf(faceIdent) >= 0;
- if(alreadyAdded) {
- facesIntersect[faceIdent].count++;
- } else {
- facesIntersect[faceIdent] = { faceObject: faceObject, count: 1};
- }
- }
- }
- }
- frontFace = { count: 0 };
- for(faceIdent in facesIntersect) {
- if(facesIntersect[faceIdent].count > frontFace.count) {
- frontFace = facesIntersect[faceIdent];
- }
- }
- if(frontFace.faceObject != undefined) {
- volumeFace = frontFace.faceObject;
- axisOfNaviation = volumeFace.getAxisOfNaviation();
- planeOrientation = axisOfNaviation.plane;
- planeOrientation.hor.offsetTo = OffsetTo.LEFT;
- planeOrientation.ver.offsetTo = OffsetTo.TOP;
- planeOrientation.direction = volumeFace.direction;
- planeOrientation.orientation = volumeFace.orientation;
- sliderOrientation = axisOfNaviation.slider;
- sliderOrientation.offsetTo = OffsetTo.TOP;
- navigationPlaneHorLabel.html(planeOrientation.hor.getLabel());
- navigationPlaneVerLabel.html(planeOrientation.ver.getLabel());
- navigationSliderLabel.html(sliderOrientation.getLabel());
- }
- lastExecutionTime = Date.now();
- }
- }
- function determinePlanePosition() {
- if(!zoomedIn) {
- return;
- }
- if(navigationPlane.hasClass('ui-draggable-dragging')
- || navigationPlane.hasClass('no-pos-set')) {
- navigationPlane.addClass('no-pos-set');
- return;
- }
- horAxis = planeOrientation.hor.axis;
- verAxis = planeOrientation.ver.axis;
- planeRelativeX = navigationPlaneParent.width() / originalSizeArray[horAxis];
- planeRelativeY = navigationPlaneParent.height() / originalSizeArray[verAxis];
- planeWidth = planeRelativeX * zoomedInfoArray.dimension[horAxis];
- planeHeight = planeRelativeY * zoomedInfoArray.dimension[verAxis];
- planeWidth = Math.ceil(planeWidth);
- planeHeight = Math.ceil(planeHeight);
- planeOffsetLeft = zoomedInfoArray.offset[horAxis] * planeRelativeX;
- if((planeOrientation.direction == VolumeFaceDirection.BACK
- && planeOrientation.orientation == VolumeFaceOrientation.XZ)
- || (planeOrientation.direction == VolumeFaceDirection.FRONT
- && planeOrientation.orientation == VolumeFaceOrientation.YZ)) {
- planeOffsetLeft = navigationPlaneParent.width() - (planeOffsetLeft + navigationPlane.width());
- }
- planeOffsetTop = zoomedInfoArray.offset[verAxis] * planeRelativeY;
- if(planeOrientation.orientation == VolumeFaceOrientation.XZ
- || planeOrientation.orientation == VolumeFaceOrientation.YZ){
- planeOffsetTop = navigationPlaneParent.height() - (planeOffsetTop + navigationPlane.height());
- }
- navigationPlane.css({
- 'top': planeOffsetTop + 'px',
- 'left' : planeOffsetLeft + 'px',
- 'width': planeWidth + 'px',
- 'height': planeHeight + 'px'
- });
- navigationPlane.show();
- navigationPlaneParent.addClass('white');
- }
- function determineSliderPosition() {
- if(!zoomedIn) {
- return;
- }
- if(navigationSlider.hasClass('ui-draggable-dragging')
- || navigationSlider.hasClass('no-pos-set')) {
- navigationSlider.addClass('no-pos-set');
- return;
- }
- sliderRelative = navigationSliderParent.height() / originalSizeArray[sliderOrientation.axis];
- sliderOffsetTop = zoomedInfoArray.offset[sliderOrientation.axis] * sliderRelative;
- sliderHeight = Math.ceil(sliderRelative * zoomedInfoArray.dimension[sliderOrientation.axis]);
- if(planeOrientation.direction == VolumeFaceDirection.FRONT) {
- sliderOffsetTop = navigationSliderParent.height() - (navigationSlider.height() + sliderOffsetTop);
- }
- navigationSlider.css({
- 'top': sliderOffsetTop + 'px',
- 'height': sliderHeight + 'px'
- });
- navigationSlider.show();
- navigationSliderParent.addClass('white');
- }
- };
- function radToDeg(rad) {
- return rad * 180 / Math.PI;
- }
- ;var Orientation = function(axis, offsetTo) {
- this._axis = axis;
- this._offsetTo = null;
- }
- Orientation.prototype = {
- constructor: Orientation,
- getLabel: function() {
- switch(this._axis) {
- case(Axis.X):
- return 'x-axis';
- case(Axis.Y):
- return 'y-axis';
- case(Axis.Z):
- return 'z-axis';
- }
- },
- get axis() {
- return this._axis;
- },
- get offsetTo() {
- return this._offsetTo;
- },
- set offsetTo(value) {
- this._offsetTo = value;
- }
- }
- var Axis = {
- X: 0,
- Y: 1,
- Z: 2
- }
- var OffsetTo = {
- TOP: 0,
- LEFT: 1,
- BOTTOM: 2,
- RIGHT: 3
- }
- ;IPE.interceptors.SendInterceptor = (function() {
- return {
- init: function() {
- $(document).ajaxSend(function (e, xhr, settings) {
- if(settings.url.indexOf('/static/') === -1) {
- if(!settings.url.endsWith('/')) {
- settings.url += '/';
- }
- }
- });
- }
- };
- }())
- ;var NavigationPlane = function(element, horizontalLabel, verticalLabel) {
- this._element = element;
- this._parent = element.parent();
- this._horizontalLabel = horizontalLabel;
- this._verticalLabel = verticalLabel;
- this._zoomedInfoArray = null;
- this._volumeFace = null;
- }
- NavigationPlane.prototype = {
- constructor: NavigationPlane,
- set zoomedInfoArray(value) {
- this._zoomedInfoArray = value;
- },
- set volumeFace(value) {
- this._volumeFace = value;
- },
- }
- ;
|