clean up UI

static/js/led-control.js

@@ -311,6 +311,9 @@ async function initializeDWLedsControls() {
 
     // Update remaining time periodically
     setInterval(updateIdleTimeoutRemaining, 60000); // Update every minute
+
+    // Initialize Coloris color picker for effect colors
+    initializeColoris();
 }
 
 // Save current LED settings as idle or playing effect
@@ -747,9 +750,18 @@ async function checkDWLedsStatus() {
                 const color2 = document.getElementById('dw-leds-color2');
                 const color3 = document.getElementById('dw-leds-color3');
 
-                if (color1 && data.colors[0]) color1.value = data.colors[0];
-                if (color2 && data.colors[1]) color2.value = data.colors[1];
-                if (color3 && data.colors[2]) color3.value = data.colors[2];
+                if (color1 && data.colors[0]) {
+                    color1.value = data.colors[0];
+                    updateColorPickerStyle(color1, data.colors[0]);
+                }
+                if (color2 && data.colors[1]) {
+                    color2.value = data.colors[1];
+                    updateColorPickerStyle(color2, data.colors[1]);
+                }
+                if (color3 && data.colors[2]) {
+                    color3.value = data.colors[2];
+                    updateColorPickerStyle(color3, data.colors[2]);
+                }
             }
         } else {
             // Show error message from controller
@@ -761,5 +773,48 @@ async function checkDWLedsStatus() {
     }
 }
 
+// Helper function to update color picker background
+function updateColorPickerStyle(input, color) {
+    if (!input || !color) return;
+    input.style.backgroundColor = color;
+}
+
+// Initialize Coloris color picker
+function initializeColoris() {
+    // Initialize Coloris with custom configuration
+    Coloris({
+        theme: 'polaroid',
+        themeMode: 'auto',
+        formatToggle: true,
+        alpha: false,  // No transparency for LED colors
+        swatches: [
+            '#ff0000',  // Red
+            '#00ff00',  // Green
+            '#0000ff',  // Blue
+            '#ffff00',  // Yellow
+            '#ff00ff',  // Magenta
+            '#00ffff',  // Cyan
+            '#ff8000',  // Orange
+            '#ffffff',  // White
+            '#2a9d8f',  // Teal
+            '#e9c46a',  // Sand
+            'coral',    // Coral
+            'Crimson'   // Crimson
+        ],
+        onChange: (color, input) => {
+            // Update the input background to show the selected color
+            updateColorPickerStyle(input, color);
+        }
+    });
+
+    // Apply Coloris to all effect color pickers and set initial background colors
+    const colorPickers = document.querySelectorAll('.effect-color-picker');
+    colorPickers.forEach(picker => {
+        picker.setAttribute('data-coloris', '');
+        // Set initial background color and text color
+        updateColorPickerStyle(picker, picker.value);
+    });
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', initializeLedPage);

templates/led.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %} {% block title %}LED Control - {{ app_name or 'Dune Weaver' }}{% endblock %}
 
+{% block additional_head %}
+<link rel="stylesheet" href="/static/css/coloris.min.css">
+{% endblock %}
+
 {% block additional_styles %}
 /* Dark mode styles for LED page */
 .dark .bg-white {
@@ -84,6 +88,22 @@
 .dark iframe {
   border-color: #404040;
 }
+
+/* Hide hex input in Coloris picker */
+.clr-field input {
+  display: none !important;
+}
+.clr-field button {
+  display: none !important;
+}
+
+/* Hide text inside the circular color pickers */
+.effect-color-picker {
+  color: transparent !important;
+  text-indent: -9999px;
+  font-size: 0;
+  caret-color: transparent;
+}
 {% endblock %}
 
 {% block content %}
@@ -199,15 +219,15 @@
         <h3 class="text-slate-800 text-base font-semibold">Effect Colors:</h3>
         <div class="flex items-center gap-2">
           <label class="text-xs font-medium text-slate-600">Slot 1</label>
-          <input type="color" id="dw-leds-color1" value="#ff0000" class="w-14 h-14 rounded-lg border-2 border-slate-300 cursor-pointer effect-color-picker">
+          <input type="text" id="dw-leds-color1" value="#ff0000" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
         </div>
         <div class="flex items-center gap-2">
           <label class="text-xs font-medium text-slate-600">Slot 2</label>
-          <input type="color" id="dw-leds-color2" value="#000000" class="w-14 h-14 rounded-lg border-2 border-slate-300 cursor-pointer effect-color-picker">
+          <input type="text" id="dw-leds-color2" value="#000000" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
         </div>
         <div class="flex items-center gap-2">
           <label class="text-xs font-medium text-slate-600">Slot 3</label>
-          <input type="color" id="dw-leds-color3" value="#0000ff" class="w-14 h-14 rounded-lg border-2 border-slate-300 cursor-pointer effect-color-picker">
+          <input type="text" id="dw-leds-color3" value="#0000ff" class="w-8 h-8 rounded-full border-2 border-slate-300 cursor-pointer effect-color-picker text-transparent" readonly>
         </div>
       </div>
 
@@ -336,5 +356,6 @@
 
 </div>
 
+<script src="/static/js/coloris.min.js"></script>
 <script src="/static/js/led-control.js"></script>
 {% endblock %}