Change color to BusyIndicator

davidesalvetti

Hi,

I search on the net but I didn't find something usefull for this.
I have a simple BusyIndicator that I show in my c++ application, I just want to change the color from black (default) to blue. How can I do this?
this is my code:
BusyIndicator.qml

import QtQuick 2.6
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4

Rectangle {
        width: 50
        height: 50
        visible: true

        BusyIndicator {
           id: busyIndication
           anchors.centerIn: parent
           // 'running' defaults to 'true'
        }
}

Thanks in advance for your help!

ODБOï

@davidesalvetti hi,
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-busyindicator

davidesalvetti

Hi and thanks for the answer.
I've already tried that solution, but it gives me this error:

qrc:/rec/BusyProva.qml:18:9: Type BusyIndicator unavailable
qrc://busyindicator.qml: No such file or directory

My qml file is called BusyProva.qml so I don't know what it's trying to do with the second error.

this is the complete code:

    QQuickView *rotella = new QQuickView();
    rotella->setResizeMode(QQuickView::SizeRootObjectToView);
    QWidget *container = QWidget::createWindowContainer(rotella, this);
    container->setFocusPolicy(Qt::TabFocus);
    rotella->setSource(QUrl("qrc:/rec/BusyProva.qml"));
    container->setGeometry(this->width()/2 - 25, this->height()/2 - 25, 50, 50);
    rotella->show();

BusyProva.qml

import QtQuick 2.6
import QtQuick.Controls 2.1

Rectangle {
        BusyIndicator {
            id: control

            contentItem: Item {
                implicitWidth: 64
                implicitHeight: 64

                Item {
                    id: item
                    x: parent.width / 2 - 32
                    y: parent.height / 2 - 32
                    width: 64
                    height: 64
                    opacity: control.running ? 1 : 0

                    Behavior on opacity {
                        OpacityAnimator {
                            duration: 250
                        }
                    }

                    RotationAnimator {
                        target: item
                        running: control.visible && control.running
                        from: 0
                        to: 360
                        loops: Animation.Infinite
                        duration: 1250
                    }

                    Repeater {
                        id: repeater
                        model: 6

                        Rectangle {
                            x: item.width / 2 - width / 2
                            y: item.height / 2 - height / 2
                            implicitWidth: 10
                            implicitHeight: 10
                            radius: 5
                            color: "#21be2b"
                            transform: [
                                Translate {
                                    y: -Math.min(item.width, item.height) * 0.5 + 5
                                },
                                Rotation {
                                    angle: index / repeater.count * 360
                                    origin.x: 5
                                    origin.y: 5
                                }
                            ]
                        }
                    }
                }
            }
        }
}

Can you help me on this?

davidesalvetti

After some other tests it looks like this problem is only given when the QtQuickControls is 2.0 or more.
For QtQuickControls 1.4 it does not give any problem but I have to use a different code:

import QtQuick 2.6
import QtQuick.Controls 1.4
Rectangle {
        width: 50
        height: 50
        visible: true

        BusyIndicator {
           id: busyIndication
           anchors.centerIn: parent

           // 'running' defaults to 'true'
        }
}

Because the property contentItem is not found using QtQuick.Controls 1.4
But the porblem of this code is that I can't change the color of the busyIndicator.

oria66

This post is pretty old. However, there is another way, easier, to change the color of the BusyIndicator. If you combine a Busy Indicator with ColorOverlay, you will have the desired result.

Good luck.

haftado3

i have an easier and better solution for this :

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.12
BusyIndicator {
    id: busyIndicator
    //x: 290
    //y: 330
    implicitWidth: 75
    implicitHeight: 75
    visible: running
    running: true
    anchors.horizontalCenter: parent.horizontalCenter
    Universal.accent: Universal.Orange //here you can set color
}

oria66

@haftado3 Hi. That solution is easier, but with limited colors. What about the black, for example?

Gojir4

@oria66 Universal.Orange is just predefined color but you can use any color. But I guess it will no longer work if you change style to Material for example.

From Qt Doc: Note: Even though the accent can be any color, it is recommended to use one of the pre-defined Universal colors that have been designed to work well with the rest of the Universal style palette.

oria66

@Gojir4. Thanks for the anotation!

haftado3

@oria66 you can set any :

Universal.accent: "yellow"

haftado3

@oria66 if you want to change to black style :

Universal.theme = Universal.Dark

or if you only want black color :

Universal.accent:"black"

Diracsbracket

Hi.
With fullscreen EGLFS applications without a desktop environment the Universal themes don't seem to work.

What works to change the color of the BusyIndicator though is to change its palette.dark property to the color you want.

BusyIndicator {
    ...
   palette.dark: "blue"
   ...
}

Talya

Hi,
I know I'm opening an old question but it is not working for me:
BusyIndicator {
x: stageRec.width/2 -width + 30
y: 300
running: backend.checkupReadyState?false : true
Universal.accent: Universal.Orange
}
this is my code and my color isn't changing. anyone know why?

J.Hilk

@Talya HI and welcome,

take look at the documentation, the section about customizing the busy indicator:

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-busyindicator

Talya

Thank you very!