Using scroll views

Scroll view is a 3D input plane you can use to get user input from scroll gestures. You can use the scroll message with its parameters for, for example, rotating or moving objects, such as a map plane or a spinning polygon. To give a scroll view a visual shape, you can add a mesh (or hierarchy of objects) under the scroll view. Unlike the other layout and UI components, scroll view does not necessarily need visible content, but can instead work as an interactive surface.

The scroll view reports changes of its scroll position through the Scroll View: Scrolled message. You can add triggers to react to these messages to, for example, set the position of an object according to the scrolling.

Note: Scroll view is a 3D object with location, position, and size in 3D space. It registers user input in 3D coordinates within the area defined by the size of the scroll view. Take this into account when designing interaction with the scroll view. For example, if you rotate the scroll view object, the scroll input gets distorted.

The scroll view generates the same messages as the scroll layer, which you can use for 2D content. See Using scroll layers.

Creating a scroll view

To create a scroll view:

1. Create the object you want to scroll.
   For example, create a Plane.
2. In the Project right-click the scene where you want to create a scroll view and select Create > Scroll View.
3. In the Properties click Add Triggers and in the Add Triggers window select one of the Scroll View messages you want to add to your scroll view.
   For example, select Scroll View: Scrolled.
4. In the Scroll View: Scrolled message click the Add drop-down menu and select one of the triggers.
   For example, select Set Property and set its properties:
   • Target Item to the object you want to control with the scroll view
     If you created a plane in the beginning, select that plane.
   • Target Property to Render Transformation
   • Target Property Attribute to the attribute you want to control with the scroll view
     To scroll the object along the x axis, select Translation X.
   • Value From to From Message
   • Message to Position X
5. When you are done setting Set Property value settings, click Save.
   In the Preview you can now click and drag within the Scroll View object to move along the X axis the object you created, in this example, the plane.

Setting the sensitivity of a scroll view

If you want to scroll the target item of your scroll view faster or slower, change its sensitivity.

To set the sensitivity of a scroll view:

1. In the Project select the scroll view for which you want to set the sensitivity.
2. In the Properties add Scroll Sensitivity property.
3. Adjust the slider of the property to change the sensitivity. The higher the number the more sensitive the scroll view is.

Debugging a scroll view

To test whether the scroll view is working properly, add to a scroll view trigger a Write Log trigger. Every time you use the scroll view, Kanzi Studio writes a message to the Log window.

Scroll view example

This example shows the use of a scroll view as a controller for moving the map plane in a scene. The simplest usage, translating the scroll position coordinates to an object nodes translation attributes is implemented already in the studio project, while more advanced features are created in the program code.

A key aspect in using the scroll view is the controlling of input sensitivity based on the distance of the scroll view plane from the camera. This example uses a one-to-one mapping with the background plane by positioning them at the same distance and orientation from the camera. Scroll view and the background plane, however, are not tied together under the same translation because that way the input coordinate space would move along with the background plane during the user's panning gesture. By positioning the scroll view plane further from the camera, the sensitivity of scroll view gestures increases.

This example demonstrates the use of a raw InterpolatedValue instance in the program code for afflicting a z-offset (zoom) based on the velocity of the movement.

The scroll view as well as the trajectory list box components manipulate input to output coordinates through a value interpolator, effectively allowing for smoother gesture mappings that are often most suitable for touchscreen based interactions.

You can find the example in <KanziWorkspace>/Examples/Scroll_view.

See also

Using scroll layers

Open topic with navigation