<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="">  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</div><div class=""><br class=""></div><div class=""><div class="">  $("#slider").change(function(){</div><div class="">    var i = $('#slider')[0].value;</div><div class="">    myscene.models = new Array();</div><div class="">    myscene.add(mymodels[i]);</div><div class="">    myscene.defineBuffers(mymodels[i]);</div><div class="">    myscene.render();</div><div class="">    setThreshold(requiredJsonFiles[i]);</div><div class="">  });</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="">  var last_model = null;</div><div class=""><br class=""></div><div class="">  $("#slider").change(function(){</div><div class="">    var i = $('#slider')[0].value;</div><div class="">    myscene.models = new Array();</div><div class="">    if (last_model != null)</div><div class="">       mymodels[i].matrix = mymodels[last_model].matrix</div><div class="">    last_model = i;</div><div class="">    myscene.add(mymodels[i]);</div><div class="">    myscene.defineBuffers(mymodels[i]);</div><div class="">    myscene.render();</div><div class="">    setThreshold(requiredJsonFiles[i]);</div><div class="">  });</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.  I tried it and it works.</div><div class=""><br class=""></div><div class="">  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.</div><div class=""><br class=""></div><div class="">  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 <<a href="mailto:thrabe@sanfordburnham.org" class="">thrabe@sanfordburnham.org</a>> 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 & 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. </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="">  try {</div>
<div class="">    var rotMat = vsphere(mouse_position, new_position);</div>
<div class="">    var camera = this.camera;</div>
<div class="">    var matrix = new Mat4;</div>
<div class="">    matrix.$translate(camera.target[0], camera.target[1],</div>
<div class="">      camera.target[2]);</div>
<div class="">    matrix.$mulMat4(rotMat);</div>
<div class="">    matrix.$translate(-camera.target[0], -camera.target[1],</div>
<div class="">      -camera.target[2]);</div>
<div class="">    for (var i = 0, models = this.scene.models, l = models.length; i < l; ++i) {</div>
<div class="">      var elem = models[i];</div>
<div class="">      elem.matrix = matrix.mulMat4(elem.matrix);</div>
<div class="">    }</div>
<div class="">  }</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>