Skip to content

Commit c7a15fe

Browse files
ameya98ameya98
committed
Fixes.
1 parent 590f471 commit c7a15fe

1 file changed

Lines changed: 77 additions & 20 deletions

File tree

‎index.html‎

Lines changed: 77 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -271,9 +271,9 @@ <h3>Load Structure</h3>
271271
<div class="load-group control-group">
272272
<h3>Load Trajectory</h3>
273273
<div style="margin-bottom: 10px;">
274-
<label style="display: block; margin-bottom: 5px;">Topology (.pdb, .cif):</label>
275-
<input type="file" id="topology-input" accept=".pdb,.cif" style="display: none;">
276-
<input type="text" id="topology-name-display" placeholder=".pdb, .cif" readonly style="width: 50%; margin-right: 5px;">
274+
<label style="display: block; margin-bottom: 5px;">Topology (.xyz,.pdb,.mol,.sdf,.cif):</label>
275+
<input type="file" id="topology-input" accept=".xyz,.pdb,.mol,.sdf,.cif" style="display: none;">
276+
<input type="text" id="topology-name-display" placeholder=".xyz, .pdb, .mol, .sdf, .cif" readonly style="width: 50%; margin-right: 5px;">
277277
<script type="text/javascript">
278278
function openTopologyDialog() {
279279
document.getElementById('topology-input').click();
@@ -319,22 +319,30 @@ <h3>Load Trajectory</h3>
319319
alert("Please load topology file first!");
320320
return;
321321
}
322-
322+
323323
document.getElementById('trajectory-name-display').value = file.name;
324324

325325
const reader = new FileReader();
326326
reader.onload = function(event) {
327327
const trajectoryData = event.target.result;
328328
const trajectoryFileName = file.name;
329329

330-
// // Load topology first
331-
// Jmol.script(myJmol, `load DATA "${topologyFileName}"\n${topologyData}\nEND "${topologyFileName}"`);
332-
333330
// Then load trajectory coordinates
334331
Jmol.script(myJmol, `load trajectory DATA "${trajectoryFileName}"\n${trajectoryData}\nEND "${trajectoryFileName}" coord "${topologyFileName}"; ${default_render()}`);
335332

336-
const frameCount = Jmol.evaluateVar(myJmol, 'modelCount');
333+
// Alternative way to get frame count
334+
const frameCount = Jmol.evaluate(myJmol, '{*}.length');
337335
console.log(`Loaded trajectory with ${frameCount} frames`);
336+
337+
// Show trajectory controls
338+
document.getElementById('trajectory-controls').style.display = 'block';
339+
340+
// Update slider
341+
const slider = document.getElementById('frame-slider');
342+
slider.max = frameCount;
343+
slider.value = 1;
344+
document.getElementById('frame-display').textContent = `Frame: 1 / ${frameCount}`;
345+
338346
};
339347

340348
// Read as binary for .dcd, .xtc, .trr
@@ -347,28 +355,77 @@ <h3>Load Trajectory</h3>
347355
</script>
348356
</div>
349357

358+
<div id="trajectory-controls" style="display: none;">
350359
<div class="control-group">
351-
<h3>Trajectory Controls</h3>
360+
<h3>Frame Navigation</h3>
361+
<div style="display: flex; align-items: center; gap: 10px; width: 100%;">
362+
<input type="range" id="frame-slider" min="1" max="100" value="1"
363+
style="flex: 1;" oninput="updateFrame(this.value)">
364+
<span id="frame-display" style="min-width: 100px; font-size: 12px;">Frame: 1 / 100</span>
365+
</div>
352366
<script type="text/javascript">
353-
Jmol.jmolButton(myJmol, "animation on", "Play");
354-
Jmol.jmolButton(myJmol, "animation off", "Pause");
355-
Jmol.jmolButton(myJmol, "animation mode loop", "Loop");
356-
Jmol.jmolButton(myJmol, "animation mode palindrome", "Palindrome");
357-
Jmol.jmolButton(myJmol, "frame 1", "First Frame");
358-
Jmol.jmolButton(myJmol, "frame last", "Last Frame");
359-
Jmol.jmolButton(myJmol, "frame next", "Next");
360-
Jmol.jmolButton(myJmol, "frame previous", "Previous");
367+
function updateFrame(frameNum) {
368+
Jmol.script(myJmol, `frame ${frameNum}`);
369+
const maxFrames = document.getElementById('frame-slider').max;
370+
document.getElementById('frame-display').textContent = `Frame: ${frameNum} / ${maxFrames}`;
371+
}
372+
373+
Jmol.jmolButton(myJmol, "javascript updateSliderToFirst()", "First");
374+
Jmol.jmolButton(myJmol, "javascript decrementFrame()", "◀");
375+
Jmol.jmolButton(myJmol, "javascript incrementFrame()", "▶");
376+
Jmol.jmolButton(myJmol, "javascript updateSliderToLast()", "Last");
377+
378+
function updateSliderToFirst() {
379+
document.getElementById('frame-slider').value = 1;
380+
updateFrame(1);
381+
}
382+
383+
function incrementFrame() {
384+
let currentFrame = parseInt(document.getElementById('frame-slider').value);
385+
const maxFrames = document.getElementById('frame-slider').max;
386+
if (currentFrame < maxFrames) {
387+
currentFrame += 1;
388+
document.getElementById('frame-slider').value = currentFrame;
389+
updateFrame(currentFrame);
390+
}
391+
}
392+
393+
function decrementFrame() {
394+
let currentFrame = parseInt(document.getElementById('frame-slider').value);
395+
if (currentFrame > 1) {
396+
currentFrame -= 1;
397+
document.getElementById('frame-slider').value = currentFrame;
398+
updateFrame(currentFrame);
399+
}
400+
}
401+
402+
function updateSliderToLast() {
403+
const maxFrames = document.getElementById('frame-slider').max;
404+
document.getElementById('frame-slider').value = maxFrames;
405+
updateFrame(maxFrames);
406+
}
407+
</script>
408+
</div>
409+
410+
<div class="control-group">
411+
<h3>Animation</h3>
412+
<script type="text/javascript">
413+
Jmol.jmolButton(myJmol, "animation on", "Play");
414+
Jmol.jmolButton(myJmol, "animation off", "Pause");
415+
Jmol.jmolButton(myJmol, "animation mode loop", "Loop");
416+
Jmol.jmolButton(myJmol, "animation mode palindrome", "Palindrome");
361417
</script>
362418
</div>
363419

364420
<div class="control-group">
365421
<h3>Animation Speed</h3>
366422
<script type="text/javascript">
367-
Jmol.jmolButton(myJmol, "animation fps 5", "Slow");
368-
Jmol.jmolButton(myJmol, "animation fps 10", "Medium");
369-
Jmol.jmolButton(myJmol, "animation fps 20", "Fast");
423+
Jmol.jmolButton(myJmol, "animation fps 5", "Slow (5 fps)");
424+
Jmol.jmolButton(myJmol, "animation fps 10", "Medium (10 fps)");
425+
Jmol.jmolButton(myJmol, "animation fps 20", "Fast (20 fps)");
370426
</script>
371427
</div>
428+
</div>
372429

373430

374431
<div class="control-group">

0 commit comments

Comments
 (0)