⚗️ Switch

The Switch widget is a binary control used to toggle between two distinct states: On and Off. It provides a clear, high-contrast visual representation of a system's status and is the modern standard for settings like "Enable Notifications," "Dark Mode," or "Power."

---

⚙️ Properties (Props)

The Switch configuration is defined by the SwitchWidget interface. It behaves similarly to a Checkbox but with a more tactile, sliding animation.

Property	Type	Description
Checked	boolean	The current state: true (On) or false (Off).
Animation Time	number	The duration in milliseconds for the knob to slide.
X / Y	number	The coordinate position on the canvas.
Width / Height	number	The dimensions of the switch background.

---

🛠 Interaction Logic

The Switch is designed for effortless touch interaction:

• Tapping: Clicking anywhere on the widget reverses the current checked state.
• Sliding: Users can grab the knob and slide it across the track. The engine will "snap" the switch to the nearest state once released.
• Visual State: The "Indicator" (the background behind the knob) usually changes color when the switch is active to provide immediate feedback.

---

🎨 Styling the States

In the Inspector Panel, you can define unique aesthetics for both positions:

• Main (Background): Set different colors for the Checked (On) and Unchecked (Off) background tracks.
• Knob: Customize the color, size, and roundness of the sliding handle. A slight shadow can make the knob appear "raised" and easier to touch.
• Transition: Adjust the easing of the slide animation to make the switch feel "snappy" or "smooth."

---

⚡ Runtime API (Lua)

Switches are the primary trigger for hardware state changes in the Logic and Events system.

-- Check the state of a switch
if sw_night_mode:get_state() then
    app:set_theme("dark")
end

-- Programmatically flip the switch
sw_power:set_state(true)

-- Listen for the toggle event
function on_switch_toggle(is_on)
    if is_on then
        hardware:pin_write(13, 1) -- Turn on a physical relay
    else
        hardware:pin_write(13, 0) -- Turn off a physical relay
    end
end

---

DESIGN TIP

For industrial interfaces, use a Green/Grey color scheme for On/Off. for consumer electronics, a Blue/Grey or Accent/Grey scheme often feels more modern and less "alarming."

---

🚀 Next Steps

• Checkbox — Use this for "Terms and Conditions" or lists where a sliding animation is unnecessary.
• LED — Use an LED widget next to a switch to show the actual hardware confirmation of the state.
• Logic and Events — Learn how to prevent a switch from toggling if a safety condition isn't met.