Home A - Z
Page Index

An Otter Wiki

Blame

36b863 lisa 2026-08-12 09:10:36
Add C07 study pages; regenerate C06 via the shared port script sd/C07: home + Naming Conventions, Internal Documentation, Validation Techniques (21 skill codes), linked from the SD hub. sd/C06 pages regenerated by sat/port-reference-godot-to-wiki.py (marker update; C06-home now generated from the repo README like every other page). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 
<!-- 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. -->
3aab9f lisa 2026-08-11 23:24:06
Add C06 skill-code study pages, linked from the SD hub Eleven pages ported from the applied-computing-au C06-Reference-Godot standard: home page with the 34-code lookup, per-topic pages with labelled GDScript examples, evidence standards, and Check Your Understanding fold blocks. Generated mirror — repo copy is canonical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2
# GUI — Godot Control Nodes
3
4
5
**Skill codes on this page**
6
7
| Code | Level | Skill |
8
|---|---|---|
9
| C627 | 3–4 | graphical user interfaces (GUIs) |
10
| C633 | 5–6 | relevant GUI controls |
11
12
**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.
13
14
## C627 — Graphical user interfaces
15
16
**Definition.** A type of user interface that allows users to interact through visual elements such as windows, icons and buttons.
17
18
In Godot a GUI is a scene of **Control nodes**:
19
20
```text
21
Main (Control)
22
├── ZoneInput (LineEdit)
23
├── CalculateButton (Button)
24
└── ResultLabel (Label)
25
```
26
27
```gdscript
28
extends Control
29
# C627 — GUI: this scene of Control nodes is the user interface
30
```
31
32
**Earns the tick:** the program runs with a usable interface built from Control nodes — input, action, output visible on screen.
33
34
**In connect-go-dots** — the gallery screen (`grid.tscn`):
35
36
```text
37
Gallery (Control)
38
└── Margin (MarginContainer)
39
└── Rows (VBoxContainer)
40
├── Title (Label)
41
└── Photos (GridContainer, 3 columns)
42
├── Photo1 (TextureButton)
43
├── …
44
└── Photo6 (TextureButton)
45
```
46
47
The containers (`MarginContainer`, `VBoxContainer`, `GridContainer`) do the layout, so the controls stay aligned at any window size.
48
49
## C633 — Relevant GUI controls
50
51
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.
52
53
| Data | Relevant control |
54
|---|---|
55
| A number (zone, top-up amount) | `SpinBox` |
56
| Yes/no (concession) | `CheckButton` |
57
| Free text (card ID) | `LineEdit` |
58
| One choice from a list (ticket type) | `OptionButton` |
59
| An action ("Calculate") | `Button` |
60
| Read-only output (balance) | `Label` |
61
| A table of journeys | `ItemList` / `Tree` |
62
63
```gdscript
64
extends Control
65
66
func _ready() -> void:
67
# C633 — signal: runs when the user clicks the button
68
$CalculateButton.pressed.connect(_on_calculate_pressed)
69
70
func _on_calculate_pressed() -> void:
71
var zone: int = int($ZoneSpinBox.value) # C633 — SpinBox: zone is a number
72
var fare: float = FARE_TABLE[zone]
73
# C633 — property: sets the label's text at runtime
74
$ResultLabel.text = "Fare: $%.2f" % fare
75
```
76
77
(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.)
78
79
**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.
80
81
**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"):
82
83
```gdscript
84
signal fare_calculated(amount: float) # C633 — custom signal
85
86
func charge(fare: float) -> void:
87
balance -= fare
88
fare_calculated.emit(fare)
89
```
90
91
**In connect-go-dots** — every kind of C633 evidence in 25 lines of code:
92
93
| Evidence | Where |
94
|---|---|
95
| 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 |
96
| Signal connected in code | `button.pressed.connect(_open.bind(button.texture_normal))` in `grid.gd` |
97
| Signal connected in the editor | the Back button's `pressed` → `_on_back_pressed()` in `detail.tscn` |
98
| Property set at runtime | `%Photo.texture = Shared.photo` in `detail.gd` |
99
100
(`%Photo` / `%Photos` is scene-unique-name lookup — tick "Access as Unique Name" on the node.)
101
102
**Also see:** `dodge-the-creeps` — `hud.gd` (Labels, Buttons, timers) and `player.gd` (`signal hit`).
103
104
## Check Your Understanding
105
106
1. C627 vs C633 — one sentence each.
107
108
>| ### Answer
109
>| 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.
110
111
2. A yes/no setting (like concession) belongs on which control?
112
113
>| ### Answer
114
>| `CheckButton`.
115
116
3. Name the three kinds of C633 evidence.
117
118
>| ### Answer
119
>| A relevant control chosen for the data, a signal connected, a property changed at runtime.