Qt Busy Indicator looks differently on different devices

pohlondrej

Hi,

I just did an upgrade from Qt5.4.1 to Qt5.11.3. One of the problems I saw is that for some reason, the default BusyIndicator from QtQuickControls looks differently on different devices. This was not happening with Qt5.4.1.

On Windows, the icon spinner_large.png from path "Qt5.11.3\5.11.3\Src\qtquickcontrols\src\controls\Styles\Base\images" is used, as expected. It looks like this:

However, when I compile and run the same application on my embedded device, I get a Busy Indicator that is green:

It is very interesting, because green (of all colors) is not used anywhere in the application. I also found the exact grey spinner_large.png present on the device. There are even no overlays, filters or styles used. I just can't wrap my head around where this green "spinner" might be coming from, why the color changed with version update and why on Windows system everything looks as before, as it should.

The code looks something like this:

import QtQuick 2.0
import QtQuick.Controls 1.3
import "qrc:///"

BusyIndicator {
    id: busyIndicator
    z: 8

    anchors.top: parent.top
    anchors.topMargin: parent.height / 2 - height / 2

    anchors.horizontalCenter: parent.horizontalCenter

    width: 80
    height: 80

    visible: pres_model.loading
    onVisibleChanged: {
        setScreenStatus(!visible)
    }
}

I can provide more information, if needed.

sierdzio

@pohlondrej said in Qt Busy Indicator looks differently on different devices:

However, when I compile and run the same application on my embedded device, I get a Busy Indicator that is green:

Do any other colours look weird on that device? Perhaps it's something with display or drivers? Some embedded displays have swapped colours (for example BGR instead of RGB - so Qt thinks it's displaying red but the display shows blue etc.).

pohlondrej

Hi @sierdzio, thanks for the reply! This does not appear to be the case - all other components have the correct color. There is one another problem with graphics - "corrupt" text glyphs - but that's a topic for another thread.

EDIT: I have searched the embedded device again and I found no green PNG, GIF, BMP or TIFF image there. Can there be some sort of style/mask applied to the image, that would make it green? Or, could this be a compile-time thing (the file would be embedded in the binary) - in that case I should have a look in the SDK.

EDIT2: Just checked the SDK and it does not contain the spinner images at all. However, when I removed the spinner_*.png images from the device, the green busy indicator was still being displayed! So, where is it coming from? Is it compiled into the binary?

I guess the main question now is: when I'm building and running Qt applications and using the "default" Qt Quick Controls (and images that come with them), where is the running application getting the image from?

sierdzio

@pohlondrej said in Qt Busy Indicator looks differently on different devices:

import QtQuick.Controls 1.3

You are using a deprecated version of controls. If moving to QtQuick.Controls 2 is a viable option for you, consider doing it. The new version is much faster (especially on embedded devices) and will continue being supported even in Qt 6.

So, where is it coming from? Is it compiled into the binary?

I don't know Controls 1 sources enough to say with certainty, but I am pretty sure it is compiled into the binary through a QRC file. Either that or the deployment step copies the QML and resource files to target device.

Try (not sure if it will work at all) printing to console the indicator's source:

console.log("Source is: " + busyIndicator.indicator.source)

pohlondrej

I "solved" this issue by including a custom PNG to resources, resulting in reliable animation across all devices.

I absolutely need to use QtQuick.Controls 1 - the whole application is written in it and rewriting it using Controls 2 would take months.

console.log("Source is: " + busyIndicator.indicator.source)

This piece of code does not work. I tried similar ways of obtaining source, but none of them worked. It would be nice if that worked, though - I am still curious where this green-tinted animation comes from.