Hi Thomas, That’s cool. When you change the density threshold slider it switches to showing a new surface model for that threshold. For that new surface to have the same orientation as the previously shown surface you have to add a little code that sets the positioning matrix of the new surface to be the same as the matrix for the previous surface. Here’s how I did it. Here’s the original code that handles the slider motion $("#slider").change(function(){ var i = $('#slider')[0].value; myscene.models = new Array(); myscene.add(mymodels[i]); myscene.defineBuffers(mymodels[i]); myscene.render(); setThreshold(requiredJsonFiles[i]); }); and here is the revised code that preserves the orientation var last_model = null; $("#slider").change(function(){ var i = $('#slider')[0].value; myscene.models = new Array(); if (last_model != null) mymodels[i].matrix = mymodels[last_model].matrix last_model = i; myscene.add(mymodels[i]); myscene.defineBuffers(mymodels[i]); myscene.render(); setThreshold(requiredJsonFiles[i]); }); I added a new variable “last_model” that keeps track of the index for the previously shown surface and a copy the position matrix from that surface to the new one. I tried it and it works. I’m impressed you were able to modify the Chimera exported webgl html file to do this. I have been working on an html and webgl map viewer for density map time series (for 5d optical microscopy) . It shows the maps, has a slider to display different times, and lets you place colored markers on features and save those to the server. Here’s a screenshot of it. I’d be happy to let you try it but the data I’m using is unpublished cell motion data from another researcher. If you want I could make a fake time series where time corresponds to different density thresholds and let you try that. I can provide you the webgl code if you want to tinker with it. Sorry for the delay replying to your email. I just returned from vacation. Tom
On Dec 27, 2014, at 11:29 AM, Thomas Hrabe <thrabe@sanfordburnham.org> wrote:
Hi everyone,
I am trying to implement a EM density viewer in a HTML page based on the chimera webgl & html export feature. The original page chimera exports when you save a webgl / html scene has been modified to load multiple JSON objects with densities as they come from chimera. The bar at the bottom of the page essentially performs a coarse density sliding similar to chimera. Almost all works great but what I am missing is how to connect the rotation that was applied to one model and to propagate it to all other models. What is happening now is that when one rotates one model and slides the bar, the next model will not be rotated but will be in it’s original position.
Here’s my page I am currently working on http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial <http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial>
I tried catching the mouse event with a loop, but it seems it fails to propagate the rotation to the other models. Check the block at line 916 in the code
try { var rotMat = vsphere(mouse_position, new_position); var camera = this.camera; var matrix = new Mat4; matrix.$translate(camera.target[0], camera.target[1], camera.target[2]); matrix.$mulMat4(rotMat); matrix.$translate(-camera.target[0], -camera.target[1], -camera.target[2]); for (var i = 0, models = this.scene.models, l = models.length; i < l; ++i) { var elem = models[i]; elem.matrix = matrix.mulMat4(elem.matrix); } }
Thank you in advance for your help, Thomas
_______________________________________________ Chimera-users mailing list Chimera-users@cgl.ucsf.edu http://plato.cgl.ucsf.edu/mailman/listinfo/chimera-users
