0
1
@@ -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