How to Draw a circular progress Bar using QML in QT6

vinaygopal

Conical gradient is not there in Qt6 and hence i want a circular progress bar just like the code. But i am unable to use Conical Gradient because import QtGraphicalEffects 1.15 is scrapped in Qt6

This is my code is there another alternative for Conical Gradient

Main .qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Custom_Temp{
        anchors.centerIn: parent
        from_value: 0
        to_value: 100
        range_1: 35
        range_2: 50
        range_3: 80
        unit: "°"
        vlaue: 60
    }

}


CustomTemp.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.15

Item {
    property int from_value
    property int to_value
    property int range_1
    property int range_2
    property int range_3
    property alias vlaue: main_progress_bar.value
    property string unit

    ProgressBar{
        anchors.centerIn: parent
        id:main_progress_bar
        from: from_value
        to: to_value
        property string actual_color: value >= range_2 ? "red": value >= range_1? "#ffe208" : "green"
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 6
            color: "transparent"
            radius: 3
        }

        contentItem:
            Rectangle{
            color: "transparent"
            implicitWidth: 100
            implicitHeight: implicitWidth
            Rectangle
            {
                id: outerRing
                z: 10
                anchors.fill: parent
                radius: Math.max(width, height) / 2
                color: "transparent"
                border.color: "gray"
                border.width: 16
            }
            Rectangle
            {
                id: innerRing
                z: 10
                anchors.fill: parent
                anchors.margins: (outerRing.border.width - border.width) / 2
                radius: outerRing.radius
                color: "transparent"
                border.color: "darkgray"
                border.width: 8

                ConicalGradient
                {
                    source: innerRing
                    anchors.fill: parent
                    gradient: Gradient
                    {
                        GradientStop { position: 0.00; color: main_progress_bar.actual_color }
                        GradientStop { position: main_progress_bar.value/100; color: main_progress_bar.actual_color }
                        GradientStop { position: (main_progress_bar.value/100) + 0.01; color: "transparent" }
                        GradientStop { position: 1.00; color: "transparent" }
                    }
                }
            }
            Label
            {
                id: progressLabel
                anchors.centerIn: parent
                color: main_progress_bar.value >= range_2? "red": main_progress_bar.value >= range_1? "#ffe208" : "green"
                text: (main_progress_bar.value.toFixed(1)) + "°"
                font.pixelSize: 20
            }
        }
    }
}

is there an alternative for conicalGradient in Qt6?

Gojir4

Hi, it seems ConicalGradient has been removed from Qt 6. There is probably a new alternative for that. Anyway you can still accessing it using the Qt5Compat module.
See details here: https://doc.qt.io/qt-6/qml-qt5compat-graphicaleffects-conicalgradient.html

Note you'll probably need to install the Qt5Compat module corresponding to your Qt version from the Maintenance Tools if that's not already the case.