Elementa
Elementa is used for UI Elements and layouts. You need to import VL.Elementa from nuget.org
nuget install VL.Elementa
With right mouse btn you can activate hidden pins on the Elementa elements.
sticky - spacebar the value jumps to the cursor position
The Elementa node allows to convert from Elementa world to Skia layer
Position elements
Layout components
The layout components allow you to combine multiple elements.
They expect a Spread of elements so we first need to group the elements in a Cons
AllocateX/Y Grid Rows Columns Group - space individually DistributeX/Y StackX/Y
Style elements
Data management
We can use reference
for that we create a reference
We get the data, put that data into the widget, updating the datatype inside a record using data and set data.
Create(MyType) -> Create(Referece) -> Pad With myType datatype
Pad with myType dattype -> data(reference) -> MyOperationToGetData -> into widget value input
From widged we can link the output value into SetValue
What is VL.Elementa and how do I install it in VVVV Gamma?
This question will help you understand the basics of what VL.Elementa is (a UI widget library for VVVV using Skia rendering) and the installation process through the Gamma's Quad menu > Manage Nugets.
What are the core building blocks of an Elementa graph?
This will introduce you to the fundamental components: Root nodes, Layout nodes, Widgets, and Components that form the architecture of any Elementa interface.
How do Widgets work in VL.Elementa and what types are available?
This explores the various UI widgets (Sliders, Labels, Toggles, etc.) and how they're implemented to handle different value types in VVVV Gamma.
How do Layout nodes function and how can I arrange widgets responsively?
This question focuses on understanding how to organize your UI elements using Stack, Columns, and other layout operators to create responsive interfaces.
How does the Style system work in VL.Elementa?
This will teach you about styling your UI components, understanding the StylePresets, and how to customize the appearance of your interface.
How can I handle user interaction and events in VL.Elementa?
This explores how to create interactive interfaces, responding to user input through clicks, hovers, drags, and other events.
What is the ElementaContext and how does it provide resources to the graph?
This dives into the more advanced concept of the ElementaContext class that allows widgets to access graph resources and how components can edit their parent widgets.
How can I create custom widgets and components?
This question moves toward more advanced usage, teaching you how to extend the library by creating your own custom UI elements.
How do overlays work and how can I implement multiple overlay layers?
This explores the overlay system in VL.Elementa, which allows you to stack interfaces on top of each other for more complex interactions.
How can I optimize performance for complex Elementa interfaces?
This advanced question addresses potential performance issues when working with complex UIs, teaching you techniques like wrapping widgets in classes and managing frame rates.