C

Managing Resources and Assets

This topic describes how Qt Quick Ultralite applications make use of image and font resources.

Summary

To use resources in a Qt Quick Ultralite application, you must declare them using the CMake API.

The resource compiler (qulrcc) uses the resource declarations to prepare the contents for inclusion. It may perform optimizations on the raw resource data. For example, image optimization can result in lowering color depth, replacing with alphamap, removing outline transparent areas, and swizzling.

Adding files to the resource system

Use the qul_add_resource CMake function to add resources to a Qt Quick Ultralite application.

qul_add_resource(myapp FILES ui/spinner.png background.png)

The function adds the files into to a virtual resource filesystem. Resources in the filesystem are referenced through resource URIs with the optional "qrc:" scheme.

qrc:/
  |-- background.png
  |-- ui/
       |-- spinner.png

In the above example, qrc:/ui/spinner.png is a resource URI for the resource data based on the ui/spinner.png file from the source directory. It can be displayed by using its URI as source in an Image:

Image {
    source: "qrc:/ui/spinner.png"
}

When using relative paths in resource URIs, the paths are relative to the root of the virtual resource filesystem. The scheme of the URI can be omited. The following URIs all refer to ui/spinner.png:

  • ui/spinner.png
  • /ui/spinner.png
  • qrc:ui/spinner.png
  • qrc:/ui/spinner.png
  • qrc:///ui/spinner.png

Resource properties

Optionally, use the set_source_files_properties CMake function to set resource properties.

set_source_files_properties(filename.png PROPERTIES QUL_COMPRESSION ON)

Image resources support a number of resource properties that control how the image is stored on the device, or can trigger different optimizations. See CMake Source File Properties for the full list.

In the following example, the large background.png is stored in a compresed format by setting QUL_COMPRESSION, while spinner.png is tagged with QUL_OPTIMIZE_FOR_ROTATION to optimize it for runtime rotation:

set_source_files_properties(spinner.png PROPERTIES QUL_OPTIMIZE_FOR_ROTATION ON)
set_source_files_properties(background.png PROPERTIES QUL_COMPRESSION ON)
qul_add_resource(myapp FILES spinner.png background.png)
Image {
    source: "qrc:/background.png"

    Image {
        anchors.centerIn: parent
        source: "qrc:/spinner.png"
        transform: Rotation {
            NumberAnimation on angle { from: 0; to: 360; running: true; loops: Animation.Infinite }
        }
    }
}

Fonts

Font assets are not added with qul_add_resource. Instead, copy the font .ttf file into a subdirectory and add that directory to the comma-separated list of paths in the QUL_FONTS_DIR CMake variable.

set(QUL_FONTS_DIR "${CMAKE_CURRENT_SOURCE_DIR}/fonts,${QUL_FONTS_DIR}")

Use the font by setting the font family name to a Text item's font.family property:

Text {
    font.family: "Roboto"
    text: "Hello World!"
}

Note: By default, QUL_FONTS_DIR is set to a path inside the Qt Quick Ultralite installation directory that contains default fonts.

Available under certain Qt licenses.
Find out more.