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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
							<!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/css/style.css">
    <link rel="stylesheet" href="../static/css/all.min.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')">
                    <i class="fa-solid fa-plus"></i>
                </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="cta" onclick="uploadThetaRho()">
                        <i class="fa-solid fa-file-arrow-up"></i>
                        <span>Upload</span>
                    </button>
                    <button class="cancel" onclick="toggleSecondaryButtons('add-pattern-container')">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Cancel</span>
                    </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 no-bg">⛶</button>
                <button class="close-button no-bg" onclick="closeStickySection('pattern-preview-container')">
                    <i class="fa-solid fa-xmark"></i>
                </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">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Cancel</span>
                    </button>
                    <button onclick="saveToPlaylist()" class="cta">
                        <i class="fa-solid fa-floppy-disk"></i>
                        <span>Save</span>
                    </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')">
                    <i class="fa-solid fa-plus"></i>
                </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">
                        <i class="fa-solid fa-floppy-disk"></i>
                        <span>Save</span>
                    </button>
                    <button onclick="toggleSecondaryButtons('add-playlist-container')" class="cancel">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Cancel</span>
                    </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 Center</option>
                            <option value="clear_out">Clear From Perimeter</option>
                            <option value="clear_sideway">Clear Sideways</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>
                    <button id="clear_time" onclick="clearSchedule()" style="display: none" class="small cancel">
                        <i class="fa-solid fa-delete-left"></i>
                    </button>
                </div>
            </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 no-bg">
                    <i class="fa-solid fa-expand"></i>
                </button>
                <button class="close-button no-bg" onclick="closeStickySection('playlist-editor')">
                    <i class="fa-solid fa-xmark" ></i>
                </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;">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>Save</span>
                </button>
                <button onclick="cancelPlaylistChanges()" class="save-cancel cancel" style="display: none;">
                    <i class="fa-solid fa-xmark"></i>
                    <span>Cancel</span>
                </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">
                        <i class="fa-solid fa-floppy-disk"></i>
                        <span>Save</span>
                    </button>
                    <button onclick="toggleSecondaryButtons('rename-playlist-container')" class="cancel">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Cancel</span>
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- Device / Settings Tab -->
    <main class="tab-content" id="settings-tab">
        <section class="main">
            <div class="header">
                <h2>Device Controls</h2>
            </div>

            <div class="action-buttons square">
                <div class="dropdown">
                    <button id="clear_button" class="dropdown-button" onclick="executeClearAction()">
                        <span>Clear <span id="clear_action_label">From Center</span></span>
                        <span id="dropdown_toggle" class="dropdown-toggle" onclick="toggleClearDropdown(event)">▼</span>
                    </button>
                    <div id="clear_dropdown" class="dropdown-content" style="display: none;">
                        <button class="no-bg" onclick="updateClearAction('From Center', 'runClearIn')">Clear From Center</button>
                        <button class="no-bg" onclick="updateClearAction('From Perimeter', 'runClearOut')">Clear From Perimeter</button>
                        <button class="no-bg" onclick="updateClearAction('Sideways', 'runClearSide')">Clear Sideways</button>
                    </div>
                </div>
                <button onclick="moveToCenter()"><i class="fa-solid fa-circle-dot"></i><span class="small">Move to Center</span></button>
                <button onclick="moveToPerimeter()"><i class="fa-solid fa-circle-notch"></i><span class="small">Move to Perimeter</span></button>
                <button onclick="sendHomeCommand()" class="warn"><i class="fa-solid fa-house"></i><span class="small">Home</span></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()">
                        <i class="fa-solid fa-map-pin"></i><span>Send</span>
                    </button>
                </div>
            </div>
            <h3>Pre-Execution Action</h3>
            <div class="control-group">
                <select id="pre_execution" name="pre_execution">
                    <option value="none" selected>None</option>
                    <option value="clear_in">Clear From Center</option>
                    <option value="clear_out">Clear From Perimeter</option>
                    <option value="clear_sideway">Clear Sideway</option>
                </select>
            </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()"><i class="fa-solid fa-gauge-high"></i><span>Set Speed</span></button>
                </div>
            </div>
        </section>

        <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"><span class="small">Connect</span></button>
            </div>
            <div id="serial_ports_buttons" class="button-group">
                <button onclick="disconnectSerial()" class="cancel">
                    <i class="fa-solid fa-power-off"></i><span class="small">Disconnect</span></button>
                <button onclick="restartSerial()" class="warn">
                    <i class="fa-solid fa-rotate-left"></i><span class="small">Restart</span></button>
            </div>
        </section>

        <section class="version">
            <div class="header">
                <h2>Firmware Update</h2>
            </div>
            <div id="firmware_info">
                <div id="motor_type"></div>
                <div id="current_firmware_version"></div>
                <div id="new_firmware_version"></div>
            </div>
            <div class="button-group">
                <div id="motor_selection" style="display: none;">
                    <h3>Select installed motor driver</h3>
                    <select id="manual_motor_type">
                        <option value="TMC2209">Arduino TMC2209</option>
                        <option value="DRV8825">Arduino DRV8825</option>
                        <option value="esp32">ESP32</option>
                    </select>
                    <button id="set_motor_type_button" onclick="setMotorType()">Set Motor Type</button>
                </div>
                <button id="check_updates_button" onclick="fetchFirmwareInfo()">Check for Updates</button>
                <button id="update_firmware_button" class="cta" style="display: none;" onclick="updateFirmware()">Update Firmware</button>
            </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">
    <section id="currently-playing-container" class="sticky">
        <div class="header">
<!--            <button class="open-button no-bg" onclick="openStickySection('currently-playing-container')">^</button>-->
        </div>
        <div id="currently-playing-preview">
            <canvas id="currentlyPlayingCanvas"></canvas>
        </div>
        <div id="currently-playing-details">
            <h2 id="currently-playing-file"></h2>
            <p id="currently-playing-position"></p>
        </div>
        <div class="play-buttons">
            <button id="stopCurrent" onclick="stopExecution()" class="cancel">■</button>
            <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">⏸</button>
        </div>
        <div id="progress-container">
            <progress id="play_progress" value="0" max="100"></progress>
            <h3 id="play_progress_text">0%</h3>
        </div>
    </section>
    <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/js/main.js"></script>
</body>
</html>