🖥️ Synticore Website Compiler - GUI Guide

🧭 Overview

The GUI is a task launcher and project manager for Synticore, with schema-driven config editing and version awareness built in.

Primary entry:

python gui.py

✅ Prerequisites

Complete setup first:

• Python dependencies installed (requirements.txt)
• Node dependencies installed (npm install)
• valid project directory selected (must contain config.json and in/)

See Setup Guide.

📦 What The GUI Loads

On startup, the GUI:

1. Ensures default config files exist.
2. Loads config/settings.json for project recents.
3. Parses gulpfile.js for task categories/buttons.
4. Loads compiler version from source/resource/info.json.
5. Initializes config editor with:
   • default config + schema (config/default/project/)
   • optional project schema overlay (<project>/config.schema.json)

🧩 Main UI Areas

Project Selection

• Recent-project dropdown (dir_recent)
• Browse button to choose project directory
• Open-directory button (file explorer)
• Open-terminal button (tool root terminal)

Behavior:

• Selected project is promoted to dir_recent[0].
• Invalid recents are filtered and pruned.
• dir_recent_max controls retained history length.

Task Categories And Buttons

Task categories are parsed from gulpfile.js comments and createTask(...) entries, then rendered as button groups.

Each button runs:

npm run gulp <task>

Status And Progress

The app displays status updates for selection, task launch, validation, and warning/error states.

Config Editor (Schema-Driven)

Config editor merges and edits:

• tool default config
• project config overrides
• optional project schema extensions

It supports typed editors from schema metadata (enum, path, color, arrays, maps, unions).

Project Version Watcher

The GUI watches <project>/info.json and compares project version vs compiler version.

Visual states:

• up-to-date
• project older than compiler (upgrade path available)
• project newer than compiler (risk of incompatibility)

🔁 Typical Workflow

1. Launch GUI.
2. Select project directory.
3. Confirm version status label.
4. Run a task (for example build or watch).
5. Open config editor and adjust project settings if needed.
6. Save changes and rerun affected task.

🧰 Error Handling And Logs

Key logs:

• _log/gui.log
• _log/gulpfile.log

Common issues:

1. Invalid project selection
   • missing config.json or missing in/
2. Task launch errors
   • missing node modules or PATH issues
3. Config editor load/save errors
   • malformed JSON in project config/schema

🖥️ Terminal Vs GUI

Use GUI when you want:

• fast task selection
• visual config editing
• version/status visibility

Use terminal when you want:

• scriptable automation
• verbose direct command output
• CI and maintenance scripting

See Terminal Task Reference.