Usage

Web Interface

The application provides two main interfaces:

  1. Admin Management Interface - Modern React-based admin panel

  2. Display Kiosk Interface - Full-screen slideshow display

Admin Management Interface

The admin interface is a modern React application accessible at /admin (e.g., http://localhost:5000/admin).

Features: * Dashboard with system statistics and quick actions * Complete slideshow management (create, edit, delete, preview) * Display management and assignment * Assignment history and audit trails * Bulk operations for display management * Drag-and-drop slideshow assignment * Real-time status monitoring

Default Login: * Username: admin * Password: admin (change this in production!)

Navigation: * Dashboard - Overview and quick actions * Slideshows - Manage slideshow content and settings * Displays - Monitor and manage display devices * Assignment History - View slideshow assignment audit trail

User Management

After logging in as admin, you should:

  1. Change the default admin password: Go to Profile Settings (click username dropdown)

  2. Create user accounts: Go to User Management (admin only) to create accounts for other administrators

User Management Features (Admin Only):

  • Create new users with auto-generated temporary passwords

  • Edit user email, admin status, and active status

  • Reset user passwords (generates new temporary password)

  • Deactivate users (prevents login without deleting)

Profile Settings (All Users):

  • Update email address

  • Change password (requires current password)

Creating Slideshows

  1. Navigate to the admin interface at /admin

  2. Click “Create New Slideshow”

  3. Enter a name and description

  4. Add slides with images, videos, or web content

  5. Configure display settings (duration, transitions, etc.)

Managing Slides

For each slideshow, you can:

  • Add new slides

  • Reorder slides by dragging and dropping

  • Edit slide content and settings

  • Remove slides

  • Preview the slideshow

Video Format Requirements

When uploading video files, the server validates that the video uses a codec supported by web browsers. Videos with unsupported codecs will be rejected with a clear error message.

Supported Video Codecs:

  • H.264 (MP4 containers) - Universally supported by all modern browsers

  • VP8 (WebM containers) - Supported by most modern browsers

  • VP9 (WebM containers) - Supported by most modern browsers

  • Theora (Ogg containers) - Limited browser support

  • AV1 (WebM containers) - Growing browser support

Recommended Format:

For maximum compatibility, we recommend using MP4 files with H.264 video codec and AAC audio codec. This format is supported by all modern web browsers including Chrome, Firefox, Safari, and Edge.

Converting Videos:

If you have a video in an unsupported format (e.g., MPEG-1, MPEG-2, WMV, AVI with older codecs), you can convert it using FFmpeg:

# Convert any video to MP4 (H.264)
ffmpeg -i input.mpeg -c:v libx264 -c:a aac output.mp4

# Convert to WebM (VP9)
ffmpeg -i input.avi -c:v libvpx-vp9 -c:a libopus output.webm

Text Slide Formatting

Text slides support basic HTML formatting for enhanced presentation:

Supported Tags:

  • <b>, <strong> - Bold text

  • <i>, <em> - Italic text

  • <u> - Underlined text

  • <br> - Line break

  • <p> - Paragraph

Examples:

This is <b>bold</b> and <i>italic</i> text.
<p>This is a paragraph.</p>
Line one<br>Line two

Security: All other HTML tags and attributes are automatically stripped to prevent XSS attacks. Plain text without HTML tags will have newlines preserved as line breaks.

Skedda Calendar Slides

The Skedda calendar slide type displays reservations from a Skedda booking system (or any compatible iCal/ICS feed) in a visual grid format.

Setting Up a Skedda Calendar Slide:

  1. Create or edit a slideshow

  2. Click “Add Slide”

  3. Select “Skedda Calendar” as the content type

  4. Enter your Skedda ICS feed URL (e.g., https://yourspace.skedda.com/ical/...)

  5. Configure the refresh interval (how often to fetch updated booking data)

  6. Save the slide

Configuration Options:

  • ICS Feed URL (required): The URL of your Skedda iCal feed. Find this in your Skedda account under Settings > Integrations > iCal.

  • Refresh Interval: How often to fetch updated booking data from the ICS feed. Options: 5, 10, 15 (default), 30, or 60 minutes.

Calendar Display Features:

  • Grid view showing time slots (rows) and spaces/resources (columns)

  • Events displayed with the person’s name and booking description

  • Current time indicator with auto-scroll to keep current time visible

  • Auto-refresh: calendar data is refreshed each time the slide becomes active

  • Visual distinction between regular and recurring events (gray background)

Kiosk Display Mode

Access the full-screen kiosk display at /display/<display-name>:

  • Full-screen slideshow display

  • Automatic slide transitions

  • Touch/click navigation

  • Keyboard controls (space bar, arrow keys)

Programmatic Access

For programmatic management of slideshows, displays, and other resources, the application provides a complete REST API. See API Reference for full API documentation including authentication, endpoints, and examples.