Added clear sideways pattern and unified clear options

static/main.js

@@ -213,7 +213,7 @@ async function runThetaRho() {
     }
 
     // Get the selected pre-execution action
-    const preExecutionAction = document.querySelector('input[name="pre_execution"]:checked').value;
+    const preExecutionAction = document.getElementById('pre_execution').value;
 
     logMessage(`Running file: ${selectedFile} with pre-execution action: ${preExecutionAction}...`);
     const response = await fetch('/run_theta_rho', {
@@ -435,6 +435,50 @@ async function runClearOut() {
     await runFile('clear_from_out.thr');
 }
 
+async function runClearSide() {
+    await runFile('side_wiper.thr');
+}
+
+let currentClearAction = 'runClearIn';
+
+function toggleClearDropdown(event) {
+    event.stopPropagation(); // Prevent the main button click event
+    const dropdown = document.getElementById('clear_dropdown');
+    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+}
+
+function updateClearAction(label, actionFunction) {
+    // Update the button label
+    const clearActionLabel = document.getElementById('clear_action_label');
+    clearActionLabel.textContent = label;
+
+    // Update the current action function
+    currentClearAction = actionFunction;
+
+    // Save the new action to a cookie
+    setCookie('clear_action', label, 7);
+
+    // Close the dropdown
+    const dropdown = document.getElementById('clear_dropdown');
+    dropdown.style.display = 'none';
+}
+
+function executeClearAction() {
+    if (currentClearAction && typeof window[currentClearAction] === 'function') {
+        window[currentClearAction](); // Execute the selected clear action
+    } else {
+        logMessage('No clear action selected or function not found.', LOG_TYPE.ERROR);
+    }
+}
+
+// Close the dropdown if clicking outside
+document.addEventListener('click', () => {
+    const dropdown = document.getElementById('clear_dropdown');
+    if (dropdown) dropdown.style.display = 'none';
+});
+// Update the clear button's onclick handler to execute the selected action
+document.getElementById('clear_button').onclick = () => executeClearAction();
+
 async function runFile(fileName) {
     const response = await fetch(`/run_theta_rho_file/${fileName}`, { method: 'POST' });
     const result = await response.json();
@@ -1309,6 +1353,21 @@ function attachFullScreenListeners() {
         button.addEventListener('click', function () {
             const stickySection = this.closest('.sticky'); // Find the closest sticky section
             if (stickySection) {
+                // Close all other sections
+                document.querySelectorAll('.sticky').forEach(section => {
+                    if (section !== stickySection) {
+                        section.classList.remove('fullscreen');
+                        section.classList.remove('visible');
+                        section.classList.add('hidden');
+
+                        // Reset the fullscreen button text for other sections
+                        const otherFullscreenButton = section.querySelector('.fullscreen-button');
+                        if (otherFullscreenButton) {
+                            otherFullscreenButton.textContent = '⛶'; // Enter fullscreen icon/text
+                        }
+                    }
+                });
+
                 stickySection.classList.toggle('fullscreen'); // Toggle fullscreen class
 
                 // Update button icon or text
@@ -1364,9 +1423,13 @@ function saveSettingsToCookies() {
     setCookie('shuffle_playlist', shufflePlaylist, 7);
 
     // Save pre-execution action
-    const preExecution = document.querySelector('input[name="pre_execution"]:checked').value;
+    const preExecution = document.getElementById('pre_execution').value;
     setCookie('pre_execution', preExecution, 7);
 
+    // Save selected clear action
+    const clearAction = document.getElementById('clear_action_label').textContent.trim();
+    setCookie('clear_action', clearAction, 7);
+
     logMessage('Settings saved.');
 }
 
@@ -1399,15 +1462,22 @@ function loadSettingsFromCookies() {
     // Load the pre-execution action
     const preExecution = getCookie('pre_execution');
     if (preExecution !== null) {
-        document.querySelector(`input[name="pre_execution"][value="${preExecution}"]`).checked = true;
-    }
-
-    // Load the selected playlist
-    const selectedPlaylist = getCookie('selected_playlist');
-    if (selectedPlaylist !== null) {
-        const playlistDropdown = document.getElementById('select-playlist');
-        if (playlistDropdown && [...playlistDropdown.options].some(option => option.value === selectedPlaylist)) {
-            playlistDropdown.value = selectedPlaylist;
+        document.getElementById('pre_execution').value = preExecution;
+    }
+
+    // Load selected clear action
+    const clearAction = getCookie('clear_action');
+    if (clearAction !== null) {
+        const clearLabel = document.getElementById('clear_action_label');
+        clearLabel.textContent = clearAction;
+
+        // Update the corresponding action function
+        if (clearAction === 'From Center') {
+            currentClearAction = 'runClearIn';
+        } else if (clearAction === 'From Perimeter') {
+            currentClearAction = 'runClearOut';
+        } else if (clearAction === 'Sideways') {
+            currentClearAction = 'runClearSide';
         }
     }
 
@@ -1423,9 +1493,7 @@ function attachSettingsSaveListeners() {
         input.addEventListener('change', saveSettingsToCookies);
     });
     document.getElementById('shuffle_playlist').addEventListener('change', saveSettingsToCookies);
-    document.querySelectorAll('input[name="pre_execution"]').forEach(input => {
-        input.addEventListener('change', saveSettingsToCookies);
-    });
+    document.getElementById('pre_execution').addEventListener('change', saveSettingsToCookies);
 }
 
 
@@ -1468,7 +1536,6 @@ document.addEventListener('DOMContentLoaded', () => {
     checkSerialStatus(); // Check serial connection status
     loadThetaRhoFiles(); // Load files on page load
     loadAllPlaylists(); // Load all playlists on page load
-    loadSettingsFromCookies(); // Load saved settings
     attachSettingsSaveListeners(); // Attach event listeners to save changes
     attachFullScreenListeners();
 });

static/style.css

@@ -172,6 +172,71 @@ input, select {
     border-color: var(--theme-primary-hover);
 }
 
+.dropdown {
+    position: relative;
+    display: inline-block;
+    min-width: 200px;
+}
+
+.dropdown-button {
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}
+
+.dropdown-button > span {
+    padding: 10px;
+}
+
+.dropdown-toggle {
+    margin-left: 10px;
+    cursor: pointer;
+    user-select: none;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dropdown-toggle:hover {
+    background: var(--text-secondary);
+    color: var(--theme-primary);
+    border-radius: 5px;
+}
+
+.dropdown-content {
+    position: absolute;
+    color: var(--theme-primary);
+    background: var(--text-secondary);
+    min-width: 120px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    display: none;
+    border-radius: 5px
+}
+
+.dropdown-content button {
+    width: 100%;
+    color: var(--theme-primary);
+    background: none;
+    border: none;
+    text-align: left;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.dropdown-content button:hover {
+    background-color: var(--background-primary);
+}
+
+
 /* Buttons */
 button {
     background: var(--theme-primary);
@@ -185,7 +250,7 @@ button {
     transition: background 0.3s ease,color 0.3s ease;
 }
 
-button:not(.close-button, .fullscreen-button, .move-button, .remove-button):hover {
+button:not(.no-bg):hover{
     background: var(--background-info);
 }
 
@@ -285,7 +350,7 @@ section.sticky {
     transform: translateY(0);
     transition: 250ms transform, 250ms height;
     visibility: visible;
-    max-height: 60vh;
+    max-height: 70vh;
     width: 100%;
     z-index: 10;
 }
@@ -442,7 +507,7 @@ section .header .add-button {
 }
 
 .file-list li:hover {
-    background-color: #f1f1f1;
+    background-color: var(--background-primary);
 }
 
 .file-list li.selected {
@@ -495,10 +560,6 @@ section .header .add-button {
     transition: background 0.3s ease;
 }
 
-.rename-button:hover {
-    background: #285A8E;
-}
-
 /* Bottom Navigation */
 .bottom-nav {
     display: flex;
@@ -539,11 +600,16 @@ section .header .add-button {
     gap: 10px;
     flex-wrap: wrap;
     width: 100%;
+    justify-content: flex-end;
 }
 
 .action-buttons button {
     flex: 1;
 }
+.action-buttons button.small {
+    flex: 0;
+    flex-basis: calc(25% - 10px);
+}
 
 .action-buttons button.cta {
     flex-grow: 1;
@@ -569,6 +635,10 @@ button#debug_button.active {
     flex-basis: 100%;
 }
 
+#settings-tab .dropdown {
+    min-width: 50%;
+}
+
 /* Preview Canvas */
 #patternPreviewCanvas {
     width: 100%;

templates/index.html

@@ -35,8 +35,8 @@
         <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>
+                <button class="fullscreen-button no-bg">⛶</button>
+                <button class="close-button no-bg" onclick="closeStickySection('pattern-preview-container')">&times;</button>
             </div>
             <div id="pattern-preview">
                 <canvas id="patternPreviewCanvas"></canvas>
@@ -114,8 +114,8 @@
                         <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_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>
@@ -128,8 +128,8 @@
         <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>
+                <button class="fullscreen-button no-bg">⛶</button>
+                <button class="close-button no-bg" onclick="closeStickySection('playlist-editor')">&times;</button>
             </div>
             <ul id="playlist_items" class="file-list">
             </ul>
@@ -162,11 +162,20 @@
 
             <div class="action-buttons">
                 <button onclick="stopExecution()" class="cancel">Stop Current Pattern</button>
-                <button onclick="runClearIn()">Clear In</button>
-                <button onclick="runClearOut()">Clear Out</button>
-                <button onclick="sendHomeCommand()" class="warn">Home</button>
+                <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 onclick="updateClearAction('From Center', 'runClearIn')">Clear From Center</button>
+                        <button onclick="updateClearAction('From Perimeter', 'runClearOut')">Clear From Perimeter</button>
+                        <button onclick="updateClearAction('Sideways', 'runClearSide')">Clear Sideways</button>
+                    </div>
+                </div>
                 <button onclick="moveToCenter()">Move to Center</button>
                 <button onclick="moveToPerimeter()">Move to Perimeter</button>
+                <button onclick="sendHomeCommand()" class="small warn">Home</button>
             </div>
             <h3>Send to Coordinate</h3>
             <div class="control-group">
@@ -184,21 +193,12 @@
             </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>
+                <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>