dyadmisha
/
dune-weaver
mirror of https://github.com/tuanchris/dune-weaver.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sand Table Playlist</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>
    <h1>Manage and Run Playlists</h1>
    <div class="container">

        <!-- Section to build the playlist -->
        <div class="left-column">
            <div class="section">
                <h2>Create Playlist</h2>
                <p>Add .thr files to your playlist below.</p>
                <input type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
                <ul id="theta_rho_files"></ul>
            </br>
                <button onclick="addToPlaylist()">Add to Playlist</button>
                <ul id="playlist_files"></ul>
            </div>
            <div class="section">
                <h2>Preview</h2>
                <canvas id="patternPreviewCanvas" style="width: 100%; height: 100%;"></canvas>
                <p id="first_coordinate">First Coordinate: Not available</p>
                <p id="last_coordinate">Last Coordinate: Not available</p>
            </div>
        </div>

        <!-- Section to set parameters -->
        <div class="right-column">
            <div class="section">
                <h2>Pattern Files</h2>
                <label for="pause_time">Pause between patterns (min):</label>
                <input type="number" id="pause_time" value="0" step="1" min="0">

                <br><br>
                <label for="clear_pattern">Clear Pattern:</label>
                <select id="clear_pattern">
                    <option value="no_clear">No Clear</option>
                    <option value="clear_from_in">Clear from In</option>
                    <option value="clear_from_out">Clear from Out</option>
                    <option value="clear_sideway">Clear Sideway</option>
                    <option value="random">Random</option>
                </select>
                <div class="button-group">
                    <button onclick="runPlaylist()">Run Playlist</button>
                    <button onclick="stopExecution()" class="delete-button">Stop</button>
                </div>
            </div>
        </div>

        <!-- Status/Log -->
        <div id="status_log">
            <h2>Playlist Status</h2>
            <!-- Messages will be appended here -->
        </div>
    </div>
</body>
</html>