Screen · Home
Home SwiftUI Screen
A room at the centre, its devices in a ring around it: tap to toggle, swipe to change rooms.
A radial control hub for smart home and shortcut apps: the current room sits in a large centre disc with its devices on a ring of smaller discs joined by soft bridges. Tap a device to switch it, press and hold for its controls, swipe the centre to change rooms while the ring re-deals, and speak or type a command from the dock.
- SwiftUI
- iOS 17.0+
- device-hub
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- A ring of device discs joined to the room by soft bridges
- Tap to switch, press and hold for a control sheet
- Swipe the centre to change rooms; the ring re-deals with a stagger
- A dock with a text command, a listening capsule and cameras
- Every disc is a labelled button with its state for VoiceOver
In the Build Kit
Velvet (style). Your agent builds around this screen in the same design.
Used in
Smart Home App (template)
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
The current room sits in a large centre disc with its temperature and humidity. Up to eight devices sit on a ring around it, each joined to the room by a soft bridge that pinches in the middle, so the hub reads as one piece rather than nine buttons. A device that is on is a solid block with its outlined glyph in the block's ink; one that is off is a pale surface disc with a hairline. Tap a disc to switch it, press and hold for its controls, and swipe the centre sideways to move to the next room while the ring re-deals from the middle with a short stagger.
Under the hub, the dock puts a keyboard and the cameras either side of a wide block capsule textured with a dot matrix. Tap the capsule and the dots ripple like a voice level while the transcript lands in a chip above it.
Notes
- Build
[HubRoom]with up to eightHubDevices each and bindselectionto the room id. The hub owns no data:onToggleandonHoldhand you the device and you change your model. - Devices keep their slot: the first sits at twelve o'clock and the rest follow clockwise, so a room with five devices leaves gaps instead of respacing when one is added.
HubDevice.tintindexes the palette you pass inDeviceHubStyle, so the same device keeps its colour in every preset.- The discs carry a quiet material inside their edge (a highlight up and to the left, a shade down and to the right, a hairline rim). Nothing glows outward; set
materialto 0 for flat discs. HubDockandHubDotMatrixare separate so you can put destinations, a voice button or anything else on the capsule. The matrix animates only whileisListeningis true and holds still under Reduce Motion.- Every disc is a button with its name and state ("Pendant lights, On · 80%") and a Controls action. The centre is adjustable: swipe up or down to change rooms. Differentiate Without Color is covered by the fill, the rim and a glyph that changes with state where one exists.
DeviceHubExampleat the end ofDeviceHub.swiftis the screen shown in the preview, with loading and hub-offline states and a small command matcher behind the keyboard and voice. Replacerun(_:)with your assistant.
03
Keep building
Pieces that work well next to this one.