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 the Make Material Theme node (based on the Material Design System), or set individual fonts, colors, and attributes 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:
- 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.
- Convert Fahrenheit to Celsius: Shows a number field into which you can enter a temperature in Fahrenheit, and converts it to Celsius.
- 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.
- Enter URL and Show Image: Shows a text field that you can paste an image URL into, and downloads and displays that image.
- Flip Photo: UI prototype of a flippable image in an iPhone.
Image by Efe Kurnaz on Unsplash.
- Open Image: Shows a button. When you click the button, a file selection window pops up, allowing you to choose an image. The image you selected is then displayed.
- Save Image: Shows an image and a button. When you click the button, a file selection window pops up, allowing you to save the image.
- Show Dragged Images: Shows images dragged from other apps and dropped onto the composition's window.
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.
- Display "Open" Window (vuo.ui.open): Shows a window allowing the user to select one or more files or folders.
- Display "Save" Window (vuo.ui.save): Shows a window allowing the user to select a folder and enter a file name for saving a file.
- 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.rounded2): 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 Number Field (vuo.ui.make.number): Creates a layer that provides a field into which the user can enter a number.
- 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 Text Field (vuo.ui.make.text): Creates a layer that provides a field into which the user can enter a single line of text.
- Make Text Field Theme (Rounded) (vuo.ui.make.theme.text.rounded): Create a new rounded theme to be used when rendering text fields, text areas, and number fields.
- 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.