Dashboard with qml

[vale88]

I created this dashboard with qml using this code:

import QtQuick 2.6
import QtQuick.Controls 2.1
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0



//Rectangle{
//    id: rectangle

//   width:400

//  height: 400




//   //color: "#000000" //setto il colore dello sfondo
//   transformOrigin: Item.Left




    CircularGauge {
        id: gauge

        style: CircularGaugeStyle {
            labelStepSize: 10
            labelInset: outerRadius / 2.2
            tickmarkInset: outerRadius / 4.2
            minorTickmarkInset: outerRadius / 4.2
            minimumValueAngle: -144
            maximumValueAngle: 144

            background: Rectangle {
                implicitHeight: gauge.height
                implicitWidth: gauge.width
                color: "black"
                anchors.centerIn: parent
                radius: 360

                Image {
                    anchors.fill: parent
                    source: "qrc:/img/background.png"
                    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();
                    }
                }
            }

            needle: Item {
                y: -outerRadius * 0.78
                height: outerRadius * 0.27
                Image {
                    id: needle
                    source: "qrc:/img/needle.svg"
                    height: parent.height
                    width: height * 0.1
                    asynchronous: true
                    antialiasing: true
                }

                Glow {
                  anchors.fill: needle
                  radius: 5
                  samples: 10
                  color: "white"
                  source: needle
              }
            }

            foreground: Item {
                Text {
                    id: speedLabel
                    anchors.centerIn: parent
                    text: gauge.value.toFixed(0)
                    font.pixelSize: outerRadius * 0.3
                    color: "white"
                    antialiasing: true
                }
            }

            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.05)
                text: styleData.value
                color: styleData.value <= gauge.value ? "white" : "#777776"
                antialiasing: true
            }

            tickmark: Image {
                source: "qrc:/img/tickmark.svg"
                width: outerRadius * 0.018
                height: outerRadius * 0.15
                antialiasing: true
                asynchronous: true
            }

            minorTickmark: Rectangle {
                implicitWidth: outerRadius * 0.01
                implicitHeight: outerRadius * 0.03

                antialiasing: true
                smooth: true
                color: styleData.value <= gauge.value ? "white" : "darkGray"
            }
        }




Connections
{
  target: yourObject
  onSliderMoved: gauge.value = (position)
}


}

and I obtain this:

but I wanted a thing with a colored circle inside like this

do you know how must I write?

[ODБOï]

@vale88
https://wiki.qt.io/QtDesignStudio full tutorial avalable here

[vale88]

@LeLev yes I saw, but there isn't code

[ODБOï]

@vale88 dude it is Qt Design Studio demo, there is no code