Staticus Website Compiler - GUI
Overview
This document outlines the details of the GUI application designed to manage and execute Gulp tasks within the Staticus Website Compiler. The GUI provides a user-friendly interface to select project directories and run predefined tasks efficiently.
Prerequisites
Ensure that the Staticus Setup Page has been followed before running the GUI application.
Manual Terminal Task Execution
Review the Staticus Task Page to find out about manual terminal task execution.
Running the GUI Application
- Navigate to the Staticus root directory.
- Execute the script:
python gui.py - The application window will launch with the title "Staticus Website Compiler".
User Interface Components
Project Directory Selection
- Dropdown Menu: Lists recently used directories.
- Browse Button (🔍): Opens a file dialog to select a directory.
- Open Button (📂): Opens the selected directory in the file explorer.
- Terminal Button (>_): Opens a terminal window at the selected directory.
| User Action | GUI Response |
|---|---|
| Select a directory from dropdown | Updates configuration and validates content |
| Click "Browse" button | Opens a dialog to pick a directory |
| Click "Open" button | Opens selected directory in file explorer |
| Click "Terminal" button | Opens a terminal at the selected location |
Task Execution
- Task Buttons: Each button represents a Gulp task.
- Hover Tooltips: Show task descriptions and commands.
| User Action | GUI Response |
|---|---|
| Click a task button | Runs the selected Gulp task |
| Hover over a button | Displays the command to execute |
Execution Status
Displays real-time updates such as:
- "Task 'build' selected."
- "Invalid directory selected."
- Error messages if an issue occurs.
Configuration Handling
- The GUI reads from
settings.jsonto manage directories and settings. - Recent Directories: Automatically filters out invalid directories.
- Customization Options:
dir_recent_max: Limits the number of recent directories remembered (default: 10).
Error Handling
- If an error occurs (e.g., missing
config.json), an error message is displayed. - Errors and warnings are logged for troubleshooting.
Common Errors:
- "Config file not found" → Ensure
config.jsonexists in the selected directory. - "Error running Gulp task" → Verify Node.js and Gulp installations.
- "Invalid directory selected" → Ensure the directory contains required files.
Example Workflow
- Launch the GUI using
python gui.py. - Select or browse a valid project directory.
- Choose a task from the UI (e.g.,
build). - Monitor execution status in the GUI.
- Open logs if debugging is needed.
Conclusion
The GUI simplifies the process of managing and executing Gulp tasks, offering logging, error handling, and directory management features. If any issues arise, refer to the logs for troubleshooting.