<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Hi Thomas,<div class=""><br class=""></div><div class="">&nbsp; That’s cool. &nbsp;When you change the density threshold slider it switches to showing a new surface model for that threshold. &nbsp;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. &nbsp;Here’s how I did it. &nbsp;Here’s the original code that &nbsp;handles the slider motion</div><div class=""><br class=""></div><div class=""><div class="">&nbsp; $("#slider").change(function(){</div><div class="">&nbsp; &nbsp; var i = $('#slider')[0].value;</div><div class="">&nbsp; &nbsp; myscene.models = new Array();</div><div class="">&nbsp; &nbsp; myscene.add(mymodels[i]);</div><div class="">&nbsp; &nbsp; myscene.defineBuffers(mymodels[i]);</div><div class="">&nbsp; &nbsp; myscene.render();</div><div class="">&nbsp; &nbsp; setThreshold(requiredJsonFiles[i]);</div><div class="">&nbsp; });</div></div><div class=""><br class=""></div><div class="">and here is the revised code that preserves the orientation</div><div class=""><br class=""></div><div class=""><div class="">&nbsp; var last_model = null;</div><div class=""><br class=""></div><div class="">&nbsp; $("#slider").change(function(){</div><div class="">&nbsp; &nbsp; var i = $('#slider')[0].value;</div><div class="">&nbsp; &nbsp; myscene.models = new Array();</div><div class="">&nbsp; &nbsp; if (last_model != null)</div><div class="">&nbsp; &nbsp; &nbsp; &nbsp;mymodels[i].matrix = mymodels[last_model].matrix</div><div class="">&nbsp; &nbsp; last_model = i;</div><div class="">&nbsp; &nbsp; myscene.add(mymodels[i]);</div><div class="">&nbsp; &nbsp; myscene.defineBuffers(mymodels[i]);</div><div class="">&nbsp; &nbsp; myscene.render();</div><div class="">&nbsp; &nbsp; setThreshold(requiredJsonFiles[i]);</div><div class="">&nbsp; });</div></div><div class=""><br class=""></div><div class="">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. &nbsp;I tried it and it works.</div><div class=""><br class=""></div><div class="">&nbsp; I’m impressed you were able to modify the Chimera exported webgl html file to do this. &nbsp;I have been working on an html and webgl map viewer for density map time series (for 5d optical microscopy) . &nbsp;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. &nbsp;Here’s a screenshot of it. &nbsp;I’d be happy to let you try it but the data I’m using is unpublished cell motion data from another researcher. &nbsp;If you want I could make a fake time series where time corresponds to different density thresholds and let you try that. &nbsp;I can provide you the webgl code if you want to tinker with it.</div><div class=""><br class=""></div><div class="">&nbsp; Sorry for the delay replying to your email. I just returned from vacation.</div><div class=""><br class=""></div><div class=""><span class="Apple-tab-span" style="white-space:pre">        </span>Tom</div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><img height="1197" width="1014" apple-width="yes" apple-height="yes" apple-inline="yes" id="8EADB2CF-45C8-486F-B0EA-95F4744A63FE" src="cid:5D11EBA8-BBE4-4FED-8F8E-E37DD97E79B9@cgl.ucsf.edu" class=""></div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><br class=""><div><blockquote type="cite" class=""><div class="">On Dec 27, 2014, at 11:29 AM, Thomas Hrabe &lt;<a href="mailto:thrabe@sanfordburnham.org" class="">thrabe@sanfordburnham.org</a>&gt; wrote:</div><br class="Apple-interchange-newline"><div class="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" class="">

<div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">
Hi everyone,
<div class=""><br class="">
</div>
<div class="">I am trying to implement a EM density viewer in a HTML page based on the chimera webgl &amp; html export feature.</div>
<div class="">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.</div>
<div class="">The bar at the bottom of the page essentially performs a coarse density sliding similar to chimera.&nbsp;</div>
<div class="">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.</div>
<div class="">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.</div>
<div class=""><br class="">
</div>
<div class="">Here’s my page I am currently working on</div>
<div class=""><a href="http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial" class="">http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial</a></div>
<div class=""><br class="">
</div>
<div class="">I tried catching the mouse event with a loop, but it seems it fails to propagate the rotation to the other models.</div>
<div class="">Check the block at line 916 in the code</div>
<div class=""><br class="">
</div>
<div class="">
<div class="">&nbsp; try {</div>
<div class="">&nbsp; &nbsp; var rotMat = vsphere(mouse_position, new_position);</div>
<div class="">&nbsp; &nbsp; var camera = this.camera;</div>
<div class="">&nbsp; &nbsp; var matrix = new Mat4;</div>
<div class="">&nbsp; &nbsp; matrix.$translate(camera.target[0], camera.target[1],</div>
<div class="">&nbsp; &nbsp; &nbsp; camera.target[2]);</div>
<div class="">&nbsp; &nbsp; matrix.$mulMat4(rotMat);</div>
<div class="">&nbsp; &nbsp; matrix.$translate(-camera.target[0], -camera.target[1],</div>
<div class="">&nbsp; &nbsp; &nbsp; -camera.target[2]);</div>
<div class="">&nbsp; &nbsp; for (var i = 0, models = this.scene.models, l = models.length; i &lt; l; ++i) {</div>
<div class="">&nbsp; &nbsp; &nbsp; var elem = models[i];</div>
<div class="">&nbsp; &nbsp; &nbsp; elem.matrix = matrix.mulMat4(elem.matrix);</div>
<div class="">&nbsp; &nbsp; }</div>
<div class="">&nbsp; }</div>
</div>
<div class=""><br class="">
</div>
<div class="">Thank you in advance for your help,</div>
<div class="">Thomas</div>
<div class=""><br class="">
</div>
<div class=""><br class="">
</div>
</div>

_______________________________________________<br class="">Chimera-users mailing list<br class=""><a href="mailto:Chimera-users@cgl.ucsf.edu" class="">Chimera-users@cgl.ucsf.edu</a><br class="">http://plato.cgl.ucsf.edu/mailman/listinfo/chimera-users<br class=""></div></blockquote></div><br class=""></div></body></html>