PDF Presentation System

A modern, synchronized PDF presentation system perfect for tablets, projectors, and multi-display setups. Control presentations from one device while viewers automatically sync across all connected displays.

Features

• 🎯 Synchronized Viewing - Control presentations from one device, all viewers automatically sync
• 📱 Tablet Optimized - Auto-fullscreen mode, touch-friendly controls
• ⌨️ Keyboard Shortcuts - Navigate with arrow keys, spacebar, Home/End, F for fullscreen
• 🎨 Modern UI - Dark theme with gradient buttons and smooth animations
• 📡 Real-time Updates - Server-Sent Events for instant synchronization
• 🔄 Auto-Recovery - Automatic reconnection and error handling
• 📂 Multiple PDFs - Load and switch between different PDF files

Installation

npm install

Usage

Start the Server

npm start

Or use the provided batch file:

StartPresentation.bat

The server will display the network addresses:

• Controller: http://[your-ip]:3000
• Viewer: http://[your-ip]:3000/viewer

Controller Page

Open the controller page on your main device (laptop, tablet). This page allows you to:

• Navigate through slides (Previous/Next buttons or keyboard shortcuts)
• Jump to specific pages from dropdown
• Switch between different PDF files
• Control what all viewers see

Keyboard Shortcuts:

• ← → ↑ ↓ Space PageUp PageDown - Navigate slides
• Home - Jump to first slide
• End - Jump to last slide
• F - Toggle fullscreen

Viewer Page

Open the viewer page on display devices (tablets, projectors, additional monitors). This page:

• Automatically syncs with the controller
• Auto-enters fullscreen mode (perfect for tablets)
• Shows only the current slide with no controls (clean display)
• Reconnects automatically if connection is lost

Keyboard Shortcuts:

• F - Toggle fullscreen
• R - Reload page

Adding PDF Files

1. Place your PDF files in the public/files/ directory
2. Reload the controller page
3. Your PDFs will appear in the dropdown menu

Configuration

The server runs on port 3000 by default. To change the port:

PORT=8080 npm start

Or set the PORT environment variable in your system.

Technology Stack

• Backend: Node.js + Express
• Frontend: Vanilla JavaScript (ES6 Modules)
• PDF Rendering: PDF.js
• Real-time Sync: Server-Sent Events (SSE)

Browser Compatibility

Works best with modern browsers that support:

• ES6 Modules
• Fullscreen API
• Server-Sent Events
• PDF.js

Tested on:

• Chrome/Edge (Recommended)
• Firefox
• Safari

License

ISC

Author

Created for presentation and display purposes with a focus on simplicity and reliability.