feat(web-ui): Implement custom numerical input with [-] [0] [+] buttons. Replaced default up/down adjustment buttons for numerical inputs in the Lamp Matrix Control with a custom [-] [0] [+] button layout, including HTML structure, CSS styling, and JavaScript logic.

src/unified_web_ui/static/style.css

@@ -159,7 +159,7 @@ h1 {
 
 .slider-row {
     display: grid;
-    grid-template-columns: 150px 1fr 50px;
+    grid-template-columns: 150px 1fr 50px; /* Adjusted last column for number input buttons */
     gap: 10px;
     align-items: center;
 }
@@ -174,15 +174,24 @@ h1 {
 }
 
 .slider-group input[type="number"] {
-    width: 100%;
+    -webkit-appearance: none; /* Hide default spinner for Chrome, Safari */
+    -moz-appearance: textfield; /* Hide default spinner for Firefox */
+    text-align: center; /* Center the number */
+    width: auto; /* Allow flex-grow to manage width */
     font-size: 14px;
-    text-align: center;
+    border: none; /* Will be part of the new control's border */
-    border: none;
+    border-radius: 0; /* No radius on its own if part of a group */
-    border-radius: 5px;
     padding: 5px;
     background-color: #333; /* Adapted to theme */
     color: #ffffff;
 }
+/* Specifically hide number input spinner buttons */
+.slider-group input[type="number"]::-webkit-inner-spin-button,
+.slider-group input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
 
 .slider-group input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
@@ -216,6 +225,53 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     color: #888;
 }
 
+/* --- New styles for number input controls --- */
+.number-input-controls {
+    display: flex;
+    align-items: stretch; /* Stretch children to fill container height */
+    gap: 2px; /* Small gap between buttons and input */
+    flex-shrink: 0; /* Prevent the control group from shrinking in the grid */
+}
+
+.number-input-controls input[type="number"] {
+    flex-grow: 1; /* Make it fill available space */
+    text-align: center;
+    border: 1px solid #64ffda; /* Border for the number input */
+    border-radius: 5px;
+    background-color: #333;
+    color: #ffffff;
+    min-width: 40px; /* Ensure it doesn't get too small */
+}
+
+.number-input-controls button {
+    width: 30px; /* Fixed width */
+    background-color: #64ffda; /* Accent color */
+    color: #1a1a1a; /* Dark text */
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    display: flex; /* Center content */
+    justify-content: center;
+    align-items: center;
+    line-height: 1; /* Prevent extra height from line-height */
+    padding: 0; /* Remove default button padding */
+}
+.number-input-controls button:hover {
+    background-color: #4ed8bd; /* Lighter accent on hover */
+}
+.number-input-controls button:active {
+    background-color: #3cb89f; /* Darker accent on click */
+}
+
+/* Adjust slider-row grid to accommodate new number input controls */
+.slider-row {
+    grid-template-columns: 150px 1fr 100px; /* Label, Range, NumberInputGroup(approx 30+30+2+40=102px) */
+}
+
+
 /* --- Camera View (Individual streams) --- */
 .camera-view {
     flex: 1; /* Allow it to grow and shrink to fill available space */
@@ -377,4 +433,4 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
         width: 100%;
         height: auto; /* Let aspect-ratio define height */
     }
-}
+}

src/unified_web_ui/templates/index.html

@@ -43,17 +43,29 @@
                                 <div class="slider-row">
                                     <span class="slider-label">Warm White (3000K)</span>
                                     <input type="range" id="center-ww-slider" min="0" max="255" value="0" class="white-3000k">
-                                    <input type="number" id="center-ww-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="center-ww-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                                 <div class="slider-row">
                                     <span class="slider-label">Cool White (6500K)</span>
                                     <input type="range" id="center-cw-slider" min="0" max="255" value="0" class="white-6500k">
-                                    <input type="number" id="center-cw-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="center-cw-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                                 <div class="slider-row">
                                     <span class="slider-label">Blue</span>
                                     <input type="range" id="center-blue-slider" min="0" max="255" value="0" class="blue">
-                                    <input type="number" id="center-blue-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="center-blue-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -64,17 +76,29 @@
                                 <div class="slider-row">
                                     <span class="slider-label">Warm White (3000K)</span>
                                     <input type="range" id="ww-slider" min="0" max="255" value="0" class="white-3000k">
-                                    <input type="number" id="ww-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="ww-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                                 <div class="slider-row">
                                     <span class="slider-label">Cool White (6500K)</span>
                                     <input type="range" id="cw-slider" min="0" max="255" value="0" class="white-6500k">
-                                    <input type="number" id="cw-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="cw-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                                 <div class="slider-row">
                                     <span class="slider-label">Blue</span>
                                     <input type="range" id="blue-slider" min="0" max="255" value="0" class="blue">
-                                    <input type="number" id="blue-number" min="0" max="255" value="0">
+                                    <div class="number-input-controls">
+                                        <button type="button" class="decrement-btn">-</button>
+                                        <input type="number" id="blue-number" min="0" max="255" value="0">
+                                        <button type="button" class="increment-btn">+</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -130,7 +154,7 @@
             const coolWhiteR = 192, coolWhiteG = 224, coolWhiteB = 255;
             const blueR = 0, blueG = 0, blueB = 255;
             var r = (ww / 255) * warmWhiteR + (cw / 255) * coolWhiteR + (blue / 255) * blueR;
-            var g = (ww / 255) * warmWhiteG + (cw / 255) * coolWhiteG + (blue / 255) * blueG;
+            var g = (ww / 255) * warmWhiteG + (cw / 255) * coolWhiteR + (blue / 255) * blueG;
             var b = (ww / 255) * warmWhiteB + (cw / 255) * coolWhiteB + (blue / 255) * blueB;
             r = Math.min(255, Math.round(r));
             g = Math.min(255, Math.round(g));
@@ -328,6 +352,26 @@
                 sendFullMatrixUpdate([centerLamp]);
             });
 
+            // Handle increment/decrement buttons
+            $('.number-input-controls button').on('click', function() {
+                var btn = $(this);
+                var numberInput = btn.siblings('input[type="number"]');
+                var currentVal = parseInt(numberInput.val());
+                var min = parseInt(numberInput.attr('min'));
+                var max = parseInt(numberInput.attr('max'));
+                
+                if (btn.hasClass('decrement-btn')) {
+                    currentVal = Math.max(min, currentVal - 1);
+                } else if (btn.hasClass('increment-btn')) {
+                    currentVal = Math.min(max, currentVal + 1);
+                }
+                
+                numberInput.val(currentVal);
+                // Trigger the 'input' event to propagate the change to the slider and matrix update logic
+                numberInput.trigger('input');
+            });
+
+
             if (!$('#region-select').val()) {
                 $('.control-panel').addClass('inactive-control');
             }
@@ -359,4 +403,4 @@
         });
     </script>
 </body>
-</html>
+</html>