diff --git a/src/unified_web_ui/static/style.css b/src/unified_web_ui/static/style.css
index d2bc38e9..e1d74b9b 100644
--- a/src/unified_web_ui/static/style.css
+++ b/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;
- border-radius: 5px;
+ border: none; /* Will be part of the new control's border */
+ border-radius: 0; /* No radius on its own if part of a group */
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 */
}
-}
\ No newline at end of file
+}
diff --git a/src/unified_web_ui/templates/index.html b/src/unified_web_ui/templates/index.html
index 1ac2b36f..d8cf5d70 100644
--- a/src/unified_web_ui/templates/index.html
+++ b/src/unified_web_ui/templates/index.html
@@ -43,17 +43,29 @@
@@ -64,17 +76,29 @@
@@ -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 @@
});
-