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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Dune Weaver Controller</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>
<header>
    <h1 id="serial_status_header" class="status">Dune Weaver Controller</h1>
</header>
<div class="app">
    <!-- Home Tab -->
    <main class="tab-content" id="patterns-tab">
        <section class="main">
            <div class="header">
                <h2>Patterns</h2>
                <button class="add-button cta" onclick="toggleSecondaryButtons('add-pattern-container')">+</button>
            </div>
            <div id="add-pattern-container" class="add-to-container hidden">
                <div class="action-buttons">
                    <label for="upload_file">Upload pattern file (.thr):</label>
                    <input type="file" id="upload_file">
                    <button class="cancel" onclick="toggleSecondaryButtons('add-pattern-container')">Cancel</button>
                    <button class="cta" onclick="uploadThetaRho()">Upload</button>
                </div>
            </div>
            <input type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
            <ul id="theta_rho_files" class="file-list"></ul>
        </section>

        <!-- Patterns Preview Section -->
        <section id="pattern-preview-container" class="sticky hidden">
            <div class="header">
                <h2>Preview</h2>
                <button class="fullscreen-button">⛶</button>
                <button class="close-button" onclick="closeStickySection('pattern-preview-container')">&times;</button>
            </div>
            <div id="pattern-preview">
                <canvas id="patternPreviewCanvas"></canvas>
                <div id="first_coordinate"></div>
                <div id="last_coordinate"></div>
            </div>

            <!-- Action Buttons -->
            <div class="action-buttons">
                <button onclick="runThetaRho()" class="cta" >Run</button>
                <button id="toggle-playlist-button" onclick="toggleSecondaryButtons('add-to-playlist-container', populatePlaylistDropdown)">Add to Playlist</button>
                <button onclick="removeCurrentPattern()" class="cancel remove-button hidden">Delete</button>
            </div>

            <!-- Add to Playlist Section -->
            <div id="add-to-playlist-container" class="hidden">
                <h2>Select Playlist</h2>
                <select id="select-playlist"></select>
                <div class="action-buttons">
                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">Cancel</button>
                    <button onclick="saveToPlaylist()" class="cta">Save</button>
                </div>
            </div>
        </section>
    </main>

    <!-- Playlists Tab -->
    <main class="tab-content" id="playlists-tab">
        <section>
            <div class="header">
                <h2>Playlists</h2>
                <button class="cta add-button" onclick="toggleSecondaryButtons('add-playlist-container')">+</button>
            </div>
            <div id="add-playlist-container" class="add-to-container hidden">
                <input type="text" id="new_playlist_name" placeholder="Enter new playlist name" />
                <div class="action-buttons">
                    <button onclick="confirmAddPlaylist()" class="cta">Save</button>
                    <button onclick="toggleSecondaryButtons('add-playlist-container')" class="cancel">Cancel</button>
                </div>
            </div>
            <ul id="all_playlists" class="file-list">
                <!-- Playlists will be dynamically inserted here -->
            </ul>
        </section>

        <!-- Playlist Parameters -->
        <section class="main">
            <h2>Playlist Settings</h2>
            <div class="playlist-parameters">
                <h3>Run Playlist:</h3>
                <div class="control-group">
                    <label class="custom-input">
                        <input type="radio" id="run_single" name="run_mode" value="single" checked>
                        <span class="custom-radio"></span>
                        Once
                    </label>
                    <label class="custom-input">
                        <input type="radio" id="run_indefinite" name="run_mode" value="indefinite">
                        <span class="custom-radio"></span>
                        Indefinitely
                    </label>
                    <label class="custom-input">
                        <input type="checkbox" id="shuffle_playlist">
                        <span class="custom-checkbox"></span>
                        Shuffle
                    </label>
                </div>
                <h3>Between patterns:</h3>
                <div class="control-group">
                    <div class="item column">
                        <label for="pause_time">Pause Time (seconds):</label>
                        <input type="number" id="pause_time" min="0" step="0.1" value="0">
                    </div>
                    <div class="item column">
                        <label for="clear_pattern">Clear Pattern:</label>
                        <select id="clear_pattern">
                            <option value="none">None</option>
                            <option value="clear_in">Clear from In</option>
                            <option value="clear_out">Clear from Out</option>
                            <option value="clear_sideway">Clear Sideway</option>
                            <option value="random">Random</option>
                        </select>
                    </div>
                </div>
                <h3>Schedule:</h3>
                <div class="control-group">
                    <div class="item column">
                        <label for="start_time">Start time</label>
                        <input type="time" id="start_time" min="00:00" max="24:00">
                    </div>
                    <div class="item column">
                        <label for="end_time">End time</label>
                        <input type="time" id="end_time" min="00:00" max="24:00">
                    </div>
                </div>
                <button onclick="clearSchedule()" class="cancel">Clear</button>

            </div>
        </section>

        <!-- Playlist View/Edit Section -->
        <section id="playlist-editor" class="sticky hidden">
            <div class="header">
                <h2 id="playlist_title">Playlist: <span id="playlist_name_display"></span></h2>
                <button class="fullscreen-button" onclick="toggleFullscreen(this)">⛶</button>
                <button class="close-button" onclick="closeStickySection('playlist-editor')">&times;</button>
            </div>
            <ul id="playlist_items" class="file-list">
            </ul>
            <hr/>
            <div class="action-buttons">
                <button onclick="runPlaylist()" class="cta">Play</button>
                <button onclick="toggleSecondaryButtons('rename-playlist-container')">Rename</button>
                <button onclick="deleteCurrentPlaylist()" class="cancel">Delete</button>
                <!-- Save and Cancel buttons -->
                <button onclick="savePlaylist()" class="save-cancel cta" style="display: none;">Save</button>
                <button onclick="cancelPlaylistChanges()" class="save-cancel cancel" style="display: none;">Cancel</button>
            </div>
            <!-- Playlist Rename Section -->
            <div id="rename-playlist-container" class="hidden">
                <input type="text" id="playlist_name_input" placeholder="Enter new playlist name">
                <div class="action-buttons">
                    <button onclick="confirmRenamePlaylist()" class="cta">Save</button>
                    <button onclick="toggleSecondaryButtons('rename-playlist-container')" class="cancel">Cancel</button>
                </div>
            </div>
        </section>
    </main>

    <!-- Device / Settings Tab -->
    <main class="tab-content" id="settings-tab">
        <section>
            <div class="header">
                <h2>Serial Connection</h2>
            </div>
            <div id="serial_status_container">Status: <span id="serial_status" class="status"> Not connected</span></div>
            <div id="serial_ports_container">
                <label for="serial_ports">Available Ports:</label>
                <select id="serial_ports"></select>
                <button onclick="connectSerial()" class="cta">Connect</button>
            </div>
            <div id="serial_ports_buttons" class="button-group">
                <button onclick="disconnectSerial()" class="cancel">Disconnect</button>
                <button onclick="restartSerial()" class="warn">Restart</button>
            </div>
        </section>

        <section class="main">
            <div class="header">
                <h2>Device Controls</h2>
            </div>

            <div class="action-buttons">
                <button onclick="stopExecution()" class="cancel">Stop Execution</button>
                <button id="pausePlayButton" onclick="togglePausePlay()" class="cancel">⏸</button> <!-- Default: Pause Icon -->
                <button onclick="runClearIn()">Clear In</button>
                <button onclick="runClearOut()">Clear Out</button>
                <button onclick="moveToCenter()">Move to Center</button>
                <button onclick="moveToPerimeter()">Move to Perimeter</button>
            </div>
            <h3>Send to Coordinate</h3>
            <div class="control-group">
                <div class="item">
                    <label for="theta_input">θ:</label>
                    <input type="number" id="theta_input" placeholder="Theta">
                </div>
                <div class="item">
                    <label for="rho_input">ρ:</label>
                    <input type="number" id="rho_input" placeholder="Rho">
                </div>
                <div class="item cta">
                    <button onclick="sendCoordinate()">Send</button>
                </div>
            </div>
            <h3>Pre-Execution Action</h3>
            <div class="control-group">
                <label class="custom-input">
                    <input type="radio" name="pre_execution" value="clear_in" id="clear_in">
                    <span class="custom-radio"></span>
                    Clear from In
                </label>
                <label class="custom-input">
                    <input type="radio" name="pre_execution" value="clear_out" id="clear_out">
                    <span class="custom-radio"></span>
                    Clear from Out
                </label>
                <label class="custom-input">
                    <input type="radio" name="pre_execution" value="none" id="no_action" checked>
                    <span class="custom-radio"></span>
                    None
                </label>
            </div>
            <div class="control-group">
                <h3>Speed</h3>
                <div class="item">
                    <input type="number" id="speed_input" placeholder="1-100" min="1" step="1" max="100">
                </div>
                <div class="item cta">
                    <button class="small-button"  onclick="changeSpeed()">Set Speed</button>
                </div>
            </div>
        </section>

        <section class="debug">
            <div id="github">
                <span>Help us improve! <a href="https://github.com/tuanchris/dune-weaver/pulls" target="_blank">Submit a Pull Request</a> or <a
                        href="https://github.com/tuanchris/dune-weaver/issues/new"
                        target="_blank">Report a Bug</a>.</span>
                <a href="https://github.com/tuanchris/dune-weaver/issues" target="_blank">
                    <img src="https://img.shields.io/github/issues/tuanchris/dune-weaver?style=flat-square"
                         alt="GitHub Issues">
                </a>
            </div>
            <button id="debug_button" onclick="toggleDebugLog()">🪲</button>
        </section>
    </main>
</div>

<!-- Tab Navigation -->
<nav class="bottom-nav">
    <button class="tab-button" onclick="switchTab('patterns')" id="nav-patterns">Patterns</button>
    <button class="tab-button" onclick="switchTab('playlists')" id="nav-playlists">Playlists</button>
    <button class="tab-button" onclick="switchTab('settings')" id="nav-settings">Device</button>
</nav>

<div id="status_log">
    <!-- Messages will be appended here -->
</div>

<script src="../static/main.js"></script>
</body>
</html>