C

Qt Quick Ultralite tvii_effects Example

Demonstrates custom graphical effects on Infineon/Cypress Traveo II.

Overview

The tvii_effects example demonstrates the use of painted item API for custom graphical effects on Infineon/Cypress Traveo II.

Note: This example is only supported on the Infineon/Cypress Traveo II platform.

The example demonstrates the following effects, from left to right:

Needle trail
Gaussian blur
Desaturation
Opacity mask

Project structure

The project consists of the example code itself, as well as a subdirectory containing the effects module's sources. You can copy the module's sources into your application's directory to use the custom effects.

To include the effects module, the main QmlProject file adds the corresponding module :

        ModuleFiles {
                files: [
                        "tvii_effects_speed_module.qmlproject",
                        "effects/tvii_effects_module.qmlproject"
                ]
        }

This enables including the effects module in your QML sources by adding the following import:

import TviiEffects 1.0

Needle trail effect

Here's how to the needle trail effect is used:

NeedleTrail {
    anchors.centerIn: parent
    width: 300
    height: 300
    mask: "images/needle-mask.png"
    rotation: root.angle
}

Gaussian blur effect

Here's how the gaussian blur effect is used:

GaussianBlur {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/juno.png"
    blur: 2.5 * t
}

Desaturation

Here's how the desaturation effect is used:

Desaturation {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/ak.png"
    saturation: 1 - t
}

Opacity mask

Here's how the opacity mask is used:

Image {
    source: "images/cover.jpg"
}

ImageWithOpacityMask {
    source: "images/cover.jpg"
    mask: "images/opacity-mask.png"
    transform: [
        Scale {
            yScale: -1
        },
        Translate {
            y: 128
        }
    ]
}

In this example, the opacity mask is used to create a vertically flipped reflection of the image, that gradually fades out.

Image asset requirements

The following image asset-specific optimizations are disabled to apply the custom effects.

split image optimization performed by qulrcc.
monochrome to alpha optimization on needle-normal.png to retain its ARGB32 format.

Additionally, caching is disabled for some of the images to prevent running out of VRAM.

Here's how this is done in the example:

        ImageFiles {
                files: [
                        "images/needle-mask.png",
                        "images/ak.png",
                        "images/juno.png",
                        "images/cover.jpg",
                        "images/opacity-mask.png"
                ]
                MCU.Experimental.resourceSplitImageOptimization: false
                MCU.resourceCachePolicy: "NoCaching"
        }
        ImageFiles {
                files: [
                        "images/gauge-gauge-frame.png",
                ]
                MCU.resourceCachePolicy: "NoCaching"
        }

Files:

Images:

Available under certain Qt licenses.
Find out more.