UI (vuo.ui)

These nodes are for creating a user interface (UI) in a composition.

Widgets

Using these nodes, you can create on-screen controls that allow end-users to trigger actions or change values in a composition:

• Make Action Button
• Make Toggle Button
• Make Slider

By default, these widgets use a gray and blue color scheme with rounded corners. You can customize their appearance using these nodes:

• Make Action Button Theme (Rounded)
• Make Toggle Button Theme (Rounded)
• Make Slider Theme (Rounded)

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:

• Adjust Color With Slider: When you use the slider, this composition adjusts the brightness of the displayed color.
• Advance Through Slideshow: When you click on a button, this composition displays the next or previous image in a list.
• Change Color with Button: This composition uses a toggle button to change a color.
• Display Control Panel: Demonstrates customizing the appearance of UI widgets. The control panel doesn't actually control anything.
• Display Progress Bar: Demonstrates repurposing a slider as a progress indicator.
• Flip Photo: UI prototype of a flippable image in an iPhone.
• Show Dragged Images: Shows images dragged from other apps and dropped onto the composition's window.

Nodes:

• Receive File Drags (vuo.ui.drag.file2): Fires events when the user drags files from other apps into the composition’s window.
• 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 Slider (vuo.ui.make.slider): Creates a layer to interactively set a value by dragging a handle along a track.
• 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 Theme (Rounded) (vuo.ui.make.theme.slider.rounded): Creates a theme to be used when rendering sliders.
• Make Toggle Button Theme (Rounded) (vuo.ui.make.theme.toggle.rounded): Creates a theme to be used when rendering toggle buttons.
• Make Toggle Button (vuo.ui.make.toggle): Creates a layer that can be toggled on/off, and fires an event when it’s changed.
• 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.