Contents Menu Expand
Kanzi UI 3.9.0 documentation
Logo
  • Kanzi UI 3.9 beta 2
  • 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 with Kanzi
      • 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
      • 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
      • Application flow with Page nodes
        • Step 1 - Create application structure in the Pages window
        • Step 2 - Create the application navigation
        • Step 3 - Add content to the application
        • Step 4 - Create a popup window
      • Keyframe animations
        • Step 1 - Create the animation
        • Step 2 - Fine-tune the animation
      • State managers
        • Step 1 - Create a state manager to control the application state
        • Step 2 - Use a JavaScript script to control the application state
      • Set state with JavaScript
    • Activity system
      • Getting started with the Kanzi Activity system
        • Step 1 - Create application structure
        • Step 2 - Control UI elements
      • Control activation state of Activities
    • Advanced Kanzi features
      • Gauges
        • Step 1 - Create the speed needle
        • Step 2 - Create the fuel and battery needles
      • Cluster indicators
      • Interpolate property values
        • Step 1 - Interpolate the rotation of the compass dial
        • Step 2 - React to a completed interpolation
      • 3D model rotation
      • Dynamic layout
      • 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
      • Demo mode for application
        • Step 1 - Create the demo mode
        • Step 2 - Control the demo mode
      • Combine projects
    • Kanzi 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
    • Rendering in Kanzi
      • Blur
        • Step 1 - Create materials for the blur effect
        • Step 2 - Apply the blur effect
        • Step 3 - Control the amount of blur
        • Step 4 - Toggle the blur effect
      • 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
    • Handling input in Kanzi
      • Move focus in an application
        • Step 1 - Set nodes to handle focus
        • Step 2 - Move focus between UI elements
        • Step 3 - Create a popup-type window
      • 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
    • Kanzi Engine 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
      • 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
  • 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
      • Distributing rendering across several frames
      • Applying anti-aliasing
      • Setting culling
    • Shaders
      • Reducing shader switches
      • Using binary shaders
      • Optimizing fragment shaders
    • Cleaning up your project
  • Working with …
    • 2D content
      • Applying custom rendering to 2D nodes
      • Creating a 3D perspective effect for 2D nodes
      • Caching 2D nodes
    • 3D assets
      • Preparing 3D assets in third-party tools
      • Importing 3D assets
      • Merging 3D assets
      • Using 3D models with UVs
    • Activity nodes
      • Exclusive Activity Host nodes
      • Data Driven Exclusive Activity Host nodes
      • Parallel Activity Host nodes
      • Creating transitions between Activity nodes
      • Programming Activity nodes with Code Behind
    • Aliases
    • Android
      • Requirements for Android application development with Kanzi
      • Developing with the Kanzi Android framework
        • Kanzi Android framework API reference
        • Kanzi Java API reference
      • Developing for Android with the Kanzi application framework
        • Kanzi Android application framework API reference
      • Deploying Kanzi applications to Android
      • Troubleshooting Android application development with Kanzi
    • Animations
      • Creating keyframe animations
      • Using keyframe animations
      • Creating property-driven animations
      • Interpolating property values
      • Interpolating property values using easing functions
      • Changing the interpolation mode between keyframes
      • 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
    • 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 i.MX6/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 files with layers
    • 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 files with layers
      • 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
    • kzb binaries
    • Layout control nodes
      • Layouts
      • Using the Content Layout nodes
      • Using the Dock Layout nodes
      • Using the Empty Node 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
      • Localization plugin API reference
    • Logging
    • 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
    • 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
      • 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
      • Overview of Kanzi Studio plugin interface
      • Debugging Kanzi Studio plugins
      • Kanzi Studio plugin interface API reference
      • Localization plugin API reference
      • Keyboard 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
        • Distributing rendering across several frames
        • 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
      • Setting culling
      • Distributing rendering across several frames
      • Optimizing the rendering of layouts
      • Preventing overdraw with the Sorting Filter
      • Caching 2D nodes
      • Rendering partially transparent nodes
      • Configuring nodes for efficient rendering
      • Applying a stencil to 3D content
      • Using the light nodes
      • Using OpenGL ES 3.0 in Kanzi
      • OpenGL extensions used in Kanzi
    • Resource files
      • Managing 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
    • Scripting
      • Scripting reference
    • Scroll View nodes
    • Skinning
    • Slider nodes
    • Shaders
      • Editing shaders
      • Shaders best practices
        • Reducing shader switches
        • Using binary shaders
        • Optimizing fragment shaders
    • 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 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
      • Triggers reference
      • Actions reference
    • Version control
    • Viewports
    • Workspace
  • Examples
    • Csv plugin example
    • Layout example
    • Node2D plugin example
    • Node3D plugin example
    • Scroll view example
    • Trajectory list box example
    • Virtual list box example
  • Reference
    • Kanzi Engine API reference
    • Kanzi Java API reference
    • Kanzi Android framework API reference
    • Kanzi Android application framework API reference
    • Kanzi Studio plugin interface API reference
    • Localization plugin API reference
    • Application configuration reference
    • Bindings expressions reference
    • Scripting reference
    • Actions reference
    • Triggers reference
    • Resource profiling reference
    • Reference for showing Kanzi Engine plugin custom types in Kanzi Studio
    • Kanzi Studio property editors for property types declared in Kanzi Engine plugins
    • OpenGL extensions used in Kanzi
    • Default shortcut keys
    • Keyboard input codes reference
    • Kanzi Studio command reference
    • Node and resource reference
      • 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
      • Cube-map 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
      • 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
    • Property types reference
  • Release notes and migration guides
    • Kanzi 3.9 beta 2 release notes
    • Kanzi 3.9 beta 2 migration guide
    • Kanzi 3.9 beta 1 release notes
    • Kanzi 3.9 beta 1 migration guide
    • Kanzi 3.9 alpha 6 release notes
    • Kanzi 3.9 alpha 6 migration guide
    • Kanzi 3.9 alpha 5 release notes
    • Kanzi 3.9 alpha 5 migration guide
    • Kanzi 3.9 alpha 4 release notes
    • Kanzi 3.9 alpha 4 migration guide
    • Kanzi 3.9 alpha 3 release notes
    • Kanzi 3.9 alpha 3 migration guide
    • Kanzi 3.9 alpha 2 release notes
    • Kanzi 3.9 alpha 2 migration guide
    • Kanzi 3.9 alpha 1 release notes
    • Kanzi 3.9 alpha 1 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.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 SOFTWARE LICENSE TERMS
    • Third-party libraries used in Kanzi Engine
    • Third-party libraries used in Kanzi Studio
    • Third-party libraries used in Kanzi documentation

Reference

  • Glossary

Advanced Kanzi features¶

../_images/gauges.png

Control a gauge needle with a property

../_images/indicator.png

Control an indicator using the state manager

../_images/interpolate.png

Interpolate property values

../_images/rotation.png

Rotate a 3D model

../_images/responsive.png

Make your application layout dynamic

../_images/localization.png

Localize your application

../_images/localization-rtl.png

Localize applications for right-to-left locales

../_images/theme.png

Theme your application

../_images/demo.png

Use JavaScript to create a demo mode

../_images/multi-project.png

Combine projects into a single application

Next
Tutorial: Create gauges
Previous
Tutorial: Control activation state of Activities
Copyright © 2021, Rightware Oy