CODEWITHSUNDEEP
qtqml
Lisha
Lisha

Reputation: 101

How to design a Ruler in qml

I want to design a ruler as shown in the image below:

enter image description here

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?

Upvotes: 0

Views: 1326

Answers (3)

Felinor
Felinor

Reputation: 36

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
    }
}

Upvotes: 2

Lisha
Lisha

Reputation: 101

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
                }
            }
        }

Upvotes: 1

Amfasis
Amfasis

Reputation: 4208

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)

Upvotes: 0

Related Questions