master

分支 (12)

管理

管理

master

Aatmik-dev

modelCleanup

ribbon

dev

gltf_export

erik-dev

Shuchi-dev3

jigglewiggle

Shuchi-dev2

Shuchi-dev

crowder

oxdna-viewer
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-171800090-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-171800090-1');
    </script>


    <title>oxDNA three.js viewer</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="css/metro.min.css">
    <link rel="stylesheet" href="css/metro-colors.min.css">
    <link rel="stylesheet" href="css/metro-icons.min.css">

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <aside class="sidebar pos-absolute z-2" data-role="sidebar" data-toggle="#sidebar-toggle"
        data-shift=".shifted-content">
        <div class="sidebar-header bg-grayMouse">
            <span class="title fg-white">oxView</span>
            <span class="subtitle fg-white"> An oxDNA viewer and editor</span>
        </div>
        <ul class="sidebar-menu">
            <li><a href="https://github.com/sulcgroup/oxdna-viewer/"><span class="mif-github icon"></span>Github</a>
            </li>
            <li><a href="https://github.com/sulcgroup/oxdna-viewer/blob/master/README.md"><span
                        class="mif-books icon"></span>Documentation</a></li>
            <li><a href="https://github.com/sulcgroup/oxdna-viewer/tree/master/examples"><span
                        class="mif-files-empty icon"></span>Examples</a></li>
            <li><a href="https://www.youtube.com/channel/UC4ClrQ8xMypSbDZG2QCehpA"><span
                        class="mif-youtube-play icon"></span>Video tutorials</a></li>
            <li class="divider"></li>
            <li><a href="https://doi.org/10.1093/nar/gkaa417"><span class="mif-file-text icon"></span>Please cite our
                    paper</a></li>
        </ul>
    </aside>

    <div id="keybindingsDialog" class="dialog" data-role="dialog" style="overflow-y: auto; overflow-x: hidden;">
        <table data-role="table" class="table striped">
            <thead>
            <tr>
                <th>Key</th>
                <th>Action</th>
            </tr>
            </thead>
            <tr><td>p</td><td>Save image</td></tr>
            <tr><td>s</td><td>Toggle selection</td></tr>
            <tr><td>d</td><td>Toggle transformation</td></tr>
            <tr><td>t</td><td>Translate mode</td></tr>
            <tr><td>r</td><td>Rotate mode</td></tr>
            <tr><td>Right arrow</td><td>Next configuration</td></tr>
            <tr><td>Left arrow</td><td>Previous configuration</td></tr>
            <tr><td>ctrl/⌘-s</td><td>Save topology and configuration</td></tr>
            <tr><td>ctrl/⌘-z</td><td>Undo edit</td></tr>
            <tr><td>ctrl/⌘-shift-z (or ctrl/⌘-y)</td><td>Redo edit</td></tr>
            <tr><td>ctrl/⌘-a</td><td>Select all elements</td></tr>
            <tr><td>ctrl/⌘-i</td><td>Invert selection</td></tr>
            <tr><td>ctrl/⌘-click</td><td>Select multiple elements</td></tr>
            <tr><td>shift-click</td><td>Select intermediate by gid</td></tr>
            <tr><td>shift-alt-click</td><td>Select intermediate by shortest path</td></tr>
            <tr><td>ctrl/⌘-c</td><td>Copy selection</td></tr>
            <tr><td>ctrl/⌘-v</td><td>Paste selection</td></tr>
            <tr><td>ctrl/⌘-shift-v</td><td>Paste selection in-place</td></tr>
            <tr><td>Numpad0</td><td>Reset camera</td></tr>
            <tr><td>Numpad1</td><td>Move camera to x-axis (ctrl/⌘ to invert)</td></tr>
            <tr><td>Numpad2</td><td>Rotate camera down</td></tr>
            <tr><td>Numpad3</td><td>Move camera to y-axis (ctrl/⌘ to invert)</td></tr>
            <tr><td>Numpad4</td><td>Rotate camera left</td></tr>
            <tr><td>Numpad5</td><td>Toggle orthographic/perspective</td></tr>
            <tr><td>Numpad6</td><td>Rotate camera right</td></tr>
            <tr><td>Numpad7</td><td>Move camera to z-axis (ctrl/⌘ to invert)</td></tr>
            <tr><td>Numpad8</td><td>Rotate camera up</td></tr>
        </table>
    </div>

    <div id='socketConnectionsDialog' class="dialog" data-role="dialog">
        <p>The viewer supports live relaxation using ox-serve nodes.</p>
        <p>List of available servers:</p>
        <div id="serverList" class="items-list"></div>
        <div>
            <div class="inline-form">
                <input type="text" data-role="input" id="newHostText"
                    data-prepend="Add host:"
                    value="ws://some_host" title="ox-serve url address">
                <button class="button primary" onclick="addOXServeURL()" title="Add ox-serve url address.">+</button>
            </div>
        </div>
        <div class="dialog-actions">
            <button class="button js-dialog-close">Close</button>
        </div>
    </div>

    <div id='backgroundDialog' class="dialog" data-role="dialog">
        Pick a background color:
        <input type="color" id="backgroundColor" value="#ffffff" title="Background color" onchange="setBackgroundColor()">
        Or upload a background image:
        <input id='backgroundInput' type="file" data-role="file" onchange="setBackgroundImage()">
        <div class="dialog-actions">
            <button class="button primary js-dialog-close">Done</button>
        </div>
    </div>

    <div id='openFileDialog' class="dialog" data-role="dialog">
        <input id='fileInput' type="file" multiple="multiple" data-role="file" data-mode="drop">
        <div class="dialog-actions">
            <button class="button js-dialog-close">Cancel</button>
            <button onclick="handleFiles(document.getElementById('fileInput').files)" class="button primary js-dialog-close">Open</button>
        </div>
    </div>

    <div id='exportOxdnaDialog' class="dialog" data-role="dialog">
        <p>Save the current stucture to oxDNA configuration and/or topology files</p>
        <p id="gidUpdateWarning" hidden=true>Please note that new nucleotide IDs will be generated in the exported files since the topology has been edited.</p>
        <input type="checkbox" id="topDownload" data-caption="Topology" title="identies and connections of particles" checked data-role="checkbox">
        <input type="checkbox" id="datDownload" data-caption="Configuration" title="the xyz positions and rotations of particles" checked data-role="checkbox">
        <input type="text" data-role="input" data-prepend="Name" id="outputFilename" value="output" title="The prefix to name the .dat and .top files">
        <div class="dialog-actions">
            <button class="button js-dialog-close">Cancel</button>
            <button onclick="makeOutputFiles()" class="button primary js-dialog-close">Export</button>
        </div>
    </div>

    <div id='export3DDialog' class="dialog" data-role="dialog">
        <div class="dialog-title">3D Export Options</div>
        <div class="dialog-content">
            <label for="3dExportFormat">Export format:</label>
            <select id="3dExportFormat">
                <option value="gltf">gltf</option>
                <option value="glb">glb</option>
                <option value="stl">stl</option>
            </select>
            <input type="checkbox" id="includeBackbone" title="include backbone mesh into output" checked>Backbone mesh<br>
            <input type="checkbox" id="includeNucleoside" title="include nucleoside mesh into output" checked>Nucleoside mesh<br>
            <input type="checkbox" id="includeConnector" title="include connector mesh into output" checked>Connector mesh<br>
            <input type="checkbox" id="includeBBconnector" title="include backbone connector mesh into output" checked>Backbone connector mesh<br>
            <label for="3dExportScale">scale: </label>
            <input type="number" value="1" id="3dExportScale" title="rescale the model" min=1 max=10></br>
            <label for="3dExportFacesMul">faces multiplier: </label>
            <input type="number" value="2" id="3dExportFacesMul" title="increases model smoothness" min=1 max=5><br>
            <input type="checkbox" id="3dExportFlat"
                title="Ignore system hierarchy and export all object on the same level (makes faster import)">Export flat hierarchy<br>
            <label for="3dExportFilename">File name: </label>
            <input type="text" id="3dExportFilename" size="13" value="output" title="3d file name">
        </div>
        <div class="dialog-actions">
            <button class="button js-dialog-close">Cancel</button>
            <button onclick="make3dOutput()" class="button primary js-dialog-close">Export</button>
        </div>
    </div>

    <nav id="menu" data-role="ribbonmenu" class="shifted-content">
        <ul class="tabs-holder flex-wrap">
            <li id='sidebar-toggle' class="static"><a href="#">oxView</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-file">File</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-select">Select</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-edit">Edit</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-view">View</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-trajectory">Trajectory</a></li>
            <li ondblclick="view.sectionClicked()"><a href="#section-dynamics">Dynamics</a></li>
        </ul>

        <div class="content-holder">
            <div class="section" id="section-file">
                <button class="ribbon-button primary" onclick="Metro.dialog.open('#openFileDialog')" title="Open files (ctrl/⌘-o)"
                    title="Open files (ctrl/⌘-o)">
                    <span class="mif-folder-open mif-3x"></span>
                    <span class="caption">Open</span>
                </button>
                <button class="ribbon-button" onclick="makeOxViewJsonFile()"
                    title="Download a file JSON file storing the current design">
                    <span class="mif-floppy-disk mif-3x"></span>
                    <span class="caption">Save .oxview</span>
                </button>
                <div class="group">
                    <button class="ribbon-button"
                        onclick="Metro.dialog.open('#exportOxdnaDialog'); document.getElementById('gidUpdateWarning').hidden = !topologyEdited"
                        title="Downloading the current scene as oxDNA files (ctrl/⌘-s)">
                        <span class="mif-floppy-disk mif-2x"></span>
                        <span class="caption">Simulation files</span>
                    </button>
                    <button onclick="makePairTrapFile()" class="ribbon-button"
                        title="Download a mutual trap file for all basepairs">
                        <span class="mif-file-download mif-2x"></span>
                        <span class="caption">Pair trap</span>
                    </button>
                    <span class="title">oxDNA files</span>
                </div>
                <button class="ribbon-button" onclick="Metro.dialog.open('#export3DDialog')"
                    title="Options for 3d export of the scene.">
                    <span class="mif-file-download mif-3x"></span>
                    <span class="caption">3D Export</span>
                </button>
                <button onclick="makeSequenceFile()" class="ribbon-button"
                    title="Download a file containing all sequences">
                    <span class="mif-file-download mif-3x"></span>
                    <span class="caption">Sequence file</span>
                </button>
                <button class="ribbon-button" onclick="view.toggleWindow('videoCreationWindow')">
                    <span class="mif-video-camera mif-3x"></span>
                    <span class="caption">Create video</span>
                </button>
                <button class="ribbon-button" onclick="view.saveCanvasImage()" title="Save current view as an image ('p')">
                    <span class="mif-photo-camera mif-3x"></span>
                    <span class="caption">Save image</span>
                </button>
            </div>

            <!--Select-->
            <div class="section" id="section-select"><div class="d-flex flex-wrap">
                <div class="group">
                    <div class="ribbon-toggle-group toggleGroup_w2" id="selectionScope">
                        <button class="ribbon-icon-button">
                            <span class="icon">
                                <span class="mif-not"></span>
                            </span>
                            <span class="caption">Disabled</span>
                        </button>
                        <button class="ribbon-icon-button active">
                            <span class="icon">
                                <span class="mif-location"></span>
                            </span>
                            <span class="caption">Monomer</span>
                        </button>

                        <button class="ribbon-icon-button">
                            <span class="icon">
                                <span class="mif-flow-line"></span>
                            </span>
                            <span class="caption">Strand</span>
                        </button>

                        <button class="ribbon-icon-button">
                            <span class="icon">
                                <span class="mif-flow-tree"></span>
                            </span>
                            <span class="caption">System</span>
                        </button>

                        <button class="ribbon-icon-button">
                            <span class="icon">
                                <span class="mif-cloudy4"></span>
                            </span>
                            <span class="caption">Cluster</span>
                        </button>

                        <button class="ribbon-icon-button">
                            <span class="icon">
                                <span class="mif-crop"></span>
                            </span>
                            <span class="caption">Box</span>
                        </button>
                    </div>
                    <span class="title">Selection mode</span>
                </div>
                <button class="ribbon-button" onclick="view.toggleWindow('clusteringWindow')">
                    <span class="mif-cloudy4 mif-3x"></span>
                    <span class="caption">Clustering</span>
                </button>
                <textarea id="baseList" cols="25" rows="3" readonly> Selected Bases List </textarea>
                <div class="tight group flex-column">
                    <span>Select<br>pairs</span>
                    <input type="checkbox" id="selectPairs" data-role="switch" title="Automatically select basepairs">
                </div>
                <div class="tight group flex-column">
                    <button class="ribbon-icon-button" onclick="selectAll()" title="Select all (ctrl/⌘-a)">
                        <span class="mif-done_all mif-1x"></span>
                        <span class="caption">Select all</span>
                    </button>
                    <button class="ribbon-icon-button" onclick="invertSelection()" title="Invert selection (ctrl/⌘-i)">
                        <span class="mif-contrast mif-1x"></span>
                        <span class="caption">Invert selection</span>
                    </button>
                    <button class="ribbon-icon-button" onclick="clearSelection()" title="Clear selection">
                        <span class="mif-not mif-1x"></span>
                        <span class="caption">Clear selection</span>
                    </button>
                </div>
                <button class="ribbon-button" onclick="view.toggleWindow('baseInfoWindow', ()=>{if(systems.length>0){updateView(systems[0])}})">
                    <span class="mif-list mif-3x"></span>
                    <span class="caption">Selected base info</span>
                </button>
                <button class="ribbon-button" onclick="makeSelectedBasesFile()"
                    title="Download plain-text file of selected bases">
                    <span class="mif-file-download mif-3x"></span>
                    <span class="caption">Selected base list</span>
                </button>
                <button class="ribbon-button" onclick="makeMutualTrapFile()"
                    title="Create mutual trap file pairing every two bases in the selected base list">
                    <span class="mif-shrink2 mif-2x"></span>
                    <span class="mif-file-download mif-2x"></span>
                    <span class="caption">Selected base<br>trap file</span>
                </button>
            </div></div>

            <!--Edit-->
            <div class="section" id="section-edit"><div class="d-flex flex-wrap">
                <div class="tight group">
                    <button class="ribbon-button" title="Undo (ctrl/⌘-z)" onclick="editHistory.undo()">
                        <span class="mif-undo mif-2x"></span>
                        <span class="caption">Undo</span>
                    </button>
                    <button class="ribbon-button" title="Redo (ctrl/⌘-y)" onclick="editHistory.redo()">
                        <span class="mif-redo mif-2x"></span>
                        <span class="caption">Redo</span>
                    </button>
                </div>
                <div class="tight group">
                    <button class="ribbon-button" title="Cut selection (ctrl/⌘-x)" onclick="cutWrapper()">
                        <span class="mif-cut mif-2x"></span>
                        <span class="caption">Cut</span>
                    </button>
                    <button class="ribbon-button" title="Copy selection (ctrl/⌘-c)" onclick="copyWrapper()">
                        <span class="mif-copy mif-2x"></span>
                        <span class="caption">Copy</span>
                    </button>
                    <button class="ribbon-button" title="Paste (ctrl/⌘-p)" onclick="pasteWrapper()">
                        <span class="mif-paste mif-2x"></span>
                        <span class="caption">Paste</span>
                    </button>
                </div>

                <div class="tight group">
                    <div class="ribbon-toggle-group toggleGroup_w1" id="transform">
                        <button class="ribbon-icon-button active" onclick="view.transformMode.set('None')" title="Toggle with 'd'">
                            <span class="icon">
                                <span class="mif-not"></span>
                            </span>
                            <span class="caption">None</span>
                        </button>

                        <button class="ribbon-icon-button" onclick="view.transformMode.set('Translate')" title="Toggle with 't'">
                            <span class="icon">
                                <span class="mif-enlarge"></span>
                            </span>
                            <span class="caption">Translate</span>
                        </button>

                        <button class="ribbon-icon-button" onclick="view.transformMode.set('Rotate')" title="Toggle with 'r'">
                            <span class="icon">
                                <span class="mif-3d-rotation"></span>
                            </span>
                            <span class="caption">Rotate</span>
                        </button>
                    </div>
                </div>

                <div class="tight group">
                    <button class="ribbon-button" onclick="nickWrapper()" title="break the upstream connection of the last selected particle">
                        <img src="img/ico/nick.svg">
                        <span class="caption">Nick</span>
                    </button>
                    <button class="ribbon-button" onclick="deleteWrapper()" title="delete the selected monomers">
                        <img src="img/ico/delete.svg">
                        <span class="caption">Delete</span>
                    </button>
                    <button class="ribbon-button" onclick="ligateWrapper()" title="ligate the last two selected particles together">
                        <img src="img/ico/ligate.svg">
                        <span class="caption">Ligate</span>
                    </button>
                </div>

                <div class="tight group flex-column">
                    <div>
                        <input type="checkbox" id="setCompl" data-role="checkbox" data-caption="Duplex mode" title="Set also complementary bases">
                        <button class="ribbon-icon-button" onclick="setSeqWrapper()" title="Apply the given sequence to the selected monomers">
                            <img src="img/ico/set.svg">
                            <span class="caption"> Set</span>
                        </button>
                        <button class="ribbon-icon-button" onclick="extendWrapper(false)" title="Extend strand (or duplex) from the selected monomer with the given sequence">
                            <img src="img/ico/extend.svg">
                            <span class="caption"> Extend</span>
                        </button>
                        <button class="ribbon-icon-button" onclick="createWrapper()" title="Create a new strand (or duplex) with the provided sequences">
                            <img src="img/ico/create.svg">
                            <span class="caption"> Create</span>
                        </button>
                        <button class="ribbon-icon-button" onclick="insertWrapper()" title="Insert elements of the provided sequences upstream of the last selected particle">
                            <img src="img/ico/insert.svg">
                            <span class="caption"> Insert</span>
                        </button>
                        <button class="ribbon-icon-button" onclick="skipWrapper()" title="Remove selected elements and connect neigbours">
                            <img src="img/ico/skip.svg">
                            <span class="caption"> Skip</span>
                        </button>
                    </div>
                    <input type="text" data-role="input" id="sequence" class="mb-1"
                        data-append="<span id='seqLen'>0</span>" data-prepend="<span'>Seq</span>"
                        data-history="true" data-prevent-submit="true"
                        placeholder="Type a sequence here"
                        style="text-transform: uppercase;"
                        oninput='document.getElementById("seqLen").innerHTML = this.value.length'>
                </div>
            </div></div>

            <!-- View -->
            <div class="section" id="section-view"><div class="d-flex flex-wrap-r">
                <div class="tight group">
                    <div class="group">
                        <div id="inboxing" class="ribbon-toggle-group toggleGroup_w1">
                            <button class="ribbon-icon-button">
                                <span class="icon">
                                    <span class="mif-not"></span>
                                </span>
                                <span class="caption">None</span>
                            </button>

                            <button class="ribbon-icon-button active">
                                <span class="icon">
                                    <span class="mif-location"></span>
                                </span>
                                <span class="caption">Monomer</span>
                            </button>

                            <button class="ribbon-icon-button">
                                <span class="icon">
                                    <span class="mif-flow-line"></span>
                                </span>
                                <span class="caption">Strand</span>
                            </button>
                        </div>
                        <span class="title">PBC</span>
                    </div>
                    <div class="group">
                        <div id="centering" class="ribbon-toggle-group toggleGroup_w1">
                            <button class="ribbon-icon-button">
                                <span class="icon">
                                    <span class="mif-not"></span>
                                </span>
                                <span class="caption">None</span>
                            </button>

                            <button class="ribbon-icon-button">
                                <span class="icon">
                                    <span class="mif-crop"></span>
                                </span>
                                <span class="caption">Box</span>
                            </button>

                            <button class="ribbon-icon-button active">
                                <span class="icon">
                                    <span>+</span>
                                </span>
                                <span class="caption">Origin</span>
                            </button>
                        </div>
                        <span class="title">Centering</span>
                    </div>
                    <button class="ribbon-button" onclick="centerAndPBCBtnClick()" title="Note that this only works if you're going from none to something else or if you want to re-center after moving">
                        <span class="mif-done mif-3x"></span>
                        <span class="caption">Apply</span>
                    </button>
                </div>
                <div class="tight group flex-column">
                    <div style="height: 27px;"><input type="checkbox" id="arrowToggle" onchange="toggleArrows(this)"
                            data-role="switch" data-caption="Arrows" checked>
                    </div>
                    <div style="height: 27px;"><input type="checkbox" id="boxToggle" onchange="toggleBox(this)"
                            data-role="switch" data-caption="Box">
                    </div>
                    <div style="height: 27px;"><input type="checkbox" id="boxToggle" onchange="toggleFog()"
                            data-role="switch" data-caption="Fog">
                        <span class="ribbon-split dropdown-toggle"></span>
                        <ul class="ribbon-dropdown" data-role="dropdown" data-duration="100">
                            <label for="fogNear">Near: </label>
                            <input type="text" data-role="spinner" class="input-small" value="1" id="fogNear"
                                title="Minimum distance to apply fog" min=0
                                onchange="if(scene.fog!=null){setFog();}"><br>
                            <label for="fogNear">Far: </label>
                            <input type="text" data-role="spinner" class="input-small" value="200" id="fogFar"
                                title="Maximum distance to apply fog" min=0
                                onchange="if(scene.fog!=null){setFog();}"><br>
                        </ul>
                    </div>
                </div>
                <div class="group">
                    <div id="coloringMode" class="ribbon-toggle-group toggleGroup_w2">
                        <button class="ribbon-icon-button active" onclick="updateColoring('Strand')">
                            <span class="icon">
                                <span class="mif-flow-line"></span>
                            </span>
                            <span class="caption">Strand</span>
                        </button>

                        <button class="ribbon-icon-button" onclick="updateColoring('Cluster')">
                            <span class="icon">
                                <span class="mif-cloudy4"></span>
                            </span>
                            <span class="caption">Cluster</span>
                        </button>

                        <button class="ribbon-icon-button" onclick="updateColoring('System')">
                            <span class="icon">
                                <span class="mif-flow-tree"></span>
                            </span>
                            <span class="caption">System</span>
                        </button>

                        <button class="ribbon-icon-button" onclick="updateColoring('Overlay')">
                            <span class="icon">
                                <span class="mif-chart-dots"></span>
                            </span>
                            <span class="caption">Overlay</span>
                        </button>
                    </div>
                    <button class="ribbon-button" onclick="view.toggleWindow('colorPaletteWindow', updateColorPalette)">
                        <span class="mif-palette mif-2x"></span>
                        <span class="caption">Edit color palette</span>
                    </button>
                    <div class="tight group flex-column">
                        <span>
                            <button class="ribbon-icon-button" id="setCustomColor"
                                onclick="colorElements()"
                                title="Color selected elements">
                                <span class="mif-pencil"></span>
                            </button>
                            <button class="ribbon-icon-button" id="resetCustomColor"
                                onclick="resetCustomColoring()"
                                title="Reset coloring on selected elements">
                                <span class="mif-undo"></span>
                            </button>
                        </span>
                        <input type="color" id="customColor" value="#ff0000" title="Custom color">
                    </div>
                    <span class="title">Colors</span>
                </div>
                <div class="tight group flex-wrap">
                    <button class="ribbon-button" onclick="Metro.dialog.open('#backgroundDialog')">
                        <span class="mif-image mif-3x"></span>
                        <span class="caption">Background</span>
                    </button>
                    <button class="ribbon-button" onclick="toggleVisArbitrary()">
                        <span class="mif-eye mif-3x"></span>
                        <span class="caption">Toggle visibility</span>
                    </button>
                    <button class="ribbon-button" onclick="api.switchCamera()">
                        <span class="mif-video-camera mif-3x"></span>
                        <span id="cameraSwitch" class="caption">Orthographic</span>
                    </button>
                    <button class="ribbon-button" onclick="view.toggleWindow('systemHierarchyWindow', drawSystemHierarchy)">
                        <span class="mif-flow-cascade mif-3x"></span>
                        <span class="caption">System hierarchy</span>
                    </button>
                    <button class="ribbon-button" onclick="Metro.dialog.open('#keybindingsDialog')"
                        title="Show the available keyboard shortcuts">
                        <span class="mif-keyboard mif-3x"></span>
                        <span class="caption">Keyboard shortcuts</span>
                    </button>
                    <button class="ribbon-button" onclick="controls.reset();"
                        title="Reset the camera view">
                        <span class="mif-video-camera mif-2x"></span>
                        <span class="mif-undo mif-2x"></span>
                        <span class="caption">Reset camera</span>
                    </button>
                </div>
            </div></div>

            <!--Trajectory-->
            <div class="section" id="section-trajectory">
                <div class="tight group">
                    <div class="row flex-align-center">
                        <button class="ribbon-button" onclick="trajReader.previousConfig()"
                            title="Previous config (left keyboard arrow)">
                            <span class="mif-previous mif-2x"></span>
                            <span class="caption">Previous</span>
                        </button>
                        <div id="trajTimestep" hidden="true"></div>
                        <button class="ribbon-button" onclick="trajReader.nextConfig()"
                            title="Next config (right keyboard arrow)">
                            <span class="mif-next mif-2x"></span>
                            <span class="caption">Next</span>
                        </button>
                    </div>
                </div>
                <div class="tight group flex-column">
                    <div class="tight group">
                        <button
                            class="ribbon-icon-button"
                            onclick="trajReader.stepUntil(parseInt(document.getElementById('trajPrevLim').value), true)"
                            title="Click to rewind">
                                <span id="trajPrevUntilIco" class="mif-previous mif-2x"></span>
                                <span class="caption">until t &le;</span>
                        </button>
                        <input type="text" style="width: 6em;" data-role="spinner" id="trajPrevLim" class="input-small" value="0" min="0" title="Input trajectory step at which to stop rewinding.">
                    </div>
                    <div class="tight group">
                        <button
                            class="ribbon-icon-button"
                            onclick="trajReader.stepUntil(parseInt(document.getElementById('trajNextLim').value), false)"
                            title="Click to play">
                                <span id="trajNextUntilIco" class="mif-next mif-2x"></span>
                                <span class="caption">until t &ge;</span>
                        </button>
                        <input type="text" style="width: 6em;" data-role="spinner" id="trajNextLim" class="input-small" value="-1" min="0" title="Input trajectory step at which to stop playback. Input a negative number to play until the end.">
                    </div>
                </div>
            </div>

            <div class="section" id="section-dynamics">
                <div class="group">
                    <div class="tight group flex-column">
                        <input type="checkbox" id="clusterSim" onchange="toggleClusterSim()" data-role="switch">
                        <span>Enable</span>
                    </div>
                    <div>
                        <button class="ribbon-button dropdown-toggle">
                            <span class="icon">
                                <span class="mif-cogs mif-3x"></span>
                            </span>
                            <span class="caption">Settings</span>
                        </button>
                        <ul class="ribbon-dropdown" data-role="dropdown" data-duration="100" style="width: 200px;">
                        <p>Cluster repulsion constant</p><input id='rbd_clusterRepulsionConst' value = 1000 onchange="if(rigidClusterSimulator){rigidClusterSimulator.clusterRepulsionConst = this.value;}" type="text" data-role="spinner" class="input-small" data-step=1000>
                            <p>Connection spring constant</p><input id='rbd_connectionSpringConst' value = 10 onchange="if(rigidClusterSimulator){rigidClusterSimulator.connectionSpringConst = this.value;}" type="text" data-role="spinner" class="input-small" data-step=10>
                            <p>Connection relaxed length</p><input id='rbd_connectionRelaxedLength' value = 3 onchange="if(rigidClusterSimulator){rigidClusterSimulator.connectionRelaxedLength = this.value;}" type="text" data-role="spinner" class="input-small" data-step=1>
                            <p>Friction</p><input id='rbd_friction' value = 0.25 onchange="if(rigidClusterSimulator){rigidClusterSimulator.friction = this.value;}" type="text" data-role="spinner" class="input-small" data-step=.1 data-fixed="1">
                            <p>dt</p><input id='rbd_dt' value = 0.1 onchange="if(rigidClusterSimulator){rigidClusterSimulator.dt = this.value;}" type="text" data-role="spinner" class="input-small" data-step=.01 data-fixed="2">
                        </ul>
                    </div>
                    <span class="title">Rigid-body</span>
                </div>
                <div class="group">
                    <button class="ribbon-button" id="btnConnect" onclick="openConnections()" title="Live interactions.">
                        <span class="mif-cast mif-3x"></span>
                        <span class="caption">Connect</span>
                    </button>
                    <button class="ribbon-button" id="btnControlSim" onclick="view.toggleWindow('oxserveWindow')">
                        <span class="mif-cogs mif-3x"></span>
                        <span class="caption">Settings</span>
                    </button>
                    <span class="title">Ox-Serve</span>
                </div>
            </div>
        </div>
    </nav>

    <!--Canvas-->
    <div id="container">
        <div><canvas id="colorbarCanvas"></canvas></div>
    </div>
    <canvas id="threeCanvas" tabindex="1" style="width: 100%; height: 100%;"></canvas>

    <!-- Metro 4 -->
    <script src="./ts/lib/metro.min.js"></script>
    <div class="main">
        <!--all files to be loaded onload of html file-->
        <script src="./ts/lib/CCapture.all.min.js"></script>
        <script src="./ts/lib/three.js"></script>
        <script src="./ts/lib/Lut.js"></script>
        <script src="./ts/lib/justcontext.js"></script>
        <script src="./ts/controls/TransformControls.js"></script>
        <script src="./ts/controls/TrackballControls.js"></script>
        <script src="./dist/scene/scene_setup.js"></script>
        <script src="./dist/scene/instancing.js"></script>
        <script src="./dist/scene/mesh_setup.js"></script>
        <script src="./dist/file_handling/io.js"></script>
        <script src="./dist/scene/PBC_switchbox.js"></script>
        <script src="./dist/file_handling/file_reading.js"></script>
        <script src="./dist/editing/editing.js"></script>
        <script src="./dist/editing/doUndo.js"></script>
        <script src="./dist/editing/dijkstra.js"></script>
        <script src="./dist/editing/rigid-body_simulation.js"></script>
        <script src="./dist/UI/UI.js"></script>
        <script src="./dist/main.js"></script>
        <script src="./dist/model/basicElement.js"></script>
        <script src="./dist/model/aminoAcid.js"></script>
        <script src="./dist/model/nucleotide.js"></script>
        <script src="./dist/model/DNA.js"></script>
        <script src="./dist/model/RNA.js"></script>
        <script src="./dist/model/strand.js"></script>
        <script src="./dist/model/system.js"></script>
        <script src="./dist/model/anm.js"></script>
        <script src="./dist/model/force.js"></script>
        <script src="./dist/UI/base_selector.js"></script>
        <script src="./dist/UI/keybindings.js"></script>
        <script src="./dist/file_handling/output_file.js"></script>
        <script src="./dist/file_handling/video.js"></script>
        <script src="./dist/editing/translation.js"></script>
        <script src="./ts/controls/SceneUtils.js"></script>
        <script src="./dist/api/scene_api.js"></script>
        <script src="./dist/api/editing_api.js"></script>
        <script src="./dist/api/observable_api.js"></script>
        <script src="./dist/editing/clustering.js"></script>
        <script src="./dist/file_handling/stl_exporter.js"></script>
        <script src="./dist/file_handling/GLTFExporter.js"></script>
        <script src="./dist/ox_serve/relax_scenarios.js"></script>
        <script src="./dist/ox_serve/live_relax.js"></script>
    </div>
</body>

</html>