CircularGaugeLightStyle.qml Example File
gallery/qml/CircularGaugeLightStyle.qml
import QtQuick 2.2
import QtQuick.Controls.Styles 1.4
CircularGaugeStyle {
id: root
tickmarkStepSize: 10
minorTickmarkCount: 2
labelStepSize: 40
tickmarkInset: outerRadius * 0.06
minorTickmarkInset: tickmarkInset
labelInset: outerRadius * 0.23
background: Image {
source: "qrc:/images/background-light.png"
}
needle: Image {
id: needleImage
source: "qrc:/images/needle-light.png"
transformOrigin: Item.Bottom
scale: {
var distanceFromLabelToRadius = labelInset / 2;
var idealHeight = outerRadius - distanceFromLabelToRadius;
var originalImageHeight = needleImage.sourceSize.height;
idealHeight / originalImageHeight;
}
}
foreground: Item {
Image {
anchors.centerIn: parent
source: "qrc:/images/center-light.png"
scale: (outerRadius * 0.25) / sourceSize.height
}
}
tickmark: Rectangle {
implicitWidth: outerRadius * 0.01
antialiasing: true
implicitHeight: outerRadius * 0.04
color: "#999"
}
minorTickmark: Rectangle {
implicitWidth: outerRadius * 0.01
antialiasing: true
implicitHeight: outerRadius * 0.02
color: "#bbb"
}
tickmarkLabel: Text {
font.family: "Helvetica neue"
font.pixelSize: Math.max(6, outerRadius * 0.1)
text: styleData.value
color: "#333"
}
}