<!-- Generated from applied-computing-au vic/unit3-4/sat/C06-2026/C06-Reference-Godot by port-reference-godot-to-wiki.py — do not hand-edit; re-run the port. -->
# GUI — Godot Control Nodes


**Skill codes on this page**

| Code | Level | Skill |
|---|---|---|
| C627 | 3–4 | graphical user interfaces (GUIs) |
| C633 | 5–6 | relevant GUI controls |

**The two codes in one line:** C627 — your program *has* a working GUI built from Control nodes. C633 — you chose the *right* control for each piece of data and wired it up with signals and runtime property changes.

## C627 — Graphical user interfaces

**Definition.** A type of user interface that allows users to interact through visual elements such as windows, icons and buttons.

In Godot a GUI is a scene of **Control nodes**:

```text
Main (Control)
├── ZoneInput       (LineEdit)
├── CalculateButton (Button)
└── ResultLabel     (Label)
```

```gdscript
extends Control
# C627 — GUI: this scene of Control nodes is the user interface
```

**Earns the tick:** the program runs with a usable interface built from Control nodes — input, action, output visible on screen.

**In connect-go-dots** — the gallery screen (`grid.tscn`):

```text
Gallery (Control)
└── Margin (MarginContainer)
    └── Rows (VBoxContainer)
        ├── Title  (Label)
        └── Photos (GridContainer, 3 columns)
            ├── Photo1 (TextureButton)
            ├── …
            └── Photo6 (TextureButton)
```

The containers (`MarginContainer`, `VBoxContainer`, `GridContainer`) do the layout, so the controls stay aligned at any window size.

## C633 — Relevant GUI controls

A control is *relevant* when it matches the data it collects or shows. You make it work by listening to its **signals** and changing its **properties** while the program runs.

| Data | Relevant control |
|---|---|
| A number (zone, top-up amount) | `SpinBox` |
| Yes/no (concession) | `CheckButton` |
| Free text (card ID) | `LineEdit` |
| One choice from a list (ticket type) | `OptionButton` |
| An action ("Calculate") | `Button` |
| Read-only output (balance) | `Label` |
| A table of journeys | `ItemList` / `Tree` |

```gdscript
extends Control

func _ready() -> void:
    # C633 — signal: runs when the user clicks the button
    $CalculateButton.pressed.connect(_on_calculate_pressed)

func _on_calculate_pressed() -> void:
    var zone: int = int($ZoneSpinBox.value)   # C633 — SpinBox: zone is a number
    var fare: float = FARE_TABLE[zone]
    # C633 — property: sets the label's text at runtime
    $ResultLabel.text = "Fare: $%.2f" % fare
```

(The C627 sketch above used a `LineEdit` called `ZoneInput`. Zone is a number, so the *relevant* control is a `SpinBox` — making that upgrade is exactly the C627 → C633 step.)

**Earns the tick:** controls chosen to fit the data (per the table above), at least one signal connected in code, at least one property changed at runtime. **Doesn't:** a `LineEdit` for everything, or a layout that never responds to the user.

**Custom signals** count as strong C633 evidence — a signal is Godot's version of the glossary's *event* ("a special type of method that is called when an object's state changes"):

```gdscript
signal fare_calculated(amount: float)   # C633 — custom signal

func charge(fare: float) -> void:
    balance -= fare
    fare_calculated.emit(fare)
```

**In connect-go-dots** — every kind of C633 evidence in 25 lines of code:

| Evidence | Where |
|---|---|
| Control fits the data | `TextureButton` — a clickable photo *is* a button whose face is the picture; `TextureRect` shows the chosen photo read-only; `GridContainer` lays out the 3-column grid |
| Signal connected in code | `button.pressed.connect(_open.bind(button.texture_normal))` in `grid.gd` |
| Signal connected in the editor | the Back button's `pressed` → `_on_back_pressed()` in `detail.tscn` |
| Property set at runtime | `%Photo.texture = Shared.photo` in `detail.gd` |

(`%Photo` / `%Photos` is scene-unique-name lookup — tick "Access as Unique Name" on the node.)

**Also see:** `dodge-the-creeps` — `hud.gd` (Labels, Buttons, timers) and `player.gd` (`signal hit`).

## Check Your Understanding

1. C627 vs C633 — one sentence each.

>| ### Answer
>| C627: the program has a working GUI built from Control nodes. C633: each control is the *right* one for its data, wired with signals and runtime property changes.

2. A yes/no setting (like concession) belongs on which control?

>| ### Answer
>| `CheckButton`.

3. Name the three kinds of C633 evidence.

>| ### Answer
>| A relevant control chosen for the data, a signal connected, a property changed at runtime.