Difference between revisions of "Recycling Corner/Slider controls"
Jump to navigation
Jump to search
AngelHerraez (talk | contribs) (moving long sections to subpages) |
AngelHerraez (talk | contribs) (update to JSmol) |
||
| Line 2: | Line 2: | ||
=== Version (A) === | === Version (A) === | ||
| − | This has an amazing look-and-feel. Uses javascript | + | 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 [http://biomodel.uah.es/Jmol/sliders/wzorn/slab-slider.htm in action]. | See it [http://biomodel.uah.es/Jmol/sliders/wzorn/slab-slider.htm in action]. | ||
| Line 10: | Line 10: | ||
# Download Walter Zorn's library from http://www.walterzorn.com/dragdrop/dragdrop_e.htm (You need the <code>wz_dragdrop.js</code> file.) | # Download Walter Zorn's library from http://www.walterzorn.com/dragdrop/dragdrop_e.htm (You need the <code>wz_dragdrop.js</code> file.) | ||
# Get a copy of the image files, [[Image:Track.gif]]<code>track.gif</code> and [[Image:Sliderthumb.gif]]<code>sliderthumb.gif</code>. You could use your own, but size is important since the code is related to it. | # Get a copy of the image files, [[Image:Track.gif]]<code>track.gif</code> and [[Image:Sliderthumb.gif]]<code>sliderthumb.gif</code>. You could use your own, but size is important since the code is related to it. | ||
| + | # Your webpage should load <code>JSmol.min.js</code>, define <code>Info</code> and insert the <code>myJmol</code> object. | ||
# Include this code in your webpage: | # Include this code in your webpage: | ||
<pre> | <pre> | ||
<head> | <head> | ||
| − | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
/* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL). | /* Uses Walter Zorn's Drag'n'Drop & DHTML Library (GNU LGPL). | ||
| − | Integration with Jmol by Angel | + | Integration with Jmol by Angel Herráez. |
*/ | */ | ||
| − | function slabSlider() | + | 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> | </script> | ||
| Line 28: | Line 27: | ||
<body> | <body> | ||
<script type="text/javascript" src="wz_dragdrop.js"></script> | <script type="text/javascript" src="wz_dragdrop.js"></script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<input type="button" value="prepare for slabbing" | <input type="button" value="prepare for slabbing" | ||
| − | onClick=' | + | 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> | <br> | ||
<img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle"> | <img name="track" src="track.gif" width="104" height="29" alt="" title="" align="absmiddle"> | ||
| Line 40: | Line 37: | ||
<br> | <br> | ||
<input type="button" value="cancel slabbing" | <input type="button" value="cancel slabbing" | ||
| − | onClick=' | + | onClick='Jmol.script(myJmol, "slab off;")'> |
<script type="text/javascript"> | <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) | SET_DHTML("thumb"+MAXOFFLEFT+20+MAXOFFRIGHT+80+HORIZONTAL,"track"+NO_DRAG) | ||
| Line 56: | Line 53: | ||
</body> | </body> | ||
</pre> | </pre> | ||
| − | Important | + | Important notes: |
| − | # You must adjust the path to | + | # You must adjust the path to <code>wz_dragdrop.js</code> according to your set-up. |
| − | # 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 | + | # 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) === | === Version (B) === | ||
| − | This looks excellent too, and has some more versatility. Uses javascript, CSS | + | 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 [http://biomodel.uah.es/Jmol/sliders/ here], applied to slabbing, bond thickness, translucency, ribbon width and thickness. | See instructions and several examples [http://biomodel.uah.es/Jmol/sliders/ here], applied to slabbing, bond thickness, translucency, ribbon width and thickness. | ||
Latest revision as of 11:43, 27 November 2019
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:
- Download Walter Zorn's library from http://www.walterzorn.com/dragdrop/dragdrop_e.htm (You need the
wz_dragdrop.jsfile.) - Get a copy of the image files,
track.gifand
sliderthumb.gif. You could use your own, but size is important since the code is related to it. - Your webpage should load
JSmol.min.js, defineInfoand insert themyJmolobject. - 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:
- You must adjust the path to
wz_dragdrop.jsaccording to your set-up. - 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.
