RadialBarDemo
RadialBarDemo copied to clipboard
arunpkio
Update RadialBarShape.qml for QT6 Design Studio/QtCreator (missing properties)
import QtQuick 2.15
import QtQuick.Shapes 1.15
Item {
id: control
implicitWidth: 200
implicitHeight: 200
enum DialType {
FullDial,
MinToMax,
NoDial
}
property real startAngle: 0
property real spanAngle: 360
property real minValue: 0
property real maxValue: 100
property real value: 0
property int dialWidth: 15
property color backgroundColor: "transparent"
property color foregroundColor: "#FFFFFF"
property color dialColor: "#FF505050"
property color progressColor: "#FFA51BAB"
property int penStyle: Qt.RoundCap
property int dialType: RadialBarShape.DialType.FullDial
property string textFont
property string suffixText
property color textColor
QtObject {
id: internals
property bool isFullDial: control.dialType === RadialBarShape.DialType.FullDial
property bool isNoDial: control.dialType === RadialBarShape.DialType.NoDial
property real baseRadius: Math.min(control.width / 2, control.height / 2)
property real radiusOffset: internals.isFullDial ? control.dialWidth / 2
: control.dialWidth / 2
property real actualSpanAngle: internals.isFullDial ? 360 : control.spanAngle
property color transparentColor: "transparent"
property color dialColor: internals.isNoDial ? internals.transparentColor
: control.dialColor
}
Shape {
id: shape
anchors.fill: parent
layer.enabled: true
layer.samples: 8
ShapePath {
id: pathBackground
strokeColor: internals.transparentColor
fillColor: control.backgroundColor
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - control.dialWidth
radiusY: internals.baseRadius - control.dialWidth
centerX: control.width / 2
centerY: control.height / 2
startAngle: 0
sweepAngle: 360
}
}
ShapePath {
id: pathDial
strokeColor: control.dialColor
fillColor: internals.transparentColor
strokeWidth: control.dialWidth
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - internals.radiusOffset
radiusY: internals.baseRadius - internals.radiusOffset
centerX: control.width / 2
centerY: control.height / 2
startAngle: control.startAngle - 90
sweepAngle: internals.actualSpanAngle
}
}
ShapePath {
id: pathProgress
strokeColor: control.progressColor
fillColor: internals.transparentColor
strokeWidth: control.dialWidth
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - internals.radiusOffset
radiusY: internals.baseRadius - internals.radiusOffset
centerX: control.width / 2
centerY: control.height / 2
startAngle: control.startAngle - 90
sweepAngle: (internals.actualSpanAngle / control.maxValue * control.value)
}
}
}
}
Added in a few missing properties that cause errors in the latest QT Designer/Design Studio. I could not do a pull request because I am not a collaborator.
RadialBar {
penStyle: Qt.FlatCap
dialType: RadialBar.MinToMax
progressColor: "#344b5d"
foregroundColor: "#3e424b"
dialWidth: 15
startAngle: 0
spanAngle: 270
minValue: 0
maxValue: 100
value: Data.unitTemperature.toFixed(2)
textColor: "#ffffff"
textFont.pixelSize: 48
textFont.family: "Font Awesome"
}
Made more progress on this:
import QtQuick 2.15
import QtQuick.Shapes 1.15
Item {
id: control
width: 200
height: 200
property real startAngle: 0
property real spanAngle: 270
property real minValue: 0
property real maxValue: 100
property real value: Data.unitTemperature.toFixed(2)
property int dialWidth: 15
property int textPixelSize: 36 // Font size for the text
property color backgroundColor: "transparent"
property color foregroundColor: "#3e424b"
property color dialColor: "#FF505050"
property color progressColor: "#344b5d"
property int penStyle: Qt.FlatCap
property int dialType: RadialBar.MinToMax
property string textFont: "Sans Serif" // Default font
property color textColor: "#ffffff"
QtObject {
id: internals
property bool isFullDial: control.dialType === RadialBar.MinToMax
property bool isNoDial: control.dialType === RadialBar.NoDial
property real baseRadius: Math.min(control.width / 2, control.height / 2)
property real radiusOffset: internals.isFullDial ? control.dialWidth / 2 : control.dialWidth / 2
property real actualSpanAngle: internals.isFullDial ? 360 : control.spanAngle
property color transparentColor: "transparent"
property color dialColor: internals.isNoDial ? internals.transparentColor : control.dialColor
}
Shape {
id: shape
anchors.fill: parent
layer.enabled: true
layer.samples: 8
ShapePath {
id: pathBackground
strokeColor: internals.transparentColor
fillColor: control.backgroundColor
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - control.dialWidth
radiusY: internals.baseRadius - control.dialWidth
centerX: control.width / 2
centerY: control.height / 2
startAngle: 0
sweepAngle: 360
}
}
ShapePath {
id: pathDial
strokeColor: control.dialColor
fillColor: internals.transparentColor
strokeWidth: control.dialWidth
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - internals.radiusOffset
radiusY: internals.baseRadius - internals.radiusOffset
centerX: control.width / 2
centerY: control.height / 2
startAngle: control.startAngle - 90
sweepAngle: internals.actualSpanAngle
}
}
ShapePath {
id: pathProgress
strokeColor: control.progressColor
fillColor: internals.transparentColor
strokeWidth: control.dialWidth
capStyle: control.penStyle
PathAngleArc {
radiusX: internals.baseRadius - internals.radiusOffset
radiusY: internals.baseRadius - internals.radiusOffset
centerX: control.width / 2
centerY: control.height / 2
startAngle: control.startAngle - 90
sweepAngle: (internals.actualSpanAngle / control.maxValue * control.value)
}
}
}
Text {
id: valueText
text: control.value
font.family: control.textFont
font.pixelSize: control.textPixelSize
color: control.textColor
anchors.centerIn: parent
}
// Ensure the text is shown above the Shape elements
Component.onCompleted: {
valueText.stackBefore = shape
}
// Update text when value changes
onValueChanged: {
valueText.text = control.value
}
}
Had a bunch of issues with font and text sizes. This now works in QT Creator, but does not work in QT Design Studio:
textfont does not have members.