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.
This commit is contained in:
parent
df2f44857b
commit
15b6f3626d
@ -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 */
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user