Add color order

src/settings.py

@@ -76,6 +76,7 @@ class Settings(dict):
                 elif key == "color_order":
                     if value == "rbg": self.color_order = (1, 5, 3)
                     else: self.color_order = (1, 3, 5)
+                    pass
                 elif key == "id":
                     pass
                 elif key == "led_pin":

src/static/main.css

@@ -98,3 +98,12 @@ input[type="range"]::-moz-range-thumb {
 #connection-status.closed {
     background-color: red;
 }
+
+#color_order_form label,
+#color_order_form input[type="radio"] {
+    /* Ensures they behave as inline elements */
+    display: inline-block;
+    /* Adds some space between them for readability */
+    margin-right: 10px;
+    vertical-align: middle; /* Aligns them nicely if heights vary */
+}

src/static/main.js

@@ -162,6 +162,18 @@ async function updateLedPin(event) {
   sendWebSocketData({ led_pin: parseInt(ledpin) });
 }
 
+function handleRadioChange(event) {
+  event.preventDefault();
+  console.log("Selected color order:", event.target.value);
+  // Add your specific logic here
+  if (event.target.value === "rgb") {
+    console.log("RGB order selected!");
+  } else if (event.target.value === "rbg") {
+    console.log("RBG order selected!");
+  }
+  sendWebSocketData({ color_order: event.target.value });
+}
+
 function createPatternButtons(patterns) {
   const container = document.getElementById("pattern_buttons");
   container.innerHTML = ""; // Clear previous buttons
@@ -205,6 +217,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     .getElementById("brightness")
     .addEventListener("touchend", updateBrightness);
 
+  document.getElementById("rgb").addEventListener("change", handleRadioChange);
+  document.getElementById("rbg").addEventListener("change", handleRadioChange);
   document.querySelectorAll(".pattern_button").forEach((button) => {
     console.log(button.value);
     button.addEventListener("click", async (event) => {

src/templates/index.html

@@ -110,6 +110,13 @@
                 />
                 <input type="submit" value="Update Led Pin" />
             </form>
+            <form id="color_order_form">
+                <label for="rgb">RGB:</label>
+                <input type="radio" id="rgb" name="color_order" value="rgb" {{'checked' if settings["color_order"]=="rgb" else ''}} />
+                <label for="rbg">RBG</label>
+                <input type="radio" id="rbg" name="color_order" value="rbg" {{'checked' if settings["color_order"]=="rbg" else ''}}/>
+            </form>
+
             <p>Mac address: {{mac}}</p>
         </div>
         <div id="connection-status"></div>