Recycling Corner/Slider controls

From Jmol
Jump to navigation Jump to search

Slider controls for Jmol

Version (A)

This has an amazing look-and-feel. Uses javascript and Walter Zorn's Drag'n'Drop & DHTML Library, © Walter Zorn under GNU LGPL.

See it in action.

Steps to follow:

  1. Download Walter Zorn's library from http://www.walterzorn.com/dragdrop/dragdrop_e.htm (You need the wz_dragdrop.js file.)
  2. Get a copy of the image files, Track.giftrack.gif and Sliderthumb.gifsliderthumb.gif. You could use your own, but size is important since the code is related to it.
  3. Your webpage should load JSmol.min.js, define Info and insert the myJmol object.
  4. Include this code in your webpage:
<head>
<script type="text/javascript">
/* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL). 
   Integration with Jmol by Angel Herráez.
*/
function slabSlider() {
 jmolScript( 'slab ' + eval(100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)) )
 document.getElementById("posi").innerHTML = 100-(20+dd.elements.thumb.x-dd.elements.thumb.defx)
}
</script>
</head>

<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<input type="button"  value="prepare for slabbing"
 onClick='Jmol.script(myJmol, "spin off; slab on; slab 80;");
 document.getElementById("posi").innerHTML="80";
 dd.elements.thumb.moveTo(dd.elements.track.x+20, dd.elements.track.y); '>
<br>
<img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle">
<img name="thumb" src="sliderthumb.gif" width="18" height="29" alt="" title="move me" align="absmiddle">
<span id="posi">80</span>%
<br>
<input type="button" value="cancel slabbing"
 onClick='Jmol.script(myJmol, "slab off;")'>

<script type="text/javascript">
/* Courtesy of Walter Zorn; 
   Drag'nDrop & DHTML Library  (c)Walter Zorn under the LGPL (Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
*/
SET_DHTML("thumb"+MAXOFFLEFT+20+MAXOFFRIGHT+80+HORIZONTAL,"track"+NO_DRAG)
dd.elements.thumb.moveTo(dd.elements.track.x+20, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild("thumb");
dd.elements.thumb.defx = dd.elements.track.x+20; 
dd.elements.thumb.setDragFunc(slabSlider);
//dd.elements.thumb.setDropFunc(slabSlider); //alternative, if it cannot cope with the other
</script>
</body>

Important notes:

  1. You must adjust the path to wz_dragdrop.js according to your set-up.
  2. The order of the code element in the above example is crucial. In particular, wz_dragdrop.js must be included in the body, not in the head, for some browsers. Also, the block starting with SET_DHTML(...) must follow the block that displays the slider itself on the page.

Version (B)

This looks excellent too, and has some more versatility. Uses javascript, CSS and WebFX Slider, © Erik Arvidsson under Apache Software License.

See instructions and several examples here, applied to slabbing, bond thickness, translucency, ribbon width and thickness.

Contributors

AngelHerraez