Contents Menu Expand
Kanzi framework 3.9.9 documentation
Kanzi framework
  • Kanzi 3.9.9
  • Installing Kanzi
    • Upgrading Kanzi
    • Kanzi Studio license management
      • Using a product key to activate Kanzi Studio
      • Using a dongle license to activate Kanzi Studio
      • Using a floating license
      • Using a license file to activate Kanzi Studio
      • Changing the type of Kanzi Studio license
      • Transferring your license
      • Upgrading computer hardware or operating system
    • What is installed with Kanzi?
  • Tutorials
    • Getting started
      • Getting started with Kanzi Studio
        • Step 1 - Create a project
        • Step 2 - Create and modify content
        • Step 3 - Create user interface structure
        • Step 4 - Create interactions
        • Step 5 - Create and use resources
        • Step 6 - Add application states
      • Create a simple IVI application
        • Step 1 - Create a new project and import assets
        • Step 2 - Create the application structure
        • Step 3 - Create a control to navigate between the Page nodes
        • Step 4 - Create states for the Car page
        • Step 5 - Create the content for the Media page
        • Step 6 - Deploy your application
    • UI structure
      • Structure application UI
        • Step 1 - Create application structure
        • Step 2 - Control UI elements
      • Control application UI
      • Generate UI from a data source
      • Combine projects
    • Kanzi Android framework (droidfw)
      • Getting started
      • Data sources
    • UI controls
      • Button
      • Toggle button
      • Slider
      • List box
        • Step 1 - Create a contacts list and get contacts from a data source
        • Step 2 - Set the appearance of the list items
        • Step 3 - Define the appearance for the selected item
      • 3D model rotation
    • Input
      • UI navigation
        • Step 1 - Navigate the application screens
        • Step 2 - Visualize the focus
      • Pan, zoom, tap
        • Step 1 - Pan the map
        • Step 2 - Zoom and rotate the map
        • Step 3 - Long-press to drop a pin
      • Drag and drop
        • Step 1 - Prepare the content
        • Step 2 - Implement the drag and drop functionality
        • Step 3 - Animate the button that the user drags
    • Rendering
      • Materials and textures
        • Step 1 - Import content and create the background
        • Step 2 - Create a new material type and textures for the car body
        • Step 3 - Set the materials for tires, rims, and chrome parts
        • Step 4 - Define material properties for the windows and the headlight glass
        • Step 5 - Adjust materials
      • Blur
      • Bloom
        • Step 1 - Render the car and headlights
        • Step 2 - Show the bloom effect
        • Step 3 - Fine-tune the bloom effect
      • Stencil
        • Step 1 - Create the stencil
        • Step 2 - Apply the stencil
      • Reflections
        • Step 1 - Prepare the nodes in your project
        • Step 2 - Render the reflection
      • Progressive rendering
        • Step 1 - Prepare the nodes in your project
        • Step 2 - Distribute rendering across frames
        • Step 3 - Fine-tune content rendered by the Progressive Rendering Viewport 2D node
    • Animations
      • Keyframe animations
        • Step 1 - Create the animation
        • Step 2 - Fine-tune the animation
      • Interpolate property values
        • Step 1 - Interpolate the rotation of the compass dial
        • Step 2 - React to a completed interpolation
      • Activity transitions
    • Localization and theming
      • Localization
        • Step 1 - Localize text and texture content
        • Step 2 - Create locale packs for additional locales
        • Step 3 - Load locale packs
      • Localization for right-to-left locales
        • Step 1 - Prepare an application for right-to-left locales
        • Step 2 - Define the application layout for the right-to-left locales
        • Step 3 - Load the locales and instantiate the prefabs
      • Theming
        • Step 1 - Create a theme for a cluster
        • Step 2 - Create a theme for a car variant
        • Step 3 - Export and use the API to set the application theme
    • Instrument cluster
      • Gauges
        • Step 1 - Create the speed needle
        • Step 2 - Create the fuel and battery needles
      • Cluster indicators
        • Step 1 - Create the fuel level indicator
        • Step 2 - Create the headlights indicator
      • Dynamic layout
    • C++ API
      • Hello World!
        • Step 1 - Create project with C++ application and print to debug console
        • Step 2 - Set a property value using the Kanzi Engine API
      • Program Activities with C++ Code Behind
      • Application logic
        • Step 1 - Use the Kanzi Engine API to load a Kanzi binary
        • Step 2 - Access the content created in the Kanzi Studio project
        • Step 3 - Create prefab instances and load images from the file system
        • Step 4 - Create the interaction handler for selecting a widget
        • Step 5 - Create the interaction for the widget description panel
        • Step 6 - Build and deploy your application to an Android device
      • Asynchronous loading
      • Data sources
        • Step 1 - Define a data source
        • Step 2 - Use the data source in Kanzi Studio
        • Step 3 - Define and use a static list data source
    • Lua API
      • Step 1 - Run a Lua script
      • Step 2 - Access nodes and properties
      • Step 3 - Instantiate prefabs
      • Step 4 - Randomize the grid
      • Step 5 - React to input messages
      • Step 6 - Send messages
  • Kanzi fundamentals
    • Presentation
    • Layouts
    • Resource management
    • Property system
    • Logic programming
    • Animation system
  • Best practices
    • Performance
      • Application idle state
      • Measuring application performance
        • Measuring the performance of your application code
        • Measuring the performance of Kanzi Engine
        • Resource profiling reference
        • Measuring the loading and deployment time of resources
      • Troubleshooting the performance of your application
      • Loading resources in parallel
    • Animations
      • Removing redundant Animation Data channels
      • Removing redundant keyframes
    • Images and textures
      • Adjusting the data size
      • Compressing textures
      • Filtering textures
      • Using mipmaps
      • Using a tile atlas
    • Meshes
      • Preparing 3D assets in third-party tools
      • Optimizing meshes
      • Optimizing fragment shaders
      • Reducing the number of rendered vertices
      • Setting the correct size of vertex cache
      • Editing the origin of nodes and setting the data type for vertex attributes
      • Setting culling
    • Rendering
      • Optimizing the rendering of layouts
      • Preventing overdraw with the Sorting Filter
      • Caching 2D nodes
      • Composition and blending
      • Rendering partially transparent nodes
      • Configuring nodes for efficient rendering
      • Applying anti-aliasing
      • Setting culling
    • Shaders
      • Reducing shader switches
      • Using binary shaders
      • Optimizing fragment shaders
    • Using the Kanzi Command Prompt
    • Cleaning up your project
  • Working with …
    • 2D content
      • Blending and compositing 2D nodes
      • 2D effects
        • Using the Blur Effect 2D effect
        • Using the Mask Effect 2D effect
        • Using the Outline Effect 2D effect
        • Using the Shadow Effect 2D effect
        • Using multiple effects
        • Using effects in the Kanzi Engine API
      • Adding 2D nodes to a 3D scene
      • Creating a 3D perspective effect for 2D nodes
      • Applying custom rendering to 2D nodes
      • Caching 2D nodes
    • 2D effects
      • Using the Blur Effect 2D effect
      • Using the Mask Effect 2D effect
      • Using the Outline Effect 2D effect
      • Using the Shadow Effect 2D effect
      • Using multiple effects
      • Using effects in the Kanzi Engine API
    • 3D assets
      • Preparing 3D assets in third-party tools
      • Importing 3D assets
      • Merging 3D assets
      • Using 3D models with UVs
    • Activities
      • Using the Activity Browser
      • Exclusive Activity Host
      • Data-Driven Exclusive Activity Host
      • Parallel Activity Host
      • Creating transitions between Activities
      • Programming Activities with Code Behind
        • C++ Code Behind
        • Java Code Behind
    • Aliases
    • Android
      • Requirements
      • Kanzi Android framework (droidfw)
        • Working with Kanzi Android framework (droidfw) projects
        • Using the Kanzi views and view adapters
        • Observing state changes and handling events in Kanzi Android framework (droidfw)
        • Using Kanzi Java and Kotlin API
        • Using plugins in Kanzi Android framework (droidfw)
        • Migrating from Kanzi application framework (appfw) to Kanzi Android framework (droidfw)
        • Kanzi Android framework API reference
        • Kanzi Engine Java API reference
      • Kanzi application framework (appfw)
        • Kanzi Android application framework API reference
        • Application configuration reference
      • Deployment
      • Troubleshooting
    • Animations
      • Creating keyframe animations
      • Using keyframe animations
      • Creating property-driven animations
      • Interpolating property values
      • Interpolating property values using easing functions
      • Incrementing the value of a property type
      • Editing timeline sequences
      • Editing animation clips
      • Importing animations
      • Creating animations and timelines using the Kanzi Engine API
    • Application
      • Application configuration reference
    • Asset packages
    • Automation
    • Bindings
      • Using bindings
      • Customizing instances of prefabs
      • Bindings expressions reference
      • Troubleshooting bindings
    • Bookmarks
    • Brushes
    • Button nodes
      • Using the Button nodes
      • Using the Toggle Button nodes
      • Using the Toggle Button Group nodes
    • Camera node
      • Using the Camera node
      • Making nodes turn to a Camera node
    • Color workflow
      • Color editors in Kanzi Studio
    • Content control nodes
      • Using the Image node
      • Using the Nine Patch Image node
    • Data sources
      • Defining a data source
      • Using a data source
    • Deploying Applications
      • Deploying Kanzi applications to Android
      • Deploying Kanzi applications to RCar Gen3/INTEGRITY
      • Deploying Kanzi applications to Linux
      • Deploying Kanzi applications to QNX
      • Deploying Kanzi applications to Windows
    • Empty Node nodes
    • Factory content
      • Using the Factory Content assets
    • Filters
      • Using the Contains Property Filter
      • Using the Object Type Filter
      • Using the Property Is Equal Filter
      • Using the Sorting Filter
      • Using the Tag Filter
    • Focus
      • Using focus
      • Using the Key Manipulator
      • Using the Navigation Manipulator
    • Grid Layout nodes
    • Images
      • Using the Image node
      • Using the Nine Patch Image node
      • Importing images
      • Preparing images in third-party tools
      • Importing Adobe Photoshop psd files
    • Importing
      • Preparing 3D assets in third-party tools
      • Importing 3D assets
      • Merging 3D assets
      • Importing animations
      • Importing images
      • Preparing images in third-party tools
      • Importing Adobe Photoshop psd files
      • Importing fonts
    • Input
      • Using the Click Manipulator
      • Using the Drag-And-Drop Manipulator
      • Using the Key Manipulator
      • Using the Long-Press Manipulator
      • Using the Multi-Click Manipulator
      • Using the Navigation Manipulator
      • Using the Pan Manipulator
      • Using the Pinch Manipulator
    • Instantiator node
    • Interactivity control nodes
    • Java and Kotlin
    • Kanzi Command Prompt
    • kzb files
      • Using kzb files
    • Layout control nodes
      • Layouts
      • Using the Content Layout nodes
      • Using the Dock Layout nodes
      • Using the Flow Layout nodes
      • Using the Grid Layout nodes
      • Using the Stack Layout nodes
      • Using the Trajectory Layout nodes
    • Level-Of-Detail node
    • Light nodes
    • List Box nodes
      • Using the Grid List Box nodes
      • Using the Trajectory List Box 3D node
      • Using the List Box Item Container prefabs
    • Localization
      • Localizing applications
      • Using locales
      • Kanzi Studio localization plugin API reference
    • Logging
      • Using Write Log action
    • Lua
    • Material types and materials
      • Using material types
      • Using materials
      • Physically-based material properties
      • Creating textured materials
      • Creating transparent materials
      • Using hardware composition
    • Meshes
      • Importing 3D assets
      • Optimizing meshes
      • Editing the origin of nodes
      • Meshes best practices
        • Preparing 3D assets in third-party tools
        • Optimizing meshes
        • Optimizing fragment shaders
        • Reducing the number of rendered vertices
        • Setting the correct size of vertex cache
        • Editing the origin of nodes and setting the data type for vertex attributes
        • Setting culling
      • Using materials
      • Using skinned meshes
      • Creating meshes using the Kanzi Engine API
    • Morphs
    • Node components
    • Object sources
    • Page and Page Host nodes
      • Setting transitions between Page nodes
    • Performance profiling
      • Measuring the performance of your application code
      • Measuring the performance of Kanzi Engine
      • Resource profiling reference
      • Measuring the loading and deployment time of resources
    • Plugins - Kanzi Engine
      • Using Kanzi Engine plugins
      • Creating Kanzi Engine plugins
      • Debugging native Kanzi Engine plugins
      • Extending the functionality of Kanzi Engine
      • Extending the functionality of Kanzi Engine with Java
      • Reference for showing Kanzi Engine plugin custom types in Kanzi Studio
      • Kanzi Studio property editors for property types declared in Kanzi Engine plugins
    • Plugins - Kanzi Studio
      • Installing Kanzi Studio plugins
      • Creating Kanzi Studio command plugins
      • Creating Kanzi Studio window plugins
      • Defining a property editor
      • Overview of Kanzi Studio plugin API
      • Debugging Kanzi Studio plugins
      • Kanzi Studio plugin API reference
      • Kanzi Studio localization plugin API reference
      • Key input codes reference
    • Prefabs
    • Preview
      • Controlling the Preview
      • Editing your application in the Preview
      • Analyzing your application in the Preview
      • Using rulers and guides
    • Projects
      • Creating a project
      • Combining Kanzi Studio projects into a Kanzi application
      • Configuring Kanzi Studio projects
      • Documenting a project
      • Creating backups of your projects
      • Importing projects
      • Merging projects
      • Cleaning up your project
      • Finding invalid project items
      • Integrating third-party libraries into Kanzi projects
    • Property types
      • Creating property types
    • Rendering
      • Rendering best practices
        • Optimizing the rendering of layouts
        • Preventing overdraw with the Sorting Filter
        • Caching 2D nodes
        • Composition and blending
        • Rendering partially transparent nodes
        • Configuring nodes for efficient rendering
        • Applying anti-aliasing
        • Setting culling
      • Using render passes
      • Using Kanzi Studio render pass presets
      • Using lights in rendering
      • Collecting nodes for rendering
      • Rendering content to composition targets
      • Setting materials for rendering
      • Rendering multiple render passes or textures
      • Creating cubemap reflections
      • Creating a post-processing effect
      • Distributing rendering across several frames
      • Applying a stencil to 3D content
      • Rendering decals
      • Using the light nodes
      • Using OpenGL ES 3.0+ in Kanzi
      • OpenGL extensions used in Kanzi
    • Resource files
    • Resources
      • Using resource dictionaries
      • Setting how Kanzi Engine handles unused resources
      • Accessing resources using bindings
      • Finding invalid project items
      • Resource management
      • Measuring the loading and deployment time of resources
    • Scene node
      • Using resource dictionaries
      • Setting how Kanzi Engine handles unused resources
      • Accessing resources using bindings
      • Finding invalid project items
      • Resource management
      • Measuring the loading and deployment time of resources
    • Screen node
    • Scroll View nodes
    • Shaders
      • Editing shaders
      • Shaders best practices
        • Reducing shader switches
        • Using binary shaders
        • Optimizing fragment shaders
      • Using geometry shaders
      • Using tessellation shaders
    • Skinning
    • Slider nodes
    • Stack Layout nodes
    • State manager
      • Using state managers
      • Using state transitions
    • Styles
    • Tags
    • Text nodes
      • Using the Text Block nodes
      • Using the Text Box nodes
      • Importing fonts
    • Textures
      • Using single textures
      • Using cubemap textures
      • Using environment cubemap textures
      • Using image-based lighting cubemap textures
      • Using render target textures
      • Creating textured materials
      • Loading images from the file system
      • Images and textures best practices
        • Adjusting the data size
        • Compressing textures
        • Filtering textures
        • Using mipmaps
        • Using a tile atlas
    • Theming
      • Exporting Themes
      • Using Themes
    • Trajectories
      • Using angle trajectories
      • Using arc trajectories
      • Using circle trajectories
      • Using ellipse trajectories
      • Using line trajectories
      • Using rectangle trajectories
      • Using spiral trajectories
      • Using spline trajectories
      • Using the Trajectory Layout nodes
      • Using the Trajectory List Box 3D node
      • Using trapezoid trajectories
    • Trajectory Layout nodes
    • Triggers
      • Using triggers
      • Using messages
      • Using Write Log action
      • Triggers reference
      • Actions and messages reference
    • Version control
    • Viewport nodes
      • Using the Viewport 2D node
      • Using the Viewport 3D node
    • Workspace
  • Examples
    • CSV plugin example
    • Layout example
    • Node2D plugin example
    • Node3D plugin example
    • Scroll view example
    • Trajectory list box example
    • Virtual list box example
    • Mixing Kanzi and Android UI
    • Jetpack Compose example
    • Android Wallpaper example
    • Android resources in Kanzi
  • References
    • Glossary
    • Application configuration
    • Binding expressions
    • Triggers
    • Actions and messages
    • Resource profiling
    • Kanzi Engine plugin custom types
    • Kanzi Studio editors
    • Default shortcut keys
    • Key input codes
    • Kanzi Studio commands
    • OpenGL extensions
    • Node and resource
      • 3D Asset Source File
      • Activity 2D
      • Activity 3D
      • Angle Trajectory
      • Animation Clip
      • Animation
      • Arc Trajectory
      • Binary Shader Format
      • Bookmark
      • Box
      • Brush
      • Button 2D
      • Button 3D
      • Camera
      • Circle Trajectory
      • Content Layout 2D
      • Content Layout 3D
      • Cubemap Texture
      • Data-Driven Exclusive Activity Host 2D
      • Data-Driven Exclusive Activity Host 3D
      • Directional Light
      • Dock Layout 2D
      • Dock Layout 3D
      • Ellipse Trajectory
      • Empty Node 2D
      • Empty Node 3D
      • Exclusive Activity Host 2D
      • Exclusive Activity Host 3D
      • Flow Layout 2D
      • Flow Layout 3D
      • Grid Layout 2D
      • Grid Layout 3D
      • Grid List Box 2D
      • Grid List Box 3D
      • Image File
      • Image
      • Instantiator
      • Level of Detail
      • Line Trajectory
      • List Box Item Container 2D
      • List Box Item Container 3D
      • Material
      • Material Type
      • Mesh
      • Nine Patch Image
      • Node Effect 2D
      • Page Host
      • Page
      • Parallel Activity Host 2D
      • Parallel Activity Host 3D
      • Plane Mesh
      • Plane
      • Point Light
      • Prefab Placeholder 2D
      • Prefab Placeholder 3D
      • Prefab View 2D
      • Prefab View 3D
      • Primitive Meshes
      • Progressive Rendering Viewport 2D
      • Project
      • Rectangle Trajectory
      • Render Pass
      • Render Target Texture
      • Scene
      • Screen
      • Scroll View 2D
      • Scroll View 3D
      • Single Texture
      • Slider 2D
      • Slider 3D
      • Sphere
      • Spiral Trajectory
      • Spline Trajectory
      • Spot Light
      • Stack Layout 2D
      • Stack Layout 3D
      • Style
      • Text Block 2D
      • Text Block 3D
      • Text Box 2D
      • Text Box 3D
      • Texture
      • Timeline Entry
      • Timeline Sequence
      • Toggle Button 2D
      • Toggle Button 3D
      • Toggle Button Group 2D
      • Toggle Button Group 3D
      • Trajectory Layout 2D
      • Trajectory Layout 3D
      • Trajectory List Box 3D
      • Trapezoid Trajectory
      • Viewport 2D
      • Viewport 3D
    • Property types
  • Release notes and migration guides
    • Kanzi 3.9.9 release notes
    • Kanzi 3.9.9 migration guide
    • Kanzi 3.9.8 release notes
    • Kanzi 3.9.8 migration guide
    • Kanzi 3.9.7 release notes
    • Kanzi 3.9.7 migration guide
    • Kanzi 3.9.6 release notes
    • Kanzi 3.9.6 migration guide
    • Kanzi 3.9.5 release notes
    • Kanzi 3.9.5 migration guide
    • Kanzi 3.9.4 release notes
    • Kanzi 3.9.4 migration guide
    • Kanzi 3.9.3 release notes
    • Kanzi 3.9.3 migration guide
    • Kanzi 3.9.2 release notes
    • Kanzi 3.9.2 migration guide
    • Kanzi 3.9.1 release notes
    • Kanzi 3.9.1 migration guide
    • Kanzi 3.9.0 release notes
    • Kanzi 3.9.0 migration guide
    • Kanzi 3.8 release notes
    • Kanzi 3.8 migration guide
    • Kanzi 3.7 release notes
    • Kanzi 3.7 migration guide
    • Kanzi 3.6.21 release notes
    • Kanzi 3.6.20 release notes
    • Kanzi 3.6.19 release notes
    • Kanzi 3.6.18 release notes
    • Kanzi 3.6.17 release notes
    • Kanzi 3.6.16 release notes
    • Kanzi 3.6.15 release notes
    • Kanzi 3.6.15 migration guide
    • Kanzi 3.6.14 release notes
    • Kanzi 3.6.13 release notes
    • Kanzi 3.6.13 migration guide
    • Kanzi 3.6.12 release notes
    • Kanzi 3.6.12 migration guide
    • Kanzi 3.6.11 release notes
    • Kanzi 3.6.10 release notes
    • Kanzi 3.6.9 release notes
    • Kanzi 3.6.8 release notes
    • Kanzi 3.6.8 migration guide
    • Kanzi 3.6.7 release notes
    • Kanzi 3.6.6 release notes
    • Kanzi 3.6.6 migration guide
    • Kanzi 3.6.5 release notes
    • Kanzi 3.6.4 release notes
    • Kanzi 3.6.4 migration guide
    • Kanzi 3.6.3 release notes
    • Kanzi 3.6.3 migration guide
    • Kanzi 3.6.2 release notes
    • Kanzi 3.6.2 migration guide
    • Kanzi 3.6.1 release notes
    • Kanzi 3.6.1 migration guide
    • Kanzi 3.6 release notes
    • Kanzi 3.6 migration guide
    • Kanzi 3.5 release notes
    • Kanzi 3.5 migration guide
    • Kanzi 3.4 release notes
    • Kanzi 3.4 migration guide
    • Kanzi 3.3 release notes
    • Kanzi 3.3 migration guide
    • Kanzi 3.2.2 release notes
    • Kanzi 3.2.1 release notes
    • Kanzi 3.2 release notes
    • Kanzi 3.2 migration guide
    • Kanzi 3.1.1 release notes
    • Kanzi 3.1 release notes
    • Kanzi 3.1 migration guide
    • Kanzi 3.0 release notes
    • Known issues
  • Technical support
  • License information
    • KANZI ONE SOFTWARE LICENSE TERMS
    • Third-party libraries used in Kanzi Engine
    • Third-party libraries used in the Kanzi SDK
    • Third-party libraries used in Kanzi Studio
    • Third-party libraries used in Kanzi documentation

API references

  • Kanzi Engine C++
  • Kanzi Engine Java
  • Kanzi Engine Lua
  • Kanzi Android framework
  • Kanzi Android application framework
  • Kanzi Studio plugin
  • Kanzi Studio localization plugin

Input¶

../_images/ui-navigation.png

Create UI navigation

../_images/pan-zoom-tap.png

Pan, zoom, tap

../_images/drag-and-drop.png

Drag and drop

Next
Tutorial: Create UI navigation for an application
Previous
Tutorial: Rotate a 3D model
Copyright © 2024, Rightware Oy