Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

CircularGauge Style



  • Hi, I'm learning how to design dashboard and when I'm trying to use code from documentation for styling background, it doesn't work, every other part of this code works, but when i try to change background it doesn't work, it looks like it.

    pic1.png

    And it should look like this, so I'm wondering what's the problem?

    styling-circulargauge-background-example.png

    import QtQuick 2.14
    import QtQuick.Window 2.14
    import QtQuick.Controls 2.14
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Extras.Private 1.0
    
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Dashboard")
    
    
        Rectangle {
            width: 300
            height: 300
            color: "#494d53"
    
            CircularGauge {
                id: gauge
                anchors.centerIn: parent
                style: CircularGaugeStyle {
                    id: style
    
                    function degreesToRadians(degrees) {
                        return degrees * (Math.PI / 180);
                    }
    
                    background: Rectangle {
                        implicitHeight: gauge.height
                        implicitWidth: gauge.width
                        color: "black"
                        anchors.centerIn: parent
                        radius: 360
    
                        Image {
                            anchors.fill: parent
                            source: "qrc:/img/background.svg"
                            asynchronous: true
                            sourceSize {
                                width: width
                            }
                        }
    
                        Canvas {
                            property int value: gauge.value
    
                            anchors.fill: parent
                            onValueChanged: requestPaint()
    
                            function degreesToRadians(degrees) {
                              return degrees * (Math.PI / 180);
                            }
    
                            onPaint: {
                                var ctx = getContext("2d");
                                ctx.reset();
                                ctx.beginPath();
                                ctx.strokeStyle = "black"
                                ctx.lineWidth = outerRadius
                                ctx.arc(outerRadius,
                                      outerRadius,
                                      outerRadius - ctx.lineWidth / 2,
                                      degreesToRadians(valueToAngle(gauge.value) - 90),
                                      degreesToRadians(valueToAngle(gauge.maximumValue + 1) - 90));
                                ctx.stroke();
                            }
                        }
                    }
    
                    tickmark: Rectangle {
                        visible: styleData.value < 80 || styleData.value % 10 == 0
                        implicitWidth: outerRadius * 0.02
                        antialiasing: true
                        implicitHeight: outerRadius * 0.06
                        color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
                    }
    
                    minorTickmark: Rectangle {
                        visible: styleData.value < 80
                        implicitWidth: outerRadius * 0.01
                        antialiasing: true
                        implicitHeight: outerRadius * 0.03
                        color: "#e5e5e5"
                    }
    
                    tickmarkLabel:  Text {
                        font.pixelSize: Math.max(6, outerRadius * 0.1)
                        text: styleData.value
                        color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5"
                        antialiasing: true
                    }
    
                    needle: Rectangle {
                        y: outerRadius * 0.15
                        implicitWidth: outerRadius * 0.03
                        implicitHeight: outerRadius * 0.9
                        antialiasing: true
                        color: "#e5e5e5"
                    }
    
                    foreground: Item {
                        Rectangle {
                            width: outerRadius * 0.2
                            height: width
                            radius: width / 2
                            color: "#e5e5e5"
                            anchors.centerIn: parent
                        }
                    }
                }
            }
        }
    }
    
    

  • Lifetime Qt Champion

    @Traust I think you need to set "anchors.fill :" so your gauge is actually using the whole space


  • Lifetime Qt Champion

    @Traust I think you need to set "anchors.fill :" so your gauge is actually using the whole space



  • Thanks, I'm surprised it was so easy


Log in to reply