Update web interface to use colors array instead of color1/color2

src/static/main.css

@@ -107,3 +107,57 @@ input[type="range"]::-moz-range-thumb {
     margin-right: 10px;
     vertical-align: middle; /* Aligns them nicely if heights vary */
 }
+
+#colors_palette {
+    margin-bottom: 20px;
+}
+
+#colors_container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.color-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.color-input {
+    width: 60px !important;
+    height: 40px;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.remove-color-btn {
+    background-color: #f44336;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+}
+
+.remove-color-btn:hover {
+    background-color: #da190b;
+}
+
+#add_color_btn {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#add_color_btn:hover {
+    background-color: #45a049;
+}

src/static/main.js

@@ -1,7 +1,6 @@
 let delayTimeout;
 let brightnessTimeout;
-let colorTimeout;
+let colorsTimeout;
-let color2Timeout;
 let ws; // Variable to hold the WebSocket connection
 let connectionStatusElement; // Variable to hold the connection status element
 
@@ -98,22 +97,60 @@ async function get(path) {
   }
 }
 
-async function updateColor(event) {
+function updateColors() {
-  event.preventDefault();
+  clearTimeout(colorsTimeout);
-  clearTimeout(colorTimeout);
+  colorsTimeout = setTimeout(function () {
-  colorTimeout = setTimeout(function () {
+    const colorInputs = document.querySelectorAll(".color-input");
-    const color = document.getElementById("color").value;
+    const colors = Array.from(colorInputs).map(input => input.value);
-    sendWebSocketData({ color1: color });
+    sendWebSocketData({ colors: colors });
   }, 500);
 }
 
-async function updateColor2(event) {
+function addColorInput(color = "#ff0000") {
-  event.preventDefault();
+  const container = document.getElementById("colors_container");
-  clearTimeout(color2Timeout);
+  const colorDiv = document.createElement("div");
-  color2Timeout = setTimeout(function () {
+  colorDiv.className = "color-item";
-    const color = document.getElementById("color2").value;
+  
-    sendWebSocketData({ color2: color });
+  const colorInput = document.createElement("input");
-  }, 500);
+  colorInput.type = "color";
+  colorInput.className = "color-input";
+  colorInput.value = color;
+  colorInput.addEventListener("input", updateColors);
+  
+  const removeBtn = document.createElement("button");
+  removeBtn.type = "button";
+  removeBtn.textContent = "×";
+  removeBtn.className = "remove-color-btn";
+  removeBtn.addEventListener("click", function() {
+    colorDiv.remove();
+    updateColors();
+  });
+  
+  colorDiv.appendChild(colorInput);
+  colorDiv.appendChild(removeBtn);
+  container.appendChild(colorDiv);
+}
+
+function initializeColors(initialColors = null) {
+  const container = document.getElementById("colors_container");
+  container.innerHTML = "";
+  // Get initial colors from data attribute or use defaults
+  if (initialColors === null) {
+    const colorsData = document.getElementById("colors_container").dataset.colors;
+    if (colorsData) {
+      try {
+        initialColors = JSON.parse(colorsData);
+      } catch (e) {
+        initialColors = ["#ff0000", "#00ff00"];
+      }
+    } else {
+      initialColors = ["#ff0000", "#00ff00"];
+    }
+  }
+  if (initialColors.length === 0) {
+    initialColors = ["#ff0000"];
+  }
+  initialColors.forEach(color => addColorInput(color));
 }
 
 async function updatePattern(pattern) {
@@ -198,8 +235,11 @@ document.addEventListener("DOMContentLoaded", async function () {
   // Establish WebSocket connection on page load
   connectWebSocket();
 
-  document.getElementById("color").addEventListener("input", updateColor);
+  // Initialize colors palette
-  document.getElementById("color2").addEventListener("input", updateColor2);
+  initializeColors();
+  document.getElementById("add_color_btn").addEventListener("click", function() {
+    addColorInput();
+  });
   document.getElementById("delay").addEventListener("input", updateDelay);
   document
     .getElementById("brightness")

src/templates/index.html

@@ -1,4 +1,4 @@
-{% args settings, patterns, mac %}
+{% args settings, patterns, colors_json, mac %}
 <!doctype html>
 <html lang="en">
     <head>
@@ -46,22 +46,13 @@
                     step="1"
                 />
             </form>
-            <form id="color_form" method="post" action="/color">
+            <div id="colors_palette">
-                <input
+                <label>Colors:</label>
-                    type="color"
+                <div id="colors_container" data-colors='{{colors_json}}'>
-                    id="color"
+                    <!-- Color inputs will be added here dynamically -->
-                    name="color"
+                </div>
-                    value="{{settings['color1']}}"
+                <button type="button" id="add_color_btn">+ Add Color</button>
-                />
+            </div>
-            </form>
-            <form id="color2_form" method="post" action="/color2">
-                <input
-                    type="color"
-                    id="color2"
-                    name="color2"
-                    value="{{settings['color2']}}"
-                />
-            </form>
         </div>
 
         <!-- Settings Menu for num_leds, Wi-Fi SSID, and Password -->

src/web.py

@@ -12,7 +12,19 @@ def web(settings, patterns):
     @app.route('/')
     async def index_hnadler(request):
         mac = wifi.get_mac().hex()
-        return Template('index.html').render(settings=settings, patterns=patterns.patterns.keys())
+        # Convert colors from RGB tuples to hex strings for display
+        colors_hex = []
+        for color in patterns.colors:
+            # Convert (R, G, B) tuple to #RRGGBB hex string
+            colors_hex.append(f"#{color[0]:02x}{color[1]:02x}{color[2]:02x}")
+        # Convert to JSON string for data attribute
+        colors_json = json.dumps(colors_hex)
+        return Template('index.html').render(
+            settings, 
+            patterns.patterns.keys(),
+            colors_json,
+            mac
+        )
 
     @app.route("/static/<path:path>")
     def static_handler(request, path):