How to design a Ruler in qml - qt

Question

I want to design a ruler as shown in the image below:
Which approach is the best possible way to design a ruler with these small and big lines(scale divisions) as shown in the image.
Also text and numbers will be added with the scale divisions.
There is one knob which i can slide from left to right and vice versa. Can this be achieved using Slider component?

Answer 1

Try using the QtQuick.Extras module it has a Gauge QML Type. For tick marks use the tickmark and minorTickmark properties from the GaugeStyle QML Type. Then add to this what you want.
import QtQuick 2.15
import QtQuick.Window 2.12
import QtQuick.Extras 1.4
Window {
visible: true
width: 640
height: 480
color: "gray"
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
Gauge {
minimumValue: 0
value: 50
maximumValue: 100
anchors.centerIn: parent
orientation: Qt.Horizontal
}
}

Answer 2

Item {
width: parent.width
height: 8
anchors.bottom: parent.bottom
property real spacing: 33.3
Repeater {
model: parent.width / (parent.spacing + 1) - 1
delegate: Rectangle {
x: index * (rowLayout.spacing + 4)
y: parent.height - height
implicitWidth: major ? 2 : 1
implicitHeight: major ? 18 : 9
color: "grey"
readonly property bool major: index % 6 == 0
}
}
}

Answer 3

You can greatly customize the Slider in QtQuick.Controls 2.x. Here is a start for you
Slider {
id: control
width: parent.width
height: 50
background: Canvas {
x: control.leftPadding + (control.horizontal ? handle.width * 0.5 : (control.availableWidth - width) / 2)
y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
implicitWidth: control.horizontal ? 200 : control.width
implicitHeight: control.horizontal ? control.height : 200
width: control.horizontal ? control.availableWidth - handle.width : implicitWidth
height: control.horizontal ? implicitHeight : control.availableHeight - handle.height
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = Qt.rgba(1, 0, 0, 0.4)
ctx.lineWidth = 1
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(width, 0)
ctx.lineTo(width, height)
ctx.lineTo(0, height)
ctx.lineTo(0, 0)
for(var x=0;x < width;x += 40) //assuming 40 is unit of measurement
{
ctx.moveTo(x, height)
if(x % 120 == 0)
ctx.lineTo(x, height * 0.3)
else
ctx.lineTo(x, height * 0.6)
}
ctx.stroke();
}
}
handle: Canvas {
id: handle
x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : 0)
y: control.topPadding + (control.horizontal ? 0 : control.visualPosition * (control.availableHeight - height))
implicitWidth: control.height
implicitHeight: 28
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = Qt.rgba(1, 0, 0, 0.4)
ctx.fillStyle = "white"
ctx.lineWidth = 1
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(width, 0)
ctx.lineTo(width, height - width * 0.5)
ctx.lineTo(width * 0.5, height)
ctx.lineTo(0, height - width * 0.5)
ctx.lineTo(0, 0)
ctx.fill()
ctx.stroke()
}
}
}
Part of the code was taken from QtQuick.Controls.Material. I only tested the horizontal slider, vertical will fail (especially the handle)