Layout properties binding

The layout property data binding allows you to dynamically link properties such as position, size, or rotation of an element to a data source. This opens the door to dynamic interactions and smooth animations within your applications.

Here are some use cases where using the binding of layout properties is beneficial:

• Interactive movement: Move an object based on the position of a tap or a physical object.
• Animation and gestures: Create smooth rotations based on sliders, gestures, or external data.
• Physical interfaces: Synchronize TUIO data with your elements for immersive touch interactions.

Position Binding

You can use several types of data for the Position:

• Point: A classic representation of a point with coordinates (x, y).
• Norm Point: A normalized representation of the point between 0 and 1.

Using Norm Point

For the Norm Point, a value (0.5, 0.5) places the element at the center of its parent. The origin point is always the center of the element, simplifying dynamic centering and alignment.

Using a Norm Point, it is possible to bind the position of an element to a user event, such as a tap. In the example below, the goal is to display an animation at the location where the user taps, knowing they can tap anywhere on the screen.

When the user taps on the Interactive Zone, the tap position is exposed as two Norm Points:

• Global: Relative to the entire screen.
• Parent: Relative to the element's parent.

This position can be stored in a variable in the PandaSuite database, which will then be bound to the Position property of an object, such as a Lottie animation.

Thanks to this data, the animation dynamically moves based on the tap's position.

Rotation Binding

The Rotation property can be bound to a variable containing an angle in degrees. The behavior is based on the origin point, which is always the center of the element, just like for the position. This ensures rotations are intuitive and predictable.

Key points:

• Angle in degrees: You can dynamically bind an angle to adjust an element's rotation.
• Center origin point: The rotation is centered around the element, enabling smooth animations and visual interactions.

When a user drags a slider, the rotation angle can be dynamically updated based on the slider's value.

A rotation at 0° corresponds to the initial orientation, and a positive or negative rotation adjusts the element around its center.

Extended Possibilities: App-to-App and TUIO

With the App-to-App component, it is possible to link data from an external device or a local server to interact with your elements.

Devices compatible with TUIO provide data, such as the position of a physical object, in the form of Norm Points.

By combining this data with bound properties (e.g., position or rotation), you can synchronize a virtual object with its physical counterpart in real time.

Let me know if you need further refinements or additional updates!