UI (vuo.ui)
Nodes for creating and styling a user interface (UI).
Widgets
Using these nodes, you can create on-screen controls that allow end-users to trigger actions or change values in a composition:
By default, these widgets use a gray and blue color scheme with rounded corners. You can customize their appearance using these nodes:
Using the Combine Widget Themes node, you can create reusable, cohesive themes — collect multiple widget themes together into a single item, and connect that theme to any widget.
Example compositions:
Nodes:
- Combine Widget Themes (vuo.ui.theme.combine): Groups themes for individual types of widgets (such as those created by Make Action Button Theme (Rounded) and Make Slider Theme (Rounded)) into a single item which can be connected to any type of widget.
- Get Drag Values (vuo.ui.get.drag): Outputs information about a drag event from the Receive File Drags node.
- Make Action Button (vuo.ui.make.button): Creates a layer that fires an event when clicked.
- Make Action Button Theme (Rounded) (vuo.ui.make.theme.button.rounded): Creates a theme to be used when rendering action buttons.
- Make Material Theme (vuo.ui.make.theme.material): Creates a theme based on the Material Design System.
- Make Slider (vuo.ui.make.slider): Creates a layer to interactively set a value by dragging a handle along a track.
- Make Slider Theme (Rounded) (vuo.ui.make.theme.slider.rounded): Creates a theme to be used when rendering sliders.
- Make Toggle Button (vuo.ui.make.toggle): Creates a layer that can be toggled on/off, and fires an event when it’s changed.
- Make Toggle Button Theme (Rounded) (vuo.ui.make.theme.toggle.rounded): Creates a theme to be used when rendering toggle buttons.
- Receive File Drags (vuo.ui.drag.file2): Fires events when the user drags files from other apps into the composition’s window.