justinas/webcounter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add global brightness control feature with socket handling and UI updates

Browse Source
This commit is contained in:
Justinas Petravičius
2025-07-07 10:05:14 +03:00
parent 09d8871ac3
commit d0f34846f8
3 changed files with 201 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
templates/mechanical_counter.html
View File

@@ -75,7 +75,7 @@
top: 0;
left: 0;
width: 100%;
height: 1000px; /* 10 digits * 100px each */
height: 1200px; /* 10 digits * 120px each (matches default wheel height) */
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
@@ -83,7 +83,7 @@
.digit {
width: 100%;
height: 100px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
@@ -143,64 +143,13 @@
z-index: 1;
}
.mechanical-sound::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ffffff, transparent);
opacity: 0;
transition: opacity 0.3s;
}
.digit-wheel.animating .mechanical-sound::before {
opacity: 1;
}
/* Glitch effect for mechanical feel */
.digit-wheel.animating .digit.active {
animation: glitch 0.1s ease-in-out;
}
@keyframes glitch {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-1px); }
75% { transform: translateX(1px); }
}
/* Mechanical click sound simulation */
.click-indicator {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: #ffffff;
border-radius: 50%;
opacity: 0;
z-index: 3;
}
.digit-wheel.animating .click-indicator {
animation: click 0.8s ease-in-out;
}
@keyframes click {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}
/* Removed visual effects that caused white lines during animation */
</style>
</head>
<body>
<div id="status" class="status disconnected">Disconnected</div>
<div class="digit-wheel" id="digit0" data-position="0" style="left: 50px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -216,8 +165,6 @@
</div>
<div class="digit-wheel" id="digit1" data-position="1" style="left: 150px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -233,8 +180,6 @@
</div>
<div class="digit-wheel" id="digit2" data-position="2" style="left: 250px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -250,8 +195,6 @@
</div>
<div class="digit-wheel" id="digit3" data-position="3" style="left: 350px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -267,8 +210,6 @@
</div>
<div class="digit-wheel" id="digit4" data-position="4" style="left: 450px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -284,8 +225,6 @@
</div>
<div class="digit-wheel" id="digit5" data-position="5" style="left: 550px; top: 200px;">
<div class="mechanical-sound"></div>
<div class="click-indicator"></div>
<div class="digit-strip" data-current="0">
<div class="digit">0</div>
<div class="digit">1</div>
@@ -319,6 +258,9 @@
// Animation speed (default value)
let currentAnimationSpeed = 0.5;
// Brightness (default value)
let currentBrightness = 100;
// Connection status
socket.on('connect', function() {
@@ -372,6 +314,12 @@
updateAnimationSpeed(data.speed || data);
});
// Handle brightness updates from controller
socket.on('brightness_update', function(data) {
console.log('Received brightness update:', data);
updateBrightness(data.brightness || data);
});
// Handle general events (for backward compatibility)
socket.on('receive_event', function(data) {
console.log('Received event:', data);
@@ -390,6 +338,9 @@
if (data.type === 'animation_speed' || data.speed) {
updateAnimationSpeed(data.speed || data);
}
if (data.type === 'brightness' || data.brightness) {
updateBrightness(data.brightness || data);
}
});
function updateCounter(values) {
@@ -450,6 +401,7 @@
const currentValue = parseInt(strip.getAttribute('data-current') || '0');
const targetY = -(currentValue * height);
strip.style.transform = `translateY(${targetY}px)`;
console.log(`Recalculated digit strip ${index} position to ${targetY}px for value ${currentValue}`);
});
// Update individual digit heights and widths
@@ -473,6 +425,21 @@
});
}
function updateBrightness(brightness) {
console.log('Updating brightness to:', brightness);
currentBrightness = brightness;
// Calculate brightness filter value (0-1 range)
const brightnessFilter = brightness / 100;
// Update all digit wheels with new brightness
const digitWheels = document.querySelectorAll('.digit-wheel');
digitWheels.forEach((wheel, index) => {
wheel.style.filter = `brightness(${brightnessFilter})`;
console.log(`Updated digit wheel ${index} brightness to ${brightness}% (filter: ${brightnessFilter})`);
});
}
function animateDigitWheel(position, fromValue, toValue) {
const wheel = digitWheels[position];
const strip = wheel.querySelector('.digit-strip');
@@ -485,6 +452,8 @@
// Calculate the target position using current wheel height
const targetY = -(toValue * wheelHeight);
console.log(`Animating digit ${position} from ${fromValue} to ${toValue}, targetY: ${targetY}, wheelHeight: ${wheelHeight}`);
// Add animation class
wheel.classList.add('animating');
@@ -498,9 +467,14 @@
digit.classList.toggle('active', index === toValue);
});
// Remove animation class after animation completes
// Remove animation class after animation completes and ensure proper positioning
setTimeout(() => {
wheel.classList.remove('animating');
// Double-check the position is correct after animation
const finalTargetY = -(toValue * wheelHeight);
strip.style.transform = `translateY(${finalTargetY}px)`;
console.log(`Final position check for digit ${position}: ${finalTargetY}px`);
}, currentAnimationSpeed * 1000);
}
@@ -543,36 +517,7 @@
socket.emit('viewport_update', viewportData);
}
// Add some mechanical sound simulation
function playMechanicalSound() {
// Create a simple mechanical click sound using Web Audio API
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
oscillator.frequency.exponentialRampToValueAtTime(400, audioContext.currentTime + 0.1);
gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.1);
} catch (e) {
console.log('Audio not supported');
}
}
// Play sound when digits animate
document.addEventListener('animationstart', function(e) {
if (e.target.classList.contains('digit-wheel')) {
playMechanicalSound();
}
});
// Removed mechanical sound simulation to eliminate white lines during animation
</script>
</body>
</html>