C

Qt Quick Ultralite image_loading Example

Demonstrates how to load images at runtime.

Overview

The example shows how to use Qul::ImageProvider and Qul::Image to create and display an image at runtime.

The image of the striped flag in the middle of the screen is created with a random coloring when the Load new! button is pressed.

Target platforms

Project structure

CMake project file

Set the FreeRTOS configTOTAL_HEAP_SIZE variable to a value that is sufficient to store the image on the heap.

if (QUL_OS STREQUAL "FreeRTOS" AND NOT QUL_PLATFORM MATCHES "^mimxrt1170")
    qul_override_freertos_heap_size(image_loading "300 * 1024")
endif()

The application must register a custom image provider. This is done in the main() function, which differs between BareMetal and FreeRTOS:

if (QUL_OS STREQUAL "FreeRTOS")
    target_sources(image_loading PRIVATE
                   main_freertos.cpp
    )
else()
    target_sources(image_loading PRIVATE
                   main_baremetal.cpp
    )
endif()

Application UI

The image_loading.qml file defines the user interface.

The dynamic image is shown using an Image item with its source property set to the image provider URI.

        Image {
            anchors.horizontalCenter: parent.horizontalCenter

            // Trigger a new image to be loaded when root.imageName changes
            source: "image://myimageprovider/" + root.imageName
            width: 120
            height: 120
        }

Image provider

The MyImageProvider image provider is implemented in myimageloader.h and myimageloader.cpp.

The MyImageProvider::requestImage() method begins by parsing the image URI, allocating a new Qul::Image, and preparing it for writing:

Qul::SharedImage MyImageProvider::requestImage(const char *imageName, size_t imageNameLength)
{
    if (imageNameLength < 8)
        return Qul::SharedImage();

    // Parse the image name to determine the colors to use for the image
    colors[0] = imageName[5] - '0';
    colors[1] = imageName[6] - '0';
    colors[2] = imageName[7] - '0';

    loadSteps = 3;
    currentLoadStep = 0;

    // Create the image and mark it as being-written-to
    Qul::Image img(120, 120, Qul::PixelFormat_RGB16);
    sharedImage = img;
    img.beginWrite();

It starts the write operation that updates the image over time. In the example, this is done through a timer. In practice, an application can either launch an asynchronous process to fetch and decode an image or perform drawing operations on the image.

When the write operation completes, an event is sent to Qul::EventQueue, notifying the image as ready.

void MyImageProvider::onEvent(MyImageLoadedEvent *const &event)
{
    // Causes the finished image to become visible.
    event->sharedImage.image()->endWrite();
    Qul::PlatformInterface::qul_delete(event);
}

The image provider is registered with the application in the main() function.

int main()
{
    Qul::initHardware();
    MyImageProvider myImageProvider;
    Qul::Application app;
    app.addImageProvider("myimageprovider", &myImageProvider);
    ...

Files:

See also Qul::Image, Qul::SharedImage, and Qul::ImageProvider.

Available under certain Qt licenses.
Find out more.