From 197c3c20e286c9826d944ca3965bd4c540fb5766 Mon Sep 17 00:00:00 2001
From: Tempest <tempest@Tempests-MacBook-Pro.local>
Date: Mon, 22 Sep 2025 14:37:30 +0700
Subject: [PATCH] Readded numerical input.

---
 src/controllerSoftware/templates/index.html | 42 +++++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/controllerSoftware/templates/index.html b/src/controllerSoftware/templates/index.html
index e6c5b32..a1efb11 100644
--- a/src/controllerSoftware/templates/index.html
+++ b/src/controllerSoftware/templates/index.html
@@ -196,12 +196,29 @@
             $('.region-slider-group input').on('input', function() {
                 if (selectedLamps.length === 0) return;
 
+                var target = $(this);
+                var originalVal = target.val();
+                var value = parseInt(originalVal, 10);
+
+                // Clamp value
+                if (isNaN(value) || value < 0) { value = 0; }
+                if (value > 255) { value = 255; }
+                
+                if (target.is('[type="number"]') && value.toString() !== originalVal) {
+                    target.val(value);
+                }
+
+                var id = target.attr('id');
+                if (target.is('[type="range"]')) {
+                    $(`#${id.replace('-slider', '-number')}`).val(value);
+                } else if (target.is('[type="number"]')) {
+                    $(`#${id.replace('-number', '-slider')}`).val(value);
+                }
+
                 var ww = parseInt($('#ww-slider').val());
                 var cw = parseInt($('#cw-slider').val());
                 var blue = parseInt($('#blue-slider').val());
                 
-                updateSliders(ww, cw, blue, '');
-                
                 var lampsToUpdate = [];
                 selectedLamps.forEach(function(lamp) {
                     lampMatrixState[lamp.row][lamp.col] = {ww: ww, cw: cw, blue: blue};
@@ -213,12 +230,29 @@
 
             // Event listener for the center lamp sliders and number inputs
             $('.center-slider-group input').on('input', function() {
+                var target = $(this);
+                var originalVal = target.val();
+                var value = parseInt(originalVal, 10);
+
+                // Clamp value
+                if (isNaN(value) || value < 0) { value = 0; }
+                if (value > 255) { value = 255; }
+                
+                if (target.is('[type="number"]') && value.toString() !== originalVal) {
+                    target.val(value);
+                }
+                
+                var id = target.attr('id');
+                if (target.is('[type="range"]')) {
+                    $(`#${id.replace('-slider', '-number')}`).val(value);
+                } else if (target.is('[type="number"]')) {
+                    $(`#${id.replace('-number', '-slider')}`).val(value);
+                }
+
                 var ww = parseInt($('#center-ww-slider').val());
                 var cw = parseInt($('#center-cw-slider').val());
                 var blue = parseInt($('#center-blue-slider').val());
                 
-                updateSliders(ww, cw, blue, 'center-');
-                
                 var centerLamp = {row: 2, col: 2};
                 
                 lampMatrixState[centerLamp.row][centerLamp.col] = {ww: ww, cw: cw, blue: blue};