🎫 Real-Time Queue Monitoring System (Client-Side)

A modern, lightweight, responsive web-based queue system built with HTML5, CSS3, and Vanilla JavaScript. This system is designed to run in real time on a single device without internet, a backend server, or an external database.

✨ Key Features

• Real-Time Synchronization: Instant sync between the Control Panel and Main Display using the browser's built-in Storage Event Listener.
• Accurate Wait Time Logic: Uses a Round-Robin Parallel Slot algorithm to calculate realistic estimated wait time based on active counters and remaining queue.
• Multi-Layout Display:
  1. Full Queue: Full focus on queue number calls.
  2. Side-by-Side: Queue details beside promotional media.
  3. Full Overlay Ad: Promotional media fills the screen with queue details floating in the lower-right.
• Media Upload: Operators can upload promotional images or videos directly from the control panel to the waiting area display.
• Modern Professional Design: Dark mode layout with glassmorphism styling, high contrast, and easy readability from a distance.

---

📂 File Structure

queue-system/
│
├── assets/
│ ├── admin.js # queue control logic & media upload
│ ├── display.js # wait time calculation & monitor rendering
│ └── style.css # web app styling
│
├── index.html # operator / cashier control panel
└── display.html # waiting area queue display

---

⚙️ Setup & Run (Single Device + HDMI)

This system works best with one main device (admin laptop/PC) using Extend Display via HDMI/VGA to a TV or waiting room monitor.

1. Connect the admin laptop/PC to the external monitor using HDMI.
2. Set your OS display mode to Extend (not Duplicate).
3. Open the app in your primary browser and keep that window on the laptop screen.
4. Click the Open Display Screen button to open the display in a new tab, then move that tab to the external monitor. Press F11 to enable fullscreen.
5. The system is ready to use! Operate queue numbers from the laptop, and the external display updates instantly without page refresh.

Multi-Counter Tip with One Device: If you have more than one active counter but only one admin computer, open two small browser windows of the queue control panel side by side. Set Admin Window 1 to "Counter 1" and Admin Window 2 to "Counter 2." Both will sync to the same external display as numbers are called.

---

🧠 Estimated Wait Time Algorithm (Parallel Slot)

This app uses a parallel-round robin estimation algorithm to keep wait time predictions logical when multiple counters serve customers simultaneously:

Formula:

Estimated Time = Ceil((Last Number - Current Number) / Active Counters) * Service Time

Example: With 2 active counters and 6 minutes per person:

• If the current called number is 2 and the last issued ticket is 3 (1 remaining), ticket 3 will show a 6-minute wait estimate.
• If no ticket has been called yet (Current Number = 0), the wait estimate starts from the total issued tickets as the initial projected wait time before counters open.