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

Update README.md to provide detailed project description, features, installation instructions, usage guidelines, and technical details for WebCounter - a Flask WebSocket server.

Browse Source
This commit is contained in:
Justinas Petravičius
2025-07-07 09:01:37 +03:00
parent 12466170c3
commit 09d8871ac3
18 changed files with 3492 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
templates/client.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebCounter - Client</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.status {
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.status.connected {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.disconnected {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.events-container {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
max-height: 400px;
overflow-y: auto;
background-color: #f9f9f9;
}
.event {
background: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 4px solid #4CAF50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.event-time {
color: #666;
font-size: 12px;
margin-bottom: 5px;
}
.event-data {
font-family: monospace;
background-color: #f8f9fa;
padding: 5px;
border-radius: 3px;
word-break: break-all;
}
.nav-link {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 5px;
}
.nav-link:hover {
background-color: #5a6268;
}
</style>
</head>
<body>
<div class="container">
<h1>WebCounter - Client</h1>
<div id="status" class="status disconnected">Disconnected</div>
<div class="events-container">
<h3>Received Events:</h3>
<div id="events"></div>
</div>
<a href="/" class="nav-link">← Back to Home</a>
</div>
<script>
// Connect to WebSocket server
const socket = io();
const statusDiv = document.getElementById('status');
const eventsDiv = document.getElementById('events');
// Connection status
socket.on('connect', function() {
statusDiv.textContent = 'Connected to server';
statusDiv.className = 'status connected';
console.log('Connected to server');
});
socket.on('disconnect', function() {
statusDiv.textContent = 'Disconnected from server';
statusDiv.className = 'status disconnected';
console.log('Disconnected from server');
});
// Handle status messages
socket.on('status', function(data) {
addEvent('Status', data);
});
// Handle received events
socket.on('receive_event', function(data) {
addEvent('Event', data);
});
function addEvent(type, data) {
const eventDiv = document.createElement('div');
eventDiv.className = 'event';
const timeDiv = document.createElement('div');
timeDiv.className = 'event-time';
timeDiv.textContent = new Date().toLocaleTimeString();
const dataDiv = document.createElement('div');
dataDiv.className = 'event-data';
dataDiv.textContent = JSON.stringify(data, null, 2);
eventDiv.appendChild(timeDiv);
eventDiv.appendChild(dataDiv);
eventsDiv.appendChild(eventDiv);
// Auto-scroll to bottom
eventsDiv.scrollTop = eventsDiv.scrollHeight;
}
// Add initial connection event
window.addEventListener('load', function() {
addEvent('Info', { message: 'Client page loaded' });
});
</script>
</body>
</html>

333
templates/controller.html Normal file
View File

@@ -0,0 +1,333 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebCounter - Controller</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.status {
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.status.connected {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.disconnected {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
input, textarea, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}
textarea {
height: 100px;
resize: vertical;
font-family: monospace;
}
.btn {
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-success {
background-color: #28a745;
color: white;
}
.btn-success:hover {
background-color: #1e7e34;
}
.btn-warning {
background-color: #ffc107;
color: #212529;
}
.btn-warning:hover {
background-color: #e0a800;
}
.btn-danger {
background-color: #dc3545;
color: white;
}
.btn-danger:hover {
background-color: #c82333;
}
.quick-actions {
margin-top: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 5px;
}
.quick-actions h3 {
margin-top: 0;
color: #333;
}
.nav-link {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 5px;
}
.nav-link:hover {
background-color: #5a6268;
}
.sent-events {
margin-top: 30px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
max-height: 300px;
overflow-y: auto;
background-color: #f9f9f9;
}
.sent-event {
background: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 4px solid #007bff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sent-event-time {
color: #666;
font-size: 12px;
margin-bottom: 5px;
}
.sent-event-data {
font-family: monospace;
background-color: #f8f9fa;
padding: 5px;
border-radius: 3px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<h1>WebCounter - Controller</h1>
<div id="status" class="status disconnected">Disconnected</div>
<form id="eventForm">
<div class="form-group">
<label for="eventType">Event Type:</label>
<select id="eventType">
<option value="message">Message</option>
<option value="notification">Notification</option>
<option value="update">Update</option>
<option value="alert">Alert</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="form-group">
<label for="eventTitle">Title:</label>
<input type="text" id="eventTitle" placeholder="Enter event title">
</div>
<div class="form-group">
<label for="eventMessage">Message:</label>
<textarea id="eventMessage" placeholder="Enter event message or JSON data"></textarea>
</div>
<div class="form-group">
<label for="eventPriority">Priority:</label>
<select id="eventPriority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
<option value="urgent">Urgent</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Send Event</button>
<button type="button" class="btn btn-success" onclick="sendTestEvent()">Send Test Event</button>
</form>
<div class="quick-actions">
<h3>Quick Actions</h3>
<button class="btn btn-success" onclick="sendNotification('Success', 'Operation completed successfully!')">Success Notification</button>
<button class="btn btn-warning" onclick="sendNotification('Warning', 'Please check your input.')">Warning Notification</button>
<button class="btn btn-danger" onclick="sendNotification('Error', 'An error occurred!')">Error Notification</button>
<button class="btn btn-primary" onclick="sendCounterUpdate()">Counter Update</button>
</div>
<div class="sent-events">
<h3>Sent Events:</h3>
<div id="sentEvents"></div>
</div>
<a href="/" class="nav-link">← Back to Home</a>
</div>
<script>
// Connect to WebSocket server
const socket = io();
const statusDiv = document.getElementById('status');
const sentEventsDiv = document.getElementById('sentEvents');
let counter = 0;
// Connection status
socket.on('connect', function() {
statusDiv.textContent = 'Connected to server';
statusDiv.className = 'status connected';
console.log('Connected to server');
});
socket.on('disconnect', function() {
statusDiv.textContent = 'Disconnected from server';
statusDiv.className = 'status disconnected';
console.log('Disconnected from server');
});
// Handle form submission
document.getElementById('eventForm').addEventListener('submit', function(e) {
e.preventDefault();
sendEvent();
});
function sendEvent() {
const eventType = document.getElementById('eventType').value;
const eventTitle = document.getElementById('eventTitle').value;
const eventMessage = document.getElementById('eventMessage').value;
const eventPriority = document.getElementById('eventPriority').value;
let eventData;
if (eventType === 'custom') {
try {
eventData = JSON.parse(eventMessage);
} catch (e) {
eventData = { message: eventMessage };
}
} else {
eventData = {
type: eventType,
title: eventTitle,
message: eventMessage,
priority: eventPriority,
timestamp: new Date().toISOString()
};
}
socket.emit('send_event', eventData);
addSentEvent(eventData);
// Clear form
document.getElementById('eventTitle').value = '';
document.getElementById('eventMessage').value = '';
}
function sendTestEvent() {
const testEvent = {
type: 'test',
title: 'Test Event',
message: 'This is a test event from the controller',
priority: 'medium',
timestamp: new Date().toISOString()
};
socket.emit('send_event', testEvent);
addSentEvent(testEvent);
}
function sendNotification(type, message) {
const notification = {
type: 'notification',
title: type,
message: message,
priority: type.toLowerCase() === 'error' ? 'high' : 'medium',
timestamp: new Date().toISOString()
};
socket.emit('send_event', notification);
addSentEvent(notification);
}
function sendCounterUpdate() {
counter++;
const counterEvent = {
type: 'counter',
title: 'Counter Update',
message: `Counter value: ${counter}`,
counter: counter,
timestamp: new Date().toISOString()
};
socket.emit('send_event', counterEvent);
addSentEvent(counterEvent);
}
function addSentEvent(data) {
const eventDiv = document.createElement('div');
eventDiv.className = 'sent-event';
const timeDiv = document.createElement('div');
timeDiv.className = 'sent-event-time';
timeDiv.textContent = new Date().toLocaleTimeString();
const dataDiv = document.createElement('div');
dataDiv.className = 'sent-event-data';
dataDiv.textContent = JSON.stringify(data, null, 2);
eventDiv.appendChild(timeDiv);
eventDiv.appendChild(dataDiv);
sentEventsDiv.appendChild(eventDiv);
// Auto-scroll to bottom
sentEventsDiv.scrollTop = sentEventsDiv.scrollHeight;
}
</script>
</body>
</html>

86
templates/index.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebCounter - WebSocket Server</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.nav-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 30px;
}
.btn {
padding: 15px 30px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: background-color 0.3s;
}
.btn-client {
background-color: #4CAF50;
color: white;
}
.btn-client:hover {
background-color: #45a049;
}
.btn-controller {
background-color: #2196F3;
color: white;
}
.btn-controller:hover {
background-color: #1976D2;
}
.description {
text-align: center;
color: #666;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>WebCounter WebSocket Server</h1>
<div class="description">
<p>Welcome to the WebSocket server! Choose your role:</p>
<ul style="text-align: left; display: inline-block;">
<li><strong>Client:</strong> Receives events from the controller</li>
<li><strong>Controller:</strong> Sends events to connected clients</li>
<li><strong>Mechanical Counter:</strong> Vintage-style 6-digit counter with animated wheels</li>
</ul>
</div>
<div class="nav-buttons">
<a href="/client" class="btn btn-client">Open Client Page</a>
<a href="/controller" class="btn btn-controller">Open Controller Page</a>
</div>
<div class="nav-buttons" style="margin-top: 20px;">
<a href="/mechanical-counter" class="btn btn-client">Mechanical Counter Display</a>
<a href="/mechanical-counter-controller" class="btn btn-controller">Mechanical Counter Controller</a>
</div>
</div>
</body>
</html>

578
templates/mechanical_counter.html Normal file
View File

@@ -0,0 +1,578 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mechanical Counter - Client</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
<style>
@font-face {
font-family: 'OpenGostTypeB';
src: url('/static/fonts/OpenGost Type B/OpenGostTypeB.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'OpenGostTypeB', monospace;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.digit-wheel {
position: absolute;
width: 80px;
height: 120px;
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
border-radius: 10px;
overflow: hidden;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.8),
inset 0 2px 4px rgba(255, 255, 255, 0.1);
border: 1px solid #444;
transition: all 0.3s ease;
}
.digit-wheel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
z-index: 2;
}
.digit-wheel::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
pointer-events: none;
z-index: 2;
}
.digit-strip {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1000px; /* 10 digits * 100px each */
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
}
.digit {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
color: #ffffff;
background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
border-bottom: 1px solid #333;
}
.digit:last-child {
border-bottom: none;
}
.digit.active {
color: #ffffff;
}
.status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
font-weight: bold;
z-index: 1000;
}
.status.connected {
background-color: rgba(0, 255, 0, 0.2);
color: #00ff00;
border: 1px solid #00ff00;
}
.status.disconnected {
background-color: rgba(255, 0, 0, 0.2);
color: #ff0000;
border: 1px solid #ff0000;
}
.counter-label {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: #666;
text-align: center;
}
.mechanical-sound {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
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); }
}
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</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>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</div>
<div class="counter-label">
Mechanical Counter Display
</div>
<script>
// Connect to WebSocket server
const socket = io();
const statusDiv = document.getElementById('status');
const digitWheels = document.querySelectorAll('.digit-wheel');
// Current counter values
let currentValues = [0, 0, 0, 0, 0, 0];
// Viewport dimensions
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
// Animation speed (default value)
let currentAnimationSpeed = 0.5;
// Connection status
socket.on('connect', function() {
statusDiv.textContent = 'Connected';
statusDiv.className = 'status connected';
console.log('Connected to server');
// Send viewport dimensions to controller
sendViewportDimensions();
});
socket.on('disconnect', function() {
statusDiv.textContent = 'Disconnected';
statusDiv.className = 'status disconnected';
console.log('Disconnected from server');
});
// Handle counter updates
socket.on('counter_update', function(data) {
console.log('Received counter update:', data);
updateCounter(data.values || data);
});
// Handle position updates
socket.on('position_update', function(data) {
console.log('Received position update:', data);
updatePositions(data.positions || data);
});
// Handle viewport requests from controller
socket.on('request_viewport', function(data) {
console.log('Received viewport request:', data);
sendViewportDimensions();
});
// Handle font size updates from controller
socket.on('font_size_update', function(data) {
console.log('Received font size update:', data);
updateFontSize(data.fontSize || data);
});
// Handle wheel size updates from controller
socket.on('wheel_size_update', function(data) {
console.log('Received wheel size update:', data);
updateWheelSize(data.width, data.height);
});
// Handle animation speed updates from controller
socket.on('animation_speed_update', function(data) {
console.log('Received animation speed update:', data);
updateAnimationSpeed(data.speed || data);
});
// Handle general events (for backward compatibility)
socket.on('receive_event', function(data) {
console.log('Received event:', data);
if (data.type === 'counter' || data.values) {
updateCounter(data.values || data);
}
if (data.type === 'position' || data.positions) {
updatePositions(data.positions || data);
}
if (data.type === 'font_size' || data.fontSize) {
updateFontSize(data.fontSize || data);
}
if (data.type === 'wheel_size' || (data.width && data.height)) {
updateWheelSize(data.width, data.height);
}
if (data.type === 'animation_speed' || data.speed) {
updateAnimationSpeed(data.speed || data);
}
});
function updateCounter(values) {
// Ensure we have 6 values
const newValues = Array.isArray(values) ? values : [values];
while (newValues.length < 6) {
newValues.unshift(0);
}
// Update each digit wheel
newValues.forEach((value, index) => {
if (index < 6 && value !== currentValues[index]) {
animateDigitWheel(index, currentValues[index], value);
currentValues[index] = value;
}
});
}
function updatePositions(positions) {
console.log('Updating positions:', positions);
positions.forEach((pos, index) => {
const wheel = document.getElementById(`digit${index}`);
console.log(`Digit ${index}:`, pos, wheel);
if (wheel && pos.x !== undefined && pos.y !== undefined) {
wheel.style.left = pos.x + 'px';
wheel.style.top = pos.y + 'px';
console.log(`Moved digit ${index} to ${pos.x}, ${pos.y}`);
}
});
}
function updateFontSize(fontSize) {
console.log('Updating font size to:', fontSize);
const digits = document.querySelectorAll('.digit');
digits.forEach((digit, index) => {
digit.style.fontSize = fontSize + 'px';
console.log(`Updated digit ${index} font size to ${fontSize}px`);
});
}
function updateWheelSize(width, height) {
console.log('Updating wheel size to:', width, 'x', height);
const wheels = document.querySelectorAll('.digit-wheel');
wheels.forEach((wheel, index) => {
wheel.style.width = width + 'px';
wheel.style.height = height + 'px';
console.log(`Updated wheel ${index} size to ${width}x${height}px`);
});
// Also update the digit strip height to accommodate the new wheel height
const digitStrips = document.querySelectorAll('.digit-strip');
digitStrips.forEach((strip, index) => {
const digitHeight = height; // Each digit takes full wheel height
strip.style.height = (digitHeight * 10) + 'px'; // 10 digits
console.log(`Updated digit strip ${index} height to ${digitHeight * 10}px`);
// Recalculate and maintain the current digit position
const currentValue = parseInt(strip.getAttribute('data-current') || '0');
const targetY = -(currentValue * height);
strip.style.transform = `translateY(${targetY}px)`;
});
// Update individual digit heights and widths
const digits = document.querySelectorAll('.digit');
digits.forEach((digit, index) => {
digit.style.height = height + 'px';
digit.style.width = width + 'px';
console.log(`Updated digit ${index} size to ${width}x${height}px`);
});
}
function updateAnimationSpeed(speed) {
console.log('Updating animation speed to:', speed);
currentAnimationSpeed = speed;
// Update all digit strips with new animation speed
const digitStrips = document.querySelectorAll('.digit-strip');
digitStrips.forEach((strip, index) => {
strip.style.transition = `transform ${speed}s cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
console.log(`Updated digit strip ${index} animation speed to ${speed}s`);
});
}
function animateDigitWheel(position, fromValue, toValue) {
const wheel = digitWheels[position];
const strip = wheel.querySelector('.digit-strip');
if (!wheel || !strip) return;
// Get current wheel height for proper positioning
const wheelHeight = parseInt(wheel.style.height) || 120; // Default fallback
// Calculate the target position using current wheel height
const targetY = -(toValue * wheelHeight);
// Add animation class
wheel.classList.add('animating');
// Animate the strip
strip.style.transform = `translateY(${targetY}px)`;
strip.setAttribute('data-current', toValue);
// Update active digit
const digits = strip.querySelectorAll('.digit');
digits.forEach((digit, index) => {
digit.classList.toggle('active', index === toValue);
});
// Remove animation class after animation completes
setTimeout(() => {
wheel.classList.remove('animating');
}, currentAnimationSpeed * 1000);
}
// Initialize counter display
function initializeCounter() {
digitWheels.forEach((wheel, index) => {
const strip = wheel.querySelector('.digit-strip');
const digits = strip.querySelectorAll('.digit');
// Set initial active digit
digits[0].classList.add('active');
// Set initial position
strip.style.transform = 'translateY(0px)';
strip.setAttribute('data-current', '0');
});
}
// Initialize on page load
window.addEventListener('load', function() {
initializeCounter();
});
// Handle window resize
window.addEventListener('resize', function() {
viewportWidth = window.innerWidth;
viewportHeight = window.innerHeight;
sendViewportDimensions();
});
function sendViewportDimensions() {
const viewportData = {
type: 'viewport_update',
width: viewportWidth,
height: viewportHeight,
timestamp: new Date().toISOString()
};
console.log('Sending viewport dimensions:', viewportData);
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();
}
});
</script>
</body>
</html>

1363
templates/mechanical_counter_controller.html Normal file
View File

File diff suppressed because it is too large Load Diff