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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578
							<!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">
    <link rel="stylesheet" href="../static/css/image2sand.css">
    <link rel="apple-touch-icon" sizes="180x180" href="../static/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../static/favicon-16x16.png">
    <link rel="manifest" href="../static/site.webmanifest">
</head>
<body>
<header>
    <h1 id="connection_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>
                <button class="gen-button cta" onclick="toggleSecondaryButtons('generate')">
                    <i class="fa-solid fa-robot"></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) or image (.jpg, .png, etc.):</label>
                    <input type="file" id="upload_file" accept=".thr,.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg">
                    <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>
            <div id="generate" class="add-to-container hidden">
                <div class="action-buttons">
                    <div id="api-key-group"></div>
                    <input type="password" id="api-key" placeholder="Enter a valid OpenAI API key">
                    <input type="text" id="prompt" placeholder="What do you want to draw?" maxlength="500">
                    <div class="checkbox-container">
                        <label class="custom-input">
                            <input type="checkbox" id="googly-eyes" name="googly-eyes">
                            <span class="custom-checkbox"></span>
                            Add googly eyes
                        </label>
                    </div>

                    <div class="action-buttons">
                        <button id="gen-image-button" class="cta">
                            <i class="fa-solid fa-wand-sparkles"></i>
                            <span>Create</span>
                        </button>
                        <button class="cancel" onclick="toggleSecondaryButtons('generate')">
                            <i class="fa-solid fa-xmark"></i>
                            <span>Cancel</span>
                        </button>
                    </div>
                </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">
                    <i class="fa-solid fa-expand"></i>
                </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">
                <div class="pre-execution">
                    <h3>Pre-Execution Action</h3>
                    <div class="control-group">
                        <select id="pre_execution" name="pre_execution">
                            <option value="none" selected>None</option>
                            <option value="adaptive">Adaptive</option>
                            <option value="clear_from_in">Clear From Center</option>
                            <option value="clear_from_out">Clear From Perimeter</option>
                            <option value="clear_sideway">Clear Sideway</option>
                        </select>
                    </div>
                </div>
                <button onclick="runThetaRho()" class="cta" >
                    <i class="fa-solid fa-play"></i>
                    <span>Play</span>
                </button>
                <button id="toggle-playlist-button" onclick="toggleSecondaryButtons('add-to-playlist-container', populatePlaylistDropdown)">
                    <i class="fa-solid fa-list-ul"></i>
                    <span class="small">Add to Playlist</span>
                </button>
                <button onclick="removeCurrentPattern()" class="cancel remove-button hidden">
                    <i class="fa-solid fa-trash"></i>
                    <span class="small">Delete</span>
                </button>
            </div>

            <!-- Add to Playlist Section -->
            <div id="add-to-playlist-container" class="hidden">
                <h3>Select Playlist</h3>
                <select id="select-playlist"></select>
                <div class="action-buttons">
                    <button onclick="saveToPlaylist()" class="cta">
                        <i class="fa-solid fa-floppy-disk"></i>
                        <span>Save</span>
                    </button>
                    <button onclick="toggleSecondaryButtons('add-to-playlist-container')" class="cancel">
                        <i class="fa-solid fa-xmark"></i>
                        <span class="small">Cancel</span>
                    </button>
                </div>
            </div>
        </section>

        <section id="image-converter" class="sticky hidden fullscreen">
            <div class="header">
                <h2>Convert Image to Pattern</h2>
                <button class="close-button no-bg" onclick="closeImageConverter()">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="image-converter-content grid">
                <div id="processing-status" class="processing-indicator">
                    <div class="spinner"></div>
                    <span id="processing-message">Processing image...</span>
                </div>
                <div class="image-converter-steps">
                    <div class="tab-content" id="original-tab" data-group="image-converter">
                        <canvas id="original-image"></canvas>
                    </div>

                    <div class="tab-content" id="edge-tab" data-group="image-converter">
                        <canvas id="edge-image"></canvas>
                    </div>

                    <div class="tab-content" id="dot-tab" data-group="image-converter">
                        <canvas id="dot-image"></canvas>
                    </div>

                    <div class="tab-container">
                        <button class="tab-button" onclick="switchTab('original', 'image-converter')" id="nav-original" data-group="image-converter">Original Image</button>
                        <button class="tab-button" onclick="switchTab('edge', 'image-converter')" id="nav-edge" data-group="image-converter">Detected Edges</button>
                        <button class="tab-button" onclick="switchTab('dot', 'image-converter')" id="nav-dot" data-group="image-converter">Identified Points</button>
                    </div>

                </div>

                <div class="image-converter-settings">
                    <div class="setting-item">
                        <label for="epsilon-slider">Detail Level</label>
                        <div class="slider-container">
                            <input type="range" id="epsilon-slider" min="0.1" max="20" step="0.1" value="0.5">
                            <div class="slider-labels">
                                <small>Fine</small>
                                <small id="epsilon-value-display">0.5</small>
                                <small>Coarse</small>
                            </div>
                        </div>
                    </div>
                    <div class="setting-item">
                        <label for="dot-number">Point Limit</label>
                        <select id="dot-number">
                            <option value="100">100 points</option>
                            <option value="200">200 points</option>
                            <option value="300">300 points</option>
                            <option value="400">400 points</option>
                            <option value="500" selected>500 points</option>
                            <option value="1000">1000 points</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label for="contour-mode">Contour Mode</label>
                        <select id="contour-mode">
                            <option value="External">External Only</option>
                            <option value="Tree" selected>External + Internal</option>
                        </select>
                    </div>
                    <div class="control-group">
                        <label class="custom-input">
                            <input type="checkbox" id="is-loop" checked>
                            <span class="custom-checkbox"></span>
                            Loop Drawing
                        </label>
                        <label class="custom-input">
                            <input type="checkbox" id="no-shortcuts" checked>
                            <span class="custom-checkbox"></span>
                            No Shortcuts
                        </label>
                    </div>
                    <input type="hidden" id="output-type" value="2">
                    <div class="generate-button-container">
                        <button id="generate-button" class="cta" onclick="regeneratePattern()">
                            <i class="fa-solid fa-wand-magic-sparkles"></i>
                            <span>Regenerate Pattern</span>
                        </button>
                    </div>
                </div>

                <div class="sand-garden-preview">
                    <h3>Sand Garden Preview</h3>
                    <canvas id="connect-image"></canvas>
                    <div id="total-points"></div>
                    <div style="display: none;">
                        <h4>contours</h4>
                        <canvas id="plotcontours" width="400" height="400" style="border:1px solid #000000;"></canvas>
                        <button id="plotButton">Plot Next Contour</button>
                    </div>
                </div>

                <div style="display: none;">
                    <!-- hidden inputs for image2sand compatibility. -->
                    <label id="generation-status" style="display: none;">Image is generating - please wait...</label>
                    <textarea id="polar-coordinates-textarea"></textarea>
                    <div id="simple-coords"></div>
                    <div id="simple-coords-title"></div>
                    <input type="checkbox" id="gaussian-blur-toggle">
                    <div>
                        <input type="file" id="file-input">
                        <button id="file-button"></button>
                        <span id="file-name"></span>
                    </div>
                </div>
            </div>
            <div class="image-converter-actions">
                <button class="cancel" onclick="closeImageConverter()">
                    <i class="fa-solid fa-xmark"></i>
                    <span>Cancel</span>
                </button>
                <button class="cta" id="save-pattern-button" onclick="saveConvertedPattern()">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>Save Pattern</span>
                </button>
            </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="adaptive">Adaptive</option>
                            <option value="clear_from_in">Clear From Center</option>
                            <option value="clear_from_out">Clear From Perimeter</option>
                            <option value="clear_sideway">Clear Sideways</option>
                            <option value="random">Random</option>
                        </select>
                    </div>
                </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>
            <div class="action-buttons">
                <button onclick="runPlaylist()" class="cta">
                    <i class="fa-solid fa-play"></i>
                    <span>Play</span>
                </button>
                <button onclick="toggleSecondaryButtons('rename-playlist-container')">
                    <i class="fa-solid fa-pencil"></i>
                    <span class="small">Rename</span>
                </button>
                <button onclick="deleteCurrentPlaylist()" class="cancel">
                    <i class="fa-solid fa-trash"></i>
                    <span class="small">Delete</span>
                </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 class="small">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>
                <button id="open-settings-button" class="no-bg" onclick="toggleSettings()">
                    <i class="fa-solid fa-gears"></i>
                    <span class="small">Settings</span>
                </button>
            </div>
            <div class="action-buttons square">
                <button onclick="stopExecution()" class="cancel"><i class="fa-solid fa-stop"></i><span class="small">Stop</span></button>
                <button onclick="moveToCenter()" class="cta"><i class="fa-regular fa-circle-dot"></i><span class="small">Move to Center</span></button>
                <button onclick="moveToPerimeter()" class="cta"><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 class="scrollable-selection">
                    <div class="selection-container">
                        <div id="clear_selection" class="selection-items">
                            <div id="runClearIn" class="selection-item" onclick="executeClearAction('runClearIn')">Clear From Center</div>
                            <div id="runClearOut" class="selection-item" onclick="executeClearAction('runClearOut')">Clear From Perimeter</div>
                            <div id="runClearSide" class="selection-item" onclick="executeClearAction('runClearSide')">Clear Sideways</div>
                        </div>
                        <div class="nav-items">
                            <button class="scroll-arrow up-arrow" onclick="scrollSelection(-1)">▲</button>
                            <button class="scroll-arrow down-arrow" onclick="scrollSelection(1)">▼</button>
                        </div>
                    </div>
                </div>
            </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()" class="cta">
                        <i class="fa-solid fa-map-pin"></i><span class="small">Send</span>
                    </button>
                </div>
            </div>
            <div class="control-group">
                <h3>Speed</h3>
                <div class="item">
                    <span id="current_speed_display">Current Speed: 0</span>
                </div>
                <div class="item">
                    <input type="number" id="speed_input" placeholder="1-1000" min="1" step="1" max="1000">
                </div>
                <div class="item cta">
                    <button class="small-button cta" onclick="changeSpeed()">
                        <i class="fa-solid fa-gauge-high"></i>
                        <span class="small">Set Speed</span>
                    </button>
                </div>
            </div>
            <!-- LED Control Panel -->
            <div id="wled-container" class="hidden">
                <h3>WLED Controller</h3>
                <iframe id="wled-frame" src="" width="100%" height="400px" frameborder="0"></iframe>
                <p id="wled-status"></p>
            </div>
        </section>

        <section id="settings-container">
            <div class="header">
                <h2>Settings</h2>
                <button id="theme-toggle" class="no-bg">
                    <i class="fas fa-moon"></i>
                </button>
                <button class="close-button no-bg" onclick="toggleSettings()">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <section>
                <div class="header">
                    <h2>Device 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">
                        <i class="fa-solid fa-link"></i>
                        <span>Connect</span>
                    </button>
                </div>
                <div id="serial_ports_buttons" class="button-group">
                    <button onclick="disconnectSerial()" class="cancel">
                        <i class="fa-solid fa-link-slash"></i><span>Disconnect</span></button>
                    <button onclick="restartSerial()" class="warn">
                        <i class="fa-solid fa-rotate-left"></i><span>Restart</span></button>
                </div>
            </section>

            <section class="wled-settings">
                <div class="header">
                    <h2>WLED Configuration</h2>
                </div>
                <div class="control-group">
                    <div class="item">
                        <input type="text" id="wled_ip" placeholder="WLED IP Address">
                        <button class="cta" onclick="saveWledIp()">
                            <i class="fa-solid fa-save"></i>
                            <span>Save</span>
                        </button>
                    </div>
                </div>
            </section>

            <section class="software version">
                <div class="header">
                    <h2>Software Version</h2>
                </div>
                <div id="git_version_info">
                    <div id="current_git_version">Current Version: Unknown</div>
                    <div id="latest_git_version">Latest Version: Unknown</div>
                    <div id="update_link" class="hidden"></div>
                </div>
                <div class="button-group">
                    <button id="update-software-btn" class="hidden cta" onclick="updateSoftware()">
                        <i class="fa-solid fa-download"></i>
                        <span>Update Software</span>
                    </button>
                </div>
            </section>

            <section class="debug main">
                <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()">
                    <i class="fa-solid fa-bug"></i>
                </button>
            </section>
        </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">
            <div class="file-info">
                <h3 id="currently-playing-file"></h3>
                <h4 id="next-file"></h4>
            </div>
            <p id="currently-playing-position"></p>
            <div class="play-buttons">
                <button id="skipCurrent" onclick="skipPattern()" class="cta">
                    <i class="fa-solid fa-step-forward"></i>
                </button>
                <button id="stopCurrent" onclick="stopExecution()" class="cancel">
                    <i class="fa-solid fa-stop"></i>
                </button>
                <button id="pausePlayCurrent" class="cta" onclick="togglePausePlay()">
                    <i class="fa-solid fa-pause"></i>
                </button>
            </div>
        </div>
        <div id="progress-container">
            <progress id="play_progress" value="0" max="100"></progress>
            <div id="play_progress_text">0%</div>
        </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>
<script src="../static/js/image2sand.js"></script>
<script src="../static/js/image2sand-init.js"></script>
<script async src="../static/js/opencv.js" onload="console.log('OpenCV.js loaded successfully')"></script>
</body>
</html>