User Interface Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Duplicator user interface is designed as a cross-platform reproduction management system, built using a combination of PHP-based views, Bootstrap for responsive styling, and Electron-specific components for desktop integration. It facilitates document accounting, machine management, and technical document processing tools like PDF imposition and ink fill rate calculation. Sources: README.md, app/view/header.html.php
The interface is structured around a centralized navigation header providing access to core reproduction tools, an administrative dashboard for system configuration, and specialized utility views for technical tasks.
Global Navigation and Layout
The application utilizes a standard Bootstrap-based navigation bar that persists across most views. This header organizes the system's diverse features into logical categories: Document Library, Impositions, PDF Tools, and Print Management. Sources: app/view/header.html.php:68-164, app/translations/en.json:2-24
Navigation Structure
The following diagram illustrates the primary navigation flow and the hierarchy of the User Interface.
The navigation bar is optimized for the Electron environment with specific CSS adjustments for font sizes and spacing to ensure readability in a desktop window. Sources: app/view/header.html.php:6-66
Administrative Dashboard
The Administration interface serves as the central hub for managing the collective's hardware and data. It is divided into logical panels using Bootstrap's panel component. Sources: app/view/admin.html.php:1-93
| Section | Description | Source |
|---|---|---|
| Machine Management | Configuration for duplicators/photocopiers, consumable changes, pricing, and print run logs. | app/view/admin.html.php:11-37 |
| Content Management | Tools for machine help documentation (Q&A), news articles, statistics, and email lists. | app/view/admin.html.php:40-66 |
| Translations | Interface for editing UI strings across different languages. | app/view/admin.html.php:69-82 |
| Security | Password management and SQLite database maintenance (backup/restore). | app/view/admin.html.php:85-103 |
Initial Setup Workflow
Upon first launch, the system presents a multi-step setup interface to configure the environment. Users can either create a new configuration or import an existing SQLite database. Sources: app/view/setup.html.php:73-125
The setup view includes dynamic form logic that reveals specific pricing fields based on the selected machine type (e.g., master costs for duplicators vs. toner costs for photocopiers). Sources: app/view/setup.html.php:181-344
Technical Utility Interfaces
Several views are dedicated to document processing, featuring drag-and-drop zones and interactive controls.
Fill Rate Analysis
The taux_remplissage view provides an interface for analyzing ink consumption. It features a dashed upload zone and a range slider for adjusting "white" pixel detection tolerance. Sources: app/view/taux_remplissage.html.php:127-184
Consumable Change Reporting
The changement view uses a dynamic form where the "Type" and "Drum" fields update based on the machine selected from an AJAX-loaded list. It also renders machine-specific instructions fetched from the Help system. Sources: app/view/changement.html.php:38-124, app/view/changement.html.php:218-249
Electron Integration Components
As a desktop application, the UI includes elements specifically designed for the Electron runtime, most notably the Update Notification system.
Auto-Updater UI
A dedicated JavaScript module, updater-ui.js, manages non-intrusive notifications for application updates. This UI is conditionally initialized only when the electronAPI is detected. Sources: app/js/updater-ui.js:12-25
- Notification Types: Available updates, download progress (with percentage and bytes), and "Ready to Install" status. Sources: app/js/updater-ui.js:52-154
- Animations: Uses CSS
@keyframes slideInRightto provide smooth transitions for notification popups. Sources: app/js/updater-ui.js:225-245
Localization System
The UI utilizes a JSON-based translation system. Translation keys are rendered in the PHP views using a helper function _e('key.path'). This allows for dynamic switching between languages (e.g., English and French) via the language selector in the header. Sources: app/translations/en.json:2-15, app/view/header.html.php:162, app/translations/fr.json:2-15
The user interface of Duplicator effectively bridges the gap between technical reproduction tasks and administrative management, providing a unified, localized experience for reproduction collectives.