A Python Flask webserver with WebSocket support that serves two pages - a client and a controller. The controller can send events to connected clients via WebSocket.

Features

Client Page: Receives and displays events from the controller
Controller Page: Sends events to all connected clients
Mechanical Counter: Vintage-style 6-digit counter with animated number wheels
Real-time Communication: WebSocket-based event broadcasting
Modern UI: Clean, responsive design
Event Types: Support for different event types (message, notification, update, alert, custom)
Quick Actions: Pre-defined buttons for common events

Dependency Management with uv

This project uses uv for fast Python dependency management.

Install uv

If you don't have uv installed, you can install it with:

pip install uv

Or see the uv installation guide for more options.

Install dependencies

uv pip install -r pyproject.toml

Or, to create a lockfile and install:

uv pip install --sync

Running the Server

Start the server:

python app.py

The server will start on port 8079. You'll see output like:

Starting webserver on port 8079...
Client page: http://localhost:8079/client
Controller page: http://localhost:8079/controller

Usage

Main Page: Visit http://localhost:8079/ to see the navigation page
Client Page: Visit http://localhost:8079/client to open a client that receives events
Controller Page: Visit http://localhost:8079/controller to open the controller that sends events
Mechanical Counter Display: Visit http://localhost:8079/mechanical-counter to see the vintage counter display
Mechanical Counter Controller: Visit http://localhost:8079/mechanical-counter-controller to control the counter

How it Works

Open multiple client pages in different browser tabs/windows
Open the controller page
Use the controller to send events (messages, notifications, etc.)
All connected clients will receive the events in real-time

Mechanical Counter

The mechanical counter simulates a vintage mechanical counter with:

6-digit display with individual animated wheels
Vintage styling with the OpenGost Type B font
Smooth animations that simulate mechanical wheel rotation
Real-time updates via WebSocket
Individual digit control from the controller
Quick preset buttons for common values

Event Types

Message: Simple text messages
Notification: System notifications with different priorities
Update: Data updates
Alert: Important alerts
Custom: Custom JSON data

Quick Actions

The controller page includes quick action buttons for:

Success notifications
Warning notifications
Error notifications
Counter updates

Technical Details

Backend: Flask with Flask-SocketIO
Frontend: HTML, CSS, JavaScript with Socket.IO client
WebSocket: Real-time bidirectional communication
Port: 8079 (configurable in app.py)
Dependency Management: uv

File Structure

webcounter/
├── app.py                 # Main Flask application
├── pyproject.toml         # Project metadata and dependencies
├── templates/            # HTML templates
│   ├── index.html        # Main navigation page
│   ├── client.html       # Client page
│   └── controller.html   # Controller page
└── README.md            # This file