Settings Screen

centred panel with slider, checkbox, and dropdown controls.

▶ Run in browser

Tags: ui settings game-ui

What it demonstrates

  • A centred dialog panel via AnchorPreset.CENTER with symmetric margins.

  • A Slider (volume), CheckBox (toggle), and DropDown (quality preset).

  • A FormLayout to align labels with their controls.

  • Apply / Back buttons that read the live control state into a status line.

Run: uv run python examples/features/ui/settings.py

Source

  1"""Settings Screen: centred panel with slider, checkbox, and dropdown controls.
  2
  3# /// simvx
  4# tags = ["ui", "settings", "game-ui"]
  5# web = { root = "SettingsDemo", width = 800, height = 600, responsive = true }
  6# ///
  7
  8## What it demonstrates
  9- A centred dialog panel via `AnchorPreset.CENTER` with symmetric margins.
 10- A `Slider` (volume), `CheckBox` (toggle), and `DropDown` (quality preset).
 11- A `FormLayout` to align labels with their controls.
 12- Apply / Back buttons that read the live control state into a status line.
 13
 14Run: uv run python examples/features/ui/settings.py
 15"""
 16
 17from simvx.core import AnchorPreset, Colour, Label, Node, Panel, Vec2
 18from simvx.core.ui import Button, CheckBox, DropDown, FormLayout, HBoxContainer, Slider, VBoxContainer
 19from simvx.graphics import App
 20
 21QUALITY_PRESETS = ["Low", "Medium", "High", "Ultra"]
 22
 23
 24class SettingsDemo(Node):
 25    """Root node: a centred settings panel with a few controls."""
 26
 27    def on_ready(self):
 28        # Centred panel: anchored to screen centre with symmetric margins so it
 29        # stays centred at any window size.
 30        panel = Panel(name="SettingsPanel")
 31        panel.set_anchor_preset(AnchorPreset.CENTER)
 32        panel.margin_left = -220
 33        panel.margin_right = 220
 34        panel.margin_top = -170
 35        panel.margin_bottom = 170
 36        panel.bg_colour = Colour.hex("#1A1A2E")
 37        self.add_child(panel)
 38
 39        # Vertical stack filling the panel with a small inset.
 40        column = VBoxContainer(name="Column")
 41        column.separation = 14.0
 42        column.set_anchor_preset(AnchorPreset.FULL_RECT)
 43        column.margin_left = 24
 44        column.margin_right = -24
 45        column.margin_top = 20
 46        column.margin_bottom = -20
 47        panel.add_child(column)
 48
 49        title = Label("Settings")
 50        title.font_size = 22.0
 51        title.alignment = "center"
 52        column.add_child(title)
 53
 54        # Form aligns "Label:" against each control.
 55        form = FormLayout(name="SettingsForm")
 56        form.separation = 12.0
 57
 58        # Volume slider.
 59        self._volume = Slider(0, 100, 70)
 60        self._volume.size = Vec2(240, 24)
 61        self._volume.value_changed.connect(self._on_volume)
 62        form.add_field("Volume:", self._volume)
 63
 64        # Fullscreen toggle.
 65        self._fullscreen = CheckBox("Enabled", checked=True)
 66        self._fullscreen.toggled.connect(self._on_fullscreen)
 67        form.add_field("Fullscreen:", self._fullscreen)
 68
 69        # Quality preset dropdown.
 70        self._quality = DropDown(items=QUALITY_PRESETS, selected=2)
 71        self._quality.item_selected.connect(self._on_quality)
 72        form.add_field("Quality:", self._quality)
 73
 74        column.add_child(form)
 75
 76        # Live status line echoing the current values.
 77        self._status = Label("")
 78        self._status.font_size = 13.0
 79        self._status.text_colour = Colour.LIGHT_GRAY
 80        column.add_child(self._status)
 81
 82        # Apply / Back buttons in a bottom row.
 83        buttons = HBoxContainer(name="Buttons")
 84        buttons.separation = 12.0
 85        self._apply = Button("Apply", on_press=self._on_apply)
 86        self._apply.size = Vec2(120, 34)
 87        buttons.add_child(self._apply)
 88        self._back = Button("Back", on_press=self._on_back)
 89        self._back.size = Vec2(120, 34)
 90        buttons.add_child(self._back)
 91        column.add_child(buttons)
 92
 93        self._refresh_status()
 94
 95    def _on_volume(self, value):
 96        self._refresh_status()
 97
 98    def _on_fullscreen(self, checked):
 99        self._refresh_status()
100
101    def _on_quality(self, index):
102        self._refresh_status()
103
104    def _refresh_status(self):
105        """Show the current control state in the status line."""
106        fs = "on" if self._fullscreen.checked else "off"
107        self._status.text = (
108            f"Volume {int(self._volume.value)}  |  Fullscreen {fs}  |  Quality {self._quality.selected_text}"
109        )
110
111    def _on_apply(self):
112        self._status.text = f"Applied: {self._status_summary()}"
113
114    def _on_back(self):
115        self._status.text = "Back pressed (no changes saved)"
116
117    def _status_summary(self):
118        fs = "on" if self._fullscreen.checked else "off"
119        return f"vol={int(self._volume.value)} fullscreen={fs} quality={self._quality.selected_text}"
120
121
122if __name__ == "__main__":
123    App(title="SimVX Settings", width=800, height=600).run(SettingsDemo())