Add global brightness control feature with socket handling and UI updates
This commit is contained in:
@@ -643,6 +643,102 @@
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.brightness-controls {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #00ff00;
|
||||
}
|
||||
|
||||
.brightness-controls h3 {
|
||||
color: #00ff00;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.brightness-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.brightness-label {
|
||||
font-weight: bold;
|
||||
color: #00ff00;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.brightness-slider {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.brightness-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #00ff00;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brightness-slider::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #00ff00;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.brightness-value {
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
color: #00ff00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.brightness-preview {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid #00ff00;
|
||||
border-radius: 5px;
|
||||
margin-left: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brightness-preview-box {
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brightness-preview-digit {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
|
||||
}
|
||||
|
||||
.counter-preview {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
@@ -730,6 +826,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brightness-controls">
|
||||
<h3>Global Brightness Control</h3>
|
||||
<div class="brightness-group">
|
||||
<div class="brightness-label">Brightness:</div>
|
||||
<input type="range" class="brightness-slider" id="globalBrightness" min="0" max="100" value="100" step="5">
|
||||
<span class="brightness-value" id="globalBrightnessValue">100%</span>
|
||||
<div class="brightness-preview">
|
||||
<div class="brightness-preview-box" id="brightnessPreviewBox">
|
||||
<div class="brightness-preview-digit" id="brightnessPreviewDigit">8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<button class="btn btn-primary" onclick="updateGlobalBrightness()">Update All Wheels</button>
|
||||
<button class="btn btn-secondary" onclick="resetGlobalBrightness()">Reset to Default</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wheel-size-controls">
|
||||
<h3>Digit Wheel Size</h3>
|
||||
<div class="wheel-size-group">
|
||||
@@ -963,6 +1077,9 @@
|
||||
|
||||
// Animation speed (default value)
|
||||
let currentAnimationSpeed = 0.5;
|
||||
|
||||
// Brightness (default value)
|
||||
let currentBrightness = 100;
|
||||
|
||||
// Connection status
|
||||
socket.on('connect', function() {
|
||||
@@ -1071,6 +1188,21 @@
|
||||
speedPreviewStrip.style.transition = `transform ${newSpeed}s ease`;
|
||||
});
|
||||
|
||||
// Add event listener to brightness slider
|
||||
const brightnessSlider = document.getElementById('globalBrightness');
|
||||
const brightnessValue = document.getElementById('globalBrightnessValue');
|
||||
const brightnessPreviewBox = document.getElementById('brightnessPreviewBox');
|
||||
|
||||
brightnessSlider.addEventListener('input', function() {
|
||||
const newBrightness = parseInt(this.value);
|
||||
currentBrightness = newBrightness;
|
||||
brightnessValue.textContent = newBrightness + '%';
|
||||
|
||||
// Update preview with brightness filter
|
||||
const brightnessFilter = newBrightness / 100;
|
||||
brightnessPreviewBox.style.filter = `brightness(${brightnessFilter})`;
|
||||
});
|
||||
|
||||
function updateCounter() {
|
||||
const counterData = {
|
||||
type: 'counter_update',
|
||||
@@ -1300,6 +1432,27 @@
|
||||
}, (currentAnimationSpeed * 1000) + 200);
|
||||
}
|
||||
|
||||
function updateGlobalBrightness() {
|
||||
const brightnessData = {
|
||||
type: 'brightness_update',
|
||||
brightness: currentBrightness,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
console.log('Sending brightness update:', brightnessData);
|
||||
socket.emit('brightness_update', brightnessData);
|
||||
addSentEvent(brightnessData);
|
||||
}
|
||||
|
||||
function resetGlobalBrightness() {
|
||||
const defaultBrightness = 100;
|
||||
brightnessSlider.value = defaultBrightness;
|
||||
currentBrightness = defaultBrightness;
|
||||
brightnessValue.textContent = defaultBrightness + '%';
|
||||
brightnessPreviewBox.style.filter = 'brightness(1)';
|
||||
updateGlobalBrightness();
|
||||
}
|
||||
|
||||
function incrementDigit(index) {
|
||||
let currentValue = currentValues[index];
|
||||
currentValue = (currentValue + 1) % 10; // Wrap around from 9 to 0
|
||||
|
||||
Reference in New Issue
Block a user